add HintNotification component

src/reducers/duel/hint.ts

@@ -44,5 +44,5 @@ export const hintCase = (builder: ActionReducerMapBuilder<DuelState>) => {
   });
 };
 
-export const selectMeHint = (state: RootState) => state.duel.meHint || "";
-export const selectOpHint = (state: RootState) => state.duel.opHint || "";
+export const selectMeHint = (state: RootState) => state.duel.meHint;
+export const selectOpHint = (state: RootState) => state.duel.opHint;

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;