add cardsSlice

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 selectCard = (state: RootState, id: number) =>
+  state.cards.metas.get(id);
+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/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";