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

Translate UI text to German for Home, Lobby, and Song Submission screens to enhance localization
All checks were successful
Publish Docker image / Push Docker image to Docker Hub (push) Successful in 1m46s
Details

Browse Source
This commit is contained in:
Mathias Wagner 2025-04-24 20:23:14 +02:00
parent a7929cf144
commit f9d63c6c49
3 changed files with 44 additions and 44 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

18
client/src/components/HomeScreen.jsx
View File

@ -30,7 +30,7 @@ const HomeScreen = () => {
<div className="home-screen"> <div className="home-screen">
<div className="logo"> <div className="logo">
<img src="/logo.png" alt="Song Battle Logo" className="logo-image" /> <img src="/logo.png" alt="Song Battle Logo" className="logo-image" />
<h1>Song Battle</h1> <h1>Liedkampf</h1>
</div> </div>
<div className="card"> <div className="card">
@ -39,25 +39,25 @@ const HomeScreen = () => {
className={isCreateMode ? 'active' : ''} className={isCreateMode ? 'active' : ''}
onClick={() => setIsCreateMode(true)} onClick={() => setIsCreateMode(true)}
> >
<FontAwesomeIcon icon={faPlus} /> Create Game <FontAwesomeIcon icon={faPlus} /> Erstellen
</button> </button>
<button <button
className={!isCreateMode ? 'active' : ''} className={!isCreateMode ? 'active' : ''}
onClick={() => setIsCreateMode(false)} onClick={() => setIsCreateMode(false)}
> >
<FontAwesomeIcon icon={faDoorOpen} /> Join Game <FontAwesomeIcon icon={faDoorOpen} /> Beitreten
</button> </button>
</div> </div>
<form onSubmit={handleSubmit}> <form onSubmit={handleSubmit}>
<div className="form-group"> <div className="form-group">
<label htmlFor="player-name">Your Name</label> <label htmlFor="player-name">Dein Name</label>
<input <input
type="text" type="text"
id="player-name" id="player-name"
value={playerName} value={playerName}
onChange={(e) => setPlayerName(e.target.value)} onChange={(e) => setPlayerName(e.target.value)}
placeholder="Enter your name" placeholder="Gib deinen Namen ein"
maxLength={20} maxLength={20}
required required
/> />
@ -65,13 +65,13 @@ const HomeScreen = () => {
{!isCreateMode && ( {!isCreateMode && (
<div className="form-group"> <div className="form-group">
<label htmlFor="lobby-id">Game Code</label> <label htmlFor="lobby-id">Spielcode</label>
<input <input
type="text" type="text"
id="lobby-id" id="lobby-id"
value={lobbyId} value={lobbyId}
onChange={(e) => setLobbyId(e.target.value.toUpperCase())} onChange={(e) => setLobbyId(e.target.value.toUpperCase())}
placeholder="Enter 6-letter code" placeholder="6-stelligen Code eingeben"
maxLength={6} maxLength={6}
required required
/> />
@ -79,7 +79,7 @@ const HomeScreen = () => {
)} )}
<button type="submit" className="btn primary pixelated full-width"> <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 tl"></span>
<span className="pixel-corner tr"></span> <span className="pixel-corner tr"></span>
<span className="pixel-corner bl"></span> <span className="pixel-corner bl"></span>
@ -89,7 +89,7 @@ const HomeScreen = () => {
</div> </div>
<footer className="home-footer"> <footer className="home-footer">
<p>Let your favorite songs battle it out!</p> <p>ich weiß doch auch nicht</p>
</footer> </footer>
</div> </div>
); );

36
client/src/components/LobbyScreen.jsx
View File

@ -50,24 +50,24 @@ const LobbyScreen = () => {
return ( return (
<div className="lobby-screen"> <div className="lobby-screen">
<header className="lobby-header"> <header className="lobby-header">
<h1>Game Lobby</h1> <h1>Spiellobby</h1>
<div className="lobby-code"> <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}> <button className="btn icon" onClick={handleCopyCode}>
<FontAwesomeIcon icon={faCopy} /> <FontAwesomeIcon icon={faCopy} />
{copied ? 'Copied!' : 'Copy'} {copied ? 'Kopiert!' : 'Kopieren'}
</button> </button>
</div> </div>
</header> </header>
<div className="lobby-content"> <div className="lobby-content">
<div className="players-list"> <div className="players-list">
<h2><FontAwesomeIcon icon={faUsers} /> Players ({lobby.players.length})</h2> <h2><FontAwesomeIcon icon={faUsers} /> Spieler ({lobby.players.length})</h2>
<ul> <ul>
{lobby.players.map(player => ( {lobby.players.map(player => (
<li key={player.id} className={`player ${!player.isConnected ? 'disconnected' : ''} ${player.id === lobby.hostId ? 'host' : ''}`}> <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.name} {player.id === lobby.hostId && '(Gastgeber)'} {player.id === currentPlayer.id && '(Du)'}
{!player.isConnected && <span className="status-disconnected">(Disconnected)</span>} {!player.isConnected && <span className="status-disconnected">(Getrennt)</span>}
</li> </li>
))} ))}
</ul> </ul>
@ -75,13 +75,13 @@ const LobbyScreen = () => {
<div className="lobby-info"> <div className="lobby-info">
<div className="settings-preview"> <div className="settings-preview">
<h3><FontAwesomeIcon icon={faGear} /> Game Settings</h3> <h3><FontAwesomeIcon icon={faGear} /> Spieleinstellungen</h3>
<p>Songs per player: {settings.songsPerPlayer}</p> <p>Lieder pro Spieler: {settings.songsPerPlayer}</p>
<p>Max players: {settings.maxPlayers}</p> <p>Maximale Spieler: {settings.maxPlayers}</p>
{isHost && ( {isHost && (
<button className="btn secondary" onClick={() => setShowSettings(true)}> <button className="btn secondary" onClick={() => setShowSettings(true)}>
Edit Settings Einstellungen ändern
</button> </button>
)} )}
</div> </div>
@ -93,16 +93,16 @@ const LobbyScreen = () => {
onClick={handleStartGame} onClick={handleStartGame}
disabled={lobby.players.length < lobby.settings.minPlayers} disabled={lobby.players.length < lobby.settings.minPlayers}
> >
<FontAwesomeIcon icon={faPlay} /> Start Game <FontAwesomeIcon icon={faPlay} /> Spiel starten
</button> </button>
)} )}
<button className="btn danger" onClick={leaveLobby}> <button className="btn danger" onClick={leaveLobby}>
<FontAwesomeIcon icon={faSignOutAlt} /> Leave Lobby <FontAwesomeIcon icon={faSignOutAlt} /> Lobby verlassen
</button> </button>
</div> </div>
{lobby.players.length < lobby.settings.minPlayers && isHost && ( {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>
</div> </div>
@ -110,10 +110,10 @@ const LobbyScreen = () => {
{showSettings && ( {showSettings && (
<div className="modal-overlay"> <div className="modal-overlay">
<div className="modal"> <div className="modal">
<h2>Game Settings</h2> <h2>Spieleinstellungen</h2>
<div className="form-group"> <div className="form-group">
<label htmlFor="songsPerPlayer">Songs per player</label> <label htmlFor="songsPerPlayer">Lieder pro Spieler</label>
<input <input
type="number" type="number"
id="songsPerPlayer" id="songsPerPlayer"
@ -126,7 +126,7 @@ const LobbyScreen = () => {
</div> </div>
<div className="form-group"> <div className="form-group">
<label htmlFor="maxPlayers">Maximum players</label> <label htmlFor="maxPlayers">Maximale Spieleranzahl</label>
<input <input
type="number" type="number"
id="maxPlayers" id="maxPlayers"
@ -140,10 +140,10 @@ const LobbyScreen = () => {
<div className="modal-actions"> <div className="modal-actions">
<button className="btn secondary" onClick={() => setShowSettings(false)}> <button className="btn secondary" onClick={() => setShowSettings(false)}>
Cancel Abbrechen
</button> </button>
<button className="btn primary" onClick={handleSaveSettings}> <button className="btn primary" onClick={handleSaveSettings}>
Save Settings Einstellungen speichern
</button> </button>
</div> </div>
</div> </div>

34
client/src/components/SongSubmissionScreen.jsx
View File

@ -308,11 +308,11 @@ const SongSubmissionScreen = () => {
return ( return (
<div className="song-submission-screen"> <div className="song-submission-screen">
<header className="screen-header"> <header className="screen-header">
<h1>Submit Your Songs</h1> <h1>Füge deine Lieder hinzu</h1>
<p className="status"> <p className="status">
{isReady {isReady
? 'Waiting for other players...' ? 'Warte auf andere Spieler...'
: `Submit ${lobby?.settings?.songsPerPlayer || 0} songs to battle`} : `Füge ${lobby?.settings?.songsPerPlayer || 0} Lieder für den Kampf hinzu`}
</p> </p>
</header> </header>
@ -356,7 +356,7 @@ const SongSubmissionScreen = () => {
onClick={() => setIsFormVisible(true)} onClick={() => setIsFormVisible(true)}
> >
<FontAwesomeIcon icon={faPlus} /> <FontAwesomeIcon icon={faPlus} />
<span>Add Song</span> <span>Lied hinzufügen</span>
</button> </button>
)} )}
</div> </div>
@ -364,17 +364,17 @@ const SongSubmissionScreen = () => {
{isFormVisible && ( {isFormVisible && (
<div className="song-form-overlay"> <div className="song-form-overlay">
<form className="song-form" onSubmit={handleAddSong}> <form className="song-form" onSubmit={handleAddSong}>
<h3>Add a Song</h3> <h3>Lied hinzufügen</h3>
<div className="form-group search-group"> <div className="form-group search-group">
<label>Find a song</label> <label>Lied suchen</label>
<div className="search-container"> <div className="search-container">
<input <input
type="text" type="text"
name="searchQuery" name="searchQuery"
value={searchQuery} value={searchQuery}
onChange={handleInputChange} onChange={handleInputChange}
placeholder="Search YouTube or paste a link..." placeholder="YouTube durchsuchen oder Link einfügen..."
className="search-input" className="search-input"
/> />
{isSearching && ( {isSearching && (
@ -398,14 +398,14 @@ const SongSubmissionScreen = () => {
{selectedVideo && ( {selectedVideo && (
<div className="selected-video"> <div className="selected-video">
<div className="preview-header"> <div className="preview-header">
<h4>Selected Song</h4> <h4>Ausgewähltes Lied</h4>
<a <a
href={selectedVideo.url} href={selectedVideo.url}
target="_blank" target="_blank"
rel="noopener noreferrer" rel="noopener noreferrer"
className="external-link" className="external-link"
> >
<FontAwesomeIcon icon={faExternalLinkAlt} /> View on YouTube <FontAwesomeIcon icon={faExternalLinkAlt} /> Auf YouTube ansehen
</a> </a>
</div> </div>
@ -430,7 +430,7 @@ const SongSubmissionScreen = () => {
{searchResults.length > 0 && ( {searchResults.length > 0 && (
<div className="search-results"> <div className="search-results">
<h4>Search Results</h4> <h4>Suchergebnisse</h4>
{searchResults.map(result => ( {searchResults.map(result => (
<div <div
key={result.id} key={result.id}
@ -465,14 +465,14 @@ const SongSubmissionScreen = () => {
setSearchQuery(''); setSearchQuery('');
setSearchResults([]); setSearchResults([]);
}}> }}>
Cancel Abbrechen
</button> </button>
<button <button
type="submit" type="submit"
className="btn primary" className="btn primary"
disabled={!searchQuery.trim() && !songForm.youtubeLink.trim()} disabled={!searchQuery.trim() && !songForm.youtubeLink.trim()}
> >
Add Song Lied hinzufügen
</button> </button>
</div> </div>
</form> </form>
@ -485,22 +485,22 @@ const SongSubmissionScreen = () => {
className="btn primary" className="btn primary"
onClick={handleSetReady} onClick={handleSetReady}
> >
<FontAwesomeIcon icon={faCheck} /> Ready to Battle <FontAwesomeIcon icon={faCheck} /> Kampfbereit
</button> </button>
)} )}
</div> </div>
{isReady && ( {isReady && (
<div className="waiting-message"> <div className="waiting-message">
<h3>Ready to Battle!</h3> <h3>Kampfbereit!</h3>
<p>Waiting for other players to submit their songs...</p> <p>Warte auf andere Spieler, die ihre Lieder einreichen...</p>
<div className="player-status"> <div className="player-status">
<h4>Players Ready</h4> <h4>Spieler bereit</h4>
<ul className="players-ready-list"> <ul className="players-ready-list">
{lobby && lobby.players.map(player => ( {lobby && lobby.players.map(player => (
<li key={player.id} className={player.isReady ? 'ready' : 'not-ready'}> <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 ? ( {player.isReady ? (
<FontAwesomeIcon icon={faCheck} className="ready-icon" /> <FontAwesomeIcon icon={faCheck} className="ready-icon" />
) : ( ) : (