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

Feat/ui/hint

See merge request mycard/Neos!44

src/api/strings.ts

+import axios from "axios";
+
+export async function fetchStrings(
+  region: string,
+  id: number
+): Promise<string> {
+  return (
+    await axios.get<string>(`http://localhost:3030/strings/${region}_${id}`)
+  ).data;
+}

src/reducers/duel/hint.ts

+import { createAsyncThunk, ActionReducerMapBuilder } from "@reduxjs/toolkit";
+import { DuelState } from "./mod";
+import { RootState } from "../../store";
+import { fetchStrings } from "../../api/strings";
+import { judgeSelf } from "./util";
+
+export interface HintState {
+  code: number;
+  msg?: string;
+}
+
+export const fetchHintMeta = createAsyncThunk(
+  "duel/fetchHintMeta",
+  async (param: [number, number]) => {
+    const player = param[0];
+    const hintData = param[1];
+
+    const hintMeta = await fetchStrings("!system", hintData);
+    const response: [number, string] = [player, hintMeta];
+
+    return response;
+  }
+);
+
+export const hintCase = (builder: ActionReducerMapBuilder<DuelState>) => {
+  builder.addCase(fetchHintMeta.pending, (state, action) => {
+    const player = action.meta.arg[0];
+    const code = action.meta.arg[1];
+
+    if (judgeSelf(player, state)) {
+      state.meHint = { code };
+    } else {
+      state.opHint = { code };
+    }
+  });
+  builder.addCase(fetchHintMeta.fulfilled, (state, action) => {
+    const player = action.payload[0];
+    const hintMeta = action.payload[1];
+
+    const hint = judgeSelf(player, state) ? state.meHint : state.opHint;
+    if (hint) {
+      hint.msg = hintMeta;
+    }
+  });
+};
+
+export const selectMeHint = (state: RootState) => state.duel.meHint;
+export const selectOpHint = (state: RootState) => state.duel.opHint;

src/reducers/duel/mod.ts

@@ -15,6 +15,7 @@ import {
 import { newTurnImpl } from "./turnSlice";
 import { newPhaseImpl } from "./phaseSlice";
 import { RootState } from "../../store";
+import { HintState, hintCase } from "./hint";
 import {
   ModalState,
   setCardModalIsOpenImpl,
@@ -31,6 +32,8 @@ export interface DuelState {
   opHands?: Hands; // 对手的手牌
   meTimeLimit?: TimeLimit; // 自己的计时
   opTimeLimit?: TimeLimit; // 对手的计时
+  meHint?: HintState; // 自己的提示
+  opHint?: HintState; // 对手的提示
   currentPlayer?: number; // 当前的操作方
   currentPhase?: string; // 当前的阶段
 
@@ -68,6 +71,7 @@ const duelSlice = createSlice({
   },
   extraReducers(builder) {
     handsCase(builder);
+    hintCase(builder);
   },
 });
 

src/service/duel/hint.ts

 import { ygopro } from "../../api/ocgcore/idl/ocgcore";
 import { AppDispatch } from "../../store";
+import { fetchHintMeta } from "../../reducers/duel/hint";
+import MsgHint = ygopro.StocGameMessage.MsgHint;
 
-export default (
-  hint: ygopro.StocGameMessage.MsgHint,
-  dispatch: AppDispatch
-) => {
-  // TODO
-  console.log(hint);
+export default (hint: MsgHint, dispatch: AppDispatch) => {
+  const player = hint.player;
+  switch (hint.hint_type) {
+    case MsgHint.HintType.HINT_EVENT:
+    case MsgHint.HintType.HINT_MESSAGE: {
+      dispatch(fetchHintMeta([player, hint.hint_data]));
+      break;
+    }
+    default: {
+      console.log(`Unhandled hint type ${MsgHint.HintType[hint.hint_type]}`);
+    }
+  }
 };

src/ui/Duel/simpleDuel/hintNotification.tsx

+import React, { useEffect } from "react";
+import { useAppSelector } from "../../../hook";
+import { selectMeHint, selectOpHint } from "../../../reducers/duel/hint";
+import { notification } from "antd";
+
+const HintNotification = () => {
+  const meHint = useAppSelector(selectMeHint);
+  const opHint = useAppSelector(selectOpHint);
+
+  const [api, contextHolder] = notification.useNotification();
+  useEffect(() => {
+    if (meHint && meHint.msg) {
+      api.info({
+        message: `<我方>${meHint.msg}`,
+        placement: "bottom",
+      });
+    }
+  }, [meHint]);
+
+  useEffect(() => {
+    if (opHint && opHint.msg) {
+      api.info({
+        message: `<对方>${opHint.msg}`,
+        placement: "top",
+      });
+    }
+  }, [opHint]);
+
+  return <>{contextHolder}</>;
+};
+
+export default HintNotification;

src/ui/Duel/simpleDuel/mod.tsx

@@ -21,6 +21,7 @@ import { Card } from "../../../reducers/duel/util";
 import { selectCurrentPlayer } from "../../../reducers/duel/turnSlice";
 import { selectCurrentPhase } from "../../../reducers/duel/phaseSlice";
 import CardModal from "./cardModal";
+import HintNotification from "./hintNotification";
 
 // CONFIG
 
@@ -144,6 +145,7 @@ export default class SimpleDuelPlateImpl implements IDuelPlate {
           ref={canvasRef}
         />
         <CardModal />
+        <HintNotification />
       </>
     );
   }