Merge branch 'optimize/lazy_load' into 'main'

Optimize/lazy load

See merge request mycard/Neos!107

.gitlab-ci.yml

@@ -47,9 +47,9 @@ deploy:
     - npm_build
   script:
     - sudo apt-get install rsync
-    - 'rsync -atv --progress --human-readable dist/ kirayamato@8.142.104.5:$NEOS_DEPLOY_PATH'
-    - 'rsync -atv --progress --human-readable assets/ kirayamato@8.142.104.5:$NEOS_DEPLOY_PATH/assets'
-    - 'rsync -atv --progress --human-readable ygopro-database kirayamato@8.142.104.5:$NEOS_DEPLOY_PATH/ygopro-database'
+    - 'rsync -atv --progress --human-readable --delete --exclude="neos-assets/" dist/ kirayamato@8.142.104.5:$NEOS_DEPLOY_PATH'
+    - 'rsync -atv --progress --human-readable --delete neos-assets/ kirayamato@8.142.104.5:$NEOS_DEPLOY_PATH/neos-assets'
+    - 'rsync -atv --progress --human-readable --delete ygopro-database kirayamato@8.142.104.5:$NEOS_DEPLOY_PATH/ygopro-database'
   before_script:
     - 'command -v ssh-agent >/dev/null || ( apt-get update -y && apt-get install openssh-client -y )'
 

neos.config.json

+{
+  "assetsPath": "/neso-assets"
+}

package.json

@@ -35,6 +35,7 @@
     "build": "tsc && vite build",
     "preview": "vite preview",
     "lint": "eslint --ext .ts --ext .tsx src",
+    "fmt": "eslint --ext .ts --ext .tsx src --fix",
     "test": "react-scripts test",
     "eject": "react-scripts eject"
   },

src/config/ui.ts

@@ -71,43 +71,3 @@ export const HandInteractShape = () => {
   return { width: 0.8, height: 0.2 };
 };
 export const HandInteractFontSize = 200;
-
-// 怪兽区
-export const MonsterColor = () => {
-  return BABYLON.Color3.Red();
-};
-
-// 额外怪兽区
-export const extraMonsterColor = () => {
-  return BABYLON.Color3.Yellow();
-};
-
-// 魔法陷阱区
-export const MagicColor = () => {
-  return BABYLON.Color3.Blue();
-};
-
-// 卡组
-export const DeckColor = () => {
-  return BABYLON.Color3.Gray();
-};
-
-// 额外卡组
-export const ExtraDeckColor = () => {
-  return BABYLON.Color3.Purple();
-};
-
-// 墓地
-export const CemeteryColor = () => {
-  return BABYLON.Color3.Teal();
-};
-
-// 除外区
-export const ExclusionColor = () => {
-  return BABYLON.Color3.Black();
-};
-
-// 场地
-export const FieldColor = () => {
-  return BABYLON.Color3.White();
-};

src/middleware/sqlite.ts

@@ -7,6 +7,7 @@
 
 import initSqlJs, { Database } from "sql.js";
 import { CardMeta, CardData, CardText } from "../api/cards";
+import NeosConfig from "../../neos.config.json";
 
 export enum sqliteCmd {
   // 初始化
@@ -37,7 +38,7 @@ export interface sqliteResult {
 
 let YGODB: Database | null = null;
 const sqlPromise = initSqlJs({
-  locateFile: (file) => `/assets/${file}`,
+  locateFile: (file) => `${NeosConfig.assetsPath}/${file}`,
 });
 
 // FIXME: 应该有个返回值，告诉业务方本次请求的结果，比如初始化DB失败

src/styles/core.scss

@@ -66,7 +66,7 @@ url("https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.2.1/css/all.min.css")
 }
 
 body {
-  background-image: url(/assets/background.png);
+  background-image: url(/neos-assets/background.png);
   background-size:cover;
 	color: #606468;
   font: 87.5%/1.5em 'Open Sans', sans-serif;

src/ui/Duel/fixedSlot.tsx

@@ -14,6 +14,7 @@ import {
 } from "../../reducers/duel/mod";
 import { ActionCreatorWithPayload } from "@reduxjs/toolkit";
 import { interactTypeToString } from "./util";
+import NeosConfig from "../../../neos.config.json";
 
 const shape = CONFIG.CardSlotShape();
 
@@ -99,11 +100,11 @@ const FixedSlot = (props: {
         diffuseTexture={
           props.state.occupant
             ? faceDown
-              ? new BABYLON.Texture(`/assets/card_back.jpg`)
+              ? new BABYLON.Texture(`${NeosConfig.assetsPath}/card_back.jpg`)
               : new BABYLON.Texture(
                   `https://cdn02.moecube.com:444/images/ygopro-images-zh-CN/${props.state.occupant.id}.jpg`
                 )
-            : new BABYLON.Texture(`/assets/card_slot.png`)
+            : new BABYLON.Texture(`${NeosConfig.assetsPath}/card_slot.png`)
         }
         alpha={props.state.occupant ? 1 : 0}
       ></standardMaterial>

src/ui/Duel/hands.tsx

@@ -15,6 +15,7 @@ import { useClick } from "./hook";
 import { useState, useRef, useEffect } from "react";
 import { useSpring, animated } from "./spring";
 import { zip, interactTypeToString } from "./util";
+import NeosConfig from "../../../neos.config.json";
 
 const groundShape = CONFIG.GroundShape();
 const left = -(groundShape.width / 2);
@@ -51,7 +52,7 @@ const Hands = () => {
             sequence={idx}
             position={position}
             rotation={handRotation}
-            cover={(_) => `/assets/card_back.jpg`}
+            cover={(_) => `${NeosConfig.assetsPath}/card_back.jpg`}
           />
         );
       })}

src/ui/Duel/main.tsx

@@ -21,6 +21,7 @@ import Phase from "./phase";
 import CheckCardModalV2 from "./checkCardModalV2";
 import ExtraDeck from "./extraDeck";
 import { initStrings } from "../../api/strings";
+import NeosConfig from "../../../neos.config.json";
 
 // Ref: https://github.com/brianzinn/react-babylonjs/issues/126
 const NeosDuel = () => {
@@ -94,7 +95,7 @@ const Light = () => (
 
 const Ground = () => {
   const shape = CONFIG.GroundShape();
-  const texture = new BABYLON.Texture(`/assets/newfield.png`);
+  const texture = new BABYLON.Texture(`${NeosConfig.assetsPath}/newfield.png`);
   texture.hasAlpha = true;
 
   return (

src/ui/Duel/singleSlot.tsx

@@ -9,6 +9,7 @@ import {
   setCardListModalIsOpen,
 } from "../../reducers/duel/mod";
 import { interactTypeToString } from "./util";
+import NeosConfig from "../../../neos.config.json";
 
 const shape = CONFIG.SingleSlotShape;
 export const Depth = 0.005;
@@ -77,7 +78,9 @@ const SingleSlot = (props: {
     >
       <standardMaterial
         name="single-slot-mat"
-        diffuseTexture={new BABYLON.Texture(`/assets/card_back.jpg`)}
+        diffuseTexture={
+          new BABYLON.Texture(`${NeosConfig.assetsPath}/card_back.jpg`)
+        }
         alpha={props.state.length == 0 ? 0 : 1}
       />
     </box>

src/ui/LazyLoad.tsx

+import React, { Suspense } from "react";
+
+// 这个组件不知道为啥用不了，先保留后面研究下
+const LazyLoad = (props: { lazy: React.ReactNode }) => {
+  return <Suspense fallback={<div>Loading...</div>}>{props.lazy}</Suspense>;
+};
+
+export const Loading = () => <div>Loading</div>;
+
+export default LazyLoad;

src/ui/JoinRoom.tsx → src/ui/Login.tsx

@@ -10,8 +10,9 @@ import { Input } from "antd";
 import React, { useState, ChangeEvent } from "react";
 import { useNavigate } from "react-router-dom";
 import "../styles/core.scss";
+import NeosConfig from "../../neos.config.json";
 
-export default function JoinRoom() {
+export default function Login() {
   const [player, setPlayer] = useState("");
   const [passWd, setPasswd] = useState("");
   const [ip, setIp] = useState("");
@@ -65,7 +66,8 @@ export default function JoinRoom() {
       </div>
       <div className="sign-up__actions clearfix">
         <p>
-          Don't know how to play? <a href="https://neos.doc/">Player Guide</a>
+          Don't know how to play?{" "}
+          <a href="https://neos.moe/doc/">Player Guide</a>
           <span className="fa fa-arrow-right"></span>
         </p>
       </div>
@@ -85,7 +87,10 @@ export default function JoinRoom() {
           </li>
           <li>
             <a href="https://mycard.moe/">
-              <img src="/assets/mycard.icon.png" style={{ width: "25%" }} />
+              <img
+                src={`${NeosConfig.assetsPath}/mycard.icon.png`}
+                style={{ width: "25%" }}
+              />
             </a>
           </li>
           <li>

src/ui/Neos.tsx

-import React from "react";
-import JoinRoom from "./JoinRoom";
-import WaitRoomV2 from "./WaitRoom";
-import MoraV2 from "./Mora";
+import React, { Suspense } from "react";
 import { Routes, Route } from "react-router-dom";
-import NeosDuel from "./Duel/main";
+import LazyLoad, { Loading } from "./LazyLoad";
+
+const Login = React.lazy(() => import("./Login"));
+const WaitRoom = React.lazy(() => import("./WaitRoom"));
+const Mora = React.lazy(() => import("./Mora"));
+const NeosDuel = React.lazy(() => import("./Duel/main"));
 
 export default function () {
-  // FIXME: 这里Mora/Duel路由应该由每个房间指定一个路径
   return (
     <Routes>
-      <Route path="/" element={<JoinRoom />} />
-      <Route path="/room/:player/:passWd/:ip" element={<WaitRoomV2 />} />
-      <Route path="/mora/:player/:passWd/:ip" element={<MoraV2 />} />
-      <Route path="/duel/:player/:passWd/:ip" element={<NeosDuel />} />
+      <Route path="/" element={<LazyLoad lazy={<Login />} />} />
+      <Route
+        path="/room/:player/:passWd/:ip"
+        element={
+          <Suspense fallback={<Loading />}>
+            <WaitRoom />
+          </Suspense>
+        }
+      />
+      <Route
+        path="/mora/:player/:passWd/:ip"
+        element={
+          <Suspense fallback={<Loading />}>
+            <Mora />
+          </Suspense>
+        }
+      />
+      <Route
+        path="/duel/:player/:passWd/:ip"
+        element={
+          <Suspense fallback={<Loading />}>
+            <NeosDuel />
+          </Suspense>
+        }
+      />
     </Routes>
   );
 }