start implementing i18n support

client/.gitignore

@@ -7,9 +7,6 @@ yarn-error.log*
 pnpm-debug.log*
 lerna-debug.log*
 
-# ignore custom content
-public/content/custom/
-
 node_modules
 dist
 dist-ssr

client/public/content/de/i18n.json

@@ -1 +1,24 @@
-{}
+{
+  "namePrompt": "Gib deinen Namen ein",
+  "codePrompt": "Gib einen Raumcode ein",
+  "createRoom": "Raum erstellen",
+  "joinRoom": "Raum beitreten",
+  "or": "oder",
+  "ready": {
+    "yes": "Bereit",
+    "no": "Nicht bereit"
+  },
+  "lobby": {
+    "leaveRoom": {
+      "label": "Raum verlassen",
+      "confirmation": "Möchtest du wirklich den Raum verlassen? Sobald das Spiel gestartet wurde, kannst du nicht wieder beitreten."
+    }
+  },
+  "ask": {
+    "prompt": "Denke dir eine Frage für die anderen Spieler aus",
+    "pickForMe": {
+      "label": "Mir fällt nichts ein",
+      "confirmation": "Möchtest du wirklich eine vorgeschriebene Frage benutzen, anstatt eine eigene zu schreiben? Das ist ein bisschen langweilig, findest du nicht?"
+    }
+  }
+}

client/src/App.svelte

@@ -5,6 +5,7 @@
   import Logo from "./lib/common/Logo.svelte";
   import { io } from "socket.io-client";
   import { generateQuestionMappings } from "./lib/util";
+  import { i18n } from "./i18n";
 
   onMount(() => {
     const code = new URLSearchParams(window.location.search).get("code");
@@ -340,23 +341,25 @@
   </header>
   <main>
     <SimpleTextPrompt
-      label="Gib deinen Namen ein"
+      label={$i18n.namePrompt}
       bind:value={hostNameValue}
       on:submit={() => join(hostNameValue)}
     />
-    <button on:click={() => join(hostNameValue)}>Raum erstellen</button>
-    <p>- oder -</p>
+    <button on:click={() => join(hostNameValue)}>{$i18n.createRoom}</button>
+    <p>- {$i18n.or} -</p>
     <SimpleTextPrompt
-      label="Gib einen Raumcode ein"
+      label={$i18n.codePrompt}
       bind:value={codeValue}
       on:submit={() => join(nameValue, codeValue)}
     />
     <SimpleTextPrompt
-      label="Gib deinen Namen ein"
+      label={$i18n.namePrompt}
       bind:value={nameValue}
       on:submit={() => join(nameValue, codeValue)}
     />
-    <button on:click={() => join(nameValue, codeValue)}>Raum beitreten</button>
+    <button on:click={() => join(nameValue, codeValue)}>
+      {$i18n.joinRoom}
+    </button>
   </main>
 {/if}
 

client/src/i18n.js

@@ -0,0 +1,37 @@
+import { readable } from "svelte/store";
+
+export const FALLBACK = {
+  namePrompt: "Enter your name",
+  codePrompt: "Enter a room code",
+  createRoom: "Create Room",
+  joinRoom: "Join Room",
+  or: "or",
+  ready: {
+    yes: "Ready",
+    no: "Not Ready",
+  },
+  lobby: {
+    leaveRoom: {
+      label: "Leave Room",
+      confirmation:
+        "Are you sure you want to leave the room? You will not be able to rejoin once the game has started.",
+    },
+  },
+  ask: {
+    prompt: "Think of a question for the other players",
+    pickForMe: {
+      label: "Pick for me",
+      confirmation:
+        "Are you sure you want to let the computer pick a question for you? That's a bit boring, don't you think?",
+    },
+  },
+};
+
+/**
+ * @type {import("svelte/store").Readable<FALLBACK>}
+ */
+export const i18n = readable(FALLBACK, function start(set) {
+  fetch(`content/${import.meta.env.VITE_LOCALE}/i18n.json`)
+    .then((response) => response.json())
+    .then((data) => set(data));
+});

client/src/lib/fibbage/AskView.svelte

@@ -2,6 +2,7 @@
   import { getRandomElement } from "shared";
   import { content } from "../../stores";
   import TextPrompt from "../prompts/TextPrompt.svelte";
+  import { i18n } from "../../i18n";
 
   /** @type {import("socket.io-client").Socket} */
   export let socket;
@@ -14,11 +15,7 @@
   let usedQuestionPool = false;
 
   function onPickForMe() {
-    if (
-      !confirm(
-        "Möchtest du wirklich eine vorgeschriebene Frage benutzen, anstatt eine eigene zu schreiben? Das ist ein bisschen langweilig, findest du nicht?"
-      )
-    ) {
+    if (!confirm($i18n.ask.pickForMe.confirmation)) {
       return;
     }
     usedQuestionPool = true;
@@ -35,13 +32,13 @@
 
 <main>
   <TextPrompt
-    label="Denke dir eine Frage für die anderen Spieler aus"
+    label={$i18n.ask.prompt}
     value={submission}
     on:submit={onSubmit}
   />
 </main>
 <footer>
-  <button disabled={usedQuestionPool} on:click={() => onPickForMe()}
-    >Mir fällt nichts ein</button
-  >
+  <button disabled={usedQuestionPool} on:click={() => onPickForMe()}>
+    {$i18n.ask.pickForMe.label}
+  </button>
 </footer>

client/src/lib/fibbage/LobbyView.svelte

@@ -6,6 +6,7 @@
   import Player from "../common/Player.svelte";
   import ReadyPrompt from "../prompts/ReadyPrompt.svelte";
   import { createEventDispatcher } from "svelte";
+  import { i18n } from "../../i18n";
   const dispatch = createEventDispatcher();
 
   /** @type {import("socket.io-client").Socket} */
@@ -15,11 +16,7 @@
   export let state;
 
   function onLeave() {
-    if (
-      !confirm(
-        "Möchtest du den Raum wirklich verlassen? Sobald das Spiel gestartet wurde, kannst du nicht wieder beitreten."
-      )
-    ) {
+    if (!confirm($i18n.lobby.leaveRoom.confirmation)) {
       return;
     }
     dispatch("leave");
@@ -51,7 +48,9 @@
       {state}
       on:submit={(e) => socket.emit("submit", e.detail)}
     />
-    <button on:click={() => onLeave()}>Raum verlassen</button>
+    <button on:click={() => onLeave()}>
+      {$i18n.lobby.leaveRoom.label}
+    </button>
   </div>
 </footer>
 

client/src/lib/prompts/ReadyPrompt.svelte

@@ -1,5 +1,6 @@
 <script>
   import { createEventDispatcher } from "svelte";
+  import { i18n } from "../../i18n";
   const dispatch = createEventDispatcher();
 
   /** @type {string} */
@@ -17,9 +18,9 @@
 >
   <button type="submit">
     {#if value === "ready"}
-      Nicht Bereit
+      {$i18n.ready.yes}
     {:else}
-      Bereit
+      {$i18n.ready.no}
     {/if}
     ({Object.values(state.submissions).filter((value) => value === "ready")
       .length}/{Object.keys(state.players).length})

client/src/stores.js

@@ -8,12 +8,3 @@ export const content = readable({ questions: [] }, function start(set) {
     .then((response) => response.json())
     .then((data) => set(data));
 });
-
-/**
- * @type {import("svelte/store").Readable<Record<string,string>>}
- */
-export const i18n = readable({}, function start(set) {
-  fetch(`content/${import.meta.env.VITE_LOCALE}/i18n.json`)
-    .then((response) => response.json())
-    .then((data) => set(data));
-});