From f9d63c6c49d757dbb6c3126bbc873b2750c10b4c Mon Sep 17 00:00:00 2001
From: Mathias Wagner <germannewsmaker@gmail.com>
Date: Thu, 24 Apr 2025 20:23:14 +0200
Subject: [PATCH] Translate UI text to German for Home, Lobby, and Song
 Submission screens to enhance localization

---
 client/src/components/HomeScreen.jsx          | 18 +++++-----
 client/src/components/LobbyScreen.jsx         | 36 +++++++++----------
 .../src/components/SongSubmissionScreen.jsx   | 34 +++++++++---------
 3 files changed, 44 insertions(+), 44 deletions(-)

diff --git a/client/src/components/HomeScreen.jsx b/client/src/components/HomeScreen.jsx
index e62e61b..42b2af3 100644
--- a/client/src/components/HomeScreen.jsx
+++ b/client/src/components/HomeScreen.jsx
@@ -30,7 +30,7 @@ const HomeScreen = () => {
     <div className="home-screen">
       <div className="logo">
         <img src="/logo.png" alt="Song Battle Logo" className="logo-image" />
-        <h1>Song Battle</h1>
+        <h1>Liedkampf</h1>
       </div>
       
       <div className="card">
@@ -39,25 +39,25 @@ const HomeScreen = () => {
             className={isCreateMode ? 'active' : ''}
             onClick={() => setIsCreateMode(true)}
           >
-            <FontAwesomeIcon icon={faPlus} /> Create Game
+            <FontAwesomeIcon icon={faPlus} /> Erstellen
           </button>
           <button 
             className={!isCreateMode ? 'active' : ''}
             onClick={() => setIsCreateMode(false)}
           >
-            <FontAwesomeIcon icon={faDoorOpen} /> Join Game
+            <FontAwesomeIcon icon={faDoorOpen} /> Beitreten
           </button>
         </div>
         
         <form onSubmit={handleSubmit}>
           <div className="form-group">
-            <label htmlFor="player-name">Your Name</label>
+            <label htmlFor="player-name">Dein Name</label>
             <input
               type="text"
               id="player-name"
               value={playerName}
               onChange={(e) => setPlayerName(e.target.value)}
-              placeholder="Enter your name"
+              placeholder="Gib deinen Namen ein"
               maxLength={20}
               required
             />
@@ -65,13 +65,13 @@ const HomeScreen = () => {
           
           {!isCreateMode && (
             <div className="form-group">
-              <label htmlFor="lobby-id">Game Code</label>
+              <label htmlFor="lobby-id">Spielcode</label>
               <input
                 type="text"
                 id="lobby-id"
                 value={lobbyId}
                 onChange={(e) => setLobbyId(e.target.value.toUpperCase())}
-                placeholder="Enter 6-letter code"
+                placeholder="6-stelligen Code eingeben"
                 maxLength={6}
                 required
               />
@@ -79,7 +79,7 @@ const HomeScreen = () => {
           )}
           
           <button type="submit" className="btn primary pixelated full-width">
-            {isCreateMode ? 'Create New Game' : 'Join Game'}
+            {isCreateMode ? 'Neues Spiel erstellen' : 'Spiel beitreten'}
             <span className="pixel-corner tl"></span>
             <span className="pixel-corner tr"></span>
             <span className="pixel-corner bl"></span>
@@ -89,7 +89,7 @@ const HomeScreen = () => {
       </div>
       
       <footer className="home-footer">
-        <p>Let your favorite songs battle it out!</p>
+        <p>ich weiß doch auch nicht</p>
       </footer>
     </div>
   );
diff --git a/client/src/components/LobbyScreen.jsx b/client/src/components/LobbyScreen.jsx
index 5e74787..bc45fbc 100644
--- a/client/src/components/LobbyScreen.jsx
+++ b/client/src/components/LobbyScreen.jsx
@@ -50,24 +50,24 @@ const LobbyScreen = () => {
   return (
     <div className="lobby-screen">
       <header className="lobby-header">
-        <h1>Game Lobby</h1>
+        <h1>Spiellobby</h1>
         <div className="lobby-code">
-          <p>Game Code: <span className="code">{lobby.id}</span></p>
+          <p>Spielcode: <span className="code">{lobby.id}</span></p>
           <button className="btn icon" onClick={handleCopyCode}>
             <FontAwesomeIcon icon={faCopy} />
-            {copied ? 'Copied!' : 'Copy'}
+            {copied ? 'Kopiert!' : 'Kopieren'}
           </button>
         </div>
       </header>
       
       <div className="lobby-content">
         <div className="players-list">
-          <h2><FontAwesomeIcon icon={faUsers} /> Players ({lobby.players.length})</h2>
+          <h2><FontAwesomeIcon icon={faUsers} /> Spieler ({lobby.players.length})</h2>
           <ul>
             {lobby.players.map(player => (
               <li key={player.id} className={`player ${!player.isConnected ? 'disconnected' : ''} ${player.id === lobby.hostId ? 'host' : ''}`}>
-                {player.name} {player.id === lobby.hostId && '(Host)'} {player.id === currentPlayer.id && '(You)'} 
-                {!player.isConnected && <span className="status-disconnected">(Disconnected)</span>}
+                {player.name} {player.id === lobby.hostId && '(Gastgeber)'} {player.id === currentPlayer.id && '(Du)'} 
+                {!player.isConnected && <span className="status-disconnected">(Getrennt)</span>}
               </li>
             ))}
           </ul>
@@ -75,13 +75,13 @@ const LobbyScreen = () => {
         
         <div className="lobby-info">
           <div className="settings-preview">
-            <h3><FontAwesomeIcon icon={faGear} /> Game Settings</h3>
-            <p>Songs per player: {settings.songsPerPlayer}</p>
-            <p>Max players: {settings.maxPlayers}</p>
+            <h3><FontAwesomeIcon icon={faGear} /> Spieleinstellungen</h3>
+            <p>Lieder pro Spieler: {settings.songsPerPlayer}</p>
+            <p>Maximale Spieler: {settings.maxPlayers}</p>
             
             {isHost && (
               <button className="btn secondary" onClick={() => setShowSettings(true)}>
-                Edit Settings
+                Einstellungen ändern
               </button>
             )}
           </div>
@@ -93,16 +93,16 @@ const LobbyScreen = () => {
                 onClick={handleStartGame}
                 disabled={lobby.players.length < lobby.settings.minPlayers}
               >
-                <FontAwesomeIcon icon={faPlay} /> Start Game
+                <FontAwesomeIcon icon={faPlay} /> Spiel starten
               </button>
             )}
             <button className="btn danger" onClick={leaveLobby}>
-              <FontAwesomeIcon icon={faSignOutAlt} /> Leave Lobby
+              <FontAwesomeIcon icon={faSignOutAlt} /> Lobby verlassen
             </button>
           </div>
           
           {lobby.players.length < lobby.settings.minPlayers && isHost && (
-            <p className="warning">Need at least {lobby.settings.minPlayers} players to start</p>
+            <p className="warning">Mindestens {lobby.settings.minPlayers} Spieler werden benötigt</p>
           )}
         </div>
       </div>
@@ -110,10 +110,10 @@ const LobbyScreen = () => {
       {showSettings && (
         <div className="modal-overlay">
           <div className="modal">
-            <h2>Game Settings</h2>
+            <h2>Spieleinstellungen</h2>
             
             <div className="form-group">
-              <label htmlFor="songsPerPlayer">Songs per player</label>
+              <label htmlFor="songsPerPlayer">Lieder pro Spieler</label>
               <input
                 type="number"
                 id="songsPerPlayer"
@@ -126,7 +126,7 @@ const LobbyScreen = () => {
             </div>
             
             <div className="form-group">
-              <label htmlFor="maxPlayers">Maximum players</label>
+              <label htmlFor="maxPlayers">Maximale Spieleranzahl</label>
               <input
                 type="number"
                 id="maxPlayers"
@@ -140,10 +140,10 @@ const LobbyScreen = () => {
             
             <div className="modal-actions">
               <button className="btn secondary" onClick={() => setShowSettings(false)}>
-                Cancel
+                Abbrechen
               </button>
               <button className="btn primary" onClick={handleSaveSettings}>
-                Save Settings
+                Einstellungen speichern
               </button>
             </div>
           </div>
diff --git a/client/src/components/SongSubmissionScreen.jsx b/client/src/components/SongSubmissionScreen.jsx
index 8118ff7..e9c36f9 100644
--- a/client/src/components/SongSubmissionScreen.jsx
+++ b/client/src/components/SongSubmissionScreen.jsx
@@ -308,11 +308,11 @@ const SongSubmissionScreen = () => {
   return (
     <div className="song-submission-screen">
       <header className="screen-header">
-        <h1>Submit Your Songs</h1>
+        <h1>Füge deine Lieder hinzu</h1>
         <p className="status">
           {isReady 
-            ? 'Waiting for other players...' 
-            : `Submit ${lobby?.settings?.songsPerPlayer || 0} songs to battle`}
+            ? 'Warte auf andere Spieler...' 
+            : `Füge ${lobby?.settings?.songsPerPlayer || 0} Lieder für den Kampf hinzu`}
         </p>
       </header>
       
@@ -356,7 +356,7 @@ const SongSubmissionScreen = () => {
             onClick={() => setIsFormVisible(true)}
           >
             <FontAwesomeIcon icon={faPlus} />
-            <span>Add Song</span>
+            <span>Lied hinzufügen</span>
           </button>
         )}
       </div>
@@ -364,17 +364,17 @@ const SongSubmissionScreen = () => {
       {isFormVisible && (
         <div className="song-form-overlay">
           <form className="song-form" onSubmit={handleAddSong}>
-            <h3>Add a Song</h3>
+            <h3>Lied hinzufügen</h3>
             
             <div className="form-group search-group">
-            <label>Find a song</label>
+            <label>Lied suchen</label>
             <div className="search-container">
               <input 
                 type="text"
                 name="searchQuery"
                 value={searchQuery}
                 onChange={handleInputChange}
-                placeholder="Search YouTube or paste a link..."
+                placeholder="YouTube durchsuchen oder Link einfügen..."
                 className="search-input"
               />
               {isSearching && (
@@ -398,14 +398,14 @@ const SongSubmissionScreen = () => {
             {selectedVideo && (
               <div className="selected-video">
                 <div className="preview-header">
-                  <h4>Selected Song</h4>
+                  <h4>Ausgewähltes Lied</h4>
                   <a 
                     href={selectedVideo.url} 
                     target="_blank" 
                     rel="noopener noreferrer"
                     className="external-link"
                   >
-                    <FontAwesomeIcon icon={faExternalLinkAlt} /> View on YouTube
+                    <FontAwesomeIcon icon={faExternalLinkAlt} /> Auf YouTube ansehen
                   </a>
                 </div>
                 
@@ -430,7 +430,7 @@ const SongSubmissionScreen = () => {
             
             {searchResults.length > 0 && (
               <div className="search-results">
-                <h4>Search Results</h4>
+                <h4>Suchergebnisse</h4>
                 {searchResults.map(result => (
                   <div 
                     key={result.id} 
@@ -465,14 +465,14 @@ const SongSubmissionScreen = () => {
               setSearchQuery('');
               setSearchResults([]);
             }}>
-              Cancel
+              Abbrechen
             </button>
             <button 
               type="submit" 
               className="btn primary"
               disabled={!searchQuery.trim() && !songForm.youtubeLink.trim()}
             >
-              Add Song
+              Lied hinzufügen
             </button>
           </div>
         </form>
@@ -485,22 +485,22 @@ const SongSubmissionScreen = () => {
             className="btn primary"
             onClick={handleSetReady}
           >
-            <FontAwesomeIcon icon={faCheck} /> Ready to Battle
+            <FontAwesomeIcon icon={faCheck} /> Kampfbereit
           </button>
         )}
       </div>
       
       {isReady && (
         <div className="waiting-message">
-          <h3>Ready to Battle!</h3>
-          <p>Waiting for other players to submit their songs...</p>
+          <h3>Kampfbereit!</h3>
+          <p>Warte auf andere Spieler, die ihre Lieder einreichen...</p>
           
           <div className="player-status">
-            <h4>Players Ready</h4>
+            <h4>Spieler bereit</h4>
             <ul className="players-ready-list">
               {lobby && lobby.players.map(player => (
                 <li key={player.id} className={player.isReady ? 'ready' : 'not-ready'}>
-                  {player.name} {player.id === currentPlayer.id && '(You)'} 
+                  {player.name} {player.id === currentPlayer.id && '(Du)'} 
                   {player.isReady ? (
                     <FontAwesomeIcon icon={faCheck} className="ready-icon" />
                   ) : (