add Modal Reducer

src/reducers/duel/mod.ts

@@ -15,6 +15,12 @@ import {
 import { newTurnImpl } from "./turnSlice";
 import { newPhaseImpl } from "./phaseSlice";
 import { RootState } from "../../store";
+import {
+  ModalState,
+  setCardModalIsOpenImpl,
+  setCardModalTextImpl,
+  setCardModalImgUrlImpl,
+} from "./modal";
 
 export interface DuelState {
   selfType?: number;
@@ -26,9 +32,16 @@ export interface DuelState {
   opTimeLimit?: TimeLimit; // 对手的计时
   currentPlayer?: number; // 当前的操作方
   currentPhase?: string; // 当前的阶段
+
+  // UI相关
+  modalState: ModalState;
 }
 
-const initialState: DuelState = {};
+const initialState: DuelState = {
+  modalState: {
+    cardModal: { isOpen: false },
+  },
+};
 
 const duelSlice = createSlice({
   name: "duel",
@@ -45,6 +58,11 @@ const duelSlice = createSlice({
     // 手牌相关`Reducer`
     clearHandsInteractivity: clearHandsInteractivityImpl,
     addHandsInteractivity: addHandsInteractivityImpl,
+
+    // UI相关`Reducer`
+    setCardModalIsOpen: setCardModalIsOpenImpl,
+    setCardModalText: setCardModalTextImpl,
+    setCardModalImgUrl: setCardModalImgUrlImpl,
   },
   extraReducers(builder) {
     handsCase(builder);

src/reducers/duel/modal.ts

+import { PayloadAction, CaseReducer } from "@reduxjs/toolkit";
+import { RootState } from "../../store";
+import { DuelState } from "./mod";
+
+export interface ModalState {
+  // 卡牌弹窗
+  cardModal: {
+    isOpen: boolean;
+    name?: string;
+    desc?: string;
+    imgUrl?: string;
+  };
+}
+
+// 更新卡牌弹窗打开状态
+export const setCardModalIsOpenImpl: CaseReducer<
+  DuelState,
+  PayloadAction<boolean>
+> = (state, action) => {
+  state.modalState.cardModal.isOpen = action.payload;
+};
+
+// 更新卡牌弹窗文本
+export const setCardModalTextImpl: CaseReducer<
+  DuelState,
+  PayloadAction<[string?, string?]>
+> = (state, action) => {
+  const name = action.payload[0];
+  const desc = action.payload[1];
+
+  state.modalState.cardModal.name = name;
+  state.modalState.cardModal.desc = desc;
+};
+
+// 更新卡牌弹窗图片Url
+export const setCardModalImgUrlImpl: CaseReducer<
+  DuelState,
+  PayloadAction<string>
+> = (state, action) => {
+  state.modalState.cardModal.imgUrl = action.payload;
+};
+
+export const selectCardModalIsOpen = (state: RootState) =>
+  state.duel.modalState.cardModal.isOpen;
+export const selectCardModalName = (state: RootState) =>
+  state.duel.modalState.cardModal.name;
+export const selectCardModalDesc = (state: RootState) =>
+  state.duel.modalState.cardModal.desc;
+export const selectCardModalImgUrl = (state: RootState) =>
+  state.duel.modalState.cardModal.imgUrl;