Merge branch 'optimize/code' into 'main'

Optimize/code

See merge request mycard/Neos!112

neos.config.json

 {
-  "assetsPath": "/neos-assets"
+  "assetsPath": "/neos-assets",
+  "cardImgUrl": "https://cdn02.moecube.com:444/images/ygopro-images-zh-CN",
+  "ui": {
+    "ground": {
+      "width": 9.9,
+      "height": 8
+    },
+    "card": {
+      "transform": {
+        "x": 0.8,
+        "y": 1,
+        "z": 0.05
+      },
+      "rotation": {
+        "x": 1.55,
+        "y": 0,
+        "z": 0
+      },
+      "reverseRotation": {
+        "x": 1.55,
+        "y": 3.1,
+        "z": 0
+      },
+      "defenceRotation": {
+        "x": 1.55,
+        "y": 1.55,
+        "z": 0
+      },
+      "handRotation": {
+        "x": 1,
+        "y": 0,
+        "z": 0
+      },
+      "handHoverScaling": {
+        "x": 1.2,
+        "y": 1.2,
+        "z": 1
+      },
+      "floating": 0.02
+    }
+  }
 }

src/config/ui.ts

-/*
- * SimpleDuelPlateImpl的一些配置
- *
- * */
-
-import * as BABYLON from "@babylonjs/core";
-
-export const GroundShape = () => {
-  return { width: 9.9, height: 8 };
-};
-export const CardSlotShape = () => {
-  return { width: 0.8, height: 1, depth: 0.05 };
-};
-export const DeckSlotShape = () => {
-  return { width: 0.8, height: 1, depth: 0.5 };
-};
-export const ExtraDeckSlotShape = () => {
-  return { width: 0.8, height: 1, depth: 0.2 };
-};
-export const SingleSlotShape = { width: 0.8, height: 1, depth: 0.2 };
-export const CemeterySlotShape = () => {
-  return { width: 0.8, height: 1, depth: 0.2 };
-};
-export const ExclusionSlotShape = () => {
-  return { width: 0.8, height: 1, depth: 0.2 };
-};
-export const FieldSlotShape = () => {
-  return { width: 0.8, height: 1, depth: 0.2 };
-};
-export const CardSlotRotation = (reverse: boolean) => {
-  return reverse
-    ? new BABYLON.Vector3(1.55, 3.1, 0)
-    : new BABYLON.Vector3(1.55, 0, 0);
-};
-export const CardSlotDefenceRotation = () => {
-  return new BABYLON.Vector3(1.55, 1.55, 0);
-};
-export const DeckSlotRotation = () => {
-  return new BABYLON.Vector3(1.55, 0, 0);
-};
-export const CemeterySlotRotation = () => {
-  return new BABYLON.Vector3(1.55, 0, 0);
-};
-export const ExclusionSlotRotation = () => {
-  return new BABYLON.Vector3(1.55, 0, 0);
-};
-export const FieldSlotRotation = () => {
-  return new BABYLON.Vector3(1.55, 0, 0);
-};
-
-// 浮空
-export const Floating = 0.02;
-
-// 手牌
-export const HandShape = () => {
-  return { width: 0.8, height: 1 };
-};
-export const HandRotation = () => {
-  return new BABYLON.Vector3(1, 0, 0);
-};
-export const HandColor = () => {
-  return BABYLON.Color3.White();
-};
-export const HandHoverScaling = () => {
-  return new BABYLON.Vector3(1.2, 1.2, 1);
-};
-export const HandHoverOutScaling = () => {
-  return new BABYLON.Vector3(1, 1, 1);
-};
-export const HandInteractShape = () => {
-  return { width: 0.8, height: 0.2 };
-};
-export const HandInteractFontSize = 200;

src/ui/Duel/cemetery.tsx

 import * as BABYLON from "@babylonjs/core";
-import * as CONFIG from "../../config/ui";
 import {
   selectMeCemetery,
   selectOpCemetery,
 } from "../../reducers/duel/cemeretySlice";
 import { useAppSelector } from "../../hook";
 import SingleSlot, { Depth } from "./singleSlot";
+import { cardSlotRotation } from "./util";
+import NeosConfig from "../../../neos.config.json";
 
 const Cemeteries = () => {
   const meCemetery = useAppSelector(selectMeCemetery).inner;
@@ -16,12 +17,12 @@ const Cemeteries = () => {
       <SingleSlot
         state={meCemetery}
         position={cemeteryPosition(0, meCemetery.length)}
-        rotation={CONFIG.CardSlotRotation(false)}
+        rotation={cardSlotRotation(false)}
       />
       <SingleSlot
         state={opCemetery}
         position={cemeteryPosition(1, opCemetery.length)}
-        rotation={CONFIG.CardSlotRotation(true)}
+        rotation={cardSlotRotation(true)}
       />
     </>
   );
@@ -29,7 +30,7 @@ const Cemeteries = () => {
 
 const cemeteryPosition = (player: number, cemeteryLength: number) => {
   const x = player == 0 ? 3.2 : -3.2;
-  const y = (Depth * cemeteryLength) / 2 + CONFIG.Floating;
+  const y = (Depth * cemeteryLength) / 2 + NeosConfig.ui.card.floating;
   const z = player == 0 ? -2.0 : 2.0;
 
   return new BABYLON.Vector3(x, y, z);

src/ui/Duel/checkCardModal.tsx

@@ -19,6 +19,7 @@ import {
   sendSelectCardResponse,
   sendSelectChainResponse,
 } from "../../api/ocgcore/ocgHelper";
+import NeosConfig from "../../../neos.config.json";
 
 const CheckCardModal = () => {
   const dispatch = store.dispatch;
@@ -117,7 +118,7 @@ const CheckCardModal = () => {
                         cover={
                           <img
                             alt={option.code.toString()}
-                            src={`https://cdn02.moecube.com:444/images/ygopro-images-zh-CN/${option.code}.jpg`}
+                            src={`${NeosConfig.cardImgUrl}/${option.code}.jpg`}
                             style={{ width: 100 }}
                           />
                         }

src/ui/Duel/checkCardModalV2.tsx

@@ -18,6 +18,7 @@ import {
   setCheckCardModalV2IsOpen,
   setCheckCardModalV2ResponseAble,
 } from "../../reducers/duel/mod";
+import NeosConfig from "../../../neos.config.json";
 
 const CheckCardModalV2 = () => {
   const dispatch = store.dispatch;
@@ -83,7 +84,7 @@ const CheckCardModalV2 = () => {
                   cover={
                     <img
                       alt={option.code.toString()}
-                      src={`https://cdn02.moecube.com:444/images/ygopro-images-zh-CN/${option.code}.jpg`}
+                      src={`${NeosConfig.cardImgUrl}/${option.code}.jpg`}
                       style={{ width: 100 }}
                     />
                   }
@@ -105,7 +106,7 @@ const CheckCardModalV2 = () => {
                 cover={
                   <img
                     alt={option.code.toString()}
-                    src={`https://cdn02.moecube.com:444/images/ygopro-images-zh-CN/${option.code}.jpg`}
+                    src={`${NeosConfig.cardImgUrl}/${option.code}.jpg`}
                   />
                 }
               />

src/ui/Duel/deck.tsx

 import * as BABYLON from "@babylonjs/core";
-import * as CONFIG from "../../config/ui";
 import { useAppSelector } from "../../hook";
 import { selectMeDeck, selectOpDeck } from "../../reducers/duel/deckSlice";
 import SingleSlot, { Depth } from "./singleSlot";
+import { cardSlotRotation } from "./util";
+import NeosConfig from "../../../neos.config.json";
 
 const CommonDeck = () => {
   const meDeck = useAppSelector(selectMeDeck).inner;
@@ -13,12 +14,12 @@ const CommonDeck = () => {
       <SingleSlot
         state={meDeck}
         position={deckPosition(0, meDeck.length)}
-        rotation={CONFIG.CardSlotRotation(false)}
+        rotation={cardSlotRotation(false)}
       />
       <SingleSlot
         state={opDeck}
         position={deckPosition(1, opDeck.length)}
-        rotation={CONFIG.CardSlotRotation(true)}
+        rotation={cardSlotRotation(true)}
       />
     </>
   );
@@ -26,7 +27,7 @@ const CommonDeck = () => {
 
 const deckPosition = (player: number, deckLength: number) => {
   const x = player == 0 ? 3.2 : -3.2;
-  const y = (Depth * deckLength) / 2 + CONFIG.Floating;
+  const y = (Depth * deckLength) / 2 + NeosConfig.ui.card.floating;
   const z = player == 0 ? -3.3 : 3.3;
 
   return new BABYLON.Vector3(x, y, z);

src/ui/Duel/exclusion.tsx

 import * as BABYLON from "@babylonjs/core";
-import * as CONFIG from "../../config/ui";
 import { useAppSelector } from "../../hook";
 import {
   selectMeExclusion,
   selectopExclusion,
 } from "../../reducers/duel/exclusionSlice";
 import SingleSlot, { Depth } from "./singleSlot";
+import NeosConfig from "../../../neos.config.json";
+import { cardSlotRotation } from "./util";
 
 const Exclusion = () => {
   const meExclusion = useAppSelector(selectMeExclusion).inner;
@@ -16,12 +17,12 @@ const Exclusion = () => {
       <SingleSlot
         state={meExclusion}
         position={exclusionPosition(0, meExclusion.length)}
-        rotation={CONFIG.CardSlotRotation(false)}
+        rotation={cardSlotRotation(false)}
       />
       <SingleSlot
         state={opExclusion}
         position={exclusionPosition(1, opExclusion.length)}
-        rotation={CONFIG.CardSlotRotation(true)}
+        rotation={cardSlotRotation(true)}
       />
     </>
   );
@@ -29,7 +30,7 @@ const Exclusion = () => {
 
 const exclusionPosition = (player: number, exclusionLength: number) => {
   const x = player == 0 ? 3.2 : -3.2;
-  const y = (Depth * exclusionLength) / 2 + CONFIG.Floating;
+  const y = (Depth * exclusionLength) / 2 + NeosConfig.ui.card.floating;
   const z = player == 0 ? -0.7 : 0.7;
 
   return new BABYLON.Vector3(x, y, z);

src/ui/Duel/extraDeck.tsx

 import SingleSlot, { Depth } from "./singleSlot";
 import * as BABYLON from "@babylonjs/core";
-import * as CONFIG from "../../config/ui";
 import { useAppSelector } from "../../hook";
 import {
   selectMeExtraDeck,
   selectOpExtraDeck,
 } from "../../reducers/duel/extraDeckSlice";
+import NeosConfig from "../../../neos.config.json";
+import { cardSlotRotation } from "./util";
 
 const ExtraDeck = () => {
   const meExtraDeck = useAppSelector(selectMeExtraDeck).inner;
@@ -16,12 +17,12 @@ const ExtraDeck = () => {
       <SingleSlot
         state={meExtraDeck}
         position={extraDeckPosition(0, meExtraDeck.length)}
-        rotation={CONFIG.CardSlotRotation(false)}
+        rotation={cardSlotRotation(false)}
       />
       <SingleSlot
         state={opExtraDeck}
         position={extraDeckPosition(1, opExtraDeck.length)}
-        rotation={CONFIG.CardSlotRotation(true)}
+        rotation={cardSlotRotation(true)}
       />
     </>
   );
@@ -29,7 +30,7 @@ const ExtraDeck = () => {
 
 const extraDeckPosition = (player: number, deckLength: number) => {
   const x = player == 0 ? -3.3 : 3.3;
-  const y = (Depth & deckLength) / 2 + CONFIG.Floating;
+  const y = (Depth & deckLength) / 2 + NeosConfig.ui.card.floating;
   const z = player == 0 ? -3.3 : 3.3;
 
   return new BABYLON.Vector3(x, y, z);

src/ui/Duel/field.tsx

 import * as BABYLON from "@babylonjs/core";
-import * as CONFIG from "../../config/ui";
 import { useAppSelector } from "../../hook";
 import { selectMeMagics, selectOpMagics } from "../../reducers/duel/magicSlice";
 import { clearMagicPlaceInteractivities } from "../../reducers/duel/mod";
 import FixedSlot from "./fixedSlot";
 import { Depth } from "./singleSlot";
+import NeosConfig from "../../../neos.config.json";
+import { cardSlotRotation } from "./util";
 
 const Field = () => {
   const meField = useAppSelector(selectMeMagics).inner.find(
@@ -21,7 +22,7 @@ const Field = () => {
           state={meField}
           sequence={0}
           position={fieldPosition(0)}
-          rotation={CONFIG.CardSlotRotation(false)}
+          rotation={cardSlotRotation(false)}
           clearPlaceInteractivitiesAction={clearMagicPlaceInteractivities}
         />
       ) : (
@@ -32,7 +33,7 @@ const Field = () => {
           state={opField}
           sequence={0}
           position={fieldPosition(1)}
-          rotation={CONFIG.CardSlotRotation(true)}
+          rotation={cardSlotRotation(true)}
           clearPlaceInteractivitiesAction={clearMagicPlaceInteractivities}
         />
       ) : (
@@ -44,7 +45,7 @@ const Field = () => {
 
 const fieldPosition = (player: number) => {
   const x = player == 0 ? -3.3 : 3.3;
-  const y = Depth / 2 + CONFIG.Floating;
+  const y = Depth / 2 + NeosConfig.ui.card.floating;
   const z = player == 0 ? -2.0 : 2.0;
 
   return new BABYLON.Vector3(x, y, z);

src/ui/Duel/fixedSlot.tsx

 import * as BABYLON from "@babylonjs/core";
-import * as CONFIG from "../../config/ui";
 import { store } from "../../store";
 import { CardState } from "../../reducers/duel/generic";
 import { useRef } from "react";
@@ -16,7 +15,13 @@ import { ActionCreatorWithPayload } from "@reduxjs/toolkit";
 import { interactTypeToString } from "./util";
 import NeosConfig from "../../../neos.config.json";
 
-const shape = CONFIG.CardSlotShape();
+const transform = NeosConfig.ui.card.transform;
+const defenceRotation = NeosConfig.ui.card.defenceRotation;
+const cardDefenceRotation = new BABYLON.Vector3(
+  defenceRotation.x,
+  defenceRotation.y,
+  defenceRotation.z
+);
 
 const FixedSlot = (props: {
   state: CardState;
@@ -32,7 +37,7 @@ const FixedSlot = (props: {
     props.state.location.position === ygopro.CardPosition.DEFENSE ||
     props.state.location.position === ygopro.CardPosition.FACEUP_DEFENSE ||
     props.state.location.position === ygopro.CardPosition.FACEDOWN_DEFENSE
-      ? props.deffenseRotation || CONFIG.CardSlotDefenceRotation()
+      ? props.deffenseRotation || cardDefenceRotation
       : props.rotation;
   const edgesWidth = 2.0;
   const edgesColor = BABYLON.Color4.FromColor3(BABYLON.Color3.Yellow());
@@ -58,7 +63,7 @@ const FixedSlot = (props: {
         );
         dispatch(
           setCardModalImgUrl(
-            `https://cdn02.moecube.com:444/images/ygopro-images-zh-CN/${props.state.occupant.id}.jpg`
+            `${NeosConfig.cardImgUrl}/${props.state.occupant.id}.jpg`
           )
         );
         dispatch(
@@ -82,8 +87,8 @@ const FixedSlot = (props: {
     <plane
       name={`fixedslot-${props.sequence}`}
       ref={planeRef}
-      width={shape.width}
-      height={shape.height}
+      width={transform.x}
+      height={transform.y}
       position={props.position}
       rotation={rotation}
       enableEdgesRendering
@@ -102,7 +107,7 @@ const FixedSlot = (props: {
             ? faceDown
               ? 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`
+                  `${NeosConfig.cardImgUrl}/${props.state.occupant.id}.jpg`
                 )
             : new BABYLON.Texture(`${NeosConfig.assetsPath}/card_slot.png`)
         }

src/ui/Duel/hands.tsx

 import * as BABYLON from "@babylonjs/core";
 import { useAppSelector } from "../../hook";
 import { selectMeHands, selectOpHands } from "../../reducers/duel/handsSlice";
-import * as CONFIG from "../../config/ui";
 import { CardState } from "../../reducers/duel/generic";
 import {
   setCardModalImgUrl,
@@ -17,10 +16,12 @@ import { useSpring, animated } from "./spring";
 import { zip, interactTypeToString } from "./util";
 import NeosConfig from "../../../neos.config.json";
 
-const groundShape = CONFIG.GroundShape();
+const groundShape = NeosConfig.ui.ground;
 const left = -(groundShape.width / 2);
-const handShape = CONFIG.HandShape();
-const handRotation = CONFIG.HandRotation();
+const handShape = NeosConfig.ui.card.transform;
+const rotation = NeosConfig.ui.card.handRotation;
+const handRotation = new BABYLON.Vector3(rotation.x, rotation.y, rotation.z);
+const hoverScaling = NeosConfig.ui.card.handHoverScaling;
 
 const Hands = () => {
   const meHands = useAppSelector(selectMeHands).inner;
@@ -38,9 +39,7 @@ const Hands = () => {
             sequence={idx}
             position={position}
             rotation={handRotation}
-            cover={(id) =>
-              `https://cdn02.moecube.com:444/images/ygopro-images-zh-CN/${id}.jpg`
-            }
+            cover={(id) => `${NeosConfig.cardImgUrl}/${id}.jpg`}
           />
         );
       })}
@@ -67,7 +66,11 @@ const CHand = (props: {
   rotation: BABYLON.Vector3;
   cover: (id: number) => string;
 }) => {
-  const hoverScale = CONFIG.HandHoverScaling();
+  const hoverScale = new BABYLON.Vector3(
+    hoverScaling.x,
+    hoverScaling.y,
+    hoverScaling.z
+  );
   const defaultScale = new BABYLON.Vector3(1, 1, 1);
   const edgesWidth = 2.0;
   const edgesColor = BABYLON.Color4.FromColor3(BABYLON.Color3.Yellow());
@@ -113,9 +116,7 @@ const CHand = (props: {
         setCardModalText([state.occupant?.text.name, state.occupant?.text.desc])
       );
       dispatch(
-        setCardModalImgUrl(
-          `https://cdn02.moecube.com:444/images/ygopro-images-zh-CN/${state.occupant?.id}.jpg`
-        )
+        setCardModalImgUrl(`${NeosConfig.cardImgUrl}/${state.occupant?.id}.jpg`)
       );
       dispatch(
         setCardModalInteractivies(
@@ -138,8 +139,8 @@ const CHand = (props: {
       <animated.plane
         name={`hand-${props.sequence}`}
         ref={planeRef}
-        width={handShape.width}
-        height={handShape.height}
+        width={handShape.x}
+        height={handShape.y}
         scaling={hovered ? hoverScale : defaultScale}
         position={spring.position}
         rotation={props.rotation}
@@ -166,7 +167,7 @@ const handPositons = (player: number, hands: CardState[]) => {
   const gap = groundShape.width / (hands.length - 1);
   const x = (idx: number) =>
     player == 0 ? left + gap * idx : -left - gap * idx;
-  const y = handShape.height / 2;
+  const y = handShape.y / 2;
   const z =
     player == 0 ? -(groundShape.height / 2) - 1 : groundShape.height / 2 + 1;
 

src/ui/Duel/magics.tsx

 import * as BABYLON from "@babylonjs/core";
-import * as CONFIG from "../../config/ui";
 import { selectMeMagics, selectOpMagics } from "../../reducers/duel/magicSlice";
 import { CardState } from "../../reducers/duel/generic";
 import { useAppSelector } from "../../hook";
 import { zip } from "./util";
 import FixedSlot from "./fixedSlot";
 import { clearMagicPlaceInteractivities } from "../../reducers/duel/mod";
+import NeosConfig from "../../../neos.config.json";
+import { cardSlotRotation } from "./util";
 
 // TODO: use config
 const left = -2.15;
 const gap = 1.05;
-const shape = CONFIG.CardSlotShape();
+const transform = NeosConfig.ui.card.transform;
 
 const Magics = () => {
   const meMagics = useAppSelector(selectMeMagics).inner;
@@ -29,7 +30,7 @@ const Magics = () => {
               key={sequence}
               sequence={sequence}
               position={position}
-              rotation={CONFIG.CardSlotRotation(false)}
+              rotation={cardSlotRotation(false)}
               clearPlaceInteractivitiesAction={clearMagicPlaceInteractivities}
             />
           );
@@ -43,7 +44,7 @@ const Magics = () => {
               key={sequence}
               sequence={sequence}
               position={position}
-              rotation={CONFIG.CardSlotRotation(true)}
+              rotation={cardSlotRotation(true)}
               clearPlaceInteractivitiesAction={clearMagicPlaceInteractivities}
             />
           );
@@ -55,7 +56,7 @@ const Magics = () => {
 const magicPositions = (player: number, magics: CardState[]) => {
   const x = (sequence: number) =>
     player == 0 ? left + gap * sequence : -left - gap * sequence;
-  const y = shape.depth / 2 + CONFIG.Floating;
+  const y = transform.z / 2 + NeosConfig.ui.card.floating;
   const z = player == 0 ? -2.6 : 2.6;
 
   return magics.map((_, sequence) => new BABYLON.Vector3(x(sequence), y, z));

src/ui/Duel/main.tsx

@@ -2,7 +2,6 @@ import React, { useEffect, useRef } from "react";
 import { Engine, Scene } from "react-babylonjs";
 import { ReactReduxContext, Provider } from "react-redux";
 import * as BABYLON from "@babylonjs/core";
-import * as CONFIG from "../../config/ui";
 import Hands from "./hands";
 import Monsters from "./monsters";
 import CardModal from "./cardModal";
@@ -94,7 +93,7 @@ const Light = () => (
 );
 
 const Ground = () => {
-  const shape = CONFIG.GroundShape();
+  const shape = NeosConfig.ui.ground;
   const texture = new BABYLON.Texture(`${NeosConfig.assetsPath}/newfield.png`);
   texture.hasAlpha = true;
 

src/ui/Duel/monsters.tsx

 import * as BABYLON from "@babylonjs/core";
-import * as CONFIG from "../../config/ui";
 import { CardState } from "../../reducers/duel/generic";
 import "react-babylonjs";
 import { useAppSelector } from "../../hook";
@@ -10,8 +9,11 @@ import {
 import { zip } from "./util";
 import FixedSlot from "./fixedSlot";
 import { clearMonsterPlaceInteractivities } from "../../reducers/duel/mod";
+import NeosConfig from "../../../neos.config.json";
+import { cardSlotRotation, cardSlotDefenceRotation } from "./util";
 
-const shape = CONFIG.CardSlotShape();
+const transform = NeosConfig.ui.card.transform;
+const floating = NeosConfig.ui.card.floating;
 const left = -2.15; // TODO: config
 const gap = 1.05;
 
@@ -31,8 +33,8 @@ const Monsters = () => {
             key={sequence}
             sequence={sequence}
             position={position}
-            rotation={CONFIG.CardSlotRotation(false)}
-            deffenseRotation={CONFIG.CardSlotDefenceRotation()}
+            rotation={cardSlotRotation(false)}
+            deffenseRotation={cardSlotDefenceRotation()}
             clearPlaceInteractivitiesAction={clearMonsterPlaceInteractivities}
           />
         ))}
@@ -44,8 +46,8 @@ const Monsters = () => {
             key={sequence}
             sequence={sequence}
             position={position}
-            rotation={CONFIG.CardSlotRotation(true)}
-            deffenseRotation={CONFIG.CardSlotDefenceRotation()}
+            rotation={cardSlotRotation(true)}
+            deffenseRotation={cardSlotDefenceRotation()}
             clearPlaceInteractivitiesAction={clearMonsterPlaceInteractivities}
           />
         ))}
@@ -59,26 +61,16 @@ const ExtraMonsters = (props: {
   meMonsters: CardState[];
   opMonsters: CardState[];
 }) => {
-  const shape = CONFIG.CardSlotShape();
-
   const meLeft = props.meMonsters.find((_, sequence) => sequence == 5);
   const meRight = props.meMonsters.find((_, sequence) => sequence == 6);
   const opLeft = props.opMonsters.find((_, sequence) => sequence == 5);
   const opRight = props.opMonsters.find((_, sequence) => sequence == 6);
 
-  const leftPosition = new BABYLON.Vector3(
-    -1.1,
-    shape.depth / 2 + CONFIG.Floating,
-    0
-  );
-  const rightPosition = new BABYLON.Vector3(
-    1.1,
-    shape.depth / 2 + CONFIG.Floating,
-    0
-  );
+  const leftPosition = new BABYLON.Vector3(-1.1, transform.z / 2 + floating, 0);
+  const rightPosition = new BABYLON.Vector3(1.1, transform.z / 2 + floating, 0);
 
-  const meRotation = CONFIG.CardSlotRotation(false);
-  const opRotation = CONFIG.CardSlotRotation(true);
+  const meRotation = cardSlotRotation(false);
+  const opRotation = cardSlotRotation(true);
 
   return (
     <>
@@ -88,7 +80,7 @@ const ExtraMonsters = (props: {
           sequence={5}
           position={leftPosition}
           rotation={meRotation}
-          deffenseRotation={CONFIG.CardSlotDefenceRotation()}
+          deffenseRotation={cardSlotDefenceRotation()}
           clearPlaceInteractivitiesAction={clearMonsterPlaceInteractivities}
         />
       ) : (
@@ -100,7 +92,7 @@ const ExtraMonsters = (props: {
           sequence={6}
           position={rightPosition}
           rotation={meRotation}
-          deffenseRotation={CONFIG.CardSlotDefenceRotation()}
+          deffenseRotation={cardSlotDefenceRotation()}
           clearPlaceInteractivitiesAction={clearMonsterPlaceInteractivities}
         />
       ) : (
@@ -112,7 +104,7 @@ const ExtraMonsters = (props: {
           sequence={5}
           position={rightPosition}
           rotation={opRotation}
-          deffenseRotation={CONFIG.CardSlotDefenceRotation()}
+          deffenseRotation={cardSlotDefenceRotation()}
           clearPlaceInteractivitiesAction={clearMonsterPlaceInteractivities}
         />
       ) : (
@@ -124,7 +116,7 @@ const ExtraMonsters = (props: {
           sequence={6}
           position={leftPosition}
           rotation={opRotation}
-          deffenseRotation={CONFIG.CardSlotDefenceRotation()}
+          deffenseRotation={cardSlotDefenceRotation()}
           clearPlaceInteractivitiesAction={clearMonsterPlaceInteractivities}
         />
       ) : (
@@ -137,7 +129,7 @@ const ExtraMonsters = (props: {
 const monsterPositions = (player: number, monsters: CardState[]) => {
   const x = (sequence: number) =>
     player == 0 ? left + gap * sequence : -left - gap * sequence;
-  const y = shape.depth / 2 + CONFIG.Floating;
+  const y = transform.z / 2 + floating;
   const z = player == 0 ? -1.35 : 1.35;
 
   return monsters.map((_, sequence) => new BABYLON.Vector3(x(sequence), y, z));

src/ui/Duel/singleSlot.tsx

 import * as BABYLON from "@babylonjs/core";
-import * as CONFIG from "../../config/ui";
 import { CardState } from "../../reducers/duel/generic";
 import { store } from "../../store";
 import { useClick } from "./hook";
@@ -11,7 +10,7 @@ import {
 import { interactTypeToString } from "./util";
 import NeosConfig from "../../../neos.config.json";
 
-const shape = CONFIG.SingleSlotShape;
+const transform = NeosConfig.ui.card.transform;
 export const Depth = 0.005;
 
 const SingleSlot = (props: {
@@ -41,7 +40,7 @@ const SingleSlot = (props: {
                 return {
                   name: item.occupant?.text.name,
                   desc: item.occupant?.text.desc,
-                  imgUrl: `https://cdn02.moecube.com:444/images/ygopro-images-zh-CN/${item.occupant?.id}.jpg`,
+                  imgUrl: `${NeosConfig.cardImgUrl}/${item.occupant?.id}.jpg`,
                   interactivies: item.idleInteractivities.map((interactivy) => {
                     return {
                       desc: interactTypeToString(interactivy.interactType),
@@ -65,8 +64,8 @@ const SingleSlot = (props: {
       ref={boxRef}
       scaling={
         new BABYLON.Vector3(
-          shape.width,
-          shape.height,
+          transform.x,
+          transform.y,
           Depth * props.state.length
         )
       }

src/ui/Duel/util.ts

 import { InteractType } from "../../reducers/duel/generic";
+import NeosConfig from "../../../neos.config.json";
+import { Vector3 } from "@babylonjs/core";
 
 export function zip<S1, S2>(
   firstCollection: Array<S1>,
@@ -42,3 +44,27 @@ export function interactTypeToString(t: InteractType): string {
     }
   }
 }
+
+const cardRotation = NeosConfig.ui.card.rotation;
+const cardReverseRotation = NeosConfig.ui.card.reverseRotation;
+const cardDefenceRotation = NeosConfig.ui.card.defenceRotation;
+
+export function cardSlotRotation(reverse?: boolean) {
+  if (reverse) {
+    return new Vector3(
+      cardReverseRotation.x,
+      cardReverseRotation.y,
+      cardReverseRotation.z
+    );
+  } else {
+    return new Vector3(cardRotation.x, cardRotation.y, cardRotation.z);
+  }
+}
+
+export function cardSlotDefenceRotation() {
+  return new Vector3(
+    cardDefenceRotation.x,
+    cardDefenceRotation.y,
+    cardDefenceRotation.z
+  );
+}