Merge branch 'feat/infra/async_thunk' into 'main'

Feat/infra/async thunk

See merge request !20

src/api/cards.ts

+import axios from "axios";
+
+export interface CardMeta {
+  id: number;
+  data: {
+    ot?: number;
+    setcode?: number;
+    type?: number;
+    atk?: number;
+    def?: number;
+    level?: number;
+    race?: number;
+    attribute?: number;
+  };
+  text: {
+    name?: string;
+    types?: string;
+    desc?: string;
+  };
+}
+
+/*
+ * 返回卡片元数据
+ *
+ * @param id - 卡片id
+ * @returns 卡片数据
+ *
+ * */
+export async function fetchCard(id: number): Promise<CardMeta> {
+  const res = await axios.get<CardMeta>("https://ygocdb.com/api/v0/card/" + id);
+
+  return res.data;
+}

src/api/ocgcore/ocgHelper.ts

@@ -4,7 +4,7 @@
  * */
 import { ygopro } from "./idl/ocgcore";
 import socketMiddleWare, { socketCmd } from "../../middleware/socket";
-import { IDeck } from "../Card";
+import { IDeck } from "../deck";
 import PlayerInfoAdapter from "./ocgAdapter/ctos/ctosPlayerInfo";
 import JoinGameAdapter from "./ocgAdapter/ctos/ctosJoinGame";
 import UpdateDeckAdapter from "./ocgAdapter/ctos/ctosUpdateDeck";

src/reducers/cardsSlice.ts

+/*
+ * 卡牌数据存储
+ *
+ * */
+
+import { createSlice, createAsyncThunk } from "@reduxjs/toolkit";
+import { CardMeta, fetchCard } from "../api/cards";
+import { RootState } from "../store";
+
+export const fetchCardMetaById = createAsyncThunk(
+  "cards/fetchByIdStatus",
+  async (cardId: number) => {
+    return await fetchCard(cardId);
+  }
+);
+
+export interface Card {
+  meta?: CardMeta;
+  state: string;
+}
+
+export interface CardMetaState {
+  metas: Map<number, Card>;
+}
+
+const initialState: CardMetaState = {
+  metas: new Map(),
+};
+
+const cardsSlice = createSlice({
+  name: "cards",
+  initialState,
+  reducers: {},
+  extraReducers: (builder) => {
+    builder.addCase(fetchCardMetaById.fulfilled, (state, action) => {
+      const id = action.payload.id;
+      const card = {
+        meta: action.payload,
+        state: "filled",
+      };
+      state.metas.set(id, card);
+    }); // TODO: handle pending and rejected
+  },
+});
+
+export const selectCards = (state: RootState) => state.cards.metas;
+export default cardsSlice.reducer;

src/store.ts

@@ -7,6 +7,7 @@ import chatReducer from "./reducers/chatSlice";
 import playerReducer from "./reducers/playerSlice";
 import moraReducer from "./reducers/moraSlice";
 import duelReducer from "./reducers/duel/mod";
+import cardsReducer from "./reducers/cardsSlice";
 
 export const store = configureStore({
   reducer: {
@@ -15,6 +16,7 @@ export const store = configureStore({
     player: playerReducer,
     mora: moraReducer,
     duel: duelReducer,
+    cards: cardsReducer,
   },
 });
 

src/ui/Duel/data.ts

@@ -3,6 +3,6 @@
  *
  * */
 
-export interface Card {
+export interface Hand {
   code: number; // Currently only code
 }

src/ui/Duel/duel.ts

@@ -26,7 +26,7 @@ export interface IDuelPlate {
   // 渲染接口，返回一个React组件
   render(): React.ReactElement;
   // 注册手牌selector
-  registerHands(selector: TypeSelector<DuelData.Card[]>): void;
+  registerHands(selector: TypeSelector<DuelData.Hand[]>): void;
 }
 
 export interface TypeSelector<T> {

src/ui/Duel/simpleDuel/hands.ts

-import { Card } from "../data";
+import { Hand } from "../data";
 import * as BABYLON from "@babylonjs/core";
 import * as CONFIG from "./config";
+import { Card } from "../../../reducers/cardsSlice";
 
-export default (hands: Card[], scene: BABYLON.Scene) => {
+export default (
+  hands: Hand[],
+  cardMetas: Map<number, Card>,
+  scene: BABYLON.Scene
+) => {
   const groundShape = CONFIG.GroundShape();
   const handShape = CONFIG.HandShape();
   const gap = groundShape.width / hands.length;
@@ -31,7 +36,9 @@ export default (hands: Card[], scene: BABYLON.Scene) => {
       new BABYLON.ExecuteCodeAction(
         BABYLON.ActionManager.OnPickTrigger,
         (event) => {
-          console.log(`<Click>hand: ${idx}`, "card:", item, "event:", event);
+          const meta = cardMetas.get(item.code);
+
+          console.log(`<Click>hand: ${idx}`, "card:", meta, "event:", event);
         }
       )
     );

src/ui/Duel/simpleDuel/mod.tsx

@@ -14,15 +14,20 @@ import renderMonsters from "./monsters";
 import renderExtraMonsters from "./extraMonsters";
 import renderMagics from "./magics";
 import * as CONFIG from "./config";
+import { fetchCardMetaById } from "../../../reducers/cardsSlice";
+import { store } from "../../../store";
+import { selectCards } from "../../../reducers/cardsSlice";
 
 // CONFIG
 
 export default class SimpleDuelPlateImpl implements IDuelPlate {
-  handsSelector?: TypeSelector<DuelData.Card[]>;
+  handsSelector?: TypeSelector<DuelData.Hand[]>;
 
   constructor() {}
 
   render(): React.ReactElement {
+    const dispatch = store.dispatch;
+
     // ----- 数据获取 -----
 
     // 默认的手牌Selector，返回五个code为-1的Card。
@@ -31,6 +36,12 @@ export default class SimpleDuelPlateImpl implements IDuelPlate {
     };
     const hands = useAppSelector(this.handsSelector || defaultHandsSelector);
 
+    // TODO: 这里应该思考更合理的处理方式
+    hands.forEach((item) => {
+      dispatch(fetchCardMetaById(item.code));
+    });
+    const cardMetas = useAppSelector(selectCards);
+
     // ----- WebGL渲染 -----
     const canvasRef = useRef<HTMLCanvasElement>(null);
 
@@ -66,7 +77,7 @@ export default class SimpleDuelPlateImpl implements IDuelPlate {
       renderExtraMonsters(scene);
 
       // 创建手牌
-      renderHands(hands, scene);
+      renderHands(hands, cardMetas, scene);
 
       // 创建地板
       const ground = BABYLON.MeshBuilder.CreateGround(
@@ -79,7 +90,7 @@ export default class SimpleDuelPlateImpl implements IDuelPlate {
       engine.runRenderLoop(() => {
         scene.render();
       });
-    }, [canvasRef, hands]);
+    }, [canvasRef, hands, cardMetas]);
 
     return (
       <canvas
@@ -90,7 +101,7 @@ export default class SimpleDuelPlateImpl implements IDuelPlate {
     );
   }
 
-  registerHands(selector: TypeSelector<DuelData.Card[]>): void {
+  registerHands(selector: TypeSelector<DuelData.Hand[]>): void {
     this.handsSelector = selector;
   }
 }

src/ui/WaitRoom.tsx

@@ -4,7 +4,7 @@
  * */
 import React, { useEffect, useState } from "react";
 import { Link, useParams } from "react-router-dom";
-import { fetchDeck } from "../api/Card";
+import { fetchDeck } from "../api/deck";
 import "../css/WaitRoom.css";
 import { useAppSelector } from "../hook";
 import { selectJoined } from "../reducers/joinSlice";