WebsiteProjects/ToneGuessr
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Translate UI parts to german
All checks were successful
Publish Docker image / Push Docker image to Docker Hub (push) Successful in 1m32s
Details

Browse Source
This commit is contained in:
Mathias Wagner 2025-03-01 20:01:10 +01:00
parent 032ebc2368
commit 388ce3d04a
4 changed files with 11 additions and 17 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

4
client/src/components/YouTubePlayer/YouTubePlayer.jsx
View File

@ -64,8 +64,7 @@ const YouTubePlayer = ({
events: { events: {
'onReady': (event) => { 'onReady': (event) => {
console.log("YouTube player ready"); console.log("YouTube player ready");
// Start playback if needed
if (autoplay) { if (autoplay) {
event.target.seekTo(startTime || 0); event.target.seekTo(startTime || 0);
event.target.playVideo(); event.target.playVideo();
@ -76,7 +75,6 @@ const YouTubePlayer = ({
}, },
'onError': (event) => { 'onError': (event) => {
console.error("YouTube player error:", event); console.error("YouTube player error:", event);
// Remove error handling
} }
} }
}); });

10
client/src/pages/Game/Game.jsx
View File

@ -333,7 +333,7 @@ export const Game = () => {
</div> </div>
<div className="music-controls"> <div className="music-controls">
<p className="instruction">Use the player above to listen, and the tone slider to play!</p> <p className="instruction">Verändere die Frequenz des Tons, um den Song zu spielen.</p>
</div> </div>
</div> </div>
)} )}
@ -344,7 +344,7 @@ export const Game = () => {
<div className="listening-icon"> <div className="listening-icon">
<FontAwesomeIcon icon={faHeadphones} size="4x" /> <FontAwesomeIcon icon={faHeadphones} size="4x" />
</div> </div>
<p className="instruction">Listen carefully and think about which song it might be!</p> <p className="instruction">Hör dir die Frequenzen an und wähle den passenden Song aus.</p>
</div> </div>
{songOptions.length > 0 && ( {songOptions.length > 0 && (
@ -380,7 +380,7 @@ export const Game = () => {
return ( return (
<div className="guessing-phase"> <div className="guessing-phase">
<div className="phase-header"> <div className="phase-header">
<h3>Final Answer Time!</h3> <h3>Auswahlphase</h3>
<div className="timer urgent"> <div className="timer urgent">
<FontAwesomeIcon icon={faClock} /> {timeLeft}s <FontAwesomeIcon icon={faClock} /> {timeLeft}s
</div> </div>
@ -518,7 +518,7 @@ export const Game = () => {
); );
default: default:
return <div>Unknown phase</div>; return <div>Phasenfehler</div>;
} }
}; };
@ -586,7 +586,7 @@ export const Game = () => {
{songsLoading && ( {songsLoading && (
<div className="songs-loading-indicator"> <div className="songs-loading-indicator">
Loading songs... Lade Songs...
</div> </div>
)} )}
</div> </div>

6
client/src/pages/Game/components/MusicSlider/MusicSlider.jsx
View File

@ -57,7 +57,6 @@ export const MusicSlider = ({ isReadOnly, onFrequencyChange, frequency: external
useEffect(() => { useEffect(() => {
if (!isReadOnly || !externalFrequency) return; if (!isReadOnly || !externalFrequency) return;
// Initialize audio if not already done
if (!audioContext) { if (!audioContext) {
initAudio(); initAudio();
return; return;
@ -82,11 +81,8 @@ export const MusicSlider = ({ isReadOnly, onFrequencyChange, frequency: external
const slider = sliderRef.current; const slider = sliderRef.current;
const rect = slider.getBoundingClientRect(); const rect = slider.getBoundingClientRect();
const width = rect.width; const width = rect.width;
// Calculate relative X position using window coordinates
let x = clientX - rect.left; let x = clientX - rect.left;
// For positions outside the slider, calculate relative to slider bounds
if (clientX < rect.left) x = 0; if (clientX < rect.left) x = 0;
if (clientX > rect.right) x = width; if (clientX > rect.right) x = width;

8
client/src/pages/WaitingRoom/WaitingRoom.jsx
View File

@ -189,8 +189,8 @@ export const WaitingRoom = () => {
const renderPlaylistSection = () => ( const renderPlaylistSection = () => (
<div className="playlist-section"> <div className="playlist-section">
<div className="section-header"> <div className="section-header">
<h2>Choose a Playlist</h2> <h2>Playlist wählen</h2>
<p className="vote-info">Most voted playlist will be used for the game</p> <p className="vote-info">Die Playlist mit den meisten Stimmen wird gespielt</p>
</div> </div>
<div className="playlists-grid"> <div className="playlists-grid">
{Object.entries(playlists).map(([genre, playlist]) => ( {Object.entries(playlists).map(([genre, playlist]) => (
@ -204,10 +204,10 @@ export const WaitingRoom = () => {
<div className="playlist-overlay"> <div className="playlist-overlay">
<div className="vote-count"> <div className="vote-count">
<span className="count">{getVoteCount(playlist.id)}</span> <span className="count">{getVoteCount(playlist.id)}</span>
<span className="vote-label">votes</span> <span className="vote-label">Stimmen</span>
</div> </div>
{selectedPlaylist === playlist.id && ( {selectedPlaylist === playlist.id && (
<div className="your-vote">Your Vote</div> <div className="your-vote">Deine Stimme</div>
)} )}
</div> </div>
</div> </div>