Merge branch 'feat/deck' into 'main'

Feat/deck

See merge request mycard/Neos!72

src/reducers/duel/deckSlice.ts

+import { judgeSelf } from "./util";
+import { PayloadAction, CaseReducer } from "@reduxjs/toolkit";
+import { DuelState } from "./mod";
+import { RootState } from "../../store";
+import { ygopro } from "../../api/ocgcore/idl/ocgcore";
+import { DuelFieldState, CardState } from "./generic";
+
+export interface DeckState extends DuelFieldState {}
+
+// 初始化卡组状态
+export const initDeckImpl: CaseReducer<
+  DuelState,
+  PayloadAction<{ player: number; deskSize: number }>
+> = (state, action) => {
+  const player = action.payload.player;
+  const deckSize = action.payload.deskSize;
+
+  let deck: CardState[] = new Array(deckSize);
+  for (let i = 0; i < deckSize; i++) {
+    deck.push({
+      occupant: { id: 0, data: {}, text: {} },
+      location: {
+        controler: player,
+        location: ygopro.CardZone.DECK,
+        sequence: i,
+      },
+      idleInteractivities: [],
+    });
+  }
+
+  if (judgeSelf(player, state)) {
+    state.meDeck = { inner: deck };
+  } else {
+    state.opDeck = { inner: deck };
+  }
+};
+
+export const selectMeDeck = (state: RootState) =>
+  state.duel.meDeck || { inner: [] };
+export const selectOpDeck = (state: RootState) =>
+  state.duel.opDeck || { inner: [] };

src/reducers/duel/mod.ts

@@ -61,6 +61,7 @@ import {
   initExclusionImpl,
   exclusionCase,
 } from "./exclusionSlice";
+import { DeckState, initDeckImpl } from "./deckSlice";
 
 export interface DuelState {
   selfType?: number;
@@ -82,6 +83,9 @@ export interface DuelState {
   meExclusion?: ExclusionState; // 自己的除外区状态
   opExclusion?: ExclusionState; // 对手的除外区状态
 
+  meDeck?: DeckState; // 自己的卡组状态
+  opDeck?: DeckState; // 对手的卡组状态
+
   meTimeLimit?: TimeLimit; // 自己的计时
   opTimeLimit?: TimeLimit; // 对手的计时
 
@@ -139,6 +143,9 @@ const duelSlice = createSlice({
     // 除外区相关`Reducer`
     initExclusion: initExclusionImpl,
 
+    // 卡组相关`Reducer`
+    initDeck: initDeckImpl,
+
     // UI相关`Reducer`
     setCardModalIsOpen: setCardModalIsOpenImpl,
     setCardModalText: setCardModalTextImpl,
@@ -206,6 +213,7 @@ export const {
   resetPositionModal,
   setOptionModalIsOpen,
   resetOptionModal,
+  initDeck,
 } = duelSlice.actions;
 export const selectDuelHsStart = (state: RootState) => {
   return state.duel.meInitInfo != null;

src/service/duel/start.ts

@@ -6,6 +6,7 @@ import {
   initMonsters,
   initMagics,
   initCemetery,
+  initDeck,
 } from "../../reducers/duel/mod";
 
 export default (
@@ -39,4 +40,6 @@ export default (
   dispatch(initMagics(1));
   dispatch(initCemetery(0));
   dispatch(initCemetery(1));
+  dispatch(initDeck({ player: 0, deskSize: start.deckSize1 }));
+  dispatch(initDeck({ player: 1, deskSize: start.deckSize2 }));
 };

src/ui/Duel/cemetery.tsx

@@ -5,9 +5,7 @@ import {
   selectOpCemetery,
 } from "../../reducers/duel/cemeretySlice";
 import { useAppSelector } from "../../hook";
-import SingleSlot from "./singleSlot";
-
-const depth = 0.02;
+import SingleSlot, { Depth } from "./singleSlot";
 
 const Cemeteries = () => {
   const meCemetery = useAppSelector(selectMeCemetery).inner;
@@ -31,7 +29,7 @@ const Cemeteries = () => {
 
 const cemeteryPosition = (player: number, cemeteryLength: number) => {
   const x = player == 0 ? 3.2 : -3.2;
-  const y = (depth * cemeteryLength) / 2 + CONFIG.Floating;
+  const y = (Depth * cemeteryLength) / 2 + CONFIG.Floating;
   const z = player == 0 ? -2.0 : 2.0;
 
   return new BABYLON.Vector3(x, y, z);

src/ui/Duel/deck.tsx

 import * as BABYLON from "@babylonjs/core";
 import * as CONFIG from "../../config/ui";
+import { useAppSelector } from "../../hook";
+import { selectMeDeck, selectOpDeck } from "../../reducers/duel/deckSlice";
+import SingleSlot, { Depth } from "./singleSlot";
 
 const Deck = () => (
   <>
@@ -9,28 +12,22 @@ const Deck = () => (
 );
 
 const CommonDeck = () => {
-  const shape = CONFIG.DeckSlotShape();
-  const position = new BABYLON.Vector3(
-    3.2,
-    shape.depth / 2 + CONFIG.Floating,
-    -3.3
-  );
-  const rotation = CONFIG.DeckSlotRotation();
+  const meDeck = useAppSelector(selectMeDeck).inner;
+  const opDeck = useAppSelector(selectOpDeck).inner;
 
   return (
-    <box
-      name="common-deck"
-      width={shape.width}
-      height={shape.height}
-      depth={shape.depth}
-      position={position}
-      rotation={rotation}
-    >
-      <standardMaterial
-        name="common-deck-mat"
-        diffuseColor={CONFIG.DeckColor()}
+    <>
+      <SingleSlot
+        state={meDeck}
+        position={deckPosition(0, meDeck.length)}
+        rotation={CONFIG.CardSlotRotation(false)}
       />
-    </box>
+      <SingleSlot
+        state={opDeck}
+        position={deckPosition(1, opDeck.length)}
+        rotation={CONFIG.CardSlotRotation(true)}
+      />
+    </>
   );
 };
 
@@ -60,4 +57,12 @@ const ExtraDeck = () => {
   );
 };
 
+const deckPosition = (player: number, deckLength: number) => {
+  const x = player == 0 ? 3.2 : -3.2;
+  const y = (Depth * deckLength) / 2 + CONFIG.Floating;
+  const z = player == 0 ? -3.3 : 3.3;
+
+  return new BABYLON.Vector3(x, y, z);
+};
+
 export default Deck;

src/ui/Duel/exclusion.tsx

@@ -5,9 +5,7 @@ import {
   selectMeExclusion,
   selectopExclusion,
 } from "../../reducers/duel/exclusionSlice";
-import SingleSlot from "./singleSlot";
-
-const depth = 0.02;
+import SingleSlot, { Depth } from "./singleSlot";
 
 const Exclusion = () => {
   const meExclusion = useAppSelector(selectMeExclusion).inner;
@@ -31,7 +29,7 @@ const Exclusion = () => {
 
 const exclusionPosition = (player: number, exclusionLength: number) => {
   const x = player == 0 ? 3.2 : -3.2;
-  const y = (depth * exclusionLength) / 2 + CONFIG.Floating;
+  const y = (Depth * exclusionLength) / 2 + CONFIG.Floating;
   const z = player == 0 ? -0.7 : 0.7;
 
   return new BABYLON.Vector3(x, y, z);

src/ui/Duel/singleSlot.tsx

@@ -10,7 +10,7 @@ import {
 } from "../../reducers/duel/mod";
 
 const shape = CONFIG.SingleSlotShape;
-const depth = 0.02;
+export const Depth = 0.005;
 
 const SingleSlot = (props: {
   state: CardState[];
@@ -25,13 +25,17 @@ const SingleSlot = (props: {
       if (props.state.length != 0) {
         dispatch(
           setCardListModalInfo(
-            props.state.map((item) => {
-              return {
-                name: item.occupant?.text.name,
-                desc: item.occupant?.text.desc,
-                imgUrl: `https://cdn02.moecube.com:444/images/ygopro-images-zh-CN/${item.occupant?.id}.jpg`,
-              };
-            })
+            props.state
+              .filter(
+                (item) => item.occupant !== undefined && item.occupant.id !== 0
+              )
+              .map((item) => {
+                return {
+                  name: item.occupant?.text.name,
+                  desc: item.occupant?.text.desc,
+                  imgUrl: `https://cdn02.moecube.com:444/images/ygopro-images-zh-CN/${item.occupant?.id}.jpg`,
+                };
+              })
           )
         );
         dispatch(setCardListModalIsOpen(true));
@@ -49,7 +53,7 @@ const SingleSlot = (props: {
         new BABYLON.Vector3(
           shape.width,
           shape.height,
-          depth * props.state.length
+          Depth * props.state.length
         )
       }
       position={props.position}