Commit 8afb47b7 authored by Chunchi Che's avatar Chunchi Che

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

Feat/infra/async thunk

See merge request !20
parents ca5e9b02 ad8672d2
Pipeline #18043 passed with stages
in 4 minutes and 6 seconds
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;
}
......@@ -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";
......
/*
* 卡牌数据存储
*
* */
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;
......@@ -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,
},
});
......
......@@ -3,6 +3,6 @@
*
* */
export interface Card {
export interface Hand {
code: number; // Currently only code
}
......@@ -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> {
......
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);
}
)
);
......
......@@ -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;
}
}
......@@ -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";
......
Markdown is supported
0% or
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment