Merge branch 'release/v0.4.0'

yui10 · May 17, 2024 · 7d3b520 · 7d3b520
2 parents d73ea79 + 339342c
commit 7d3b520
Show file tree

Hide file tree

Showing 21 changed files with 482 additions and 39 deletions.
diff --git a/package-lock.json b/package-lock.json
diff --git a/package.json b/package.json
@@ -1,6 +1,6 @@
 {
   "name": "icons-karuta",
-  "version": "0.3.0",
+  "version": "0.4.0",
   "private": true,
   "scripts": {
     "dev": "next dev",
@@ -16,15 +16,23 @@
     "@mui/material": "^5.15.16",
     "@next/third-parties": "^14.2.0",
     "@vercel/analytics": "^1.2.2",
+    "i18next": "^23.11.3",
+    "i18next-resources-to-backend": "^1.2.1",
+    "negotiator": "^0.6.3",
     "next": "14.1.4",
+    "next-i18next": "^15.3.0",
     "react": "^18",
     "react-dom": "^18",
-    "simple-icons": "^11.14.0"
+    "react-i18next": "^14.1.1",
+    "simple-icons": "^11.14.0",
+    "string-format": "^2.0.0"
   },
   "devDependencies": {
+    "@types/negotiator": "^0.6.3",
     "@types/node": "^20",
     "@types/react": "^18",
     "@types/react-dom": "^18",
+    "@types/string-format": "^2.0.3",
     "eslint": "^8",
     "eslint-config-next": "14.1.4",
     "typescript": "^5"

diff --git a/src/app/games/Infinite/page.tsx → src/app/[lang]/games/infinite/page.tsx b/src/app/games/Infinite/page.tsx → src/app/[lang]/games/infinite/page.tsx
@@ -6,9 +6,13 @@ import { randomInt } from "@/utils/commonUtil";
 import GameUI from "@/components/GameUI";
 import { Button, Stack, Typography } from "@mui/material";
 import { fetchSlugs, randomIcons } from "@/utils/iconUtil";
+import { useTranslation } from '@/i18n/client';
 
 let iconSlugList: IconData[];
-const Infinite = () => {
+const Infinite = ({ params }: { params: { lang: string } }) => {
+    const lang = params.lang;
+    const { t } = useTranslation(lang);
+
     const [correctIcon, setCorrectIcon] = useState<IconData>();
     const [iconList, setIconList] = useState<IconData[]>([]);
     const [totalAttention, setTotalAttention] = useState<number>(0);
@@ -34,13 +38,13 @@ const Infinite = () => {
                     Infinite Game
                 </Typography>
                 <Typography variant="h6" component="h6" >
-                    Total number of touches: {totalAttention}
+                    {t("game:total-touches")} : {totalAttention}
                 </Typography>
             </Stack>
             <GameUI correctIcon={correctIcon} iconList={iconList} onNextGame={onNextClick} />
             <br />
-            <Button variant="contained" color="primary" onClick={() => window.location.href = "/"}>
-                Top Page
+            <Button variant="contained" color="primary" onClick={() => window.location.href = `/${lang}`}>
+                {t("game:top-page")}
             </Button>
         </main>
     );

diff --git a/src/app/games/NCard/page.tsx → src/app/[lang]/games/ncard/page.tsx b/src/app/games/NCard/page.tsx → src/app/[lang]/games/ncard/page.tsx
@@ -8,16 +8,21 @@ import { fetchSlugs, randomIcons } from "@/utils/iconUtil";
 import { Box, Button, Stack, Typography } from "@mui/material";
 import Image from "next/image";
 import Link from "next/link";
+import { useTranslation } from "@/i18n/client";
+import Format from "string-format";
 
 const numList = [12, 24, 36];
 
 let iconSlugList: IconData[];
-const Random = ({ params, searchParams }: { params: { num: string }, searchParams: { [key: string]: string } }) => {
+const Random = ({ params, searchParams }: { params: { num: string, lang: string }, searchParams: { [key: string]: string } }) => {
     const [correctIcon, setCorrectIcon] = useState<IconData>();
     const [iconList, setIconList] = useState<IconData[]>([]);
     const [totalAttention, setTotalAttention] = useState<number>(0);
     const [gameEnd, setGameEnd] = useState<boolean>(false);
     const [score, setScore] = useState<number>(0);
+
+    const lang = params.lang;
+    const { t } = useTranslation(lang);
     let num: number = parseInt(params.num) || parseInt(searchParams.num);
     if (num === undefined || (!numList.includes(num))) {
         num = 12;
@@ -43,7 +48,7 @@ const Random = ({ params, searchParams }: { params: { num: string }, searchParam
         setTotalAttention(_totalAttention);
         if (_iconList.length === 0) {
             setGameEnd(true);
-            alert(`Total number of touches: ${_totalAttention}\nScore: ${_score}`);
+            alert(Format(t("game:finish-message"), _totalAttention.toString(), _score.toString()));
         }
     }
 
@@ -54,10 +59,10 @@ const Random = ({ params, searchParams }: { params: { num: string }, searchParam
                     {num} Cards Game
                 </Typography>
                 <Typography variant="h6" component="h6" >
-                    Total number of touches: {totalAttention}
+                    {t("game:total-touches")} : {totalAttention}
                 </Typography>
                 <Typography variant="h6" component="h6" >
-                    Score: {score}
+                    {t("game:score")}: {score}
                 </Typography>
             </Stack>
             <GameUI correctIcon={correctIcon} iconList={iconList} onNextGame={onNextClick} />
@@ -66,15 +71,15 @@ const Random = ({ params, searchParams }: { params: { num: string }, searchParam
                     {/** SNS share */}
                     <Stack spacing={2} direction="row">
                         <Typography variant="h6" component="h6" >
-                            Share your score :
+                            {t("game:share")}
                         </Typography>
-                        <Link href={`https://x.com/intent/post?text=icons karuta - Play ${num} Cards Game!!%0aTotal number of touches: ${totalAttention}%0aScore: ${score}%0a&url=${window.location.href}`} passHref target="_blank">
+                        <Link href={`https://x.com/intent/post?text=${Format(t("game:tweet"), num.toString(), totalAttention.toString(), score.toString())}&hashtags=icons_karuta&url=${window.location.href}`} passHref target="_blank">
                             <Image src="https://cdn.simpleicons.org/x" alt="x" width={32} height={32} />
                         </Link>
                     </Stack>
                     <Stack spacing={2} direction="row">
-                        <Button variant="contained" color="primary" onClick={() => window.location.href = `/games/NCard?num=${num}`}>Restart</Button>
-                        <Button variant="contained" color="primary" onClick={() => window.location.href = "/"}>Top Page</Button>
+                        <Button variant="contained" color="primary" onClick={() => window.location.href = `/${lang}/games/ncard?num=${num}`}>{t("game:retry")}</Button>
+                        <Button variant="contained" color="primary" onClick={() => window.location.href = `/${lang}`}>{t("game:top-page")}</Button>
                     </Stack>
                 </Box>
             }