adjust mat styles

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

@@ -13,6 +13,7 @@ const {
   HAND_MARGIN_TOP,
   HAND_CARD_HEIGHT,
   HAND_CIRCLE_CENTER_OFFSET_Y,
+  HAND_MAT_OFFSET_Y,
 } = matConfig;
 
 const { HAND } = ygopro.CardZone;
@@ -41,7 +42,7 @@ export const moveToHand: MoveFunc = async (props) => {
   const negativeX = Math.sin(angle) * r;
   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: 常量 是手动调的 这里肯定有问题 有空来修
+  const y = hand_circle_center_y - negativeY + HAND_MAT_OFFSET_Y;
 
   const _rz = (angle * 180) / Math.PI;
 

src/ui/Shared/css.ts

 // 此文件目的是在js和CSS之间共享一些变量，并且这些变量是0运行时的。
-interface CSSConfig {
-  readonly [key: string]: [number, UNIT];
-}
+type CSSConfig = [string, [number, UNIT]][];
+
+// 以1280长度的viewpoint为基准进行缩放
+const VIEW_POINT_WIDTH_BASE = 1280;
 
 /** 转为CSS变量: BOARD_ROTATE_Z -> --board-rotate-z */
 const toCssProperties = (config: CSSConfig) =>
-  Object.entries(config)
+  config
     .map(
       ([k, v]) =>
         [
@@ -18,13 +19,21 @@ const toCssProperties = (config: CSSConfig) =>
     )
     .reduce((acc, cur) => [...acc, cur], [] as [string, string][]);
 
+const pxTransform = (value: number, unit: UNIT) => {
+  if (unit === UNIT.PX && window.innerWidth < VIEW_POINT_WIDTH_BASE) {
+    return [value * 0.5, unit];
+  } else {
+    return [value, unit];
+  }
+};
+
 enum UNIT {
   PX = "px",
   DEG = "deg",
   NONE = "",
 }
 
-const matConfigWithUnit = {
+const _matConfigWithUnit: Record<string, [number, UNIT]> = {
   PERSPECTIVE: [1500, UNIT.PX],
   PLANE_ROTATE_X: [0, UNIT.DEG],
   BLOCK_WIDTH: [120, UNIT.PX],
@@ -36,21 +45,26 @@ const matConfigWithUnit = {
   HAND_MARGIN_TOP: [0, UNIT.PX],
   HAND_CIRCLE_CENTER_OFFSET_Y: [2000, UNIT.PX],
   HAND_CARD_HEIGHT: [130, UNIT.PX],
+  HAND_MAT_OFFSET_Y: [140, 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],
   CARD_HEIGHT_O: [100, UNIT.PX], // 场地魔法/墓地/除外的卡片高度
   BLOCK_OUTSIDE_OFFSET_X: [15, UNIT.PX],
-} satisfies CSSConfig;
+};
+
+const matConfigWithUnit = Object.entries(_matConfigWithUnit).map(
+  ([k, [value, unit]]) => [k, pxTransform(value, unit) as [number, UNIT]],
+) satisfies CSSConfig;
 
-export const matConfig = Object.keys(matConfigWithUnit).reduce(
-  (prev, key) => ({
+export const matConfig = matConfigWithUnit.reduce(
+  (prev, [key, value]) => ({
     ...prev,
     // @ts-ignore
-    [key]: matConfigWithUnit[key][0],
+    [key]: value[0],
   }),
-  {} as Record<keyof typeof matConfigWithUnit, number>,
+  {} as Record<keyof typeof _matConfigWithUnit, number>,
 );
 
 toCssProperties(matConfigWithUnit).forEach(([k, v]) => {