Merge branch 'feat/deprecate/neos-rs' into 'main'

Feat/deprecate/neos rs

See merge request mycard/Neos!96

src/api/strings.ts

 import axios from "axios";
 
+export async function initStrings() {
+  const strings = (
+    await axios.get<string>(`ygopro-database/locales/zh-CN/strings.conf`)
+  ).data;
+
+  const lineIter = strings.split("\n");
+  for (const line of lineIter) {
+    if (!line.startsWith("#") && line !== "") {
+      let [region, code, value] = line.split(" ", 3);
+      localStorage.setItem(`${region}_${code}`, value);
+    }
+  }
+}
+
 export async function fetchStrings(
   region: string,
-  id: number
+  id: number,
+  local?: boolean
 ): Promise<string> {
+  if (local) {
+    return localStorage.getItem(`${region}_${id}`) || "";
+  }
+
   return (
     await axios.get<string>(`http://localhost:3030/strings/${region}_${id}`)
   ).data;

src/reducers/duel/hintSlice.ts

@@ -16,7 +16,7 @@ export const fetchCommonHintMeta = createAsyncThunk(
     const player = param[0];
     const hintData = param[1];
 
-    const hintMeta = await fetchStrings("!system", hintData);
+    const hintMeta = await fetchStrings("!system", hintData, true);
     const response: [number, string] = [player, hintMeta];
 
     return response;

src/reducers/duel/modal/yesNoModalSlice.ts

@@ -31,7 +31,7 @@ export const fetchYesNoMeta = createAsyncThunk(
       cardLocation: ygopro.CardLocation
     ) => string;
   }) => {
-    const desc = await fetchStrings("!system", param.descCode);
+    const desc = await fetchStrings("!system", param.descCode, true);
     const meta = await fetchCard(param.code, true);
 
     // TODO: 国际化文案

src/ui/Duel/main.tsx

-import React from "react";
+import React, { useEffect, useRef } from "react";
 import { Engine, Scene } from "react-babylonjs";
 import { ReactReduxContext, Provider } from "react-redux";
 import * as BABYLON from "@babylonjs/core";
@@ -20,43 +20,61 @@ import OptionModal from "./optionModal";
 import Phase from "./phase";
 import CheckCardModalV2 from "./checkCardModalV2";
 import ExtraDeck from "./extraDeck";
+import { initStrings } from "../../api/strings";
 
 // Ref: https://github.com/brianzinn/react-babylonjs/issues/126
-const NeosDuel = () => (
-  <>
-    <ReactReduxContext.Consumer>
-      {({ store }) => (
-        <Engine antialias adaptToDeviceRatio canvasId="babylonJS">
-          <Scene>
-            <Provider store={store}>
-              <Camera />
-              <Light />
-              <Hands />
-              <Monsters />
-              <Magics />
-              <Field />
-              <CommonDeck />
-              <ExtraDeck />
-              <Cemeteries />
-              <Exclusion />
-              <Field />
-              <Phase />
-              <Ground />
-            </Provider>
-          </Scene>
-        </Engine>
-      )}
-    </ReactReduxContext.Consumer>
-    <CardModal />
-    <CardListModal />
-    <HintNotification />
-    <CheckCardModal />
-    <YesNoModal />
-    <PositionModal />
-    <OptionModal />
-    <CheckCardModalV2 />
-  </>
-);
+const NeosDuel = () => {
+  // 应该用更优雅的方式处理`useEffect`执行两次的问题
+  const initialRender = useRef(true);
+  useEffect(() => {
+    const init = async () => {
+      await initStrings();
+    };
+
+    if (initialRender.current) {
+      initialRender.current = false;
+      return;
+    }
+
+    init();
+  }, []);
+
+  return (
+    <>
+      <ReactReduxContext.Consumer>
+        {({ store }) => (
+          <Engine antialias adaptToDeviceRatio canvasId="babylonJS">
+            <Scene>
+              <Provider store={store}>
+                <Camera />
+                <Light />
+                <Hands />
+                <Monsters />
+                <Magics />
+                <Field />
+                <CommonDeck />
+                <ExtraDeck />
+                <Cemeteries />
+                <Exclusion />
+                <Field />
+                <Phase />
+                <Ground />
+              </Provider>
+            </Scene>
+          </Engine>
+        )}
+      </ReactReduxContext.Consumer>
+      <CardModal />
+      <CardListModal />
+      <HintNotification />
+      <CheckCardModal />
+      <YesNoModal />
+      <PositionModal />
+      <OptionModal />
+      <CheckCardModalV2 />
+    </>
+  );
+};
 
 const Camera = () => (
   <freeCamera