alloc uuid

package-lock.json

@@ -46,6 +46,7 @@
         "@babylonjs/gui": "^5.54.0",
         "@types/google-protobuf": "^3.15.6",
         "@types/lodash-es": "^4.17.7",
+        "@types/uuid": "^9.0.1",
         "@typescript-eslint/eslint-plugin": "^5.57.1",
         "@typescript-eslint/parser": "^5.57.1",
         "@vitejs/plugin-react": "^3.1.0",
@@ -3711,6 +3712,12 @@
         "@types/jest": "*"
       }
     },
+    "node_modules/@types/uuid": {
+      "version": "9.0.1",
+      "resolved": "https://registry.npmjs.org/@types/uuid/-/uuid-9.0.1.tgz",
+      "integrity": "sha512-rFT3ak0/2trgvp4yYZo5iKFEPsET7vKydKF+VRCxlQ9bpheehyAJH89dAkaLEq/j/RZXJIqcgsmPJKUP1Z28HA==",
+      "dev": true
+    },
     "node_modules/@typescript-eslint/eslint-plugin": {
       "version": "5.57.1",
       "resolved": "https://registry.npmjs.org/@typescript-eslint/eslint-plugin/-/eslint-plugin-5.57.1.tgz",
@@ -31226,6 +31233,12 @@
         "@types/jest": "*"
       }
     },
+    "@types/uuid": {
+      "version": "9.0.1",
+      "resolved": "https://registry.npmjs.org/@types/uuid/-/uuid-9.0.1.tgz",
+      "integrity": "sha512-rFT3ak0/2trgvp4yYZo5iKFEPsET7vKydKF+VRCxlQ9bpheehyAJH89dAkaLEq/j/RZXJIqcgsmPJKUP1Z28HA==",
+      "dev": true
+    },
     "@typescript-eslint/eslint-plugin": {
       "version": "5.57.1",
       "resolved": "https://registry.npmjs.org/@typescript-eslint/eslint-plugin/-/eslint-plugin-5.57.1.tgz",

package.json

@@ -70,6 +70,7 @@
     "@babylonjs/gui": "^5.54.0",
     "@types/google-protobuf": "^3.15.6",
     "@types/lodash-es": "^4.17.7",
+    "@types/uuid": "^9.0.1",
     "@typescript-eslint/eslint-plugin": "^5.57.1",
     "@typescript-eslint/parser": "^5.57.1",
     "@vitejs/plugin-react": "^3.1.0",

src/service/duel/draw.ts

 import { ygopro } from "@/api";
 import { fetchEsHintMeta, matStore } from "@/stores";
+import { zip } from "@/ui/Duel/utils";
 
 export default (draw: ygopro.StocGameMessage.MsgDraw) => {
   fetchEsHintMeta({ originMsg: "玩家抽卡时" });
-  matStore.hands.of(draw.player).add(draw.cards);
+
+  const deckLength = matStore.decks.of(draw.player).length;
+  const drawLength = draw.cards.length;
+  const popCards = matStore.decks
+    .of(draw.player)
+    .slice(deckLength - drawLength, drawLength);
+
+  const data = zip(popCards, draw.cards).map(([pop, hand]) => {
+    return { uuid: pop.uuid, id: hand };
+  });
+
+  matStore.hands.of(draw.player).add(data);
 };

src/service/duel/move.ts

@@ -6,7 +6,7 @@ import { REASON_MATERIAL } from "../../common";
 
 const { matStore } = store;
 
-const OVERLAY_STACK: { code: number; sequence: number }[] = [];
+const OVERLAY_STACK: { uuid: string; code: number; sequence: number }[] = [];
 
 export default (move: MsgMove) => {
   const code = move.code;
@@ -14,9 +14,9 @@ export default (move: MsgMove) => {
   const to = move.to;
   const reason = move.reason;
 
-  // TODO: 如果后面做动画的话，要考虑DECK的情况。
-  // 现在不会对DECK做判断
+  // FIXME: 考虑超量素材的情况
 
+  let uuid;
   switch (from.location) {
     case ygopro.CardZone.MZONE:
     case ygopro.CardZone.SZONE: {
@@ -31,9 +31,15 @@ export default (move: MsgMove) => {
     case ygopro.CardZone.REMOVED:
     case ygopro.CardZone.GRAVE:
     case ygopro.CardZone.HAND:
+    case ygopro.CardZone.DECK:
     case ygopro.CardZone.EXTRA: {
       // 其余区域就是在list删掉这张卡
-      matStore.in(from.location).of(from.controler).remove(from.sequence);
+      const removed = matStore
+        .in(from.location)
+        .of(from.controler)
+        .remove(from.sequence);
+      uuid = removed.uuid;
+
       break;
     }
     // 仅仅去除超量素材
@@ -44,10 +50,6 @@ export default (move: MsgMove) => {
       }
       break;
     }
-    default: {
-      console.log(`Unhandled zone type ${from.location}`);
-      break;
-    }
   }
 
   switch (to.location) {
@@ -72,17 +74,19 @@ export default (move: MsgMove) => {
     case ygopro.CardZone.GRAVE:
     case ygopro.CardZone.EXTRA:
     case ygopro.CardZone.HAND: {
-      matStore
-        .in(to.location)
-        .of(to.controler)
-        .insert(code, to.sequence, to.position);
+      if (uuid) {
+        matStore
+          .in(to.location)
+          .of(to.controler)
+          .insert(uuid, code, to.sequence, to.position);
+      }
       break;
     }
     case ygopro.CardZone.OVERLAY: {
-      if (reason == REASON_MATERIAL) {
+      if (reason == REASON_MATERIAL && uuid) {
         // 超量素材在进行超量召唤时，若玩家未选择超量怪兽的位置，会“沉到决斗盘下面”，`reason`字段值是`REASON_MATERIAL`
         // 这时候将它们放到一个栈中，待超量怪兽的Move消息到来时从栈中获取超量素材补充到状态中
-        OVERLAY_STACK.push({ code, sequence: to.overlay_sequence });
+        OVERLAY_STACK.push({ uuid, code, sequence: to.overlay_sequence });
       } else {
         // 其他情况下，比如“宵星的机神 丁吉尔苏”的“补充超量素材”效果，直接更新状态中
         fetchOverlayMeta(to.controler, to.sequence, [code], true);

src/service/duel/reloadField.ts

+import { v4 as uuidv4 } from "uuid";
+
 import { ygopro } from "@/api";
 import { matStore } from "@/stores";
 
@@ -40,6 +42,7 @@ function reloadDuelField(
   const cards = zoneActions.map((action) => {
     // FIXME: OVERLAY
     return {
+      uuid: uuidv4(), // 因为是重连，所以这里重新申请UUID
       location: {
         controler: controller,
         zone: action.zone,

src/service/duel/shuffleHand.ts

 import { ygopro } from "@/api";
 import { matStore } from "@/stores";
+import { zip } from "@/ui/Duel/utils";
 
 type MsgShuffleHand = ygopro.StocGameMessage.MsgShuffleHand;
 
 export default (shuffleHand: MsgShuffleHand) => {
   const { hands: codes, player: controller } = shuffleHand;
 
+  const uuids = matStore.hands.of(controller).map((hand) => hand.uuid);
+  const data = zip(uuids, codes).map(([uuid, id]) => {
+    return { uuid, id };
+  });
+
   matStore.hands.of(controller).length = 0;
-  matStore.hands.of(controller).add(codes);
+  matStore.hands.of(controller).add(data);
 };

src/stores/matStore/store.ts

 import { cloneDeep } from "lodash-es";
+import { v4 as v4uuid } from "uuid";
 import { proxy } from "valtio";
 
 import { ygopro } from "@/api";
@@ -25,10 +26,12 @@ class CardArray extends Array<CardState> implements ArrayCardState {
   public zone: ygopro.CardZone = ygopro.CardZone.MZONE;
   public getController: () => number = () => 1;
   private genCard = async (
+    uuid: string,
     controller: number,
     id: number,
     position?: ygopro.CardPosition
   ) => ({
+    uuid,
     occupant: await fetchCard(id, true),
     location: {
       controler: controller,
@@ -41,15 +44,25 @@ class CardArray extends Array<CardState> implements ArrayCardState {
   });
   // methods
   remove(sequence: number) {
-    this.splice(sequence, 1);
+    return this.splice(sequence, 1)[0];
   }
-  async insert(sequence: number, id: number, position?: ygopro.CardPosition) {
-    const card = await this.genCard(this.getController(), id, position);
+  async insert(
+    uuid: string,
+    sequence: number,
+    id: number,
+    position?: ygopro.CardPosition
+  ) {
+    const card = await this.genCard(uuid, this.getController(), id, position);
     this.splice(sequence, 0, card);
   }
-  async add(ids: number[], position?: ygopro.CardPosition) {
+  async add(
+    data: { uuid: string; id: number }[],
+    position?: ygopro.CardPosition
+  ) {
     const cards = await Promise.all(
-      ids.map(async (id) => this.genCard(this.getController(), id, position))
+      data.map(async ({ uuid, id }) =>
+        this.genCard(uuid, this.getController(), id, position)
+      )
     );
     this.splice(this.length, 0, ...cards);
   }
@@ -131,6 +144,7 @@ const genBlock = (zone: ygopro.CardZone, n: number) =>
   Array(n)
     .fill(null)
     .map((_) => ({
+      uuid: v4uuid(), // WARN: 这里其实应该不分配UUID
       location: {
         zone,
       },

src/stores/matStore/types.ts

@@ -14,15 +14,19 @@ export interface BothSide<T> {
  */
 export interface DuelFieldState extends Array<CardState> {
   /** 移除特定位置的卡片 */
-  remove: (sequence: number) => void;
+  remove: (sequence: number) => CardState;
   /** 在指定位置插入卡片 */
   insert: (
+    uuid: string,
     id: number,
     sequence: number,
     position?: ygopro.CardPosition
   ) => Promise<void>;
   /** 在末尾添加卡片 */
-  add: (ids: number[], position?: ygopro.CardPosition) => Promise<void>;
+  add: (
+    data: { uuid: string; id: number }[],
+    position?: ygopro.CardPosition
+  ) => Promise<void>;
   /** 设置占据这个位置的卡片信息 */
   setOccupant: (
     sequence: number,
@@ -106,6 +110,7 @@ export interface InitInfo {
  * 以后会更名为 BlockState
  */
 export interface CardState {
+  uuid: string; // 一张卡的唯一标识
   occupant?: CardMeta; // 占据此位置的卡牌元信息
   location: {
     controler?: number; // 控制这个位置的玩家，0或1
@@ -118,7 +123,7 @@ export interface CardState {
     zone: ygopro.CardZone;
     sequence: number;
   }>; // 选择位置状态下的互动信息
-  overlay_materials?: CardMeta[]; // 超量素材
+  overlay_materials?: CardMeta[]; // 超量素材, FIXME: 这里需要加上UUID
   counters: { [type: number]: number }; // 指示器
   reload?: boolean; // 这个字段会在收到MSG_RELOAD_FIELD的时候设置成true，在收到MSG_UPDATE_DATE的时候设置成false
 }

src/ui/WaitRoom.tsx

@@ -22,6 +22,7 @@ import {
 import React, { useEffect, useState } from "react";
 import { useNavigate, useParams } from "react-router-dom";
 import rustInit from "rust-src";
+import { v4 as v4uuid } from "uuid";
 import { useSnapshot } from "valtio";
 import YGOProDeck from "ygopro-deck-encode";
 
@@ -144,7 +145,9 @@ const WaitRoom = () => {
   const onDeckReady = async (deck: IDeck) => {
     sendUpdateDeck(deck);
     store.matStore.extraDecks.me.add(
-      deck.extra?.reverse() || [],
+      (deck.extra?.reverse() || []).map((id) => {
+        return { uuid: v4uuid(), id };
+      }),
       ygopro.CardPosition.FACEDOWN_ATTACK
     );
     setChoseDeck(true);