refactor: duel css config

src/ui/Duel/PlayMat/Card/springs/attack.ts

@@ -4,7 +4,7 @@ import { easings } from "@react-spring/web";
 import { ygopro } from "@/api";
 import { CardType, isMe } from "@/stores";
 
-import { matConfig } from "../../utils";
+import { matConfig } from "@/ui/Shared";
 import type { SpringApi } from "./types";
 import { asyncStart } from "./utils";
 
@@ -25,7 +25,7 @@ export const attack = async (props: {
   let rz = current.rz;
   if (directAttack) {
     // 直接攻击
-    y = BLOCK_HEIGHT_M.value + BLOCK_HEIGHT_S.value;
+    y = BLOCK_HEIGHT_M + BLOCK_HEIGHT_S;
 
     if (isMe(card.location.controller)) {
       y = -y;
@@ -35,11 +35,11 @@ export const attack = async (props: {
     const { controller, sequence } = target;
     if (sequence > 4) {
       // 额外怪兽区
-      x = (sequence > 5 ? 1 : -1) * (BLOCK_WIDTH.value + COL_GAP.value);
+      x = (sequence > 5 ? 1 : -1) * (BLOCK_WIDTH + COL_GAP);
       y = 0;
     } else {
-      x = (sequence - 2) * (BLOCK_WIDTH.value + COL_GAP.value);
-      y = BLOCK_HEIGHT_M.value + ROW_GAP.value;
+      x = (sequence - 2) * (BLOCK_WIDTH + COL_GAP);
+      y = BLOCK_HEIGHT_M + ROW_GAP;
     }
 
     if (!isMe(controller)) {
@@ -61,7 +61,7 @@ export const attack = async (props: {
   await asyncStart(api)({
     y:
       current.y +
-      (BLOCK_HEIGHT_M.value / 2) * (isMe(card.location.controller) ? 1 : -1),
+      (BLOCK_HEIGHT_M / 2) * (isMe(card.location.controller) ? 1 : -1),
     rz,
   });
   // 加速前冲

src/ui/Duel/PlayMat/Card/springs/moveToDeck.ts

 import { ygopro } from "@/api";
 import { isMe } from "@/stores";
 
-import { matConfig } from "../../utils";
+import { matConfig } from "@/ui/Shared";
 import { asyncStart, type MoveFunc } from "./utils";
 
 const {
@@ -24,21 +24,21 @@ export const moveToDeck: MoveFunc = async (props) => {
   const { location } = card;
   const { controller, zone, sequence } = location;
 
-  const rightX = DECK_OFFSET_X.value + 2 * (BLOCK_WIDTH.value + COL_GAP.value);
+  const rightX = DECK_OFFSET_X + 2 * (BLOCK_WIDTH + COL_GAP);
   const leftX = -rightX;
   const bottomY =
-    DECK_OFFSET_Y.value +
-    2 * BLOCK_HEIGHT_M.value +
-    BLOCK_HEIGHT_S.value +
-    2 * ROW_GAP.value -
-    BLOCK_HEIGHT_S.value;
+    DECK_OFFSET_Y +
+    2 * BLOCK_HEIGHT_M +
+    BLOCK_HEIGHT_S +
+    2 * ROW_GAP -
+    BLOCK_HEIGHT_S;
   const topY = -bottomY;
   let x = isMe(controller) ? rightX : leftX;
   let y = isMe(controller) ? bottomY : topY;
   if (zone === EXTRA) {
     x = isMe(controller) ? leftX : rightX;
   }
-  let rz = zone === EXTRA ? DECK_ROTATE_Z.value : -DECK_ROTATE_Z.value;
+  let rz = zone === EXTRA ? DECK_ROTATE_Z : -DECK_ROTATE_Z;
   rz += isMe(controller) ? 0 : 180;
   const z = sequence;
 
@@ -49,6 +49,6 @@ export const moveToDeck: MoveFunc = async (props) => {
     rz,
     ry: isMe(controller) ? (zone === DECK ? 180 : 0) : 180,
     zIndex: z,
-    height: DECK_CARD_HEIGHT.value,
+    height: DECK_CARD_HEIGHT,
   });
 };

src/ui/Duel/PlayMat/Card/springs/moveToGround.ts

@@ -3,7 +3,7 @@ import { easings } from "@react-spring/web";
 import { ygopro } from "@/api";
 import { isMe } from "@/stores";
 
-import { matConfig } from "../../utils";
+import { matConfig } from "@/ui/Shared";
 import { asyncStart, type MoveFunc } from "./utils";
 
 const {
@@ -26,11 +26,9 @@ export const moveToGround: MoveFunc = async (props) => {
 
   // 根据zone计算卡片的宽度
   const cardWidth =
-    zone === SZONE
-      ? BLOCK_HEIGHT_S.value * CARD_RATIO.value
-      : BLOCK_HEIGHT_M.value * CARD_RATIO.value;
+    zone === SZONE ? BLOCK_HEIGHT_S * CARD_RATIO : BLOCK_HEIGHT_M * CARD_RATIO;
 
-  let height = zone === SZONE ? BLOCK_HEIGHT_S.value : BLOCK_HEIGHT_M.value;
+  let height = zone === SZONE ? BLOCK_HEIGHT_S : BLOCK_HEIGHT_M;
 
   // 首先计算 x 和 y
   let x = 0,
@@ -39,27 +37,24 @@ export const moveToGround: MoveFunc = async (props) => {
     case SZONE: {
       if (sequence === 5) {
         // 场地魔法
-        x = -(
-          3 * (BLOCK_WIDTH.value + COL_GAP.value) -
-          (BLOCK_WIDTH.value - cardWidth) / 2
-        );
-        y = BLOCK_HEIGHT_M.value + ROW_GAP.value;
+        x = -(3 * (BLOCK_WIDTH + COL_GAP) - (BLOCK_WIDTH - cardWidth) / 2);
+        y = BLOCK_HEIGHT_M + ROW_GAP;
       } else {
-        x = (sequence - 2) * (BLOCK_WIDTH.value + COL_GAP.value);
+        x = (sequence - 2) * (BLOCK_WIDTH + COL_GAP);
         y =
-          2 * (BLOCK_HEIGHT_M.value + ROW_GAP.value) -
-          (BLOCK_HEIGHT_M.value - BLOCK_HEIGHT_S.value) / 2;
+          2 * (BLOCK_HEIGHT_M + ROW_GAP) -
+          (BLOCK_HEIGHT_M - BLOCK_HEIGHT_S) / 2;
       }
       break;
     }
     case MZONE: {
       if (sequence > 4) {
         // 额外怪兽区
-        x = (sequence > 5 ? 1 : -1) * (BLOCK_WIDTH.value + COL_GAP.value);
+        x = (sequence > 5 ? 1 : -1) * (BLOCK_WIDTH + COL_GAP);
         y = 0;
       } else {
-        x = (sequence - 2) * (BLOCK_WIDTH.value + COL_GAP.value);
-        y = BLOCK_HEIGHT_M.value + ROW_GAP.value;
+        x = (sequence - 2) * (BLOCK_WIDTH + COL_GAP);
+        y = BLOCK_HEIGHT_M + ROW_GAP;
       }
       break;
     }
@@ -76,9 +71,8 @@ export const moveToGround: MoveFunc = async (props) => {
     ygopro.CardPosition.FACEDOWN_DEFENSE,
     ygopro.CardPosition.FACEUP_DEFENSE,
   ].includes(position ?? 5);
-  height = defence ? BLOCK_WIDTH.value : height;
-  let rz = isMe(controller) ? 0 : 180;
-  rz += defence ? 90 : 0;
+  height = defence ? BLOCK_WIDTH : height;
+  const rz = (isMe(controller) ? 0 : 180) + (defence ? 90 : 0);
 
   const ry = [
     ygopro.CardPosition.FACEDOWN,

src/ui/Duel/PlayMat/Card/springs/moveToHand.ts

 import { ygopro } from "@/api";
 import { cardStore, isMe } from "@/stores";
 
-import { matConfig } from "../../utils";
+import { matConfig } from "@/ui/Shared";
 import { asyncStart, type MoveFunc } from "./utils";
 
 const {
@@ -22,27 +22,23 @@ export const moveToHand: MoveFunc = async (props) => {
   // 手卡会有很复杂的计算...
   const hand_circle_center_x = 0;
   const hand_circle_center_y =
-    1 * BLOCK_HEIGHT_M.value +
-    1 * BLOCK_HEIGHT_S.value +
-    2 * ROW_GAP.value +
-    (HAND_MARGIN_TOP.value +
-      HAND_CARD_HEIGHT.value +
-      HAND_CIRCLE_CENTER_OFFSET_Y.value);
-  const hand_card_width = CARD_RATIO.value * HAND_CARD_HEIGHT.value;
+    1 * BLOCK_HEIGHT_M +
+    1 * BLOCK_HEIGHT_S +
+    2 * ROW_GAP +
+    (HAND_MARGIN_TOP + HAND_CARD_HEIGHT + HAND_CIRCLE_CENTER_OFFSET_Y);
+  const hand_card_width = CARD_RATIO * HAND_CARD_HEIGHT;
   const THETA =
     2 *
     Math.atan(
-      hand_card_width /
-        2 /
-        (HAND_CIRCLE_CENTER_OFFSET_Y.value + HAND_CARD_HEIGHT.value)
+      hand_card_width / 2 / (HAND_CIRCLE_CENTER_OFFSET_Y + HAND_CARD_HEIGHT)
     ) *
     0.9;
   // 接下来计算每一张手卡
   const hands_length = cardStore.at(HAND, controller).length;
   const angle = (sequence - (hands_length - 1) / 2) * THETA;
-  const r = HAND_CIRCLE_CENTER_OFFSET_Y.value + HAND_CARD_HEIGHT.value / 2;
+  const r = HAND_CIRCLE_CENTER_OFFSET_Y + HAND_CARD_HEIGHT / 2;
   const negativeX = Math.sin(angle) * r;
-  const negativeY = Math.cos(angle) * r + HAND_CARD_HEIGHT.value / 2;
+  const negativeY = Math.cos(angle) * r + HAND_CARD_HEIGHT / 2;
   const x = hand_circle_center_x + negativeX * (isMe(controller) ? 1 : -1);
   const y = hand_circle_center_y - negativeY + 140; // FIXME: 常量 是手动调的 这里肯定有问题 有空来修
 
@@ -54,8 +50,8 @@ export const moveToHand: MoveFunc = async (props) => {
     z: sequence + 5,
     rz: isMe(controller) ? _rz : 180 - _rz,
     ry: isMe(controller) ? 0 : 180,
-    height: HAND_CARD_HEIGHT.value,
+    height: HAND_CARD_HEIGHT,
     zIndex: sequence,
-    // rx: -PLANE_ROTATE_X.value,
+    // rx: -PLANE_ROTATE_X,
   });
 };

src/ui/Duel/PlayMat/Card/springs/moveToOutside.ts

 import { ygopro } from "@/api";
 import { isMe } from "@/stores";
 
-import { matConfig } from "../../utils";
+import { matConfig } from "@/ui/Shared";
 import { asyncStart, type MoveFunc } from "./utils";
 
 const { BLOCK_WIDTH, BLOCK_HEIGHT_M, BLOCK_HEIGHT_S, COL_GAP, ROW_GAP } =
@@ -14,8 +14,8 @@ export const moveToOutside: MoveFunc = async (props) => {
   // report
   const { zone, controller, position, sequence } = card.location;
 
-  let x = (BLOCK_WIDTH.value + COL_GAP.value) * 3,
-    y = zone === GRAVE ? BLOCK_HEIGHT_M.value + ROW_GAP.value : 0;
+  let x = (BLOCK_WIDTH + COL_GAP) * 3,
+    y = zone === GRAVE ? BLOCK_HEIGHT_M + ROW_GAP : 0;
   if (!isMe(controller)) {
     x = -x;
     y = -y;
@@ -24,7 +24,7 @@ export const moveToOutside: MoveFunc = async (props) => {
     x,
     y,
     z: 0,
-    height: BLOCK_HEIGHT_S.value,
+    height: BLOCK_HEIGHT_S,
     rz: isMe(controller) ? 0 : 180,
     ry: [ygopro.CardPosition.FACEDOWN].includes(position) ? 180 : 0,
     subZ: 100,

src/ui/Duel/PlayMat/utils/cssConfig.ts

-// type CSSValue = [number, string] | number;
-
-export type CSSConfig = Record<string, { value: number; unit: UNIT }>;
-
-/** 转为CSS变量: BOARD_ROTATE_Z -> --board-rotate-z */
-export const toCssProperties = (config: CSSConfig) =>
-  Object.entries(config)
-    .map(
-      ([k, v]) =>
-        [
-          `--${k
-            .split("_")
-            .map((s) => s.toLowerCase())
-            .join("-")}`,
-          `${v.value}${v.unit}`,
-        ] as [string, string]
-    )
-    .reduce((acc, cur) => [...acc, cur], [] as [string, string][]);
-
-enum UNIT {
-  PX = "px",
-  DEG = "deg",
-  NONE = "",
-}
-
-export const matConfig = {
-  PERSPECTIVE: {
-    value: 1500,
-    unit: UNIT.PX,
-  },
-  PLANE_ROTATE_X: {
-    value: 0,
-    unit: UNIT.DEG,
-  },
-  BLOCK_WIDTH: {
-    value: 120,
-    unit: UNIT.PX,
-  },
-  BLOCK_HEIGHT_M: {
-    value: 120,
-    unit: UNIT.PX,
-  }, // 主要怪兽区
-  BLOCK_HEIGHT_S: {
-    value: 110,
-    unit: UNIT.PX,
-  }, // 魔法陷阱区
-  ROW_GAP: {
-    value: 10,
-    unit: UNIT.PX,
-  },
-  COL_GAP: {
-    value: 10,
-    unit: UNIT.PX,
-  },
-  CARD_RATIO: {
-    value: 5.9 / 8.6,
-    unit: UNIT.NONE,
-  },
-  HAND_MARGIN_TOP: {
-    value: 0,
-    unit: UNIT.PX,
-  },
-  HAND_CIRCLE_CENTER_OFFSET_Y: {
-    value: 2000,
-    unit: UNIT.PX,
-  },
-  HAND_CARD_HEIGHT: {
-    value: 130,
-    unit: UNIT.PX,
-  },
-  DECK_OFFSET_X: {
-    value: 140,
-    unit: UNIT.PX,
-  },
-  DECK_OFFSET_Y: {
-    value: 80,
-    unit: UNIT.PX,
-  },
-  DECK_ROTATE_Z: {
-    value: 30,
-    unit: UNIT.DEG,
-  },
-  DECK_CARD_HEIGHT: {
-    value: 120,
-    unit: UNIT.PX,
-  },
-};
-
-toCssProperties(matConfig).forEach(([k, v]) => {
-  document.body.style.setProperty(k, v);
-});

src/ui/Duel/PlayMat/utils/index.ts

-export * from "./cssConfig";

src/ui/Shared/css.ts

+// 此文件目的是在js和CSS之间共享一些变量，并且这些变量是0运行时的。
+type CSSConfig = Record<string, [number, UNIT]>;
+
+/** 转为CSS变量: BOARD_ROTATE_Z -> --board-rotate-z */
+const toCssProperties = (config: CSSConfig) =>
+  Object.entries(config)
+    .map(
+      ([k, v]) =>
+        [
+          `--${k
+            .split("_")
+            .map((s) => s.toLowerCase())
+            .join("-")}`,
+          `${v[0]}${v[1]}`,
+        ] as [string, string]
+    )
+    .reduce((acc, cur) => [...acc, cur], [] as [string, string][]);
+
+enum UNIT {
+  PX = "px",
+  DEG = "deg",
+  NONE = "",
+}
+
+const matConfigWithUnit: CSSConfig = {
+  PERSPECTIVE: [1500, UNIT.PX],
+  PLANE_ROTATE_X: [0, UNIT.DEG],
+  BLOCK_WIDTH: [120, UNIT.PX],
+  BLOCK_HEIGHT_M: [120, UNIT.PX],
+  BLOCK_HEIGHT_S: [110, UNIT.PX], // 魔法陷阱区
+  ROW_GAP: [10, UNIT.PX],
+  COL_GAP: [10, UNIT.PX],
+  CARD_RATIO: [5.9 / 8.6, UNIT.NONE],
+  HAND_MARGIN_TOP: [0, UNIT.PX],
+  HAND_CIRCLE_CENTER_OFFSET_Y: [2000, UNIT.PX],
+  HAND_CARD_HEIGHT: [130, UNIT.PX],
+  DECK_OFFSET_X: [140, UNIT.PX],
+  DECK_OFFSET_Y: [80, UNIT.PX],
+  DECK_ROTATE_Z: [30, UNIT.DEG],
+  DECK_CARD_HEIGHT: [120, UNIT.PX],
+};
+
+export const matConfig = Object.keys(matConfigWithUnit).reduce(
+  (prev, key) => ({ ...prev, [key]: matConfigWithUnit[key][0] }),
+  {} as Record<string, number>
+);
+
+toCssProperties(matConfigWithUnit).forEach(([k, v]) => {
+  document.body.style.setProperty(k, v);
+});

src/ui/Shared/index.ts

 export * from "./YgoCard";
+export * from "./css";