gauvain/star-wars-wild-space
Private
Public Access
1
0
Fork 0
Code Activity

feat: Translation into French of most infos, but not the server debugging infos

Browse Source
This commit is contained in:
gauvainboiche
2026-03-30 16:54:08 +02:00
parent 213d76565c
commit 2757fa2393
3 changed files with 50 additions and 49 deletions
Download Patch File Download Diff File Expand all files Collapse all files

62
public/index.html
View File

@@ -11,64 +11,64 @@
<div class="authOverlay" id="authOverlay"> <div class="authOverlay" id="authOverlay">
<div class="authModal"> <div class="authModal">
<div class="authTabs"> <div class="authTabs">
<button type="button" class="authTab authTab--active" id="tabLogin">Login</button> <button type="button" class="authTab authTab--active" id="tabLogin">Se connecter</button>
<button type="button" class="authTab" id="tabRegister">Register</button> <button type="button" class="authTab" id="tabRegister">S'enregistrer</button>
</div> </div>
<!-- Login form --> <!-- Login form -->
<form class="authForm" id="loginForm"> <form class="authForm" id="loginForm">
<div class="authField"> <div class="authField">
<label>Username</label> <label>Nom d'utilisateur</label>
<input type="text" id="loginUsername" autocomplete="username" required /> <input type="text" id="loginUsername" autocomplete="username" required />
</div> </div>
<div class="authField"> <div class="authField">
<label>Password</label> <label>Mot de passe</label>
<input type="password" id="loginPassword" autocomplete="current-password" required /> <input type="password" id="loginPassword" autocomplete="current-password" required />
</div> </div>
<div class="authError hidden" id="loginError"></div> <div class="authError hidden" id="loginError"></div>
<button type="submit" class="authSubmit">Login</button> <button type="submit" class="authSubmit">Se connecter</button>
</form> </form>
<!-- Register form --> <!-- Register form -->
<form class="authForm hidden" id="registerForm"> <form class="authForm hidden" id="registerForm">
<div class="authField"> <div class="authField">
<label>Username</label> <label>Nom d'utilisateur</label>
<input type="text" id="regUsername" autocomplete="username" required /> <input type="text" id="regUsername" autocomplete="username" required />
</div> </div>
<div class="authField"> <div class="authField">
<label>Email</label> <label>Adresse courriel</label>
<input type="email" id="regEmail" autocomplete="email" required /> <input type="email" id="regEmail" autocomplete="email" required />
</div> </div>
<div class="authField"> <div class="authField">
<label>Password <span class="authHint">(min 6 chars)</span></label> <label>Mot de passe <span class="authHint">(6 caractères min.)</span></label>
<input type="password" id="regPassword" autocomplete="new-password" required /> <input type="password" id="regPassword" autocomplete="new-password" required />
</div> </div>
<div class="authField"> <div class="authField">
<label>Team</label> <label>Équipe</label>
<div class="authTeamChoice"> <div class="authTeamChoice">
<label class="authTeamOption"> <label class="authTeamOption">
<input type="radio" name="regTeam" value="blue" required /> <input type="radio" name="regTeam" value="blue" required />
<span class="authTeamBadge authTeamBadge--blue">Resistance</span> <span class="authTeamBadge authTeamBadge--blue">Résistance</span>
</label> </label>
<label class="authTeamOption"> <label class="authTeamOption">
<input type="radio" name="regTeam" value="red" /> <input type="radio" name="regTeam" value="red" />
<span class="authTeamBadge authTeamBadge--red">First Order</span> <span class="authTeamBadge authTeamBadge--red">Premier ordre</span>
</label> </label>
</div> </div>
</div> </div>
<div class="authError hidden" id="registerError"></div> <div class="authError hidden" id="registerError"></div>
<button type="submit" class="authSubmit">Create Account</button> <button type="submit" class="authSubmit">Créer le compte</button>
</form> </form>
</div> </div>
</div> </div>
<!-- Debug team switcher (only visible when admin unlocked) --> <!-- Debug team switcher (only visible when admin unlocked) -->
<div class="teamCorner teamCorner--hidden" id="teamCorner"> <div class="teamCorner teamCorner--hidden" id="teamCorner">
<span class="teamCornerLabel">Team</span> <span class="teamCornerLabel">Équipe</span>
<div class="teamSegmented" role="group" aria-label="Active team"> <div class="teamSegmented" role="group" aria-label="Active team">
<div class="teamSegmentedTrack" id="teamSegmentedTrack" data-active="blue"> <div class="teamSegmentedTrack" id="teamSegmentedTrack" data-active="blue">
<button type="button" class="teamSegmentedBtn" id="teamBlue" data-team="blue">Resistance</button> <button type="button" class="teamSegmentedBtn" id="teamBlue" data-team="blue">Résistance</button>
<button type="button" class="teamSegmentedBtn" id="teamRed" data-team="red">First Order</button> <button type="button" class="teamSegmentedBtn" id="teamRed" data-team="red">Premier Ordre</button>
</div> </div>
</div> </div>
</div> </div>
@@ -83,8 +83,8 @@
<button type="button" id="closeMenuBtn" class="closeMenuBtn" aria-label="Close menu">✕</button> <button type="button" id="closeMenuBtn" class="closeMenuBtn" aria-label="Close menu">✕</button>
<div class="infoSection infoSection--title"> <div class="infoSection infoSection--title">
<div class="h1">Star Wars – Wild Space</div> <div class="h1">Star Wars - Wild Space</div>
<div class="sub">100×100 — exploitable zone from playground SVG map</div> <div class="sub">Explorez les Régions Inconnues pour faire triompher votre camp !</div>
</div> </div>
<!-- Team score display --> <!-- Team score display -->
@@ -123,21 +123,21 @@
<!-- Info rows --> <!-- Info rows -->
<div class="infoTable"> <div class="infoTable">
<div class="infoRow" id="userInfoRow"> <div class="infoRow" id="userInfoRow">
<span class="infoKey">Player</span> <span class="infoKey">Joueur</span>
<span class="infoVal"> <span class="infoVal">
<span id="userDisplay">—</span> <span id="userDisplay">—</span>
<button type="button" id="logoutBtn" class="logoutBtn hidden">Logout</button> <button type="button" id="logoutBtn" class="logoutBtn hidden">Déconnexion</button>
</span> </span>
</div> </div>
<div class="infoRow" id="countdownWrap" aria-live="polite"> <div class="infoRow" id="countdownWrap" aria-live="polite">
<span class="infoKey countdownLabel">Cooldown</span> <span class="infoKey countdownLabel">Prochain clic</span>
<span class="infoVal countdownVal"> <span class="infoVal countdownVal">
<span id="countdown" class="countdown">0</span> <span id="countdown" class="countdown">0</span>
<span class="countdownUnit">s</span> <span class="countdownUnit">s</span>
</span> </span>
</div> </div>
<div class="infoRow"> <div class="infoRow">
<span class="infoKey muted">Temps avant prochain clic</span> <span class="infoKey muted">Délai entre deux clics</span>
<code class="infoVal" id="cooldownConfig">—</code> <code class="infoVal" id="cooldownConfig">—</code>
</div> </div>
<div class="infoRow"> <div class="infoRow">
@@ -153,15 +153,15 @@
<code class="infoVal" id="refreshCountdown">--:--:--</code> <code class="infoVal" id="refreshCountdown">--:--:--</code>
</div> </div>
<div class="infoRow"> <div class="infoRow">
<span class="infoKey muted">Base de données depuis</span> <span class="infoKey muted">Graine actuelle depuis</span>
<code class="infoVal" id="dbCreatedAt">—</code> <code class="infoVal" id="dbCreatedAt">—</code>
</div> </div>
</div> </div>
<!-- Planet stats (collapsible) --> <!-- Planet stats (collapsible) -->
<details class="panel panelCollapsible" id="planetStatsDetails" open> <details class="panel panelCollapsible" id="planetStatsDetails" open>
<summary class="panelTitle panelTitleSummary">🪐 Planet stats</summary> <summary class="panelTitle panelTitleSummary">🪐 Statistiques Planétaires</summary>
<pre id="details" class="details details--hidden">Stats are hidden until you click a tile.</pre> <pre id="details" class="details details--hidden">Les stats sont vides sauf à cliquer sur une tuile exploitable.</pre>
</details> </details>
<!-- Team income summary + cumulative economic score --> <!-- Team income summary + cumulative economic score -->
@@ -194,7 +194,7 @@
<!-- Resources overview (collapsible) --> <!-- Resources overview (collapsible) -->
<details class="panel panelCollapsible"> <details class="panel panelCollapsible">
<summary class="panelTitle panelTitleSummary">💰 Ressources économiques</summary> <summary class="panelTitle panelTitleSummary">💰 Ressources</summary>
<div id="resourceTableBody" class="econTableWrap"> <div id="resourceTableBody" class="econTableWrap">
<p class="econEmpty">Chargement…</p> <p class="econEmpty">Chargement…</p>
</div> </div>
@@ -202,7 +202,7 @@
<!-- Element bonus section --> <!-- Element bonus section -->
<div class="elemBonusSection"> <div class="elemBonusSection">
<div class="elemBonusSectionTitle">⚡ Bonus de recharge planétaire</div> <div class="elemBonusSectionTitle">⚡ Bonus d'exploration</div>
<div class="elemBonusRow"> <div class="elemBonusRow">
<span class="elemBonusTeam elemBonusTeam--blue"> <span class="elemBonusTeam elemBonusTeam--blue">
<span class="elemBonusLabel">Résistance</span> <span class="elemBonusLabel">Résistance</span>
@@ -217,7 +217,7 @@
</span> </span>
</div> </div>
<div class="elemBonusDetail"> <div class="elemBonusDetail">
<span class="elemBonusDetailLabel">Recharge effective (votre équipe) :</span> <span class="elemBonusDetailLabel">Recharge d'équipe :</span>
<span class="elemBonusDetailVal" id="effectiveCooldown">—</span> <span class="elemBonusDetailVal" id="effectiveCooldown">—</span>
</div> </div>
</div> </div>
@@ -228,10 +228,10 @@
<summary class="optionsSummary">⚙ Options</summary> <summary class="optionsSummary">⚙ Options</summary>
<div class="optionsPanel"> <div class="optionsPanel">
<div class="authField"> <div class="authField">
<label>Admin password</label> <label>Mot de passe admin</label>
<input type="password" id="adminPasswordInput" placeholder="Enter admin password" autocomplete="off" /> <input type="password" id="adminPasswordInput" placeholder="Entrez le mot de passe d'administration" autocomplete="off" />
</div> </div>
<button type="button" id="adminUnlockBtn" class="adminUnlockBtn">Unlock</button> <button type="button" id="adminUnlockBtn" class="adminUnlockBtn">Débloquer</button>
<div id="adminStatus" class="adminStatus hidden"></div> <div id="adminStatus" class="adminStatus hidden"></div>
</div> </div>
</details> </details>
@@ -244,7 +244,7 @@
<!-- Mobile burger button --> <!-- Mobile burger button -->
<button type="button" id="burgerBtn" class="burgerBtn" aria-label="Open menu">☰</button> <button type="button" id="burgerBtn" class="burgerBtn" aria-label="Open menu">☰</button>
<canvas id="canvas" width="1000" height="1000"></canvas> <canvas id="canvas" width="1000" height="1000"></canvas>
<div id="hint" class="hint">Click a cell in the ring. Planet stats stay hidden until you reveal a tile.</div> <div id="hint" class="hint">Cliquez sur une tuile. Les stats seront vides à moins de cliquer.</div>
</main> </main>
</div> </div>

34
public/src/game.js
View File

@@ -579,17 +579,17 @@ function applyRevealPayload(cell) {
}); });
details.classList.remove("details--hidden"); details.classList.remove("details--hidden");
if (!cell.exploitable) { if (!cell.exploitable) {
hint.textContent = `(${cell.x},${cell.y}) not exploitable.`; hint.textContent = `(${cell.x},${cell.y}) Inexploitable`;
details.textContent = `Cell (${cell.x},${cell.y})\n\nStatus: Not exploitable.`; details.textContent = `Cell (${cell.x},${cell.y})\n\nStatus : Inexploitable`;
return; return;
} }
if (!cell.hasPlanet) { if (!cell.hasPlanet) {
hint.textContent = `(${cell.x},${cell.y}) exploitable — empty.`; hint.textContent = `(${cell.x},${cell.y}) Vide`;
details.textContent = `Cell (${cell.x},${cell.y})\n\nStatus: Exploitable\nContains: Nothing`; details.textContent = `Cell (${cell.x},${cell.y})\n\nStatus : Vide`;
return; return;
} }
hint.textContent = `(${cell.x},${cell.y}) exploitable — planet revealed.`; hint.textContent = `(${cell.x},${cell.y}) Planète présente`;
details.textContent = `Cell (${cell.x},${cell.y})\n\nStatus: Exploitable\nContains: Planet\n\n${formatPlanet(cell.planet)}`; details.textContent = `Cell (${cell.x},${cell.y})\n\nStatus : Planète\n\n${formatPlanet(cell.planet)}`;
} }
function showLocalSelection(x, y) { function showLocalSelection(x, y) {
@@ -597,14 +597,14 @@ function showLocalSelection(x, y) {
details.classList.remove("details--hidden"); details.classList.remove("details--hidden");
if (!isOwnTile(k)) return; if (!isOwnTile(k)) return;
if (!isExploitable(x, y)) { if (!isExploitable(x, y)) {
hint.textContent = `(${x},${y}) not exploitable.`; hint.textContent = `(${x},${y}) Inexploitable`;
details.textContent = `Cell (${x},${y})\n\nStatus: Not exploitable.`; details.textContent = `Cell (${x},${y})\n\nStatus : Inexploitable`;
return; return;
} }
const meta = cellMeta(k); const meta = cellMeta(k);
if (!meta?.hasPlanet) { if (!meta?.hasPlanet) {
hint.textContent = `(${x},${y}) exploitable — empty.`; hint.textContent = `(${x},${y}) Vide`;
details.textContent = `Cell (${x},${y})\n\nStatus: Exploitable\nContains: Nothing`; details.textContent = `Cell (${x},${y})\n\nStatus : Vide`;
return; return;
} }
let planet = meta.planet; let planet = meta.planet;
@@ -612,8 +612,8 @@ function showLocalSelection(x, y) {
const h = hash2u32(x, y, seedU32 ^ 0xa5a5a5a5); const h = hash2u32(x, y, seedU32 ^ 0xa5a5a5a5);
planet = generatePlanet(mulberry32(h)); planet = generatePlanet(mulberry32(h));
} }
hint.textContent = `(${x},${y}) exploitable — planet.`; hint.textContent = `(${x},${y}) Planète présente`;
details.textContent = `Cell (${x},${y})\n\nStatus: Exploitable\nContains: Planet\n\n${formatPlanet(planet)}`; details.textContent = `Cell (${x},${y})\n\nStatus : Planète\n\n${formatPlanet(planet)}`;
} }
// ── Canvas click handler ────────────────────────────────────────────────────── // ── Canvas click handler ──────────────────────────────────────────────────────
@@ -628,20 +628,20 @@ async function onCanvasClick(ev) {
if (isOwnTile(key)) { showLocalSelection(cell.x, cell.y); return; } if (isOwnTile(key)) { showLocalSelection(cell.x, cell.y); return; }
if (cooldownActive()) { if (cooldownActive()) {
hint.textContent = "Cooldown active — reveal a tile your team already discovered to view stats."; hint.textContent = "Clic indisponible — attendez la fin du délai ou cliquez sur une tuile déjà découverte.";
return; return;
} }
try { try {
const res = await apiRevealCell(seedStr, cell.x, cell.y, currentTeam); const res = await apiRevealCell(seedStr, cell.x, cell.y, currentTeam);
if (res.status === 409) { if (res.status === 409) {
hint.textContent = "This tile was already discovered by the other team."; hint.textContent = "Cette tuile a déjà été découverte par votre adversaire.";
await fetchGridForSeed(seedStr); await fetchGridForSeed(seedStr);
draw(); draw();
return; return;
} }
if (res.status === 410) { if (res.status === 410) {
hint.textContent = "World period changed — syncing."; hint.textContent = "Le serveur change sa base de planètes — synchronisation...";
await refreshFromServer(); await refreshFromServer();
return; return;
} }
@@ -687,9 +687,9 @@ export async function refreshFromServer() {
clearCooldown(); clearCooldown();
resetEconScores(); resetEconScores();
loadEconScores(); loadEconScores();
details.textContent = "Stats are hidden until you click a tile."; details.textContent = "Les stats sont vides jusqu'au clic sur une tuile.";
details.classList.add("details--hidden"); details.classList.add("details--hidden");
hint.textContent = "World period changed — grid reset. Click a cell in the playfield."; hint.textContent = "Le monde a été réinitilisaté. Vous pouvez cliquer sur une tuile pour recommencer le jeu.";
} }
await fetchGridForSeed(seedStr); await fetchGridForSeed(seedStr);
await fetchAndApplyScores(); await fetchAndApplyScores();

3
public/style.css
View File

@@ -11,7 +11,8 @@ body {
font-family: system-ui, -apple-system, Segoe UI, Roboto, Ubuntu, Cantarell, "Helvetica Neue", Arial, font-family: system-ui, -apple-system, Segoe UI, Roboto, Ubuntu, Cantarell, "Helvetica Neue", Arial,
"Noto Sans", "Apple Color Emoji", "Segoe UI Emoji"; "Noto Sans", "Apple Color Emoji", "Segoe UI Emoji";
color: #e9eef6; color: #e9eef6;
background: radial-gradient(1200px 800px at 10% 10%, #16223a 0%, #0b1020 55%, #070a14 100%); /* background: radial-gradient(1200px 800px at 10% 10%, #16223a 0%, #0b1020 55%, #070a14 100%); */
background: black;
min-height: 100vh; min-height: 100vh;
} }