add phase slice and io

src/reducers/duel/mod.ts

@@ -14,7 +14,12 @@ import {
   removeHandImpl,
 } from "./handsSlice";
 import { newTurnImpl } from "./turnSlice";
-import { newPhaseImpl } from "./phaseSlice";
+import {
+  newPhaseImpl,
+  PhaseState,
+  setEnableBpImpl,
+  setEnableEpImpl,
+} from "./phaseSlice";
 import { RootState } from "../../store";
 import { HintState, hintCase } from "./hintSlice";
 import {
@@ -110,7 +115,8 @@ export interface DuelState {
   opHint?: HintState; // 对手的提示
 
   currentPlayer?: number; // 当前的操作方
-  currentPhase?: string; // 当前的阶段
+
+  phase?: PhaseState;
 
   // UI相关
   modalState: ModalState;
@@ -136,7 +142,6 @@ const duelSlice = createSlice({
     },
     infoInit: infoInitImpl,
     updateTurn: newTurnImpl,
-    updatePhase: newPhaseImpl,
     updateTimeLimit: updateTimeLimitImpl,
 
     // 手牌相关`Reducer`
@@ -176,6 +181,11 @@ const duelSlice = createSlice({
     addFieldIdleInteractivities: addFieldIdleInteractivitiesImpl,
     clearFieldIdleInteractivities: clearFieldIdleInteractivitiesImpl,
 
+    // 阶段相关
+    updatePhase: newPhaseImpl,
+    setEnableBp: setEnableBpImpl,
+    setEnableEp: setEnableEpImpl,
+
     // UI相关`Reducer`
     setCardModalIsOpen: setCardModalIsOpenImpl,
     setCardModalText: setCardModalTextImpl,
@@ -214,6 +224,8 @@ export const {
   infoInit,
   updateTurn,
   updatePhase,
+  setEnableBp,
+  setEnableEp,
   clearHandsIdleInteractivity,
   addHandsIdleInteractivity,
   updateTimeLimit,

src/reducers/duel/phaseSlice.ts

@@ -2,11 +2,47 @@ import { PayloadAction, CaseReducer } from "@reduxjs/toolkit";
 import { RootState } from "../../store";
 import { DuelState } from "./mod";
 
+export interface PhaseState {
+  currentPhase: string; // 当前的阶段
+  enableBp: boolean; // 允许进入战斗阶段
+  enableEp: boolean; // 允许回合结束
+}
 export const newPhaseImpl: CaseReducer<DuelState, PayloadAction<string>> = (
   state,
   action
 ) => {
-  state.currentPhase = action.payload;
+  if (state.phase) {
+    state.phase.currentPhase = action.payload;
+  } else {
+    state.phase = {
+      currentPhase: action.payload,
+      enableBp: false,
+      enableEp: false,
+    };
+  }
 };
 
-export const selectCurrentPhase = (state: RootState) => state.duel.currentPhase;
+export const setEnableBpImpl: CaseReducer<DuelState, PayloadAction<boolean>> = (
+  state,
+  action
+) => {
+  if (state.phase) {
+    state.phase.enableBp = action.payload;
+  }
+};
+
+export const setEnableEpImpl: CaseReducer<DuelState, PayloadAction<boolean>> = (
+  state,
+  action
+) => {
+  if (state.phase) {
+    state.phase.enableEp = action.payload;
+  }
+};
+
+export const selectCurrentPhase = (state: RootState) =>
+  state.duel.phase?.currentPhase;
+export const selectEnableBp = (state: RootState) =>
+  state.duel.phase?.enableBp || false;
+export const selectEnableEp = (state: RootState) =>
+  state.duel.phase?.enableEp || false;

src/service/duel/selectIdleCmd.ts

@@ -10,6 +10,8 @@ import {
   clearMagicIdleInteractivities,
   clearFieldIdleInteractivities,
   addFieldIdleInteractivities,
+  setEnableBp,
+  setEnableEp,
 } from "../../reducers/duel/mod";
 import MsgSelectIdleCmd = ygopro.StocGameMessage.MsgSelectIdleCmd;
 import { ActionCreatorWithPayload } from "@reduxjs/toolkit";
@@ -94,6 +96,9 @@ export default (selectIdleCmd: MsgSelectIdleCmd, dispatch: AppDispatch) => {
       }
     });
   });
+
+  dispatch(setEnableBp(selectIdleCmd.enable_bp));
+  dispatch(setEnableEp(selectIdleCmd.enable_ep));
 };
 
 function idleTypeToInteractType(

src/ui/Duel/2d.tsx

+import React from "react";
+
+export const Button2D = (props: {
+  text: string;
+  left: number;
+  enable: boolean;
+  onClick: () => void;
+}) => (
+  <adtFullscreenUi name="ui">
+    <rectangle
+      name="rect"
+      height="20px"
+      width="60px"
+      isEnabled={props.enable}
+      left={props.left}
+    >
+      <rectangle>
+        <babylon-button
+          name="close-icon"
+          onPointerDownObservable={props.onClick}
+        >
+          <textBlock
+            text={props.text}
+            fontFamily="FontAwesome"
+            fontStyle="bold"
+            fontSize={15}
+            color={props.enable ? "yellow" : "white"}
+          />
+        </babylon-button>
+      </rectangle>
+    </rectangle>
+  </adtFullscreenUi>
+);

src/ui/Duel/main.tsx

@@ -17,6 +17,7 @@ import CheckCardModal from "./checkCardModal";
 import YesNoModal from "./yesNoModal";
 import PositionModal from "./positionModal";
 import OptionModal from "./optionModal";
+import Phase from "./phase";
 
 // Ref: https://github.com/brianzinn/react-babylonjs/issues/126
 const NeosDuel = () => (
@@ -36,6 +37,7 @@ const NeosDuel = () => (
               <Cemeteries />
               <Exclusion />
               <Field />
+              <Phase />
               <Ground />
             </Provider>
           </Scene>

src/ui/Duel/monsters.tsx

@@ -54,6 +54,19 @@ const Monsters = () => {
         }
       )}
       <ExtraMonsters />
+      <adtFullscreenUi name="ui">
+        <rectangle name="rect" height="20px" width="60px">
+          <babylon-button name="close-icon">
+            <textBlock
+              text="bp"
+              fontFamily="FontAwesome"
+              fontStyle="bold"
+              fontSize={15}
+              color="white"
+            />
+          </babylon-button>
+        </rectangle>
+      </adtFullscreenUi>
       <ExtraMonsters />
     </>
   );

src/ui/Duel/phase.tsx

+import React from "react";
+import { store } from "../../store";
+import { useAppSelector } from "../../hook";
+import { selectEnableBp, selectEnableEp } from "../../reducers/duel/phaseSlice";
+import { sendSelectIdleCmdResponse } from "../../api/ocgcore/ocgHelper";
+import { setEnableBp, setEnableEp } from "../../reducers/duel/mod";
+import { Button2D } from "./2d";
+
+const Bp = () => {
+  const dispatch = store.dispatch;
+  const enable = useAppSelector(selectEnableBp);
+  const onClick = () => {
+    sendSelectIdleCmdResponse(6);
+    dispatch(setEnableBp(false));
+  };
+
+  return <Button2D text="bp" left={0} enable={enable} onClick={onClick} />;
+};
+
+const Ep = () => {
+  const dispatch = store.dispatch;
+  const enable = useAppSelector(selectEnableEp);
+  const onClick = () => {
+    sendSelectIdleCmdResponse(7);
+    dispatch(setEnableEp(false));
+  };
+
+  return <Button2D text="ep" left={140} enable={enable} onClick={onClick} />;
+};
+
+const Phase = () => (
+  <>
+    <Bp />
+    <Ep />
+  </>
+);
+
+export default Phase;