add moraSlice

src/reducers/moraSlice.ts

+/*
+ * 猜拳页面的状态更新逻辑
+ *
+ * */
+import { createSlice } from "@reduxjs/toolkit";
+import { RootState } from "../store";
+
+export interface moraState {
+  selectable: boolean;
+}
+
+const initialState: moraState = {
+  selectable: false,
+};
+
+const moraSlice = createSlice({
+  name: "mora",
+  initialState,
+  reducers: {
+    selectAble: (state) => {
+      state.selectable = true;
+    },
+    unSelectAble: (state) => {
+      state.selectable = false;
+    },
+  },
+});
+
+export const { selectAble, unSelectAble } = moraSlice.actions;
+export const selectMoraSelectAble = (state: RootState) => state.mora.selectable;
+export default moraSlice.reducer;

src/service/mora/selectHand.ts

 import { ygopro } from "../../api/ocgcore/idl/ocgcore";
+import { store } from "../../store";
+import { selectAble } from "../../reducers/moraSlice";
 
 export default function handleSelectHand(_: ygopro.YgoStocMsg) {
-  console.log("in handleSelectHand!");
+  const dispatch = store.dispatch;
+
+  dispatch(selectAble());
 }

src/store.ts

@@ -5,12 +5,14 @@ import { configureStore } from "@reduxjs/toolkit";
 import joinedReducer from "./reducers/joinSlice";
 import chatReducer from "./reducers/chatSlice";
 import playerReducer from "./reducers/playerSlice";
+import moraReducer from "./reducers/moraSlice";
 
 export const store = configureStore({
   reducer: {
     join: joinedReducer,
     chat: chatReducer,
     player: playerReducer,
+    mora: moraReducer,
   },
 });
 

src/ui/Mora.tsx

@@ -5,18 +5,21 @@
 
 import React from "react";
 import "../css/Mora.css";
+import { useAppSelector } from "../hook";
+import { selectMoraSelectAble } from "../reducers/moraSlice";
 
 export default function Mora() {
+  const selectAble = useAppSelector(selectMoraSelectAble);
   return (
     <div className="container">
       <div className="item">
-        <button>rock</button>
+        <button disabled={!selectAble}>rock</button>
       </div>
       <div className="item">
-        <button>scissors</button>
+        <button disabled={!selectAble}>scissors</button>
       </div>
       <div className="item">
-        <button>paper</button>
+        <button disabled={!selectAble}>paper</button>
       </div>
     </div>
   );