feat/language-translation (prettier fixes)

src/api/strings.ts

@@ -8,17 +8,19 @@ export const DESCRIPTION_LIMIT = 10000;
 export async function initStrings() {
   const language = localStorage.getItem("language") || "cn";
 
-  //It currently only supports en-US, es-ES, ja-JP, ko-KR, zh-CN 
-  if (language === "en" || language === "br" || language === "pt" || language === "fr") {
+  //It currently only supports en-US, es-ES, ja-JP, ko-KR, zh-CN
+  if (
+    language === "en" ||
+    language === "br" ||
+    language === "pt" ||
+    language === "fr"
+  ) {
     stringsUrl = stringsUrl.replace("zh-CN", "en-US");
-  }
-  else if (language === "ja") {
+  } else if (language === "ja") {
     stringsUrl = stringsUrl.replace("zh-CN", "ja-JP");
-  }
-  else if (language === "es") {
+  } else if (language === "es") {
     stringsUrl = stringsUrl.replace("zh-CN", "es-ES");
-  }
-  else if (language === "ko") {
+  } else if (language === "ko") {
     stringsUrl = stringsUrl.replace("zh-CN", "ko-KR");
   }
 

src/service/room/errorMsg.ts

@@ -14,8 +14,11 @@ const DECKERROR_EXTRACOUNT = 0x7;
 const DECKERROR_SIDECOUNT = 0x8;
 const DECKERROR_NOTAVAIL = 0x9;
 
-const language = localStorage.getItem('language');
-const mainDeckWarining = language != 'cn' ? 'The main deck should contain 40-60 cards.' : '主卡组数量应为40-60张';
+const language = localStorage.getItem("language");
+const mainDeckWarining =
+  language != "cn"
+    ? "The main deck should contain 40-60 cards."
+    : "主卡组数量应为40-60张";
 
 export default async function handleErrorMsg(errorMsg: ygopro.StocErrorMsg) {
   const { error_type, error_code } = errorMsg;

src/ui/BuildDeck/DeckSelect.tsx

@@ -7,13 +7,13 @@ import {
 } from "@ant-design/icons";
 import { App, Button, Dropdown, MenuProps, UploadProps } from "antd";
 import React, { useRef, useState } from "react";
+import { useTranslation } from "react-i18next";
 import YGOProDeck from "ygopro-deck-encode";
 
 import { deckStore, IDeck } from "@/stores";
 
 import { Uploader } from "../Shared";
 import styles from "./DeckSelect.module.scss";
-import { useTranslation } from "react-i18next";
 
 export const DeckSelect: React.FC<{
   decks: readonly { deckName: string }[];

src/ui/BuildDeck/Filter.tsx

@@ -7,6 +7,7 @@ import {
   Tooltip,
 } from "antd";
 import { useState } from "react";
+import { useTranslation } from "react-i18next";
 
 import { fetchStrings, Region } from "@/api";
 import {
@@ -17,7 +18,6 @@ import {
 import { FtsConditions } from "@/middleware/sqlite/fts";
 
 import styles from "./Filter.module.scss";
-import { useTranslation } from "react-i18next";
 
 const levels = Array.from({ length: 12 }, (_, index) => ({
   value: index + 1,

src/ui/BuildDeck/index.tsx

@@ -27,6 +27,7 @@ import { HTML5toTouch } from "rdndmb-html5-to-touch";
 import { memo, useCallback, useEffect, useRef, useState } from "react";
 import { useDrop } from "react-dnd";
 import { DndProvider } from "react-dnd-multi-backend";
+import { useTranslation } from "react-i18next";
 import { LoaderFunction } from "react-router-dom";
 import { proxy, useSnapshot } from "valtio";
 import { subscribeKey } from "valtio/utils";
@@ -57,7 +58,6 @@ import {
   editingDeckToIDeck,
   iDeckToEditingDeck,
 } from "./utils";
-import { useTranslation } from "react-i18next";
 
 export const loader: LoaderFunction = async () => {
   // 必须先加载卡组，不然页面会崩溃

src/ui/BuildDeck/store.ts

@@ -8,11 +8,16 @@ import { Type } from "@/ui/Shared/DeckZone";
 import { compareCards, type EditingDeck } from "./utils";
 
 const language = localStorage.getItem("language");
-const cardTypeNotMatch = language != 'cn' ? "The Card Type does not match" : "卡片种类不符合";
-const exceedsNumberCardsSameName = language != 'cn' ? "Exceeds the number of cards with the same name" : "超过同名卡";
-const limitCards = language != 'cn' ? 'Limit of cards' : '张的上限';
-const exceedsLimit = language  != 'cn' ? 'Exceeds the limit' : '超过';
-const cannotAddTokens = language != 'cn' ? 'Cannot add tokens' : '不能添加衍生物';
+const cardTypeNotMatch =
+  language !== "cn" ? "The Card Type does not match" : "卡片种类不符合";
+const exceedsNumberCardsSameName =
+  language !== "cn"
+    ? "Exceeds the number of cards with the same name"
+    : "超过同名卡";
+const limitCards = language != "cn" ? "Limit of cards" : "张的上限";
+const exceedsLimit = language != "cn" ? "Exceeds the limit" : "超过";
+const cannotAddTokens =
+  language !== "cn" ? "Cannot add tokens" : "不能添加衍生物";
 
 export const editDeckStore = proxy({
   deckName: "",

src/ui/Duel/Message/PositionModal/index.tsx

@@ -7,7 +7,6 @@ import { proxy, useSnapshot } from "valtio";
 import { sendSelectPositionResponse, ygopro } from "@/api";
 
 import { NeosModal } from "../NeosModal";
-import { useTranslation } from "react-i18next";
 
 interface PositionModalProps {
   isOpen: boolean;

src/ui/Duel/Message/SelectCardsModal/index.tsx

@@ -2,6 +2,7 @@ import { CheckCard } from "@ant-design/pro-components";
 import { Button, Card, Segmented, Space, Tooltip } from "antd";
 import classnames from "classnames";
 import { useEffect, useState } from "react";
+import { useTranslation } from "react-i18next";
 import { INTERNAL_Snapshot as Snapshot, useSnapshot } from "valtio";
 
 import { type CardMeta, Region, type ygopro } from "@/api";
@@ -13,7 +14,6 @@ import { groupBy } from "../../utils";
 import { showCardModal } from "../CardModal";
 import { NeosModal } from "../NeosModal";
 import styles from "./index.module.scss";
-import { useTranslation } from "react-i18next";
 
 export interface SelectCardsModalProps {
   isOpen: boolean;

src/ui/Duel/PlayMat/ChatBox/index.tsx

 import { DownOutlined } from "@ant-design/icons";
 import { Button, Drawer, Input } from "antd";
 import React from "react";
+import { useTranslation } from "react-i18next";
 import { proxy, useSnapshot } from "valtio";
 
 import { IconFont, ScrollableArea, useChat } from "@/ui/Shared";
 
 import styles from "./index.module.scss";
-import { useTranslation } from "react-i18next";
 
 const store = proxy({ open: false });
 

src/ui/Duel/PlayMat/Menu/index.tsx

@@ -31,26 +31,30 @@ import { IconFont } from "@/ui/Shared";
 
 import styles from "./index.module.scss";
 import PhaseType = ygopro.StocGameMessage.MsgNewPhase.PhaseType;
+import { useTranslation } from "react-i18next";
+
 import { clearAllIdleInteractivities, clearSelectInfo } from "../../utils";
 import { openChatBox } from "../ChatBox";
-import { useTranslation } from "react-i18next";
 
 const { useToken } = theme;
 
 const FINISH_CANCEL_RESPONSE = -1;
-const language = localStorage.getItem('language');
+const language = localStorage.getItem("language");
 
-const drawPhase = language != 'cn' ? 'Draw' : '抽卡阶段';
-const standbyPhase = language != 'cn' ? 'Standhy Phase' : '准备阶段';
-const mainPhase1 = language != 'cn' ? 'Main Phase 1' : '主要阶段 1';
-const battlePhase = language != 'cn' ? 'Battle Phase' : '战斗阶段';
-const battleStart = language != 'cn' ? 'Battle Start' : '战斗开始';
-const battleStep = language != 'cn' ? 'Battle Step' : '战斗步骤';
-const damage = language != 'cn' ? 'Damage Step' : '伤害步骤';
-const damageCalc = language != 'cn' ? 'Damage Step (Damage Calculation)' : '伤害步骤（伤害计算）';
-const mainPhase2 = language != 'cn' ? 'Main Phase 2' : '主要阶段 2';
-const endPhase = language != 'cn' ? 'End Phase' : '结束阶段';
-const unknown = language != 'cn' ? 'Unknown' : '未知阶段';
+const drawPhase = language !== "cn" ? "Draw" : "抽卡阶段";
+const standbyPhase = language !== "cn" ? "Standhy Phase" : "准备阶段";
+const mainPhase1 = language !== "cn" ? "Main Phase 1" : "主要阶段 1";
+const battlePhase = language !== "cn" ? "Battle Phase" : "战斗阶段";
+const battleStart = language !== "cn" ? "Battle Start" : "战斗开始";
+const battleStep = language !== "cn" ? "Battle Step" : "战斗步骤";
+const damage = language !== "cn" ? "Damage Step" : "伤害步骤";
+const damageCalc =
+  language !== "cn"
+    ? "Damage Step (Damage Calculation)"
+    : "伤害步骤（伤害计算）";
+const mainPhase2 = language !== "cn" ? "Main Phase 2" : "主要阶段 2";
+const endPhase = language !== "cn" ? "End Phase" : "结束阶段";
+const unknown = language !== "cn" ? "Unknown" : "未知阶段";
 
 // PhaseType, 中文, response, 是否显示，是否禁用
 const initialPhaseBind: [
@@ -136,9 +140,9 @@ export const Menu = () => {
     setPhaseSwitchItems(newPhaseSwitchItems);
   }, [phaseBind]);
 
-  const allChain = language != 'cn' ? 'All Chain' : '';
-  const ignoreChain = language != 'cn' ? 'Ignore Chain' : '';
-  const smartChain = language != 'cn' ? 'Smart Chain' : '';
+  const allChain = language != "cn" ? "All Chain" : "";
+  const ignoreChain = language != "cn" ? "Ignore Chain" : "";
+  const smartChain = language != "cn" ? "Smart Chain" : "";
 
   const chainSettingTexts = [
     [ChainSetting.CHAIN_ALL, allChain],
@@ -202,7 +206,7 @@ export const Menu = () => {
         ></Button>
       </Tooltip>
       <DropdownWithTitle
-        title={ i18n("DoYouSurrunder") }
+        title={i18n("DoYouSurrunder")}
         menu={{ items: surrenderMenuItems }}
       >
         <Button icon={<CloseCircleFilled />} type="text"></Button>

src/ui/I18N/I18NSelector/index.tsx

@@ -2,6 +2,7 @@ import React, { useEffect } from "react";
 import { useTranslation } from "react-i18next";
 
 import { Select } from "@/ui/Shared";
+
 import { useI18N } from "../I18NContext";
 
 export const I18NSelector: React.FC = () => {

src/ui/Match/MatchModal/index.tsx

 import { App, Button, Input, Modal } from "antd";
 import React, { ChangeEvent, useEffect, useState } from "react";
+import { useTranslation } from "react-i18next";
 import { useNavigate } from "react-router-dom";
 import { proxy, useSnapshot } from "valtio";
 
@@ -9,7 +10,6 @@ import { Select } from "@/ui/Shared";
 
 import { connectSrvpro } from "../util";
 import styles from "./index.module.scss";
-import { useTranslation } from "react-i18next";
 
 const NeosConfig = useConfig();
 const serverConfig = NeosConfig.servers;

src/ui/Match/ReplayModal/index.tsx

 import { Button, message, Modal, UploadProps } from "antd";
 import React, { useEffect, useState } from "react";
+import { useTranslation } from "react-i18next";
 import { useNavigate } from "react-router-dom";
 import { proxy, useSnapshot } from "valtio";
 
@@ -7,7 +8,6 @@ import { replayStore } from "@/stores";
 
 import { Uploader } from "../../Shared";
 import { connectSrvpro } from "../util";
-import { useTranslation } from "react-i18next";
 
 const localStore = proxy({
   open: false,

src/ui/Match/WatchContent/index.tsx

@@ -2,6 +2,7 @@ import { SearchOutlined } from "@ant-design/icons";
 import { App, Avatar, Button, Divider, Empty, Input } from "antd";
 import classNames from "classnames";
 import React, { useState } from "react";
+import { useTranslation } from "react-i18next";
 import useWebSocket, { ReadyState } from "react-use-websocket";
 import { proxy, useSnapshot } from "valtio";
 
@@ -10,7 +11,6 @@ import { useConfig } from "@/config";
 
 import { ScrollableArea } from "../../Shared";
 import styles from "./index.module.scss";
-import { useTranslation } from "react-i18next";
 
 const { athleticWatchUrl } = useConfig();
 
@@ -130,8 +130,9 @@ export const WatchContent: React.FC = () => {
                     <Avatar src={room.users?.at(1)?.avatar} />
                   </div>
                   <div className={styles.title}>
-                    {`${room.users?.at(0)?.username}` + ` ${i18n("Versus")} ` + `${room.users?.at(1)
-                      ?.username} 的决斗`}
+                    {`${room.users?.at(0)?.username}` +
+                      ` ${i18n("Versus")} ` +
+                      `${room.users?.at(1)?.username} 的决斗`}
                   </div>
                   <div className={styles.mode}>{i18n("RankedMatch")}</div>
                 </div>

src/ui/WaitRoom/Chat.tsx

 import { Button, Input } from "antd";
+import { useTranslation } from "react-i18next";
 
 import { IconFont, ScrollableArea, useChat } from "@/ui/Shared";
 
 import styles from "./Chat.module.scss";
-import { useTranslation } from "react-i18next";
 
 interface ChatItem {
   name: string;

src/ui/WaitRoom/Popover.tsx

 import { Button, Popover, Space } from "antd";
 import { useEffect, useState } from "react";
+import { useTranslation } from "react-i18next";
 
 import { eventbus, Task } from "@/infra";
 
 import { IconFont } from "../Shared";
-import { useTranslation } from "react-i18next";
 
 export enum Mora {
   Scissors = "scissors",
@@ -40,8 +40,8 @@ export const MoraPopover: React.FC<
 
   const map = {
     [Mora.Rock]: i18n("Rock"),
-    [Mora.Scissors]: i18n("Scissors"), 
-    [Mora.Paper]: i18n("Paper")
+    [Mora.Scissors]: i18n("Scissors"),
+    [Mora.Paper]: i18n("Paper"),
   };
 
   return (

src/ui/WaitRoom/index.tsx

@@ -17,6 +17,7 @@ import SelfType = ygopro.StocTypeChange.SelfType;
 import { App, Avatar, Button, Skeleton, Space } from "antd";
 import classNames from "classnames";
 import { useEffect, useState } from "react";
+import { useTranslation } from "react-i18next";
 import { useNavigate } from "react-router-dom";
 import { useSnapshot } from "valtio";
 
@@ -36,7 +37,6 @@ import { Background, IconFont, Select, SpecialButton } from "@/ui/Shared";
 import { Chat } from "./Chat";
 import styles from "./index.module.scss";
 import { Mora, MoraPopover, Tp, TpPopover } from "./Popover";
-import { useTranslation } from "react-i18next";
 
 const NeosConfig = useConfig();
 
@@ -262,7 +262,7 @@ const Controller: React.FC<{ onDeckChange: (deckName: string) => void }> = ({
   return (
     <Space>
       <Select
-        title={ i18n("Deck") }
+        title={i18n("Deck")}
         showSearch
         style={{ width: "15.6rem" }}
         defaultValue={snapDeck.decks[0].deckName}
@@ -286,7 +286,9 @@ const Controller: React.FC<{ onDeckChange: (deckName: string) => void }> = ({
           }
         }}
       >
-        {snapRoom.selfType === SelfType.OBSERVER ? i18n("JoinDuelist") : i18n("JoinSpectator") }
+        {snapRoom.selfType === SelfType.OBSERVER
+          ? i18n("JoinDuelist")
+          : i18n("JoinSpectator")}
         {!!snapRoom.observerCount && (
           <Avatar size="small" style={{ marginLeft: 8 }}>
             {snapRoom.observerCount}
@@ -311,7 +313,9 @@ const SideButtons: React.FC<{
         icon={
           <span className={styles["btn-icon"]}>
             <IconFont type="icon-exit" size={17} />
-            <span className={styles["btn-text"]}>&nbsp;&nbsp;{i18n("LeaveRoom")}</span>
+            <span className={styles["btn-text"]}>
+              &nbsp;&nbsp;{i18n("LeaveRoom")}
+            </span>
           </span>
         }
         onClick={() => {
@@ -329,7 +333,8 @@ const SideButtons: React.FC<{
           <span className={styles["btn-icon"]}>
             <IconFont type="icon-side-bar-fill" size={16} />
             <span className={styles["btn-text"]}>
-            &nbsp;&nbsp;{collapsed ? i18n("Expand") : i18n("Collapse")} {i18n("Sidebar")}
+              &nbsp;&nbsp;{collapsed ? i18n("Expand") : i18n("Collapse")}{" "}
+              {i18n("Sidebar")}
             </span>
           </span>
         }