Merge branch 'opt/move/focus' into 'main'

Opt/move/focus

See merge request mycard/Neos!184

src/service/duel/gameMsg.ts

@@ -55,216 +55,223 @@ const ActiveList = [
   "select_yes_no",
 ];
 
-export default function handleGameMsg(pb: ygopro.YgoStocMsg) {
-  const msg = pb.stoc_game_msg;
-
-  if (ActiveList.includes(msg.gameMsg)) {
-    matStore.waiting = false;
-  }
-
-  switch (msg.gameMsg) {
-    case "start": {
-      onMsgStart(msg.start);
-
-      break;
-    }
-    case "draw": {
-      onMsgDraw(msg.draw);
-
-      break;
-    }
-    case "new_turn": {
-      onMsgNewTurn(msg.new_turn);
-
-      break;
-    }
-    case "new_phase": {
-      onMsgNewPhase(msg.new_phase);
-
-      break;
-    }
-    case "hint": {
-      onMsgHint(msg.hint);
-
-      break;
-    }
-    case "select_idle_cmd": {
-      onMsgSelectIdleCmd(msg.select_idle_cmd);
-
-      break;
-    }
-    case "select_place": {
-      onMsgSelectPlace(msg.select_place);
-
-      break;
-    }
-    case "move": {
-      onMsgMove(msg.move);
-
-      break;
-    }
-    case "select_card": {
-      onMsgSelectCard(msg.select_card);
-
-      break;
-    }
-    case "select_chain": {
-      onMsgSelectChain(msg.select_chain);
-
-      break;
-    }
-    case "select_effect_yn": {
-      onMsgSelectEffectYn(msg.select_effect_yn);
-
-      break;
-    }
-    case "select_position": {
-      onMsgSelectPosition(msg.select_position);
-
-      break;
-    }
-    case "select_option": {
-      onMsgSelectOption(msg.select_option);
-
-      break;
-    }
-    case "shuffle_hand": {
-      onMsgShuffleHand(msg.shuffle_hand);
-
-      break;
-    }
-    case "select_battle_cmd": {
-      onMsgSelectBattleCmd(msg.select_battle_cmd);
-
-      break;
-    }
-    case "pos_change": {
-      onMsgPosChange(msg.pos_change);
-
-      break;
-    }
-    case "select_unselect_card": {
-      onMsgSelectUnselectCard(msg.select_unselect_card);
-
-      break;
-    }
-    case "select_yes_no": {
-      onMsgSelectYesNo(msg.select_yes_no);
-
-      break;
-    }
-    case "update_hp": {
-      onMsgUpdateHp(msg.update_hp);
-
-      break;
-    }
-    case "win": {
-      onMsgWin(msg.win);
-
-      break;
-    }
-    case "wait": {
-      onMsgWait(msg.wait);
-
-      break;
-    }
-    case "update_data": {
-      onMsgUpdateData(msg.update_data);
-
-      break;
-    }
-    case "reload_field": {
-      onMsgReloadField(msg.reload_field);
-
-      break;
-    }
-    case "select_sum": {
-      onMsgSelectSum(msg.select_sum);
-
-      break;
-    }
-    case "select_tribute": {
-      onMsgSelectTribute(msg.select_tribute);
-
-      break;
-    }
-    case "update_counter": {
-      onMsgUpdateCounter(msg.update_counter);
-
-      break;
-    }
-    case "select_counter": {
-      onMsgSelectCounter(msg.select_counter);
-
-      break;
-    }
-    case "sort_card": {
-      onMsgSortCard(msg.sort_card);
-
-      break;
-    }
-    case "set": {
-      onMsgSet(msg.set);
-
-      break;
-    }
-    case "swap": {
-      onMsgSwap(msg.swap);
-
-      break;
-    }
-    case "attack": {
-      onMsgAttack(msg.attack);
+const TIME_GAP = 200;
 
-      break;
-    }
-    case "attack_disable": {
-      onMsgAttackDisable(msg.attack_disable);
-
-      break;
-    }
-    case "chaining": {
-      onMsgChaining(msg.chaining);
-
-      break;
-    }
-    case "summoning": {
-      onMsgSummoning(msg.summoning);
-
-      break;
-    }
-    case "summoned": {
-      onMsgSummoned(msg.summoned);
-
-      break;
-    }
-    case "flip_summoning": {
-      onMsgFlipSummoning(msg.flip_summoning);
-
-      break;
-    }
-    case "flip_summoned": {
-      onMsgFilpSummoned(msg.flip_summoned);
-
-      break;
-    }
-    case "sp_summoning": {
-      onMsgSpSummoning(msg.sp_summoning);
-
-      break;
-    }
-    case "sp_summoned": {
-      onMsgSpSummoned(msg.sp_summoned);
-
-      break;
-    }
-    case "unimplemented": {
-      onUnimplemented(msg.unimplemented);
-
-      break;
-    }
-    default: {
-      break;
-    }
-  }
+export default function handleGameMsg(pb: ygopro.YgoStocMsg) {
+  // 防止MSG更新太频繁，做下控频
+  //
+  // TODO: 细化需要控频的MSG
+  setTimeout(() => {
+    const msg = pb.stoc_game_msg;
+
+    if (ActiveList.includes(msg.gameMsg)) {
+      matStore.waiting = false;
+    }
+
+    switch (msg.gameMsg) {
+      case "start": {
+        onMsgStart(msg.start);
+
+        break;
+      }
+      case "draw": {
+        onMsgDraw(msg.draw);
+
+        break;
+      }
+      case "new_turn": {
+        onMsgNewTurn(msg.new_turn);
+
+        break;
+      }
+      case "new_phase": {
+        onMsgNewPhase(msg.new_phase);
+
+        break;
+      }
+      case "hint": {
+        onMsgHint(msg.hint);
+
+        break;
+      }
+      case "select_idle_cmd": {
+        onMsgSelectIdleCmd(msg.select_idle_cmd);
+
+        break;
+      }
+      case "select_place": {
+        onMsgSelectPlace(msg.select_place);
+
+        break;
+      }
+      case "move": {
+        onMsgMove(msg.move);
+
+        break;
+      }
+      case "select_card": {
+        onMsgSelectCard(msg.select_card);
+
+        break;
+      }
+      case "select_chain": {
+        onMsgSelectChain(msg.select_chain);
+
+        break;
+      }
+      case "select_effect_yn": {
+        onMsgSelectEffectYn(msg.select_effect_yn);
+
+        break;
+      }
+      case "select_position": {
+        onMsgSelectPosition(msg.select_position);
+
+        break;
+      }
+      case "select_option": {
+        onMsgSelectOption(msg.select_option);
+
+        break;
+      }
+      case "shuffle_hand": {
+        onMsgShuffleHand(msg.shuffle_hand);
+
+        break;
+      }
+      case "select_battle_cmd": {
+        onMsgSelectBattleCmd(msg.select_battle_cmd);
+
+        break;
+      }
+      case "pos_change": {
+        onMsgPosChange(msg.pos_change);
+
+        break;
+      }
+      case "select_unselect_card": {
+        onMsgSelectUnselectCard(msg.select_unselect_card);
+
+        break;
+      }
+      case "select_yes_no": {
+        onMsgSelectYesNo(msg.select_yes_no);
+
+        break;
+      }
+      case "update_hp": {
+        onMsgUpdateHp(msg.update_hp);
+
+        break;
+      }
+      case "win": {
+        onMsgWin(msg.win);
+
+        break;
+      }
+      case "wait": {
+        onMsgWait(msg.wait);
+
+        break;
+      }
+      case "update_data": {
+        onMsgUpdateData(msg.update_data);
+
+        break;
+      }
+      case "reload_field": {
+        onMsgReloadField(msg.reload_field);
+
+        break;
+      }
+      case "select_sum": {
+        onMsgSelectSum(msg.select_sum);
+
+        break;
+      }
+      case "select_tribute": {
+        onMsgSelectTribute(msg.select_tribute);
+
+        break;
+      }
+      case "update_counter": {
+        onMsgUpdateCounter(msg.update_counter);
+
+        break;
+      }
+      case "select_counter": {
+        onMsgSelectCounter(msg.select_counter);
+
+        break;
+      }
+      case "sort_card": {
+        onMsgSortCard(msg.sort_card);
+
+        break;
+      }
+      case "set": {
+        onMsgSet(msg.set);
+
+        break;
+      }
+      case "swap": {
+        onMsgSwap(msg.swap);
+
+        break;
+      }
+      case "attack": {
+        onMsgAttack(msg.attack);
+
+        break;
+      }
+      case "attack_disable": {
+        onMsgAttackDisable(msg.attack_disable);
+
+        break;
+      }
+      case "chaining": {
+        onMsgChaining(msg.chaining);
+
+        break;
+      }
+      case "summoning": {
+        onMsgSummoning(msg.summoning);
+
+        break;
+      }
+      case "summoned": {
+        onMsgSummoned(msg.summoned);
+
+        break;
+      }
+      case "flip_summoning": {
+        onMsgFlipSummoning(msg.flip_summoning);
+
+        break;
+      }
+      case "flip_summoned": {
+        onMsgFilpSummoned(msg.flip_summoned);
+
+        break;
+      }
+      case "sp_summoning": {
+        onMsgSpSummoning(msg.sp_summoning);
+
+        break;
+      }
+      case "sp_summoned": {
+        onMsgSpSummoned(msg.sp_summoned);
+
+        break;
+      }
+      case "unimplemented": {
+        onUnimplemented(msg.unimplemented);
+
+        break;
+      }
+      default: {
+        break;
+      }
+    }
+  }, TIME_GAP);
 }

src/service/duel/move.ts

@@ -72,10 +72,17 @@ export default (move: MsgMove) => {
       matStore
         .in(to.location)
         .of(to.controler)
-        .setOccupant(to.sequence, code, to.position);
+        .setOccupant(to.sequence, code, to.position, true);
       if (uuid) {
         matStore.in(to.location).of(to.controler)[to.sequence].uuid = uuid;
       }
+
+      setTimeout(
+        () =>
+          (matStore.in(to.location).of(to.controler)[to.sequence].focus =
+            false),
+        500 // use config
+      );
       break;
     }
     case ygopro.CardZone.REMOVED:
@@ -94,7 +101,7 @@ export default (move: MsgMove) => {
         matStore
           .in(to.location)
           .of(to.controler)
-          .insert(uuid, code, to.sequence);
+          .insert(uuid, code, to.sequence, ygopro.CardPosition.FACEUP_ATTACK);
       }
       break;
     }

src/service/duel/timeLimit.ts

 import { sendTimeConfirm, ygopro } from "@/api";
 import { matStore } from "@/stores";
 
+const TIME_GAP = 200; // TODO: use config
+
 export default function handleTimeLimit(timeLimit: ygopro.StocTimeLimit) {
-  matStore.timeLimits.set(timeLimit.player, timeLimit.left_time);
-  sendTimeConfirm();
+  setTimeout(() => {
+    matStore.timeLimits.set(timeLimit.player, timeLimit.left_time);
+    sendTimeConfirm();
+  }, TIME_GAP);
 }

src/stores/matStore/store.ts

@@ -29,7 +29,8 @@ class CardArray extends Array<CardState> implements ArrayCardState {
     uuid: string,
     controller: number,
     id: number,
-    position?: ygopro.CardPosition
+    position?: ygopro.CardPosition,
+    focus?: boolean
   ) => ({
     uuid,
     occupant: await fetchCard(id, true),
@@ -39,6 +40,7 @@ class CardArray extends Array<CardState> implements ArrayCardState {
       position:
         position == undefined ? ygopro.CardPosition.FACEUP_ATTACK : position,
     },
+    focus,
     counters: {},
     idleInteractivities: [],
   });
@@ -50,18 +52,26 @@ class CardArray extends Array<CardState> implements ArrayCardState {
     uuid: string,
     id: number,
     sequence: number,
-    position?: ygopro.CardPosition
+    position?: ygopro.CardPosition,
+    focus?: boolean
   ) {
-    const card = await this.genCard(uuid, this.getController(), id, position);
+    const card = await this.genCard(
+      uuid,
+      this.getController(),
+      id,
+      position,
+      focus
+    );
     this.splice(sequence, 0, card);
   }
   async add(
     data: { uuid: string; id: number }[],
-    position?: ygopro.CardPosition
+    position?: ygopro.CardPosition,
+    focus?: boolean
   ) {
     const cards = await Promise.all(
       data.map(async ({ uuid, id }) =>
-        this.genCard(uuid, this.getController(), id, position)
+        this.genCard(uuid, this.getController(), id, position, focus)
       )
     );
     this.splice(this.length, 0, ...cards);
@@ -69,10 +79,12 @@ class CardArray extends Array<CardState> implements ArrayCardState {
   async setOccupant(
     sequence: number,
     id: number,
-    position?: ygopro.CardPosition
+    position?: ygopro.CardPosition,
+    focus?: boolean
   ) {
     const meta = await fetchCard(id);
     const target = this[sequence];
+    target.focus = focus;
     target.occupant = meta;
     if (position) {
       target.location.position = position;

src/stores/matStore/types.ts

@@ -20,18 +20,21 @@ export interface DuelFieldState extends Array<CardState> {
     uuid: string,
     id: number,
     sequence: number,
-    position?: ygopro.CardPosition
+    position?: ygopro.CardPosition,
+    focus?: boolean
   ) => Promise<void>;
   /** 在末尾添加卡片 */
   add: (
     data: { uuid: string; id: number }[],
-    position?: ygopro.CardPosition
+    position?: ygopro.CardPosition,
+    focus?: boolean
   ) => Promise<void>;
   /** 设置占据这个位置的卡片信息 */
   setOccupant: (
     sequence: number,
     id: number,
-    position?: ygopro.CardPosition
+    position?: ygopro.CardPosition,
+    focus?: boolean
   ) => Promise<void>;
   /** 添加 idle 的交互性 */
   addIdleInteractivity: (
@@ -117,6 +120,7 @@ export interface CardState {
     zone: ygopro.CardZone; // 怪兽区/魔法陷阱区/手牌/卡组/墓地/除外区
     position?: ygopro.CardPosition; // 卡片的姿势：攻击还是守备
   }; // 位置信息，叫location的原因是为了和ygo对齐
+  focus?: boolean;
   idleInteractivities: Interactivity<number>[]; // IDLE状态下的互动信息
   placeInteractivity?: Interactivity<{
     controler: number;

src/styles/mat.css

@@ -100,7 +100,7 @@ button:focus-visible {
   --x: calc(var(--x-margin-left) + var(--x-padding));
   --y: calc(var(--r) * calc(var(--block-height) + var(--block-row-gap)));
   --z: calc(var(--h) * 1px);
-  transform: translateZ(var(--z)) rotateX(calc(var(--hand-rotate) * var(--vertical)));
+  transform: translateZ(var(--z)) rotateX(calc(var(--hand-rotate) * var(--vertical))) scale(var(--scale-focus));
   translate: var(--x) var(--y);
   rotate: calc(var(--opponent-deg) * (1 - var(--vertical)));
   transform-style: preserve-3d;

src/ui/Duel/PlayMat/Card.tsx

@@ -12,6 +12,9 @@ const ASSETS_BASE =
     ? NeosConfig.assetsPath
     : import.meta.env.BASE_URL + NeosConfig.assetsPath;
 
+const FOCUS_SCALE = 2.5;
+const FOCUS_HIGHT = 100;
+
 export const Card: React.FC<{
   code: number;
   row: number;
@@ -23,6 +26,7 @@ export const Card: React.FC<{
   vertical?: boolean;
   highlight?: boolean;
   fly?: boolean;
+  focus?: boolean;
   transTime?: number;
   onClick?: MouseEventHandler<{}>;
   style?: CSSProperties;
@@ -37,6 +41,7 @@ export const Card: React.FC<{
   vertical = false,
   highlight = false,
   fly = false,
+  focus = false,
   transTime = 0.3,
   onClick,
   style = {},
@@ -48,7 +53,7 @@ export const Card: React.FC<{
     })}
     style={
       {
-        "--h": hight,
+        "--h": focus ? FOCUS_HIGHT : hight,
         "--r": row,
         "--c": col,
         "--shadow": hight > 0 ? 1 : 0,
@@ -56,6 +61,7 @@ export const Card: React.FC<{
         "--vertical": vertical ? 1 : 0,
         "--trans-time": `${transTime}s`,
         "--highlight-on": highlight ? 1 : 0,
+        "--scale-focus": focus ? FOCUS_SCALE : 1,
         "--card-img": facedown
           ? `url(${ASSETS_BASE + "/card_back.jpg"})`
           : `url(${NeosConfig.cardImgUrl + "/" + code + ".jpg"})`,

src/ui/Duel/PlayMat/Mat.tsx

@@ -95,13 +95,15 @@ export const Mat = () => {
               col={cardStateToCol(card)}
               hight={CardStateToHigh(card)}
               defense={
-                card.location.position === YgoPosition.DEFENSE ||
-                card.location.position === YgoPosition.FACEDOWN_DEFENSE ||
-                card.location.position === YgoPosition.FACEUP_DEFENSE
+                !card.focus &&
+                (card.location.position === YgoPosition.DEFENSE ||
+                  card.location.position === YgoPosition.FACEDOWN_DEFENSE ||
+                  card.location.position === YgoPosition.FACEUP_DEFENSE)
               }
               facedown={CardStateToFaceDown(card)}
-              vertical={card.location.zone == YgoZone.HAND}
+              vertical={card.location.zone == YgoZone.HAND || card.focus}
               highlight={card.idleInteractivities.length > 0}
+              focus={card.focus}
               opponent={card.opponent}
               onClick={
                 card.location.zone == YgoZone.SZONE ||
@@ -121,6 +123,7 @@ export const Mat = () => {
 };
 
 function cardStateToRow(state: RenderCard): number {
+  if (state.focus) return 2;
   if (state.opponent) {
     switch (state.location.zone) {
       case YgoZone.EXTRA:
@@ -161,6 +164,7 @@ function cardStateToRow(state: RenderCard): number {
 }
 
 function cardStateToCol(state: RenderCard): number {
+  if (state.focus) return 2;
   if (state.opponent) {
     switch (state.location.zone) {
       case YgoZone.EXTRA:
@@ -223,6 +227,7 @@ function CardStateToHigh(state: RenderCard): number {
 }
 
 function CardStateToFaceDown(state: RenderCard): boolean {
+  if (state.focus && state.occupant?.id !== 0) return false;
   const position = state.location.position;
 
   return (