fix: remove useContext

src/main.tsx

@@ -26,8 +26,6 @@ import ReactDOM from "react-dom/client";
 import { Provider } from "react-redux";
 import { BrowserRouter } from "react-router-dom";
 
-import { ValtioProvider } from "@/valtioStores";
-
 import { store } from "./store";
 import Neos from "./ui/Neos";
 
@@ -38,14 +36,12 @@ root.render(
   <React.StrictMode>
     <BrowserRouter>
       <Provider store={store}>
-        <ValtioProvider>
-          <ConfigProvider
-            theme={{ algorithm: theme.darkAlgorithm }}
-            locale={zhCN}
-          >
-            <Neos />
-          </ConfigProvider>
-        </ValtioProvider>
+        <ConfigProvider
+          theme={{ algorithm: theme.darkAlgorithm }}
+          locale={zhCN}
+        >
+          <Neos />
+        </ConfigProvider>
       </Provider>
     </BrowserRouter>
   </React.StrictMode>

src/service/duel/move.ts

@@ -33,32 +33,61 @@ export default (move: MsgMove, dispatch: AppDispatch) => {
   const to = move.to;
   const reason = move.reason;
 
+  switch (from.location) {
+    case ygopro.CardZone.MZONE:
+    case ygopro.CardZone.SZONE: {
+      const target = matStore.getZone(from.location).at(from.controler)[
+        from.sequence
+      ];
+      target.occupant = undefined;
+      target.overlay_materials = [];
+      break;
+    }
+    case ygopro.CardZone.HAND:
+    case ygopro.CardZone.REMOVED:
+    case ygopro.CardZone.GRAVE:
+    case ygopro.CardZone.HAND:
+    case ygopro.CardZone.EXTRA: {
+      matStore.getZone(from.location).remove(from.controler, from.sequence);
+      break;
+    }
+    case ygopro.CardZone.OVERLAY: {
+      const target = matStore.monsters.at(from.controler)[from.sequence];
+      if (target && target.overlay_materials) {
+        target.overlay_materials.splice(from.overlay_sequence, 1);
+      }
+      break;
+    }
+    default: {
+      console.log(`Unhandled zone type ${from.location}`);
+      break;
+    }
+  }
+
+  switch (to.location) {
+  }
+
   switch (from.location) {
     case ygopro.CardZone.HAND: {
       dispatch(removeHand([from.controler, from.sequence]));
-      matStore.hands.remove(from.controler, from.sequence);
       break;
     }
     case ygopro.CardZone.MZONE: {
       dispatch(
         removeMonster({ controler: from.controler, sequence: from.sequence })
       );
-
       break;
     }
     case ygopro.CardZone.SZONE: {
       dispatch(
         removeMagic({ controler: from.controler, sequence: from.sequence })
       );
-
       break;
     }
     case ygopro.CardZone.GRAVE: {
       dispatch(
         removeGraveyard({ controler: from.controler, sequence: from.sequence })
       );
-      matStore.graveyards.remove(from.controler, from.sequence);
-
       break;
     }
     case ygopro.CardZone.REMOVED: {
@@ -68,16 +97,12 @@ export default (move: MsgMove, dispatch: AppDispatch) => {
           sequence: from.sequence,
         })
       );
-      matStore.banishedZones.remove(from.controler, from.sequence);
-
       break;
     }
     case ygopro.CardZone.EXTRA: {
       dispatch(
         removeExtraDeck({ controler: from.controler, sequence: from.sequence })
       );
-      matStore.extraDecks.remove(from.controler, from.sequence);
-
       break;
     }
     case ygopro.CardZone.OVERLAY: {

src/service/duel/sortCard.ts

-import { ygopro } from "@/api";
+import { fetchCard, ygopro } from "@/api";
 import { setSortCardModalIsOpen } from "@/reducers/duel/mod";
 import { fetchSortCardMeta } from "@/reducers/duel/modal/sortCardModalSlice";
 import { AppDispatch } from "@/store";
 import MsgSortCard = ygopro.StocGameMessage.MsgSortCard;
 
-export default (sortCard: MsgSortCard, dispatch: AppDispatch) => {
+import { messageStore } from "@/valtioStores";
+
+export default async (sortCard: MsgSortCard, dispatch: AppDispatch) => {
   for (const option of sortCard.options) {
     dispatch(fetchSortCardMeta(option.toObject()));
   }
   dispatch(setSortCardModalIsOpen(true));
+  await Promise.all(
+    sortCard.options.map(async ({ code, response }) => {
+      const meta = await fetchCard(code!, true);
+      messageStore.sortCardModal.options.push({
+        meta,
+        response: response!,
+      });
+    })
+  );
+  messageStore.sortCardModal.isOpen = true;
 };

src/service/duel/updateData.ts

@@ -3,6 +3,55 @@ import { updateFieldData } from "@/reducers/duel/mod";
 import { AppDispatch } from "@/store";
 import MsgUpdateData = ygopro.StocGameMessage.MsgUpdateData;
 
+import { matStore } from "@/valtioStores";
+
 export default (updateData: MsgUpdateData, dispatch: AppDispatch) => {
   dispatch(updateFieldData(updateData.toObject()));
+
+  const { player: controller, zone, actions } = updateData;
+  if (controller !== undefined && zone !== undefined && actions !== undefined) {
+    const field = matStore.getZone(zone).at(controller);
+    actions.forEach((action) => {
+      const sequence = action.location?.sequence;
+      if (typeof sequence !== "undefined") {
+        const target = field[sequence];
+        if (target && (target.occupant || target.reload)) {
+          if (target.occupant === undefined) {
+            target.occupant = { id: action.code!, data: {}, text: {} };
+          }
+          const occupant = target.occupant;
+          // 目前只更新以下字段
+          if (action.code !== undefined && action.code >= 0) {
+            occupant.id = action.code;
+            occupant.text.id = action.code;
+          }
+          if (action.location !== undefined) {
+            target.location.position = action.location.position;
+          }
+          if (action.type_ !== undefined && action.type_ >= 0) {
+            occupant.data.type = action.type_;
+          }
+          if (action.level !== undefined && action.level >= 0) {
+            occupant.data.level = action.level;
+          }
+          if (action.attribute !== undefined && action.attribute >= 0) {
+            occupant.data.attribute = action.attribute;
+          }
+          if (action.race !== undefined && action.race >= 0) {
+            occupant.data.race = action.race;
+          }
+          if (action.attack !== undefined && action.attack >= 0) {
+            occupant.data.atk = action.attack;
+          }
+          if (action.defense !== undefined && action.defense >= 0) {
+            occupant.data.def = action.defense;
+          }
+          // TODO: counters
+        }
+        if (target?.reload) {
+          target.reload = false;
+        }
+      }
+    });
+  }
 };

src/ui/Duel/Message/TimeLine.tsx

@@ -5,13 +5,13 @@ import { useSnapshot } from "valtio";
 
 import { useAppSelector } from "@/hook";
 import { selectChat } from "@/reducers/chatSlice";
-import { valtioContext } from "@/valtioStores";
+import { chatStore } from "@/valtioStores";
 
 export const DuelTimeLine = () => {
   const [items, setItems] = useState<TimelineItemProps[]>([]);
   const chat = useAppSelector(selectChat);
 
-  const stateChat = useContext(valtioContext).chatStore;
+  const stateChat = chatStore;
   const snapChat = useSnapshot(stateChat);
 
   // const chat = snapChat.message;

src/ui/Mora.tsx

@@ -19,7 +19,7 @@ import {
   unSelectTpAble,
 } from "@/reducers/moraSlice";
 import { store } from "@/store";
-import { valtioContext } from "@/valtioStores";
+import { moraStore } from "@/valtioStores";
 
 const {
   automation: { isAiMode, isAiFirst },
@@ -27,7 +27,7 @@ const {
 } = useConfig();
 
 const Mora = () => {
-  const stateMora = useContext(valtioContext).moraStore;
+  const stateMora = moraStore;
   const snapMora = useSnapshot(stateMora);
 
   const dispatch = store.dispatch;

src/ui/WaitRoom.tsx

@@ -46,7 +46,7 @@ import {
   selectPlayer1,
 } from "@/reducers/playerSlice";
 import { store } from "@/store";
-import { valtioContext } from "@/valtioStores";
+import { valtioStore } from "@/valtioStores";
 
 const NeosConfig = useConfig();
 
@@ -58,7 +58,7 @@ const {
 } = useConfig();
 
 const WaitRoom = () => {
-  const state = useContext(valtioContext);
+  const state = valtioStore;
   const snap = useSnapshot(state);
   const params = useParams<{
     player?: string;

src/valtioStores/index.tsx

@@ -5,7 +5,6 @@ export * from "./messageStore";
 export * from "./moraStore";
 export * from "./playerStore";
 
-import { createContext, type ReactNode, useRef } from "react";
 import { proxy } from "valtio";
 import { devtools } from "valtio/utils";
 
@@ -26,20 +25,3 @@ export const valtioStore = proxy({
 });
 
 devtools(valtioStore, { name: "valtio store", enabled: true });
-
-/**
- * 在组件之中使用valtio store
- */
-export const valtioContext = createContext<typeof valtioStore>({} as any);
-
-/**
- * 包裹根节点，使得所有子组件都可以使用valtio store
- */
-export const ValtioProvider: React.FC<{ children: ReactNode }> = ({
-  children,
-}) => {
-  const state = useRef(valtioStore).current;
-  return (
-    <valtioContext.Provider value={state}>{children}</valtioContext.Provider>
-  );
-};

src/valtioStores/matStore/methods/fetchHint.ts

 import type { ygopro } from "@/api";
 import { fetchCard } from "@/api/cards";
 import { DESCRIPTION_LIMIT, fetchStrings, getStrings } from "@/api/strings";
-import { matStore } from "@/valtioStores";
+import { matStore } from "../store";
 
 const { hint } = matStore;
 

src/valtioStores/matStore/store.ts

@@ -131,9 +131,6 @@ const wrap = <T extends DuelFieldState>(
         target.location.position = position;
       }
     },
-    removeOccupant: (controller: number, sequence: number) => {
-      res.at(controller)[sequence].occupant = undefined;
-    },
     addIdleInteractivity: (
       controller: number,
       sequence: number,

src/valtioStores/matStore/types.ts

@@ -10,7 +10,7 @@ export interface BothSide<T> {
 }
 
 export interface CardsBothSide<T extends DuelFieldState> extends BothSide<T> {
-  /** 根据controller返回对应的数组 */
+  /** 根据controller返回对应的数组，op或者me */
   at: (controller: number) => T;
   /** 移除特定位置的卡片 */
   remove: (player: number, sequence: number) => void;
@@ -25,8 +25,6 @@ export interface CardsBothSide<T extends DuelFieldState> extends BothSide<T> {
     id: number,
     position?: ygopro.CardPosition
   ) => void;
-  /** 移除卡片的卡片信息 */
-  removeOccupant: (controller: number, sequence: number) => void;
   /** 添加 idle 的交互性 */
   addIdleInteractivity: (
     controller: number,