add redux

package.json

@@ -3,6 +3,7 @@
   "version": "0.1.0",
   "private": true,
   "dependencies": {
+    "@reduxjs/toolkit": "^1.8.6",
     "@testing-library/jest-dom": "^5.16.5",
     "@testing-library/react": "^13.3.0",
     "@testing-library/user-event": "^13.5.0",
@@ -10,10 +11,12 @@
     "@types/node": "^16.11.48",
     "@types/react": "^18.0.17",
     "@types/react-dom": "^18.0.6",
+    "@types/react-redux": "^7.1.24",
     "axios": "^0.27.2",
     "google-protobuf": "^3.21.0",
     "react": "^18.2.0",
     "react-dom": "^18.2.0",
+    "react-redux": "^8.0.4",
     "react-router-dom": "^6.4.0",
     "react-scripts": "^5.0.1",
     "socket.io-client": "^4.5.1",

src/App.tsx

 import React from "react";
 import JoinRoom from "./JoinRoom";
-import WaitRoom from "./WaitRoom";
+import WaitRoom from "./ui//WaitRoom";
 import ThreeJs from "./ThreeJs";
 import { Routes, Route } from "react-router-dom";
 

src/main.tsx

@@ -3,6 +3,8 @@ import ReactDOM from "react-dom/client";
 import App from "./App";
 import reportWebVitals from "./reportWebVitals";
 import { BrowserRouter } from "react-router-dom";
+import { Provider } from "react-redux";
+import { store } from "./store";
 
 const root = ReactDOM.createRoot(
   document.getElementById("root") as HTMLElement
@@ -10,7 +12,9 @@ const root = ReactDOM.createRoot(
 root.render(
   <React.StrictMode>
     <BrowserRouter>
-      <App />
+      <Provider store={store}>
+        <App />
+      </Provider>
     </BrowserRouter>
   </React.StrictMode>
 );

src/reducers/joinSlice.ts

+import { createSlice } from "@reduxjs/toolkit";
+
+const initialState = false;
+
+const joinedSlice = createSlice({
+  name: "join",
+  initialState,
+  reducers: {
+    setJoined(state) {
+      state = true;
+    },
+    setUnJoined(state) {
+      state = false;
+    },
+  },
+});
+
+export const { setJoined, setUnJoined } = joinedSlice.actions;
+export default joinedSlice.reducer;

src/store.ts

+import { configureStore } from "@reduxjs/toolkit";
+import joinedReducer from "./reducers/joinSlice";
+
+export const store = configureStore({
+  reducer: {
+    join: joinedReducer,
+  },
+});
+
+export type RootState = ReturnType<typeof store.getState>;
+export type AppDispatch = typeof store.dispatch;

src/WaitRoom.tsx → src/ui/WaitRoom.tsx

 import React, { useRef, useEffect, useState, useReducer } from "react";
 import { useParams } from "react-router-dom";
-import { ygopro } from "./api/idl/ocgcore";
-import { fetchDeck, IDeck } from "./Card";
-import "./css/WaitRoom.css";
+import { ygopro } from "../api/idl/ocgcore";
+import { fetchDeck, IDeck } from "../Card";
+import "../css/WaitRoom.css";
+import { useDispatch, useSelector } from "react-redux";
+import { setJoined } from "../reducers/joinSlice";
 
 type Player = {
   name?: string;
@@ -20,17 +22,18 @@ export default function WaitRoom() {
     ip?: string;
   }>();
 
-  const [joined, setJoined] = useState<boolean>(false);
   const [chat, setChat] = useState<string>("");
   const [choseDeck, setChoseDeck] = useState<boolean>(false);
   const [observerCount, setObserverCount] = useState<number>(0);
   const [player0, setPlayer0] = useState<Player>({});
   const [player1, setPlayer1] = useState<Player>({});
   const [isHost, setIsHost] = useState<boolean>(false);
-  const [_, forceUpdate] = useReducer(x => x + 1, 0); // todo: use correct update design
+  const [_, forceUpdate] = useReducer((x) => x + 1, 0); // todo: use correct update design
 
   const ws = useRef<WebSocket | null>(null);
 
+  const dispatch = useDispatch();
+
   const { player, passWd, ip } = params;
 
   useEffect(() => {
@@ -61,14 +64,15 @@ export default function WaitRoom() {
       console.log("Websocket closed");
     };
 
-    ws.current.onmessage = e => {
+    ws.current.onmessage = (e) => {
       const pb = ygopro.YgoStocMsg.deserializeBinary(e.data);
 
       switch (pb.msg) {
         case "stoc_join_game": {
           const msg = pb.stoc_join_game;
           // todo
-          setJoined(true);
+
+          dispatch(setJoined());
           break;
         }
         case "stoc_chat": {
@@ -225,6 +229,8 @@ export default function WaitRoom() {
     };
   }, [ws]);
 
+  const joined = useSelector((state) => state);
+
   const handleChoseDeck = async () => {
     if (ws.current) {
       const deck = await fetchDeck("hero.ydk");
@@ -298,8 +304,8 @@ export default function WaitRoom() {
 function sendPlayerInfo(ws: WebSocket, player: string) {
   const playerInfo = new ygopro.YgoCtosMsg({
     ctos_player_info: new ygopro.CtosPlayerInfo({
-      name: player
-    })
+      name: player,
+    }),
   });
 
   ws.send(playerInfo.serialize());
@@ -310,8 +316,8 @@ function sendJoinGame(ws: WebSocket, version: number, passWd: string) {
     ctos_join_game: new ygopro.CtosJoinGame({
       version, // todo: use config
       gameid: 0,
-      passwd: passWd
-    })
+      passwd: passWd,
+    }),
   });
 
   ws.send(joinGame.serialize());
@@ -322,8 +328,8 @@ function sendUpdateDeck(ws: WebSocket, deck: IDeck) {
     ctos_update_deck: new ygopro.CtosUpdateDeck({
       main: deck.main,
       extra: deck.extra,
-      side: deck.side
-    })
+      side: deck.side,
+    }),
   });
 
   ws.send(updateDeck.serialize());
@@ -331,7 +337,7 @@ function sendUpdateDeck(ws: WebSocket, deck: IDeck) {
 
 function sendHsReady(ws: WebSocket) {
   const hasReady = new ygopro.YgoCtosMsg({
-    ctos_hs_ready: new ygopro.CtosHsReady({})
+    ctos_hs_ready: new ygopro.CtosHsReady({}),
   });
 
   ws.send(hasReady.serialize());
@@ -339,7 +345,7 @@ function sendHsReady(ws: WebSocket) {
 
 function sendHsStart(ws: WebSocket) {
   const hasStart = new ygopro.YgoCtosMsg({
-    ctos_hs_start: new ygopro.CtosHsStart({})
+    ctos_hs_start: new ygopro.CtosHsStart({}),
   });
 
   ws.send(hasStart.serialize());