feat/language-translation (My Custom Room and Spectator List)

src/ui/I18N/Source/Chinese/translation.json

@@ -35,7 +35,9 @@
     "ReplayTitle": "录像回放",
     "ReplayDesc": "自由查看进行过的决斗，回味那些精彩的逆转瞬间。",
     "WIPTitle": "开发中...",
-    "WIPDesc": "其他功能敬请期待。"
+    "WIPDesc": "其他功能敬请期待。",
+    "EnterSpectatorMode": "进入观战",
+    "PleaseSelectTheRoomToSpectate": "请选择观战的房间"
   },
   "BuildDeck": {
     "EnterTheDeckName": "请输入卡组名字",
@@ -100,7 +102,42 @@
     "PlsRockPaperScissors": "请猜拳",
     "WaitOpponentPlayRockPaperScissors": "等待对方猜拳",
     "PlsChooseWhoGoesFirst": "请选择先后手",
-    "WaitingForGameToStart": "等待游戏开始"
+    "WaitingForGameToStart": "等待游戏开始",
+    "Scissors": "剪刀",
+    "Rock": "石头",
+    "Paper": "布"
+  },
+  "CustomRoomContent": {
+    "CreateJoinPrivateRoom": "创建/加入私密房间",
+    "RoomPassword": "房间密码",
+    "Initial": "初始",
+    "InitialHandSize": "初始手牌数",
+    "DrawPerTurn": "每回合抽卡",
+    "CardsAllowed": "卡片允许",
+    "SimplifiedChinese": "简体中文",
+    "CustomCards": "自制卡",
+    "ExclusiveCardsProhibited": "专有卡禁止",
+    "AllCards": "所有卡片",
+    "DuelMode": "决斗模式",
+    "SingleMatchMode": "单局模式",
+    "TournamentMode": "比赛模式",
+    "DuelRules": "决斗规则",
+    "MasterRule1": "大师规则1",
+    "MasterRule2": "大师规则2",
+    "MasterRule3": "大师规则3",
+    "NewMasterRule": "新大师规则",
+    "MasterRule2020": "大师规则2020",
+    "NoDeckCheck": "不检查卡组",
+    "NoShuffleDeck": "不切洗卡组",
+    "40MinutesAutomaticOvertime": "40分自动加时",
+    "EnterYourFriendsPrivateRoomPassword": "在这输入你朋友的私密房间密码",
+    "CreatePrivateRoom": "创建私密房间",
+    "JoinPrivateRoom": "加入私密房间"
+  },
+  "WatchContent": {
+    "SearchRoomByPlayerUsername": "通过玩家用户名搜索房间",
+    "RankedMatch": "竞技匹配",
+    "Versus": "与"
   },
   "Store": {
     "CannotAddTokens": "不能添加衍生物",

src/ui/I18N/Source/English/translation.json

@@ -35,7 +35,9 @@
     "ReplayTitle": "Replay",
     "ReplayDesc": "Freely watch past duels and relive those exciting moments of reversal.",
     "WIPTitle": "Under development...",
-    "WIPDesc": "Stay tuned for other features."
+    "WIPDesc": "Stay tuned for other features.",
+    "EnterSpectatorMode": "Enter Spectator Mode",
+    "PleaseSelectTheRoomToSpectate": "Please select the room to spectate"
   },
   "BuildDeck": {
     "EnterTheDeckName": "Deck name",
@@ -100,7 +102,42 @@
     "PlsRockPaperScissors": "Please play Rock, Paper, Scissors",
     "WaitOpponentPlayRockPaperScissors": "Wait for the opponent to play Rock, Paper, Scissors",
     "PlsChooseWhoGoesFirst": "Please choose who goes first",
-    "WaitingForGameToStart": "Waiting for the game to start"
+    "WaitingForGameToStart": "Waiting for the game to start",
+    "Scissors": "Scissors",
+    "Rock": "Rock",
+    "Paper": "Paper"
+  },
+  "CustomRoomContent": {
+    "CreateJoinPrivateRoom": "Create/Join Private Room",
+    "RoomPassword": "Password",
+    "Initial": "Initial ",
+    "InitialHandSize": "Initial Hand Size",
+    "DrawPerTurn": "Draw per Turn",
+    "CardsAllowed": "Cards Allowed",
+    "SimplifiedChinese": "Simplified Chinese",
+    "CustomCards": "Custom Cards",
+    "ExclusiveCardsProhibited": "Exclusive Cards Prohibited",
+    "AllCards": "All Cards",
+    "DuelMode": "Duel Mode",
+    "SingleMatchMode": "Single Match Mode",
+    "TournamentMode": "Tournament Mode",
+    "DuelRules": "Duel Rules",
+    "MasterRule1": "Master Rule 1",
+    "MasterRule2": "Master Rule 2",
+    "MasterRule3": "Master Rule 3",
+    "NewMasterRule": "New Master Rule",
+    "MasterRule2020": "Master Rule 2020",
+    "NoDeckCheck": "No Deck Check",
+    "NoShuffleDeck": "No Shuffle Deck",
+    "40MinutesAutomaticOvertime": "40 Minutes Automatic Overtime",
+    "EnterYourFriendsPrivateRoomPassword": "Enter your friend's private room password here.",
+    "CreatePrivateRoom": "Create Private Room",
+    "JoinPrivateRoom": "Join Private Room"
+  },
+  "WatchContent": {
+    "SearchRoomByPlayerUsername": "Search Room by Player Username",
+    "RankedMatch": "Ranked Match",
+    "Versus": "vs"
   },
   "Store": {
     "CannotAddTokens": "Cannot add Tokens",

src/ui/I18N/index.ts

@@ -23,6 +23,8 @@ const resources = {
     CardDetails: translationChinese.CardDetails,
     WaitRoom: translationChinese.WaitRoom,
     Store: translationChinese.Store,
+    CustomRoomContent: translationChinese.CustomRoomContent,
+    WatchContent: translationChinese.WatchContent,
   },
   en: {
     Header: translationEnglish.Header,
@@ -32,7 +34,9 @@ const resources = {
     Filter: translationEnglish.Filter,
     CardDetails: translationEnglish.CardDetails,
     WaitRoom: translationEnglish.WaitRoom,
-    Store: translationChinese.Store,
+    Store: translationEnglish.Store,
+    CustomRoomContent: translationEnglish.CustomRoomContent,
+    WatchContent: translationEnglish.WatchContent
   },
   es: {
     Header: translationSpanish.Header,

src/ui/Match/CustomRoomContent/index.tsx

@@ -9,6 +9,7 @@ import { accountStore } from "@/stores";
 import { Select } from "@/ui/Shared";
 
 import styles from "./index.module.scss";
+import { useTranslation } from "react-i18next";
 
 interface CustomRoomProps {
   options: Options;
@@ -80,13 +81,13 @@ export const CustomRoomContent: React.FC = () => {
   const onChangePrivateID = (event: ChangeEvent<HTMLInputElement>) => {
     mcCustomRoomStore.friendPrivateID = Number(event.target.value);
   };
-
+  const { t: i18n } = useTranslation("CustomRoomContent");
   return (
     <div className={styles.container}>
-      <p>创建/加入私密房间</p>
+      <p>{i18n("CreateJoinPrivateRoom")}</p>
       <div className={styles.clipboard}>
         <div className={styles.title}>
-          房间密码
+          {i18n("RoomPassword")}
           <KeyOutlined />
         </div>
         <Input
@@ -98,7 +99,7 @@ export const CustomRoomContent: React.FC = () => {
         <Button icon={<CopyOutlined />} onClick={onCopy} />
       </div>
       <div className={styles["digit-option"]}>
-        <div className={styles.title}>初始LP</div>
+        <div className={styles.title}>{i18n("Initial")}LP</div>
         <Input
           className={styles.input}
           value={options.start_lp}
@@ -107,7 +108,7 @@ export const CustomRoomContent: React.FC = () => {
         />
       </div>
       <div className={styles["digit-option"]}>
-        <div className={styles.title}>初始手牌数</div>
+        <div className={styles.title}>{i18n("InitialHandSize")}</div>
         <Input
           className={styles.input}
           value={options.start_hand}
@@ -116,7 +117,7 @@ export const CustomRoomContent: React.FC = () => {
         />
       </div>
       <div className={styles["digit-option"]}>
-        <div className={styles.title}>每回合抽卡</div>
+        <div className={styles.title}>{i18n("DrawPerTurn")}</div>
         <Input
           className={styles.input}
           value={options.draw_count}
@@ -126,26 +127,26 @@ export const CustomRoomContent: React.FC = () => {
       </div>
       <div className={styles["select-option"]}>
         <Select
-          title="卡片允许"
+          title={i18n("CardsAllowed")}
           value={options.rule}
           options={[
             { value: 0, label: "OCG" },
             { value: 1, label: "TCG" },
-            { value: 2, label: "简体中文" },
-            { value: 3, label: "自制卡" },
-            { value: 4, label: "专有卡禁止" },
-            { value: 5, label: "所有卡片" },
+            { value: 2, label: i18n("SimplifiedChinese") },
+            { value: 3, label: i18n("CustomCards") },
+            { value: 4, label: i18n("ExclusiveCardsProhibited") },
+            { value: 5, label: i18n("AllCards") },
           ]}
           onChange={onChangeRule}
         />
       </div>
       <div className={styles["select-option"]}>
         <Select
-          title="决斗模式"
+          title={i18n("DuelMode")}
           value={options.mode}
           options={[
-            { value: 0, label: "单局模式" },
-            { value: 1, label: "比赛模式" },
+            { value: 0, label: i18n("SingleMatchMode") },
+            { value: 1, label: i18n("TournamentMode") },
             // {value: 2, label: "TAG"},
           ]}
           onChange={onChangeMode}
@@ -153,14 +154,14 @@ export const CustomRoomContent: React.FC = () => {
       </div>
       <div className={styles["select-option"]}>
         <Select
-          title="决斗规则"
+          title={i18n("DuelRules")}
           value={options.duel_rule}
           options={[
-            { value: 1, label: "大师规则1" },
-            { value: 2, label: "大师规则2" },
-            { value: 3, label: "大师规则3" },
-            { value: 4, label: "新大师规则" },
-            { value: 5, label: "大师规则2020" },
+            { value: 1, label: i18n("MasterRule1") },
+            { value: 2, label: i18n("MasterRule2") },
+            { value: 3, label: i18n("MasterRule3") },
+            { value: 4, label: i18n("NewMasterRule") },
+            { value: 5, label: i18n("MasterRule2020") },
           ]}
           onChange={onChangeDuelRule}
         />
@@ -170,26 +171,26 @@ export const CustomRoomContent: React.FC = () => {
         checked={options.no_check_deck}
         onChange={onChangeNoCheckDeck}
       >
-        不检查卡组
+        {i18n("NoDeckCheck")}
       </Checkbox>
       <Checkbox
         className={styles.check}
         checked={options.no_shuffle_deck}
         onChange={onChangeNoShuffleDeck}
       >
-        不切洗卡组
+        {i18n("NoShuffleDeck")}
       </Checkbox>
       <Checkbox
         className={styles.check}
         checked={options.auto_death}
         onChange={onChangeAutoDeath}
       >
-        40分自动加时
+        {i18n("40MinutesAutomaticOvertime")}
       </Checkbox>
       <Input
         value={friendPrivateID}
         onChange={onChangePrivateID}
-        placeholder="在这输入你朋友的私密房间密码"
+        placeholder={i18n("EnterYourFriendsPrivateRoomPassword")}
         type="text"
       />
     </div>
@@ -200,13 +201,14 @@ export const CustomRoomFooter: React.FC<{
   onCreateRoom: () => void;
   onJoinRoom: () => void;
 }> = ({ onCreateRoom, onJoinRoom }) => {
+  const { t: i18n } = useTranslation("CustomRoomContent");
   return (
     <div className={styles.footer}>
       <Button className={styles.btn} onClick={onCreateRoom}>
-        创建私密房间
+      {i18n("CreatePrivateRoom")}
       </Button>
       <Button className={styles.btn} onClick={onJoinRoom}>
-        加入私密房间
+      {i18n("JoinPrivateRoom")}
       </Button>
     </div>
   );

src/ui/Match/WatchContent/index.tsx

@@ -10,6 +10,7 @@ import { useConfig } from "@/config";
 
 import { ScrollableArea } from "../../Shared";
 import styles from "./index.module.scss";
+import { useTranslation } from "react-i18next";
 
 const { athleticWatchUrl } = useConfig();
 
@@ -30,7 +31,7 @@ export const WatchContent: React.FC = () => {
   // 暂时只支持竞技匹配的观战，TODO：后面需要加上娱乐匹配的支持
   const url = new URL(athleticWatchUrl);
   url.searchParams.set("filter", "started");
-
+  const { t: i18n } = useTranslation("WatchContent");
   const { readyState } = useWebSocket(url.toString(), {
     onOpen: () => console.log("watch websocket opened."),
     onClose: () => console.log("watch websocket closed."),
@@ -99,7 +100,7 @@ export const WatchContent: React.FC = () => {
       <div className={styles.search}>
         <Input
           className={styles.input}
-          placeholder="通过玩家用户名搜索房间"
+          placeholder={i18n("SearchRoomByPlayerUsername")}
           bordered={false}
           suffix={<Button type="text" icon={<SearchOutlined />} />}
           value={query}
@@ -129,10 +130,10 @@ export const WatchContent: React.FC = () => {
                     <Avatar src={room.users?.at(1)?.avatar} />
                   </div>
                   <div className={styles.title}>
-                    {`${room.users?.at(0)?.username} 与 ${room.users?.at(1)
+                    {`${room.users?.at(0)?.username}` + ` ${i18n("Versus")} ` + `${room.users?.at(1)
                       ?.username} 的决斗`}
                   </div>
-                  <div className={styles.mode}>竞技匹配</div>
+                  <div className={styles.mode}>{i18n("RankedMatch")}</div>
                 </div>
                 <Divider className={styles.divider} />
               </div>

src/ui/Match/index.tsx

@@ -156,7 +156,7 @@ export const Component: React.FC = () => {
       modal.info({
         icon: null,
         width: "40vw",
-        okText: "进入观战",
+        okText: i18n("EnterSpectatorMode"),
         onOk: async () => {
           if (watchStore.watchID) {
             setWatchLoading(true);
@@ -181,7 +181,7 @@ export const Component: React.FC = () => {
               );
             }
           } else {
-            message.error("请选择观战的房间");
+            message.error(`${i18n("PleaseSelectTheRoomToSpectate")}`);
           }
         },
         centered: true,

src/ui/WaitRoom/Popover.tsx

@@ -4,6 +4,7 @@ import { useEffect, useState } from "react";
 import { eventbus, Task } from "@/infra";
 
 import { IconFont } from "../Shared";
+import { useTranslation } from "react-i18next";
 
 export enum Mora {
   Scissors = "scissors",
@@ -35,10 +36,12 @@ export const MoraPopover: React.FC<
     setOpen(false);
   };
 
+  const { t: i18n } = useTranslation("WaitRoom");
+
   const map = {
-    [Mora.Rock]: "石头",
-    [Mora.Scissors]: "剪刀",
-    [Mora.Paper]: "布",
+    [Mora.Rock]: i18n("Rock"),
+    [Mora.Scissors]: i18n("Scissors"), 
+    [Mora.Paper]: i18n("Paper")
   };
 
   return (