Merge branch 'fix/change_side' into 'main'

修复断线重连后，Side卡组消失的问题

See merge request mycard/Neos!361

src/stores/sideStore.ts

@@ -3,6 +3,8 @@ import { proxy } from "valtio";
 import { emptyDeck, IDeck } from "./deckStore";
 import { type NeosStore } from "./shared";
 
+const KEY = "side_deck";
+
 export enum SideStage {
   NONE = 0, // 没有进入SIDE阶段
   SIDE_CHANGING = 1, // 正在更换副卡组
@@ -15,10 +17,27 @@ export enum SideStage {
 
 class SideStore implements NeosStore {
   stage: SideStage = SideStage.NONE;
-  deck: IDeck = emptyDeck;
+
+  // 因为在上一局可能会出现断线重连，
+  // 所以side deck应该持久化存储在浏览器缓存里，
+  // 同时为了逻辑的收敛，暂时在`SideStore`提供接口。
+  //
+  // TODO: 后续应该有个`Storage`模块统一管理浏览器存储的数据，
+  // 这样一来卡组cdb还有文案的一些数据都可以做持久化存储，减少
+  // 网络请求量。
+  setSideDeck(deck: IDeck) {
+    try {
+      localStorage.setItem(KEY, JSON.stringify(deck));
+    } catch (err) {
+      console.warn(`save side in localStorage error: ${err}`);
+    }
+  }
+  getSideDeck(): IDeck {
+    const json = localStorage.getItem(KEY);
+    return json ? JSON.parse(json) : emptyDeck;
+  }
   reset(): void {
     this.stage = SideStage.NONE;
-    this.deck = emptyDeck;
   }
 }
 

src/ui/Side/index.tsx

@@ -18,10 +18,9 @@ import { TpModal } from "./TpModal";
 
 export const Component: React.FC = () => {
   const { message } = App.useApp();
-  const { deck: sideDeck } = sideStore;
+  const initialDeck = sideStore.getSideDeck();
   const { stage } = useSnapshot(sideStore);
   const { errorMsg } = useSnapshot(roomStore);
-  const initialDeck = JSON.parse(JSON.stringify(sideDeck));
   const [deck, setDeck] = useState<IDeck>(initialDeck);
   const [selectedCard, setSelectedCard] = useState(0);
   const navigate = useNavigate();
@@ -55,11 +54,12 @@ export const Component: React.FC = () => {
     });
   };
   const onReset = () => {
-    setDeck(JSON.parse(JSON.stringify(sideDeck)));
+    setDeck(initialDeck);
     message.info("重置成功");
   };
   const onSummit = () => {
     sendUpdateDeck(deck);
+    sideStore.setSideDeck(deck);
   };
 
   useEffect(() => {

src/ui/WaitRoom/index.tsx

@@ -56,7 +56,7 @@ export const Component: React.FC = () => {
   const updateDeck = (deck: IDeck) => {
     sendUpdateDeck(deck);
     // 设置side里面的卡组
-    sideStore.deck = deck;
+    sideStore.setSideDeck(deck);
   };
 
   const onDeckSelected = (deckName: string) => {