Merge branch 'feat/ui/select_position' into 'main'

Feat/ui/select position

See merge request !68

src/reducers/duel/mod.ts

@@ -34,6 +34,9 @@ import {
   setYesNoModalIsOpenImpl,
   checkCardModalCase,
   YesNoModalCase,
+  setPositionModalIsOpenImpl,
+  setPositionModalPositionsImpl,
+  resetPositionModalImpl,
 } from "./modalSlice";
 import {
   MonsterState,
@@ -87,6 +90,7 @@ const initialState: DuelState = {
     cardListModal: { isOpen: false, list: [] },
     checkCardModal: { isOpen: false, cancelAble: false, tags: [] },
     yesNoModal: { isOpen: false },
+    positionModal: { isOpen: false, positions: [] },
   },
 };
 
@@ -134,6 +138,9 @@ const duelSlice = createSlice({
     setCheckCardModalCancelResponse: setCheckCardModalCancelResponseImpl,
     resetCheckCardModal: resetCheckCardModalImpl,
     setYesNoModalIsOpen: setYesNoModalIsOpenImpl,
+    setPositionModalIsOpen: setPositionModalIsOpenImpl,
+    setPositionModalPositions: setPositionModalPositionsImpl,
+    resetPositionModal: resetPositionModalImpl,
   },
   extraReducers(builder) {
     handsCase(builder);
@@ -175,6 +182,9 @@ export const {
   setCheckCardModalCancelResponse,
   resetCheckCardModal,
   setYesNoModalIsOpen,
+  setPositionModalIsOpen,
+  setPositionModalPositions,
+  resetPositionModal,
 } = duelSlice.actions;
 export const selectDuelHsStart = (state: RootState) => {
   return state.duel.meInitInfo != null;

src/reducers/duel/modalSlice.ts

@@ -53,6 +53,11 @@ export interface ModalState {
     isOpen: boolean;
     msg?: string;
   };
+  // 表示形式选择弹窗
+  positionModal: {
+    isOpen: boolean;
+    positions: ygopro.CardPosition[];
+  };
 }
 
 // 更新卡牌弹窗打开状态
@@ -269,6 +274,25 @@ export const YesNoModalCase = (builder: ActionReducerMapBuilder<DuelState>) => {
   });
 };
 
+export const setPositionModalIsOpenImpl: CaseReducer<
+  DuelState,
+  PayloadAction<boolean>
+> = (state, action) => {
+  state.modalState.positionModal.isOpen = action.payload;
+};
+
+export const setPositionModalPositionsImpl: CaseReducer<
+  DuelState,
+  PayloadAction<ygopro.CardPosition[]>
+> = (state, action) => {
+  state.modalState.positionModal.positions = action.payload;
+};
+
+export const resetPositionModalImpl: CaseReducer<DuelState> = (state) => {
+  state.modalState.positionModal.isOpen = false;
+  state.modalState.positionModal.positions = [];
+};
+
 export const selectCardModalIsOpen = (state: RootState) =>
   state.duel.modalState.cardModal.isOpen;
 export const selectCardModalName = (state: RootState) =>
@@ -303,3 +327,7 @@ export const selectYesNoModalIsOpen = (state: RootState) =>
   state.duel.modalState.yesNoModal.isOpen;
 export const selectYesNOModalMsg = (state: RootState) =>
   state.duel.modalState.yesNoModal.msg;
+export const selectPositionModalIsOpen = (state: RootState) =>
+  state.duel.modalState.positionModal.isOpen;
+export const selectPositionModalPositions = (state: RootState) =>
+  state.duel.modalState.positionModal.positions;

src/service/duel/selectPosition.ts

 import { ygopro } from "../../api/ocgcore/idl/ocgcore";
+import {
+  setPositionModalIsOpen,
+  setPositionModalPositions,
+} from "../../reducers/duel/mod";
 import { AppDispatch } from "../../store";
 import MsgSelectPosition = ygopro.StocGameMessage.MsgSelectPosition;
 
 export default (selectPosition: MsgSelectPosition, dispatch: AppDispatch) => {
-  console.log(selectPosition);
+  const player = selectPosition.player;
+  const positions = selectPosition.positions;
+
+  dispatch(
+    setPositionModalPositions(positions.map((position) => position.position))
+  );
+  dispatch(setPositionModalIsOpen(true));
 };

src/ui/Duel/main.tsx

@@ -15,6 +15,7 @@ import Cemeteries from "./cemetery";
 import CardListModal from "./cardListModal";
 import CheckCardModal from "./checkCardModal";
 import YesNoModal from "./yesNoModal";
+import PositionModal from "./positionModal";
 
 // Ref: https://github.com/brianzinn/react-babylonjs/issues/126
 const NeosDuel = () => (
@@ -44,6 +45,7 @@ const NeosDuel = () => (
     <HintNotification />
     <CheckCardModal />
     <YesNoModal />
+    <PositionModal />
   </>
 );
 

src/ui/Duel/positionModal.tsx

+import React, { useState } from "react";
+import { useAppSelector } from "../../hook";
+import { store } from "../../store";
+import { Modal, Button } from "antd";
+import { sendSelectPositionResponse } from "../../api/ocgcore/ocgHelper";
+import {
+  selectPositionModalIsOpen,
+  selectPositionModalPositions,
+} from "../../reducers/duel/modalSlice";
+import { ygopro } from "../../api/ocgcore/idl/ocgcore";
+import {
+  resetPositionModal,
+  setPositionModalIsOpen,
+} from "../../reducers/duel/mod";
+import { CheckCard } from "@ant-design/pro-components";
+
+const PositionModal = () => {
+  const dispatch = store.dispatch;
+  const isOpen = useAppSelector(selectPositionModalIsOpen);
+  const positions = useAppSelector(selectPositionModalPositions);
+  const [selected, setSelected] = useState<ygopro.CardPosition | undefined>(
+    undefined
+  );
+
+  return (
+    <Modal
+      title="请选择表示形式"
+      open={isOpen}
+      closable={false}
+      footer={
+        <Button
+          disabled={selected === undefined}
+          onClick={() => {
+            if (selected !== undefined) {
+              sendSelectPositionResponse(selected);
+              dispatch(setPositionModalIsOpen(false));
+              dispatch(resetPositionModal);
+            }
+          }}
+        >
+          submit
+        </Button>
+      }
+    >
+      <CheckCard.Group
+        bordered
+        size="small"
+        onChange={(value) => {
+          // @ts-ignore
+          setSelected(value);
+        }}
+      >
+        {positions.map((position, idx) => (
+          <CheckCard
+            key={idx}
+            title={cardPositionToChinese(position)}
+            value={position}
+          />
+        ))}
+      </CheckCard.Group>
+    </Modal>
+  );
+};
+
+function cardPositionToChinese(position: ygopro.CardPosition): string {
+  switch (position) {
+    case ygopro.CardPosition.FACEUP_ATTACK: {
+      return "正面攻击形式";
+    }
+    case ygopro.CardPosition.FACEUP_DEFENSE: {
+      return "正面防守形式";
+    }
+    case ygopro.CardPosition.FACEDOWN_ATTACK: {
+      return "背面攻击形式";
+    }
+    case ygopro.CardPosition.FACEDOWN_DEFENSE: {
+      return "背面防守形式";
+    }
+    default: {
+      return "[?]";
+    }
+  }
+}
+
+export default PositionModal;