add translation system

package.json

@@ -1,38 +1,40 @@
 {
-	"name": "okey-masasi-sveltekit",
-	"version": "0.0.1",
-	"private": true,
-	"scripts": {
-		"dev": "vite dev",
-		"build": "vite build",
-		"preview": "vite preview",
-		"check": "svelte-kit sync && svelte-check --tsconfig ./tsconfig.json",
-		"check:watch": "svelte-kit sync && svelte-check --tsconfig ./tsconfig.json --watch",
-		"lint": "prettier --plugin-search-dir . --check . && eslint .",
-		"format": "prettier --plugin-search-dir . --write ."
-	},
-	"devDependencies": {
-		"@sveltejs/adapter-auto": "^2.0.0",
-		"@sveltejs/adapter-static": "^2.0.3",
-		"@sveltejs/kit": "^1.20.4",
-		"@types/uuid": "^9.0.2",
-		"@typescript-eslint/eslint-plugin": "^5.45.0",
-		"@typescript-eslint/parser": "^5.45.0",
-		"eslint": "^8.28.0",
-		"eslint-config-prettier": "^8.5.0",
-		"eslint-plugin-svelte": "^2.30.0",
-		"prettier": "^2.8.0",
-		"prettier-plugin-svelte": "^2.10.1",
-		"svelte": "^4.0.5",
-		"svelte-check": "^3.4.3",
-		"tslib": "^2.4.1",
-		"typescript": "^5.0.0",
-		"vite": "^4.4.2"
-	},
-	"type": "module",
-	"dependencies": {
-		"@fortawesome/fontawesome-free": "^6.4.2",
-		"bulma": "^0.9.4",
-		"uuid": "^9.0.0"
-	}
+  "name": "okey-masasi-sveltekit",
+  "version": "0.0.1",
+  "private": true,
+  "scripts": {
+    "dev": "vite dev",
+    "build": "vite build",
+    "preview": "vite preview",
+    "check": "svelte-kit sync && svelte-check --tsconfig ./tsconfig.json",
+    "check:watch": "svelte-kit sync && svelte-check --tsconfig ./tsconfig.json --watch",
+    "lint": "prettier --plugin-search-dir . --check . && eslint .",
+    "format": "prettier --plugin-search-dir . --write .",
+    "extract-messages": "svelte-i18n extract \"./src/**/*.svelte\" -s > ./src/lib/locales/en.json"
+  },
+  "devDependencies": {
+    "@sveltejs/adapter-auto": "^2.0.0",
+    "@sveltejs/adapter-static": "^2.0.3",
+    "@sveltejs/kit": "^1.20.4",
+    "@types/uuid": "^9.0.2",
+    "@typescript-eslint/eslint-plugin": "^5.45.0",
+    "@typescript-eslint/parser": "^5.45.0",
+    "eslint": "^8.28.0",
+    "eslint-config-prettier": "^8.5.0",
+    "eslint-plugin-svelte": "^2.30.0",
+    "prettier": "^2.8.0",
+    "prettier-plugin-svelte": "^2.10.1",
+    "svelte": "^4.0.5",
+    "svelte-check": "^3.4.3",
+    "tslib": "^2.4.1",
+    "typescript": "^5.0.0",
+    "vite": "^4.4.2"
+  },
+  "type": "module",
+  "dependencies": {
+    "@fortawesome/fontawesome-free": "^6.4.2",
+    "bulma": "^0.9.4",
+    "svelte-i18n": "^3.7.0",
+    "uuid": "^9.0.0"
+  }
 }

src/lib/app.messages.svelte

@@ -0,0 +1,22 @@
+<script context="module">
+  import { defineMessages } from 'svelte-i18n'
+
+  export const messages = defineMessages({
+    appTitle: {
+      id: 'app.appTitle',
+      default: 'Okey table',
+    },
+    newGame: {
+      id: 'app.newGame',
+      default: 'New game',
+    },
+    save: {
+      id: 'app.save',
+      default: 'Save',
+    },
+    cancel: {
+      id: 'app.cancel',
+      default: 'Cancel',
+    },
+  })
+</script>

src/lib/components/GameForm.messages.svelte

@@ -0,0 +1,22 @@
+<script context="module">
+  import { defineMessages } from 'svelte-i18n'
+
+  export const messages = defineMessages({
+    playerTitle: {
+      id: 'gameForm.playerTitle',
+      default: 'Player {number}',
+    },
+    playerNamePlaceHolder: {
+      id: 'gameForm.playerNamePlaceHolder',
+      default: "Player {number}'s name",
+    },
+    colourPointsLabel: {
+      id: 'gameForm.colourPointsLabel',
+      default: 'Colour points',
+    },
+    indicatorPointLabel: {
+      id: 'gameForm.indicatorPointLabel',
+      default: 'Indicator points',
+    },
+  })
+</script>

src/lib/components/GameForm.svelte

@@ -1,5 +1,8 @@
 <script lang="ts">
   import { colours, colourToBulmaMap, type CreateNewGameProps, type Game } from '$lib/types'
+  import { _ } from 'svelte-i18n'
+  import { messages } from './GameForm.messages.svelte'
+  import { messages as appMessages } from '$lib/app.messages.svelte'
 
   export let game: Game | undefined = undefined
   export let onCancelClick: () => void
@@ -28,13 +31,19 @@
   <div class="content">
     {#each [0, 1, 2, 3] as playerIndex}
       <div class="field">
-        <label for={`player${playerIndex}`} class="label">Player {playerIndex + 1}</label>
+        <label for={`player${playerIndex}`} class="label">
+          {$_(messages.playerTitle.id, {
+            values: { number: playerIndex + 1 },
+          })}
+        </label>
         <div class="control has-icons-left">
           <input
             id={`player${playerIndex}`}
             class="input"
             type="text"
-            placeholder={`Player ${playerIndex + 1}'s name`}
+            placeholder={$_(messages.playerNamePlaceHolder.id, {
+              values: { number: playerIndex + 1 },
+            })}
             bind:value={playerNames[playerIndex]}
             required
           />
@@ -46,7 +55,7 @@
     {/each}
   </div>
 
-  <div class="label">Colour points</div>
+  <div class="label">{$_(messages.colourPointsLabel.id)}</div>
   <div class="columns is-mobile is-multiline">
     {#each colours as colour}
       <div class="column is-half">
@@ -56,7 +65,6 @@
               id={`colour-${colour}`}
               class="input"
               type="number"
-              placeholder={`${colour + 1}'s points`}
               bind:value={colourPoints[colour]}
               min="1"
               required
@@ -71,9 +79,9 @@
   </div>
 
   <div class="field">
-    <label for={`gostergePoint`} class="label">Gosterge point</label>
+    <label for="indicatorPoint" class="label">{$_(messages.indicatorPointLabel.id)}</label>
     <div class="control has-icons-left">
-      <input id="gostergePoint" class="input" type="number" bind:value={gostergePoint} required />
+      <input id="indicatorPoint" class="input" type="number" bind:value={gostergePoint} required />
       <span class="icon is-small is-left">
         <i class="fas fa-user" />
       </span>
@@ -83,12 +91,16 @@
   <div class="level is-mobile">
     <div class="level-right">
       <div class="level-item">
-        <button class="button is-danger" type="button" on:click={onCancelClick}>Cancel</button>
+        <button class="button is-danger" type="button" on:click={onCancelClick}>
+          {$_(appMessages.cancel.id)}
+        </button>
       </div>
     </div>
     <div class="level-left">
       <div class="level-item">
-        <button class="button is-primary" type="submit">Save</button>
+        <button class="button is-primary" type="submit">
+          {$_(appMessages.save.id)}
+        </button>
       </div>
     </div>
   </div>

src/lib/i18n.ts

@@ -0,0 +1,12 @@
+import { init, getLocaleFromNavigator, register } from 'svelte-i18n'
+
+const supportedLanguages = ['en', 'tr', 'de'] as const
+
+supportedLanguages.forEach((locale) => {
+  register(locale, () => import(`./locales/${locale}.json`))
+})
+
+init({
+  fallbackLocale: 'tr',
+  initialLocale: getLocaleFromNavigator(),
+})

src/lib/locales/de.json

@@ -0,0 +1,10 @@
+{
+  "app.appTitle": "Okey-Tisch",
+  "app.newGame": "Neues Spiel",
+  "app.save": "Speichern",
+  "app.cancel": "Abbrechen",
+  "gameForm.playerTitle": "Spieler {number}",
+  "gameForm.playerNamePlaceHolder": "Der Name von Spieler {number}",
+  "gameForm.colourPointsLabel": "Farbpunkte",
+  "gameForm.indicatorPointLabel": "Indikatorpunkte"
+}

src/lib/locales/en.json

@@ -0,0 +1,10 @@
+{
+  "app.appTitle": "Okey table",
+  "app.newGame": "New game",
+  "app.save": "Save",
+  "app.cancel": "Cancel",
+  "gameForm.playerTitle": "Player {number}",
+  "gameForm.playerNamePlaceHolder": "Player {number}'s name",
+  "gameForm.colourPointsLabel": "Colour points",
+  "gameForm.indicatorPointLabel": "Indicator points"
+}

src/lib/locales/tr.json

@@ -0,0 +1,10 @@
+{
+  "app.appTitle": "Okey masası",
+  "app.newGame": "Yeni oyun",
+  "app.save": "Kaydet",
+  "app.cancel": "Vazgeç",
+  "gameForm.playerTitle": "{number}. oyuncu",
+  "gameForm.playerNamePlaceHolder": "{number}. oyuncu ismi",
+  "gameForm.colourPointsLabel": "Renk puanları",
+  "gameForm.indicatorPointLabel": "Gösterge puanı"
+}

src/routes/+layout.svelte

@@ -1,6 +1,14 @@
 <script>
   import 'bulma/css/bulma.css'
   import '@fortawesome/fontawesome-free/css/all.css'
+  import '$lib/i18n'
+
+  import { waitLocale } from 'svelte-i18n'
+
+  export async function preload() {
+    // awaits for the loading of the 'en-US' and 'en' dictionaries
+    return waitLocale()
+  }
 </script>
 
 <slot />

src/routes/+page.svelte

@@ -6,6 +6,8 @@
   import Modal from '$lib/components/Modal.svelte'
   import { games } from '$lib/stores/games'
   import type { CreateNewGameProps, Game } from '$lib/types'
+  import { _, defineMessages } from 'svelte-i18n'
+  import { messages } from '$lib/app.messages.svelte'
 
   let isNewGameModalVisible = false
   let isEditGameModalVisible = false
@@ -33,13 +35,13 @@
 </script>
 
 <main class="container">
-  <h1 class="title">Okey Masasi</h1>
+  <h1 class="title">{$_(messages.appTitle)}</h1>
 
   <button type="button" class="button is-info" on:click={() => (isNewGameModalVisible = true)}>
     <span class="icon">
       <i class="fab fa-plus" />
     </span>
-    <span>New game</span>
+    <span>{$_(messages.newGame)}</span>
   </button>
 
   <div class="block" />