feat/language-translation (Replay, Text updates, ChatBox, WaitRoom)

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

@@ -6,6 +6,7 @@ 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 });
 
@@ -17,7 +18,7 @@ interface ChatItem {
 export const ChatBox: React.FC = () => {
   const { open } = useSnapshot(store);
   const { dialogs, input, setInput, ref, onSend } = useChat(true);
-
+  const { t: i18n } = useTranslation("Chat");
   const onClose = () => (store.open = false);
 
   return (
@@ -42,7 +43,7 @@ export const ChatBox: React.FC = () => {
             value={input}
             onChange={(event) => setInput(event.target.value)}
             autoSize
-            placeholder="请输入聊天内容"
+            placeholder={i18n("PleaseEnterChatContent")}
             onPressEnter={(e) => {
               e.preventDefault();
               onSend();

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

@@ -4,10 +4,10 @@
     "Match": "Match",
     "DeckBuilding": "Montagem de baralho",
     "PersonalCenter": "Centro pessoal",
-    "MyCardCommunity": "Comunidade Mengka",
+    "MyCardCommunity": "Comunidade MyCard",
     "DuelDatabase": "Base de dados de duelos",
     "LogOut": "Sair",
-    "Login": "Entrar no Mengka",
+    "Login": "Entrar no MyCard",
     "Fullscreen": "Tela cheia"
   },
   "Start": {
@@ -24,10 +24,10 @@
     "MCCompetitiveMatchmakingDesc": "Lute ferozmente com dezenas de milhares de outros jogadores na escada do MyCard, visando ser o mais forte. Liquidação às 22:00 do último dia de cada mês, anúncio de classificação e distribuição de recompensas.",
     "MCCasualMatchmakingTitle": "Duelo Casual",
     "MCCasualMatchmakingDesc": "Por enquanto, deixe de lado as vitórias e as derrotas e aproveite a diversão dos duelos. Os 20 decks mais usados no combate competitivo durante a última semana serão temporariamente desativados.",
-    "MCCustomRoomTitle": "Sala Personalizada",
-    "MCCustomRoomDesc": "Crie ou entre em salas personalizadas no servidor e batalhe com amigos.",
+    "MCCustomRoomTitle": "MyCard Sala Personalizada",
+    "MCCustomRoomDesc": "Crie ou entre em salas personalizadas no MyCard servidor e batalhe com amigos.",
     "MCSpectatorListTitle": "Lista de espectadores",
-    "MCSpectatorListDesc": "Assista aos duelos atualmente em andamento no Mengka MyCard.",
+    "MCSpectatorListDesc": "Assista aos duelos atualmente em andamento no MyCard MyCard.",
     "SinglePlayerModeTitle": "Modo de um jogador",
     "SinglePlayerModeDesc": "Inicie um duelo contra a IA no servidor Koishi 7210 para testar seu deck ou apenas passar o tempo.",
     "CustomRoomTitle": "Sala Personalizada",

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

@@ -150,5 +150,23 @@
     "ClickOrDragFilesHereToUpload": "单击或拖动文件到此区域进行上传",
     "SupportsYdkExtension": "仅支持后缀名为ydk的卡组文件。",
     "UnableToReadClipboardContent": "无法读取剪贴板内容:"
+  },
+  "Chat": {
+    "PleaseEnterChatContent": "请输入聊天内容"
+  },
+  "MatchModal": {
+    "PleaseEnterCustomRoomInformation": "请输入自定义房间信息",
+    "Server": "服务器",
+    "KoishiServer": "Koishi服",
+    "UltraPreemptiveServer": "超先行服",
+    "PlayerNickname": "玩家昵称",
+    "RoomPasswordOptional": "房间密码(可选)"
+  },
+  "ReplayModal": {
+    "SelectReplay": "选择回放",
+    "ClickOrDragFilesHereToUpload": "单击或拖动文件到此区域进行上传",
+    "SupportsYrd3dExtension": "仅支持后缀名为yrp3d的录像文件。",
+    "StartReplay": "开始回放",
+    "PleaseUploadReplayFile": "请先上传录像文件"
   }
 }
\ No newline at end of file

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

@@ -4,10 +4,10 @@
     "Match": "Match",
     "DeckBuilding": "Deck Building",
     "PersonalCenter": "Personal Center",
-    "MyCardCommunity": "Mengka Community",
+    "MyCardCommunity": "MyCard Community",
     "DuelDatabase": "Duel Database",
     "LogOut": "Log out",
-    "Login": "Login to Mengka",
+    "Login": "Login to MyCard",
     "Fullscreen": "Fullscreen"
   },
   "Start": {
@@ -24,10 +24,10 @@
     "MCCompetitiveMatchmakingDesc": "Battle fiercely with tens of thousands of other players on MyCard ladder, aiming to be the strongest. Settlement at 22:00 on the last day of each month, ranking announcement and rewards distribution.",
     "MCCasualMatchmakingTitle": "Casual Matchmaking",
     "MCCasualMatchmakingDesc": "Set aside wins and losses for now, and enjoy the fun of dueling. The top 20 most used decks in competitive matchmaking over the past week will be temporarily disabled.",
-    "MCCustomRoomTitle": "Custom Room",
+    "MCCustomRoomTitle": "MyCard Custom Room",
     "MCCustomRoomDesc": "Create or join custom rooms on MC server and battle with friends.",
     "MCSpectatorListTitle": "Spectator List",
-    "MCSpectatorListDesc": "Watch the duels currently taking place on Mengka MyCard.",
+    "MCSpectatorListDesc": "Watch the duels currently taking place on MyCard MyCard.",
     "SinglePlayerModeTitle": "Single Player Mode",
     "SinglePlayerModeDesc": "Start a duel against AI on Koishi 7210 server to test your deck or just pass the time.",
     "CustomRoomTitle": "Custom Room",
@@ -150,5 +150,23 @@
     "ClickOrDragFilesHereToUpload": "Click or drag files here to upload",
     "SupportsYdkExtension": "Only supports deck files with the .ydk extension.",
     "UnableToReadClipboardContent": "Unable to read clipboard content."
+  },
+  "Chat": {
+    "PleaseEnterChatContent": "Please enter chat"
+  },
+  "MatchModal": {
+    "PleaseEnterCustomRoomInformation": "Please enter custom room information",
+    "Server": "Server",
+    "KoishiServer": "Koishi Server",
+    "UltraPreemptiveServer": "Ultra Preemptive Server",
+    "PlayerNickname": "Player Nickname",
+    "RoomPasswordOptional": "Room Password (optional)"
+  },
+  "ReplayModal": {
+    "SelectReplay": "Select Replay",
+    "ClickOrDragFilesHereToUpload": "Click or drag files here to upload",
+    "SupportsYrd3dExtension": "Only replay files with the .yrp3d extension are supported.",
+    "StartReplay": "Start Replay",
+    "PleaseUploadReplayFile": "Please upload the replay file first."
   }
 }
\ No newline at end of file

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

@@ -4,10 +4,10 @@
     "Match": "Correspondance",
     "DeckBuilding": "Construction de Deck",
     "PersonalCenter": "Centre personnel",
-    "MyCardCommunity": "Communauté Mengka",
+    "MyCardCommunity": "Communauté MyCard",
     "DuelDatabase": "Base de données de duels",
     "LogOut": "Déconnexion",
-    "Login": "Connexion à Mengka",
+    "Login": "Connexion à MyCard",
     "Fullscreen": "Plein écran"
   },
   "Start": {
@@ -27,7 +27,7 @@
     "MCCustomRoomTitle": "Salle personnalisée MC",
     "MCCustomRoomDesc": "Créez ou rejoignez des salles personnalisées sur le serveur MC et affrontez vos amis.",
     "MCSpectatorListTitle": "Liste des spectateurs",
-    "MCSpectatorListDesc": "Regardez les duels en cours sur Mengka MyCard.",
+    "MCSpectatorListDesc": "Regardez les duels en cours sur MyCard MyCard.",
     "SinglePlayerModeTitle": "Mode solo",
     "SinglePlayerModeDesc": "Démarrez un duel contre l'IA sur le serveur Koishi 7210 pour tester votre deck ou juste passer le temps.",
     "CustomRoomTitle": "Salle personnalisée",

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

@@ -27,7 +27,7 @@
     "MCCustomRoomTitle": "MCカスタムルーム",
     "MCCustomRoomDesc": "MCサーバーでカスタムルームを作成または参加し、友達と対戦しましょう。",
     "MCSpectatorListTitle": "MC観戦リスト",
-    "MCSpectatorListDesc": "Mengka MyCardで現在進行中のデュエルを観戦しましょう。",
+    "MCSpectatorListDesc": "MyCard MyCardで現在進行中のデュエルを観戦しましょう。",
     "SinglePlayerModeTitle": "シングルプレイヤーモード",
     "SinglePlayerModeDesc": "Koishi 7210サーバーでAIとのデュエルを開始し、自分のデッキをテストしたり、ただ時間を潰したりします。",
     "CustomRoomTitle": "カスタムルーム",

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

@@ -4,10 +4,10 @@
     "Match": "Match",
     "DeckBuilding": "Montagem de baralho",
     "PersonalCenter": "Centro pessoal",
-    "MyCardCommunity": "Comunidade Mengka",
+    "MyCardCommunity": "Comunidade MyCard",
     "DuelDatabase": "Base de dados de duelos",
     "LogOut": "Terminar sessão",
-    "Login": "Iniciar sessão no Mengka",
+    "Login": "Iniciar sessão no MyCard",
     "Fullscreen": "Ecrã completo"
   },
   "Start": {
@@ -27,7 +27,7 @@
     "MCCustomRoomTitle": "Sala Personalizada",
     "MCCustomRoomDesc": "Crie ou entre em salas personalizadas no servidor e batalhe com amigos.",
     "MCSpectatorListTitle": "Lista de espectadores",
-    "MCSpectatorListDesc": "Assista aos duelos atualmente em andamento no Mengka MyCard.",
+    "MCSpectatorListDesc": "Assista aos duelos atualmente em andamento no MyCard MyCard.",
     "SinglePlayerModeTitle": "Modo de um jogador",
     "SinglePlayerModeDesc": "Inicia um duelo contra a IA no servidor Koishi 7210 para testar o teu deck ou apenas passar o tempo.",
     "CustomRoomTitle": "Sala Personalizada",

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

@@ -4,10 +4,10 @@
     "Match": "Emparejamiento",
     "DeckBuilding": "Construcción de Mazo",
     "PersonalCenter": "Centro personal",
-    "MyCardCommunity": "Comunidad Mengka",
+    "MyCardCommunity": "Comunidad MyCard",
     "DuelDatabase": "Base de datos de duelos",
     "LogOut": "Cerrar sesión",
-    "Login": "Iniciar sesión en Mengka",
+    "Login": "Iniciar sesión en MyCard",
     "Fullscreen": "Pantalla completa"
   },
   "Start": {
@@ -27,7 +27,7 @@
     "MCCustomRoomTitle": "Sala personalizada",
     "MCCustomRoomDesc": "Crea o únete a salas personalizadas en el servidor y juega con amigos.",
     "MCSpectatorListTitle": "Lista de espectadores",
-    "MCSpectatorListDesc": "Observa los duelos que se están llevando a cabo en Mengka MyCard.",
+    "MCSpectatorListDesc": "Observa los duelos que se están llevando a cabo en MyCard MyCard.",
     "SinglePlayerModeTitle": "Modo un jugador",
     "SinglePlayerModeDesc": "Inicia un duelo contra la IA en el servidor Koishi 7210 para probar tu mazo o simplemente pasar el tiempo.",
     "CustomRoomTitle": "Sala personalizada",

src/ui/I18N/index.ts

@@ -25,6 +25,9 @@ const resources = {
     CustomRoomContent: translationChinese.CustomRoomContent,
     WatchContent: translationChinese.WatchContent,
     DeckSelect: translationChinese.DeckSelect,
+    Chat: translationChinese.Chat,
+    MatchModal: translationChinese.MatchModal,
+    ReplayModal: translationChinese.ReplayModal,
   },
   en: {
     Header: translationEnglish.Header,
@@ -37,6 +40,9 @@ const resources = {
     CustomRoomContent: translationEnglish.CustomRoomContent,
     WatchContent: translationEnglish.WatchContent,
     DeckSelect: translationEnglish.DeckSelect,
+    Chat: translationEnglish.Chat,
+    MatchModal: translationEnglish.MatchModal,
+    ReplayModal: translationEnglish.ReplayModal,
   },
   es: {
     Header: translationSpanish.Header,

src/ui/Match/MatchModal/index.tsx

@@ -9,6 +9,7 @@ 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;
@@ -41,6 +42,7 @@ export const MatchModal: React.FC = ({}) => {
   const [serverId, setServerId] = useState(0);
   const [confirmLoading, setConfirmLoading] = useState(false);
   const navigate = useNavigate();
+  const { t: i18n } = useTranslation("MatchModal");
 
   const handlePlayerChange = (event: ChangeEvent<HTMLInputElement>) => {
     setPlayer(event.target.value);
@@ -87,7 +89,7 @@ export const MatchModal: React.FC = ({}) => {
   return (
     <Modal
       open={open}
-      title="请输入自定义房间信息"
+      title={i18n("PleaseEnterCustomRoomInformation")}
       onCancel={() => (matchStore.open = false)}
       footer={
         <Button onClick={handleSubmit} loading={confirmLoading}>
@@ -100,16 +102,16 @@ export const MatchModal: React.FC = ({}) => {
       <div className={styles["inputs-container"]}>
         <Select
           className={styles.select}
-          title="服务器"
+          title={i18n("Server")}
           value={serverId}
           options={[
             {
               value: KOISHI_INDEX,
-              label: "Koishi服",
+              label: i18n("KoishiServer"),
             },
             {
               value: PRERELEASE_INDEX,
-              label: "超先行服",
+              label: i18n("UltraPreemptiveServer"),
             },
           ]}
           onChange={handleServerChange}
@@ -117,7 +119,7 @@ export const MatchModal: React.FC = ({}) => {
         <Input
           className={styles.input}
           type="text"
-          placeholder="玩家昵称"
+          placeholder={i18n("PlayerNickname")}
           value={player}
           onChange={handlePlayerChange}
           required
@@ -126,7 +128,7 @@ export const MatchModal: React.FC = ({}) => {
           className={styles.input}
           type="text"
           autoCorrect="off"
-          placeholder="房间密码(可选)"
+          placeholder={i18n("RoomPasswordOptional")}
           value={passwd}
           onChange={handlePasswdChange}
         />

src/ui/Match/ReplayModal/index.tsx

@@ -7,6 +7,7 @@ import { replayStore } from "@/stores";
 
 import { Uploader } from "../../Shared";
 import { connectSrvpro } from "../util";
+import { useTranslation } from "react-i18next";
 
 const localStore = proxy({
   open: false,
@@ -17,6 +18,7 @@ export const ReplayModal: React.FC = () => {
   const { open, hasStart } = useSnapshot(localStore);
   const [replay, setReplay] = useState<null | ArrayBuffer>(null);
   const [loading, setLoading] = useState(false);
+  const { t: i18n } = useTranslation("ReplayModal");
   const uploadProps: UploadProps = {
     name: "replay",
     onChange(info) {
@@ -34,7 +36,7 @@ export const ReplayModal: React.FC = () => {
   const navigate = useNavigate();
   const onSubmit = async () => {
     if (replay === null) {
-      message.error("请先上传录像文件");
+      message.error(`${i18n("PleaseUploadReplayFile")}`);
     } else {
       setLoading(true);
 
@@ -63,22 +65,22 @@ export const ReplayModal: React.FC = () => {
 
   return (
     <Modal
-      title="选择回放"
+      title={i18n("SelectReplay")}
       open={open}
       maskClosable={false}
       confirmLoading={loading}
       centered
       footer={
         <Button onClick={onSubmit} loading={loading}>
-          开始回放
+          {i18n("StartReplay")}
         </Button>
       }
       onCancel={() => (localStore.open = false)}
     >
       <Uploader
         {...uploadProps}
-        text="单击或拖动文件到此区域进行上传"
-        hint="仅支持后缀名为yrp3d的录像文件。"
+        text={i18n("ClickOrDragFilesHereToUpload")}
+        hint={i18n("SupportsYrd3dExtension")}
       />
     </Modal>
   );

src/ui/WaitRoom/Chat.tsx

@@ -3,6 +3,7 @@ import { Button, Input } from "antd";
 import { IconFont, ScrollableArea, useChat } from "@/ui/Shared";
 
 import styles from "./Chat.module.scss";
+import { useTranslation } from "react-i18next";
 
 interface ChatItem {
   name: string;
@@ -12,7 +13,7 @@ interface ChatItem {
 
 export const Chat: React.FC = () => {
   const { dialogs, input, setInput, ref, onSend } = useChat();
-
+  const { t: i18n } = useTranslation("Chat");
   return (
     <div className={styles.chat}>
       <ScrollableArea className={styles.dialogs} ref={ref}>
@@ -26,7 +27,7 @@ export const Chat: React.FC = () => {
           value={input}
           onChange={(event) => setInput(event.target.value)}
           autoSize
-          placeholder="请输入聊天内容"
+          placeholder={i18n("PleaseEnterChatContent")}
           onPressEnter={(e) => {
             e.preventDefault();
             onSend();

src/ui/WaitRoom/index.tsx

@@ -331,7 +331,7 @@ 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>
         }

[BBeretta]

@SKTT1Ryze Hello my friend! How are you doing? I would like a little help with Filters... How can we proceed with translating each filter (Attributes, Races, Types)? I saw that it comes from an artifact called wasm (I believe it is the one handling these values). Thank you for your time! Have a great week!!

filters

[Chunchi Che]

@BBeretta It depends on a Configuration, which the I18N is supported: [strings.conf]https://cdn02.moecube.com:444/ygopro-database/{zh-CN or en-US}/strings.conf. See strings.ts for more details.

I'm at work and i would introduce some details for you later night, thank you!

[Chunchi Che]

@BBeretta The texts of filter(Attributes, Races, Types) are defined in strings.conf, whose url is https://cdn02.moecube.com:444/ygopro-database/{lang}/strings.conf. You can specify the lang of the url to get translations texts like zh-CN. It currently only supports en-US, es-ES, ja-JP, ko-KR, zh-CN. And it is in the strings.ts that fetches the translations and store them in the localStorage of the browser. So what we need to do is let strings.ts supports I18N.

If you have any questions, feel free to create issues and tell me. Thanks for your efforts!

[BBeretta]

Hey @SKTT1Ryze Hey friend! Thank you very much for the information! I will take a look at that class and run some tests. Thanks!!