fix: move to bugs; prototype bug; snap/store bug

src/service/duel/move.ts

@@ -94,7 +94,7 @@ export default (move: MsgMove, dispatch: AppDispatch) => {
     case ygopro.CardZone.GRAVE:
     case ygopro.CardZone.EXTRA:
     case ygopro.CardZone.HAND: {
-      matStore.hands.of(to.controler).insert(to.sequence, code);
+      matStore.in(to.location).of(to.controler).insert(to.sequence, code);
       break;
     }
     case ygopro.CardZone.OVERLAY: {

src/ui/Duel/Message/CardListModal.tsx

@@ -34,7 +34,7 @@ export const CardListModal = () => {
 
   const snapCardListModal = useSnapshot(cardListModal);
   const isOpen = snapCardListModal.isOpen;
-  const list = snapCardListModal.list;
+  const list = snapCardListModal.list as typeof cardListModal.list;
 
   const handleOkOrCancel = () => {
     dispatch(setCardListModalIsOpen(false));

src/ui/Duel/PlayMat/Field.tsx

@@ -23,9 +23,10 @@ export const Field = () => {
   // );
 
   // 这儿的find可能是出于某种考虑，以后再深思
-
-  const meField = useSnapshot(matStore.magics.me[5]);
-  const opField = useSnapshot(matStore.magics.op[5]);
+  const meFieldState = matStore.magics.me[5];
+  const meField = useSnapshot(meFieldState);
+  const opFieldState = matStore.magics.op[5];
+  const opField = useSnapshot(opFieldState);
 
   const clearPlaceInteractivitiesAction = (controller: number) =>
     matStore.magics.of(controller).clearPlaceInteractivity();
@@ -33,7 +34,7 @@ export const Field = () => {
     <>
       {meField ? (
         <FixedSlot
-          snapState={meField}
+          state={meFieldState}
           sequence={0}
           position={fieldPosition(0)}
           rotation={cardSlotRotation(false)}
@@ -45,7 +46,7 @@ export const Field = () => {
       )}
       {opField ? (
         <FixedSlot
-          snapState={opField}
+          state={opFieldState}
           sequence={0}
           position={fieldPosition(1)}
           rotation={cardSlotRotation(true)}

src/ui/Duel/PlayMat/FixedSlot.tsx

@@ -18,9 +18,13 @@ import {
 import { store } from "@/store";
 
 import { interactTypeToString } from "../utils";
-import { useSnapshot } from "valtio";
+import { useSnapshot, INTERNAL_Snapshot } from "valtio";
 
-import { clearAllIdleInteractivities, type CardState } from "@/valtioStores";
+import {
+  clearAllIdleInteractivities,
+  type CardState,
+  clearAllPlaceInteradtivities,
+} from "@/valtioStores";
 
 const NeosConfig = useConfig();
 
@@ -33,7 +37,7 @@ const cardDefenceRotation = new BABYLON.Vector3(
 );
 
 export const FixedSlot = (props: {
-  snapState: CardState;
+  state: CardState;
   sequence: number;
   position: BABYLON.Vector3;
   rotation: BABYLON.Vector3;
@@ -43,8 +47,8 @@ export const FixedSlot = (props: {
 }) => {
   const planeRef = useRef(null);
 
-  // const snapState = useSnapshot(props.state);
-  const snapState = props.snapState;
+  const snapState = useSnapshot(props.state);
+  // const snapState = props.state;
   const rotation =
     snapState.location.position === ygopro.CardPosition.DEFENSE ||
     snapState.location.position === ygopro.CardPosition.FACEUP_DEFENSE ||
@@ -66,8 +70,11 @@ export const FixedSlot = (props: {
         sendSelectPlaceResponse(snapState.placeInteractivity.response);
         // dispatch(props.clearPlaceInteractivitiesAction(0));
         // dispatch(props.clearPlaceInteractivitiesAction(1));
-        clearAllIdleInteractivities(0);
-        clearAllIdleInteractivities(1);
+        // 其实不应该从外面传进来的...
+        // props.clearPlaceInteractivitiesAction(0);
+        // props.clearPlaceInteractivitiesAction(1);
+        clearAllPlaceInteradtivities(0);
+        clearAllPlaceInteradtivities(1);
       } else if (snapState.occupant) {
         // 中央弹窗展示选中卡牌信息
         dispatch(setCardModalMeta(snapState.occupant));

src/ui/Duel/PlayMat/Hands.tsx

@@ -13,7 +13,7 @@ import {
 } from "@/reducers/duel/mod";
 import { store } from "@/store";
 import { matStore, type CardState, messageStore } from "@/valtioStores";
-import { useSnapshot } from "valtio";
+import { useSnapshot, INTERNAL_Snapshot } from "valtio";
 
 import { animated, useSpring } from "../spring";
 import { interactTypeToString, zip } from "../utils";
@@ -28,17 +28,20 @@ const handRotation = new BABYLON.Vector3(rotation.x, rotation.y, rotation.z);
 const hoverScaling = NeosConfig.ui.card.handHoverScaling;
 
 export const Hands = () => {
-  const meHands = useSnapshot(matStore.hands.me);
-  const opHands = useSnapshot(matStore.hands.op);
+  const meHandsState = matStore.hands.me;
+  const opHandsState = matStore.hands.op;
+  const meHandsSnap = useSnapshot(meHandsState);
+  const opHandsSnap = useSnapshot(opHandsState);
   // const meHands = useAppSelector(selectMeHands).inner;
   // const opHands = useAppSelector(selectOpHands).inner;
-
-  const meHandPositions = handPositons(0, meHands);
-  const opHandPositions = handPositons(1, opHands);
+  const meHandPositions = handPositons(0, meHandsSnap);
+  const opHandPositions = handPositons(1, opHandsSnap);
+  // const meHandPositions = handPositons(0, meHandsState);
+  // const opHandPositions = handPositons(1, opHandsState);
 
   return (
     <>
-      {zip(meHands, meHandPositions).map(([hand, position], idx) => {
+      {zip(meHandsState, meHandPositions).map(([hand, position], idx) => {
         return (
           <CHand
             key={idx}
@@ -46,11 +49,11 @@ export const Hands = () => {
             sequence={idx}
             position={position}
             rotation={handRotation}
-            cover={(id) => `${NeosConfig.cardImgUrl}/${id}.jpg`}
+            // cover={(id) => `${NeosConfig.cardImgUrl}/${id}.jpg`}
           />
         );
       })}
-      {zip(opHands, opHandPositions).map(([hand, position], idx) => {
+      {zip(opHandsState, opHandPositions).map(([hand, position], idx) => {
         return (
           <CHand
             key={idx}
@@ -58,7 +61,8 @@ export const Hands = () => {
             sequence={idx}
             position={position}
             rotation={handRotation}
-            cover={(_) => `${NeosConfig.assetsPath}/card_back.jpg`}
+            // cover={(_) => `${NeosConfig.assetsPath}/card_back.jpg`}
+            back={true}
           />
         );
       })}
@@ -71,7 +75,7 @@ const CHand = (props: {
   sequence: number;
   position: BABYLON.Vector3;
   rotation: BABYLON.Vector3;
-  cover: (id: number) => string;
+  back?: boolean;
 }) => {
   const hoverScale = new BABYLON.Vector3(
     hoverScaling.x,
@@ -168,7 +172,12 @@ const CHand = (props: {
         <animated.standardMaterial
           name={`hand-mat-${props.sequence}`}
           diffuseTexture={
-            new BABYLON.Texture(props.cover(state.occupant?.id || 0))
+            // new BABYLON.Texture(props.cover(state.occupant?.id || 0))
+            new BABYLON.Texture(
+              props.back
+                ? `${NeosConfig.assetsPath}/card_back.jpg`
+                : `${NeosConfig.cardImgUrl}/${state.occupant?.id || 0}.jpg`
+            )
           }
         />
       </animated.plane>
@@ -176,7 +185,10 @@ const CHand = (props: {
   );
 };
 
-const handPositons = (player: number, hands: CardState[]) => {
+const handPositons = (
+  player: number,
+  hands: INTERNAL_Snapshot<CardState[]>
+) => {
   const gap = groundShape.width / (hands.length - 1);
   const x = (idx: number) =>
     player == 0 ? left + gap * idx : -left - gap * idx;

src/ui/Duel/PlayMat/Magics.tsx

@@ -9,8 +9,8 @@ import { clearMagicPlaceInteractivities } from "@/reducers/duel/mod";
 import { cardSlotRotation, zip } from "../utils";
 import { FixedSlot } from "./FixedSlot";
 
-import { matStore, type CardState, messageStore } from "@/valtioStores";
-import { useSnapshot } from "valtio";
+import { matStore, type CardState } from "@/valtioStores";
+import { useSnapshot, type INTERNAL_Snapshot } from "valtio";
 
 const NeosConfig = useConfig();
 // TODO: use config
@@ -22,22 +22,26 @@ export const Magics = () => {
   // const meMagics = useAppSelector(selectMeMagics).inner;
   // const opMagics = useAppSelector(selectOpMagics).inner;
 
-  const meMagics = useSnapshot(matStore.magics.me);
-  const opMagics = useSnapshot(matStore.magics.op);
-  const meMagicPositions = magicPositions(0, meMagics);
-  const opMagicPositions = magicPositions(1, opMagics);
+  const meMagicState = matStore.magics.me;
+  const opMagicState = matStore.magics.op;
+  const meMagicsSnap = useSnapshot(meMagicState);
+  const opMagicsSnap = useSnapshot(opMagicState);
+  const meMagicPositions = magicPositions(0, meMagicsSnap);
+  const opMagicPositions = magicPositions(1, opMagicsSnap);
 
-  const clearPlaceInteractivitiesAction = (controller: number) =>
+  const clearPlaceInteractivitiesAction = (controller: number) => {
+    console.warn("magic clearPlaceInteractivitiesAction");
     matStore.magics.of(controller).clearPlaceInteractivity();
+  };
 
   return (
     <>
-      {zip(meMagics, meMagicPositions)
+      {zip(meMagicState, meMagicPositions)
         .slice(0, 5)
         .map(([magic, position], sequence) => {
           return (
             <FixedSlot
-              snapState={magic}
+              state={magic}
               key={sequence}
               sequence={sequence}
               position={position}
@@ -47,12 +51,12 @@ export const Magics = () => {
             />
           );
         })}
-      {zip(opMagics, opMagicPositions)
+      {zip(opMagicState, opMagicPositions)
         .slice(0, 5)
         .map(([magic, position], sequence) => {
           return (
             <FixedSlot
-              snapState={magic}
+              state={magic}
               key={sequence}
               sequence={sequence}
               position={position}
@@ -66,7 +70,10 @@ export const Magics = () => {
   );
 };
 
-const magicPositions = (player: number, magics: CardState[]) => {
+const magicPositions = (
+  player: number,
+  magics: INTERNAL_Snapshot<CardState[]>
+) => {
   const x = (sequence: number) =>
     player == 0 ? left + gap * sequence : -left - gap * sequence;
   const y = transform.z / 2 + NeosConfig.ui.card.floating;

src/ui/Duel/PlayMat/Monsters.tsx

@@ -15,7 +15,7 @@ import { cardSlotDefenceRotation, cardSlotRotation, zip } from "../utils";
 import { FixedSlot } from "./FixedSlot";
 
 import { matStore, type CardState, messageStore } from "@/valtioStores";
-import { useSnapshot } from "valtio";
+import { useSnapshot, type INTERNAL_Snapshot } from "valtio";
 
 const NeosConfig = useConfig();
 const transform = NeosConfig.ui.card.transform;
@@ -23,24 +23,29 @@ const floating = NeosConfig.ui.card.floating;
 const left = -2.15; // TODO: config
 const gap = 1.05;
 
-const clearPlaceInteractivitiesAction = (controller: number) =>
+const clearPlaceInteractivitiesAction = (controller: number) => {
+  console.warn("monster clearPlaceInteractivitiesAction");
   matStore.monsters.of(controller).clearPlaceInteractivity();
+};
 
 export const Monsters = () => {
   // const meMonsters = useAppSelector(selectMeMonsters).inner;
   // const opMonsters = useAppSelector(selectOpMonsters).inner;
-  const meMonsters = useSnapshot(matStore.monsters.me);
-  const opMonsters = useSnapshot(matStore.monsters.op);
-  const meMonsterPositions = monsterPositions(0, meMonsters);
-  const opMonsterPositions = monsterPositions(1, opMonsters);
+
+  const meMonstersStore = matStore.monsters.me;
+  const opMonstersStore = matStore.monsters.op;
+  const meMonstersSnap = useSnapshot(meMonstersStore);
+  const opMonstersSnap = useSnapshot(opMonstersStore);
+  const meMonsterPositions = monsterPositions(0, meMonstersSnap);
+  const opMonsterPositions = monsterPositions(1, opMonstersSnap);
 
   return (
     <>
-      {zip(meMonsters, meMonsterPositions)
+      {zip(meMonstersStore, meMonsterPositions)
         .slice(0, 5)
         .map(([monster, position], sequence) => (
           <FixedSlot
-            snapState={monster}
+            state={monster}
             key={sequence}
             sequence={sequence}
             position={position}
@@ -50,11 +55,11 @@ export const Monsters = () => {
             clearPlaceInteractivitiesAction={clearPlaceInteractivitiesAction}
           />
         ))}
-      {zip(opMonsters, opMonsterPositions)
+      {zip(opMonstersStore, opMonsterPositions)
         .slice(0, 5)
         .map(([monster, position], sequence) => (
           <FixedSlot
-            snapState={monster}
+            state={monster}
             key={sequence}
             sequence={sequence}
             position={position}
@@ -64,7 +69,10 @@ export const Monsters = () => {
             clearPlaceInteractivitiesAction={clearPlaceInteractivitiesAction}
           />
         ))}
-      <ExtraMonsters meMonsters={meMonsters} opMonsters={opMonsters} />
+      <ExtraMonsters
+        meMonsters={meMonstersStore}
+        opMonsters={meMonstersStore}
+      />
     </>
   );
 };
@@ -89,7 +97,7 @@ const ExtraMonsters = (props: {
     <>
       {meLeft ? (
         <FixedSlot
-          snapState={meLeft}
+          state={meLeft}
           sequence={5}
           position={leftPosition}
           rotation={meRotation}
@@ -102,7 +110,7 @@ const ExtraMonsters = (props: {
       )}
       {meRight ? (
         <FixedSlot
-          snapState={meRight}
+          state={meRight}
           sequence={6}
           position={rightPosition}
           rotation={meRotation}
@@ -115,7 +123,7 @@ const ExtraMonsters = (props: {
       )}
       {opLeft ? (
         <FixedSlot
-          snapState={opLeft}
+          state={opLeft}
           sequence={5}
           position={rightPosition}
           rotation={opRotation}
@@ -127,7 +135,7 @@ const ExtraMonsters = (props: {
       )}
       {opRight ? (
         <FixedSlot
-          snapState={opRight}
+          state={opRight}
           sequence={6}
           position={leftPosition}
           rotation={opRotation}
@@ -141,7 +149,10 @@ const ExtraMonsters = (props: {
   );
 };
 
-const monsterPositions = (player: number, monsters: CardState[]) => {
+const monsterPositions = (
+  player: number,
+  monsters: INTERNAL_Snapshot<CardState[]>
+) => {
   const x = (sequence: number) =>
     player == 0 ? left + gap * sequence : -left - gap * sequence;
   const y = transform.z / 2 + floating;

src/valtioStores/matStore/store.ts

@@ -36,13 +36,29 @@ class CardArray extends Array<CardState> implements ArrayCardState {
   });
   // methods
   remove(sequence: number) {
+    console.warn("remove", {
+      sequence,
+      zone: ygopro.CardZone[this.zone],
+      controller: getWhom(this.getController()),
+    });
     this.splice(sequence, 1);
   }
   async insert(sequence: number, id: number) {
+    console.warn("insert", {
+      sequence,
+      id,
+      zone: ygopro.CardZone[this.zone],
+      controller: getWhom(this.getController()),
+    });
     const card = await this.genCard(this.getController(), id);
     this.splice(sequence, 0, card);
   }
   async add(ids: number[]) {
+    console.warn("add", {
+      ids,
+      zone: ygopro.CardZone[this.zone],
+      controller: getWhom(this.getController()),
+    });
     const cards = await Promise.all(
       ids.map(async (id) => this.genCard(this.getController(), id))
     );
@@ -53,6 +69,13 @@ class CardArray extends Array<CardState> implements ArrayCardState {
     id: number,
     position?: ygopro.CardPosition
   ) {
+    console.warn("setOccupant", {
+      sequence,
+      id,
+      position,
+      zone: ygopro.CardZone[this.zone],
+      controller: getWhom(this.getController()),
+    });
     const meta = await fetchCard(id);
     const target = this[sequence];
     target.occupant = meta;
@@ -85,18 +108,19 @@ class CardArray extends Array<CardState> implements ArrayCardState {
 }
 
 const genDuelCardArray = (cardStates: CardState[], zone: ygopro.CardZone) => {
-  const me = new CardArray(...cardStates);
+  const me = cloneDeep(new CardArray(...cardStates));
   me.zone = zone;
   me.getController = () => (matStore.selfType == 1 ? 0 : 1);
-  const op = new CardArray(...cardStates);
+  const op = cloneDeep(new CardArray(...cardStates));
   op.zone = zone;
   op.getController = () => (matStore.selfType == 1 ? 1 : 0);
   const res = proxy({
     me,
     op,
     of: (controller: number) => {
-      res[getWhom(controller)].__proto__ = CardArray.prototype;
-      return res[getWhom(controller)];
+      const tmp = res[getWhom(controller)];
+      tmp.__proto__ = CardArray.prototype; // 手动修复原型链
+      return tmp;
     },
   });
   return res;