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
All checks were successful
Publish Docker image / Push Docker image to Docker Hub (push) Successful in 1m46s
This commit is contained in:
parent
a7929cf144
commit
f9d63c6c49
@ -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>
|
||||
);
|
||||
|
||||
@ -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>
|
||||
|
||||
@ -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" />
|
||||
) : (
|
||||
|
||||
Loading…
x
Reference in New Issue
Block a user