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

Feat/ui/antd

See merge request !42

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);
@@ -59,6 +77,9 @@ export const {
   clearHandsInteractivity,
   addHandsInteractivity,
   updateTimeLimit,
+  setCardModalIsOpen,
+  setCardModalText,
+  setCardModalImgUrl,
 } = duelSlice.actions;
 export const selectDuelHsStart = (state: RootState) => {
   return state.duel.meInitInfo != null;

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;

src/ui/Duel/simpleDuel/cardModal.tsx

+import React from "react";
+import { useAppSelector } from "../../../hook";
+import { store } from "../../../store";
+import {
+  selectCardModalIsOpen,
+  selectCardModalName,
+  selectCardModalDesc,
+  selectCardModalImgUrl,
+} from "../../../reducers/duel/modal";
+import { setCardModalIsOpen } from "../../../reducers/duel/mod";
+import { Modal, Card } from "antd";
+
+const { Meta } = Card;
+const CARD_WIDTH = 240;
+
+const CardModal = () => {
+  const dispatch = store.dispatch;
+  const isOpen = useAppSelector(selectCardModalIsOpen);
+  const name = useAppSelector(selectCardModalName);
+  const desc = useAppSelector(selectCardModalDesc);
+  const imgUrl = useAppSelector(selectCardModalImgUrl);
+
+  const handleOkOrCancel = () => {
+    dispatch(setCardModalIsOpen(false));
+  };
+
+  return (
+    <>
+      <Modal open={isOpen} onOk={handleOkOrCancel} onCancel={handleOkOrCancel}>
+        <Card
+          hoverable
+          style={{ width: CARD_WIDTH }}
+          cover={<img alt={name} src={imgUrl} />}
+        >
+          <Meta title={name} />
+          <p>{desc}</p>
+        </Card>
+      </Modal>
+    </>
+  );
+};
+
+export default CardModal;

src/ui/Duel/simpleDuel/hands.ts

@@ -3,6 +3,12 @@ import * as BABYLON_GUI from "@babylonjs/gui";
 import * as CONFIG from "../../../config/ui";
 import { Card, InteractType } from "../../../reducers/duel/util";
 import { sendSelectIdleCmdResponse } from "../../../api/ocgcore/ocgHelper";
+import {
+  setCardModalImgUrl,
+  setCardModalIsOpen,
+  setCardModalText,
+} from "../../../reducers/duel/mod";
+import { store } from "../../../store";
 
 export default (hands: Card[], scene: BABYLON.Scene) => {
   const handShape = CONFIG.HandShape();
@@ -101,17 +107,27 @@ function setupHandInteractivity(
 function setupHandAction(
   mesh: BABYLON.Mesh,
   state: Card,
-  handIdx: number,
+  _handIdx: number,
   scene: BABYLON.Scene
 ) {
+  const dispatch = store.dispatch;
+
   mesh.actionManager = new BABYLON.ActionManager(scene);
   mesh.actionManager.isRecursive = true;
   // 监听点击事件
   mesh.actionManager.registerAction(
     new BABYLON.ExecuteCodeAction(
       BABYLON.ActionManager.OnPickTrigger,
-      (event) => {
-        console.log(`<Click>hand: ${handIdx}`, "card:", state, "event:", event);
+      (_event) => {
+        dispatch(
+          setCardModalText([state.meta.text.name, state.meta.text.desc])
+        );
+        dispatch(
+          setCardModalImgUrl(
+            `https://cdn02.moecube.com:444/images/ygopro-images-zh-CN/${state.meta.id}.jpg`
+          )
+        );
+        dispatch(setCardModalIsOpen(true));
       }
     )
   );

src/ui/Duel/simpleDuel/mod.tsx

@@ -20,6 +20,7 @@ import * as CONFIG from "../../../config/ui";
 import { Card } from "../../../reducers/duel/util";
 import { selectCurrentPlayer } from "../../../reducers/duel/turnSlice";
 import { selectCurrentPhase } from "../../../reducers/duel/phaseSlice";
+import CardModal from "./cardModal";
 
 // CONFIG
 
@@ -136,11 +137,14 @@ export default class SimpleDuelPlateImpl implements IDuelPlate {
     }, []);
 
     return (
-      <canvas
-        width={window.innerWidth}
-        height={window.innerHeight}
-        ref={canvasRef}
-      />
+      <>
+        <canvas
+          width={window.innerWidth}
+          height={window.innerHeight}
+          ref={canvasRef}
+        />
+        <CardModal />
+      </>
     );
   }