refactor: store

src/service/duel/start.ts

@@ -6,8 +6,8 @@ import { subscribeKey } from "valtio/utils";
 import { fetchCard, ygopro } from "@/api";
 import { useConfig } from "@/config";
 import { sleep } from "@/infra";
-import { cardStore, CardType, store } from "@/stores";
-const { matStore } = store;
+import { cardStore, CardType, matStore } from "@/stores";
+
 const TOKEN_SIZE = 13; // 每人场上最多就只可能有13个token
 
 export default async (start: ygopro.StocGameMessage.MsgStart) => {

src/stores/index.ts

@@ -7,7 +7,6 @@ export * from "./methods";
 export * from "./moraStore";
 export * from "./placeStore";
 
-import { proxy } from "valtio";
 import { devtools } from "valtio/utils";
 
 import { cardStore } from "./cardStore";
@@ -18,14 +17,10 @@ import { messageStore } from "./messageStore";
 import { moraStore } from "./moraStore";
 import { placeStore } from "./placeStore";
 
-export const store = proxy({
-  chatStore,
-  joinStore,
-  moraStore,
-  matStore, // 决斗盘
-  messageStore, // 决斗的信息，包括模态框
-  cardStore,
-  placeStore,
-});
-
-devtools(store, { name: "valtio store", enabled: true });
+devtools(chatStore, { name: "chat store", enabled: true });
+devtools(joinStore, { name: "join store", enabled: true });
+devtools(moraStore, { name: "mora store", enabled: true });
+devtools(matStore, { name: "mat store", enabled: true });
+devtools(messageStore, { name: "message store", enabled: true });
+devtools(cardStore, { name: "card store", enabled: true });
+devtools(placeStore, { name: "place store", enabled: true });

src/ui/Duel/PlayMat/Card/index.tsx

@@ -94,7 +94,7 @@ export const Card: FC<{ idx: number }> = React.memo(({ idx }) => {
 
   useEffect(() => {
     setHighlight(!!snap.idleInteractivities.length);
-  }, [snap.idleInteractivities]);
+  }, [snap.idleInteractivities.length]);
 
   return (
     <animated.div

src/ui/WaitRoom.tsx

@@ -30,7 +30,7 @@ import { DeckManager, fetchDeck, type IDeck } from "@/api/deck";
 import { useConfig } from "@/config";
 import socketMiddleWare, { socketCmd } from "@/middleware/socket";
 import sqliteMiddleWare, { sqliteCmd } from "@/middleware/sqlite";
-import { store } from "@/stores";
+import { chatStore, joinStore, matStore, moraStore } from "@/stores";
 
 const NeosConfig = useConfig();
 
@@ -42,8 +42,10 @@ const {
 } = useConfig();
 
 const WaitRoom = () => {
-  const state = store;
-  const snap = useSnapshot(state);
+  const snapJoin = useSnapshot(joinStore);
+  const snapChat = useSnapshot(chatStore);
+  const snapMat = useSnapshot(matStore);
+  const snapMora = useSnapshot(moraStore);
   const params = useParams<{
     player?: string;
     passWd?: string;
@@ -89,12 +91,12 @@ const WaitRoom = () => {
 
   const [api, contextHolder] = notification.useNotification();
 
-  const joined = snap.joinStore.value;
-  const chat = snap.chatStore.message;
-  const isHost = snap.matStore.isHost;
-  const player0 = snap.matStore.player[0];
-  const player1 = snap.matStore.player[1];
-  const duelStart = snap.moraStore.duelStart;
+  const joined = snapJoin.value;
+  const chat = snapChat.message;
+  const isHost = snapMat.isHost;
+  const player0 = snapMat.player[0];
+  const player1 = snapMat.player[1];
+  const duelStart = snapMora.duelStart;
 
   // FIXME: 这些数据应该从`store`中获取
   // TODO: 云卡组