add i18n for 2048

tnfshcec · Dec 23, 2023 · 89a3b65 · 89a3b65
1 parent 247b39a
commit 89a3b65
Show file tree

Hide file tree

Showing 5 changed files with 55 additions and 21 deletions.
diff --git a/src/messages/en.json b/src/messages/en.json
@@ -5,7 +5,6 @@
   "lightTheme": "Light Theme",
   "darkTheme": "Dark Theme",
   "language": "Language",
-  "game" : "2048",
   "signIn": "Sign In",
   "signOut": "Sign Out",
   "signedInAs": "Signed in as {user}",
@@ -47,5 +46,17 @@
   "post_fieldDate": "Date",
   "post_fieldImage": "Image",
   "post_fieldDescription": "Description",
-  "post_fieldPinned": "Pinned"
+  "post_fieldPinned": "Pinned",
+  "game_2048": "2048",
+  "game_2048Score": "SCORE",
+  "game_2048BestScore": "BEST",
+  "game_2048Restart": "RESTART",
+  "game_2048GameOver": "Game Over",
+  "game_2048GameOverMessage": "Score: {score}",
+  "game_2048InfoQ1": "Why is 2048 here?",
+  "game_2048InfoA1": "I have no idea.",
+  "game_2048InfoQ2": "How does 2048 work?",
+  "game_2048InfoA2": "Google it for your self.",
+  "game_2048InfoQ3": "But how do I control this game?",
+  "game_2048InfoA3": "Use arrow keys or just swipe on the screen, both touching and the mouse would work."
 }
diff --git a/src/messages/ja.json b/src/messages/ja.json
@@ -5,7 +5,6 @@
   "lightTheme": "ライトテーマ",
   "darkTheme": "ダークテーマ",
   "language": "言語",
-  "game" : "2048",
   "signIn": "ログイン",
   "signOut": "ログアウト",
   "signedInAs": "{user}, おかえり！",
@@ -47,5 +46,17 @@
   "post_fieldDate": "日付",
   "post_fieldImage": "画像",
   "post_fieldDescription": "説明",
-  "post_fieldPinned": "ピン留め"
+  "post_fieldPinned": "ピン留め",
+  "game_2048": "2048",
+  "game_2048Score": "分數",
+  "game_2048BestScore": "最高分數",
+  "game_2048Restart": "重新開始",
+  "game_2048GameOver": "遊戲結束",
+  "game_2048GameOverMessage": "分數： {score}",
+  "game_2048InfoQ1": "這裡為什麼有2048？",
+  "game_2048InfoA1": "我怎麼會知道。",
+  "game_2048InfoQ2": "2048怎麼玩？",
+  "game_2048InfoA2": "自己Google。",
+  "game_2048InfoQ3": "但是我要怎麼控制？",
+  "game_2048InfoA3": "方向鍵或直接滑動，滑鼠或觸控都可以。"
 }
diff --git a/src/messages/zh-tw.json b/src/messages/zh-tw.json
@@ -5,7 +5,6 @@
   "lightTheme": "淺色主題",
   "darkTheme": "深色主題",
   "language": "語言",
-  "game" : "2048",
   "signIn": "登入",
   "signOut": "登出",
   "signedInAs": "{user} 傻逼成功登陸",
@@ -47,5 +46,17 @@
   "post_fieldDate": "日期",
   "post_fieldImage": "圖片",
   "post_fieldDescription": "介紹",
-  "post_fieldPinned": "釘選"
+  "post_fieldPinned": "釘選",
+  "game_2048": "2048",
+  "game_2048Score": "分數",
+  "game_2048BestScore": "最高分數",
+  "game_2048Restart": "重新開始",
+  "game_2048GameOver": "遊戲結束",
+  "game_2048GameOverMessage": "分數： {score}",
+  "game_2048InfoQ1": "這裡為什麼有2048？",
+  "game_2048InfoA1": "我怎麼會知道。",
+  "game_2048InfoQ2": "2048怎麼玩？",
+  "game_2048InfoA2": "自己Google。",
+  "game_2048InfoQ3": "但是我要怎麼控制？",
+  "game_2048InfoA3": "方向鍵或直接滑動，滑鼠或觸控都可以。"
 }
diff --git a/src/routes/+layout.svelte b/src/routes/+layout.svelte
@@ -105,7 +105,7 @@
           href="{base}/2048"
         >
           <Downo class="h-4 w-4" />
-          <span>{$m.game()}</span>
+          <span>{$m.game_2048()}</span>
         </a>
 
         {#if $subOpen}

diff --git a/src/routes/2048/+page.svelte b/src/routes/2048/+page.svelte
@@ -3,12 +3,15 @@
   import { fade } from "svelte/transition";
   import CenteredPage from "$lib/components/CenteredPage.svelte";
   import PageTitle from "$lib/components/PageTitle.svelte";
+  import { useI18nStores } from "$lib/stores/i18n";
   import { Game2048, scoreStores } from "./2048";
   import Restart from "~icons/mdi/restart";
   import type { KeyboardEventHandler } from "svelte/elements";
 
   import "./2048_dark.css";
 
+  const { m } = useI18nStores();
+
   let size: 4 | 8 = 4;
 
   const game = new Game2048(size);
@@ -60,17 +63,17 @@
       <div class="space-y-4">
         <div class="flex flex-wrap gap-2">
           <div class="min-w-[8rem] rounded-sm bg-secondary p-2">
-            <span class="text-lg">SCORE</span><br />
+            <span class="text-lg">{$m.game_2048Score()}</span><br />
             <span class="text-2xl font-bold">{$score}</span>
           </div>
           <div class="min-w-[8rem] rounded-sm bg-secondary p-2">
-            <span class="text-lg">BEST</span><br />
+            <span class="text-lg">{$m.game_2048BestScore()}</span><br />
             <span class="text-2xl font-bold">{$bestScore}</span>
           </div>
         </div>
         <button class="btn-accent icon-flex" on:click={restartGame}>
           <Restart class="h-4 w-4" />
-          RESTART
+          {$m.game_2048Restart()}
         </button>
       </div>
 
@@ -90,22 +93,20 @@
             class="absolute inset-0 z-10 flex flex-col items-center justify-center bg-secondary/40 backdrop-blur-[1px]"
             transition:fade={{ duration: 200 }}
           >
-            <span class="text-2xl font-bold">GAME OVER</span><br />
-            <span>Score: {$score}</span>
+            <span class="text-2xl font-bold">{$m.game_2048GameOver()}</span><br />
+            <span>{$m.game_2048GameOverMessage($score)}</span>
           </div>
         {/if}
       </div>
 
       <!-- right text -->
-      <div>
-        <span class="font-bold">這裡為什麼有2048？</span><br />
-        <span>我怎麼會知道。</span><br /><br />
-        <span class="font-bold">2048怎麼玩？</span><br />
-        <span>自己Google。</span><br /><br />
-        <span class="font-bold">但是我要怎麼控制？</span><br />
-        <span>方向鍵或直接滑動，滑鼠或觸控都可以。</span><br /><br />
-        <span class="font-bold">這邊在供三小？</span><br />
-        <span>不知道欸，我只是想放點字讓頁面不要這麼空。</span>
+      <div class="max-w-xs">
+        <span class="font-bold">{$m.game_2048InfoQ1()}</span><br />
+        <span>{$m.game_2048InfoA1()}</span><br /><br />
+        <span class="font-bold">{$m.game_2048InfoQ2()}</span><br />
+        <span>{$m.game_2048InfoA2()}</span><br /><br />
+        <span class="font-bold">{$m.game_2048InfoQ3()}</span><br />
+        <span>{$m.game_2048InfoA3()}</span>
       </div>
     </div>
   </div>