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

Opt/move/focus

See merge request mycard/Neos!184

src/service/duel/gameMsg.ts

@@ -55,7 +55,13 @@ const ActiveList = [
   "select_yes_no",
 ];
 
+const TIME_GAP = 200;
+
 export default function handleGameMsg(pb: ygopro.YgoStocMsg) {
+  // 防止MSG更新太频繁，做下控频
+  //
+  // TODO: 细化需要控频的MSG
+  setTimeout(() => {
     const msg = pb.stoc_game_msg;
 
     if (ActiveList.includes(msg.gameMsg)) {
@@ -267,4 +273,5 @@ export default function handleGameMsg(pb: ygopro.YgoStocMsg) {
         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) {
+  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.focus &&
+                (card.location.position === YgoPosition.DEFENSE ||
                   card.location.position === YgoPosition.FACEDOWN_DEFENSE ||
-                card.location.position === YgoPosition.FACEUP_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 (