Merge branch 'feat/websocket/middleware' into 'main'

Feat/websocket/middleware

See merge request !4

src/main.tsx

 import React from "react";
 import ReactDOM from "react-dom/client";
-import App from "./App";
+import App from "./ui/App";
 import { BrowserRouter } from "react-router-dom";
 import { Provider } from "react-redux";
 import { store } from "./store";

src/middleware/socket.ts

+import { ygopro } from "../api/idl/ocgcore";
+import { setJoined } from "../reducers/joinSlice";
+import { postChat } from "../reducers/chatSlice";
+import { store } from "../store";
+import {
+  player0Enter,
+  player1Enter,
+  player0Update,
+  player1Update,
+  player0Leave,
+  player1Leave,
+  hostChange,
+  observerIncrement,
+  observerChange,
+  updateIsHost,
+} from "../reducers/playerSlice";
+
+export enum socketCmd {
+  CONNECT,
+  DISCONNECT,
+  SEND,
+}
+
+export interface socketAction {
+  cmd: socketCmd;
+  ip?: string;
+  player?: string;
+  version?: number;
+  passWd?: string;
+  payload?: ygopro.YgoCtosMsg;
+}
+
+let ws: WebSocket | null = null;
+
+const READY_STATE = "ready";
+const NO_READY_STATE = "not ready";
+
+export default function (action: socketAction) {
+  switch (action.cmd) {
+    case socketCmd.CONNECT: {
+      const ip = action.ip;
+      const player = action.player;
+      const version = action.version;
+      const passWd = action.passWd;
+      if (ip && player && version && passWd) {
+        ws = new WebSocket("ws://" + ip);
+
+        ws.onopen = () => {
+          console.log("WebSocket open.");
+
+          if (ws && ws.readyState == 1) {
+            ws.binaryType = "arraybuffer";
+
+            sendPlayerInfo(ws, player);
+            sendJoinGame(ws, version, passWd);
+          }
+        };
+        ws.onclose = () => {
+          console.log("WebSocket closed.");
+          ws = null;
+        };
+        ws.onmessage = (e) => {
+          const pb = ygopro.YgoStocMsg.deserializeBinary(e.data);
+          const dispatch = store.dispatch;
+
+          switch (pb.msg) {
+            case "stoc_join_game": {
+              const msg = pb.stoc_join_game;
+              // todo
+
+              dispatch(setJoined());
+              break;
+            }
+            case "stoc_chat": {
+              const chat = pb.stoc_chat;
+
+              dispatch(postChat(chat.msg));
+              break;
+            }
+            case "stoc_hs_player_change": {
+              const change = pb.stoc_hs_player_change;
+
+              if (change.pos > 1) {
+                console.log("Currently only supported 2v2 mode.");
+              } else {
+                switch (change.state) {
+                  case ygopro.StocHsPlayerChange.State.UNKNOWN: {
+                    console.log("Unknown HsPlayerChange State");
+
+                    break;
+                  }
+                  case ygopro.StocHsPlayerChange.State.MOVE: {
+                    console.log(
+                      "Player " + change.pos + " moved to " + change.moved_pos
+                    );
+
+                    let src = change.pos;
+                    let dst = change.moved_pos;
+
+                    // todo
+
+                    // if (src === 0 && dst === 1) {
+                    //   setPlayer1(player0);
+                    //   setPlayer0({});
+                    // } else if (src === 1 && dst === 0) {
+                    //   setPlayer0(player1);
+                    //   setPlayer1({});
+                    // }
+
+                    break;
+                  }
+                  case ygopro.StocHsPlayerChange.State.READY: {
+                    change.pos == 0
+                      ? dispatch(player0Update(READY_STATE))
+                      : dispatch(player1Update(READY_STATE));
+
+                    break;
+                  }
+                  case ygopro.StocHsPlayerChange.State.NO_READY: {
+                    change.pos == 0
+                      ? dispatch(player0Update(NO_READY_STATE))
+                      : dispatch(player1Update(NO_READY_STATE));
+
+                    break;
+                  }
+                  case ygopro.StocHsPlayerChange.State.LEAVE: {
+                    change.pos == 0
+                      ? dispatch(player0Leave)
+                      : dispatch(player1Leave);
+
+                    break;
+                  }
+                  case ygopro.StocHsPlayerChange.State.TO_OBSERVER: {
+                    change.pos == 0
+                      ? dispatch(player0Leave)
+                      : dispatch(player1Leave);
+                    dispatch(observerIncrement());
+
+                    break;
+                  }
+                  default: {
+                    break;
+                  }
+                }
+              }
+
+              break;
+            }
+            case "stoc_hs_watch_change": {
+              const count = pb.stoc_hs_watch_change.count;
+              dispatch(observerChange(count));
+
+              break;
+            }
+            case "stoc_hs_player_enter": {
+              const name = pb.stoc_hs_player_enter.name;
+              const pos = pb.stoc_hs_player_enter.pos;
+
+              if (pos > 1) {
+                console.log("Currently only supported 2v2 mode.");
+              } else {
+                pos == 0
+                  ? dispatch(player0Enter(name))
+                  : dispatch(player1Enter(name));
+              }
+
+              break;
+            }
+            case "stoc_type_change": {
+              const selfType = pb.stoc_type_change.self_type;
+              const assertHost = pb.stoc_type_change.is_host;
+
+              dispatch(updateIsHost(assertHost));
+
+              if (assertHost) {
+                switch (selfType) {
+                  case ygopro.StocTypeChange.SelfType.PLAYER1: {
+                    dispatch(hostChange(0));
+                    dispatch(player0Update(NO_READY_STATE));
+
+                    break;
+                  }
+                  case ygopro.StocTypeChange.SelfType.PLAYER2: {
+                    dispatch(hostChange(0));
+                    dispatch(player1Update(NO_READY_STATE));
+
+                    break;
+                  }
+                  default: {
+                    break;
+                  }
+                }
+              }
+
+              break;
+            }
+            default: {
+              break;
+            }
+          }
+        };
+      }
+      break;
+    }
+    case socketCmd.DISCONNECT: {
+      if (ws) {
+        ws.close();
+      }
+      break;
+    }
+    case socketCmd.SEND: {
+      const pb = action.payload;
+      if (ws && pb) {
+        ws.send(pb.serialize());
+      }
+      break;
+    }
+    default: {
+      console.log("Unhandled socket command: " + action.cmd);
+      break;
+    }
+  }
+}
+
+// todo: move to api/*
+function sendPlayerInfo(ws: WebSocket, player: string) {
+  const playerInfo = new ygopro.YgoCtosMsg({
+    ctos_player_info: new ygopro.CtosPlayerInfo({
+      name: player,
+    }),
+  });
+
+  ws.send(playerInfo.serialize());
+}
+
+function sendJoinGame(ws: WebSocket, version: number, passWd: string) {
+  const joinGame = new ygopro.YgoCtosMsg({
+    ctos_join_game: new ygopro.CtosJoinGame({
+      version, // todo: use config
+      gameid: 0,
+      passwd: passWd,
+    }),
+  });
+
+  ws.send(joinGame.serialize());
+}

src/reducers/playerSlice.ts

+import { createSlice, PayloadAction } from "@reduxjs/toolkit";
+import { RootState } from "../store";
+
+export type Player = {
+  name?: string;
+  state?: string;
+  isHost?: boolean;
+};
+
+export interface playerState {
+  player0: Player;
+  player1: Player;
+  observerCount: number;
+  isHost: boolean;
+}
+
+const initialState: playerState = {
+  player0: {},
+  player1: {},
+  observerCount: 0,
+  isHost: false,
+};
+
+const playerSlice = createSlice({
+  name: "player",
+  initialState,
+  reducers: {
+    player0Enter: (state, action: PayloadAction<string>) => {
+      state.player0.name = action.payload;
+    },
+    player1Enter: (state, action: PayloadAction<string>) => {
+      state.player1.name = action.payload;
+    },
+    player0Update: (state, action: PayloadAction<string>) => {
+      state.player0.state = action.payload;
+    },
+    player1Update: (state, action: PayloadAction<string>) => {
+      state.player1.state = action.payload;
+    },
+    player0Leave: (state) => {
+      state.player0 = {};
+    },
+    player1Leave: (state) => {
+      state.player1 = {};
+    },
+    hostChange: (state, action: PayloadAction<number>) => {
+      const i = action.payload;
+
+      if (i === 0) {
+        state.player0.isHost = true;
+        state.player1.isHost = false;
+      } else {
+        state.player1.isHost = true;
+        state.player0.isHost = false;
+      }
+    },
+    observerIncrement: (state) => {
+      state.observerCount += 1;
+    },
+    observerChange: (state, action: PayloadAction<number>) => {
+      state.observerCount = action.payload;
+    },
+    updateIsHost: (state, action: PayloadAction<boolean>) => {
+      state.isHost = action.payload;
+    },
+  },
+});
+
+export const {
+  player0Enter,
+  player1Enter,
+  player0Update,
+  player1Update,
+  player0Leave,
+  player1Leave,
+  hostChange,
+  observerIncrement,
+  observerChange,
+  updateIsHost,
+} = playerSlice.actions;
+export const selectPlayer0 = (state: RootState) => state.player.player0;
+export const selectPlayer1 = (state: RootState) => state.player.player1;
+export const selectIsHost = (state: RootState) => state.player.isHost;
+export const selectObserverCount = (state: RootState) =>
+  state.player.observerCount;
+export default playerSlice.reducer;

src/store.ts

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

src/App.tsx → src/ui/App.tsx

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

src/ui/WaitRoom.tsx

-import React, { useRef, useEffect, useState, useReducer } from "react";
+import React, { useEffect, useState } from "react";
 import { useParams } from "react-router-dom";
 import { ygopro } from "../api/idl/ocgcore";
 import { fetchDeck, IDeck } from "../api/Card";
 import "../css/WaitRoom.css";
-import { useAppDispatch, useAppSelector } from "../hook";
-import { setJoined, selectJoined } from "../reducers/joinSlice";
-import { postChat, selectChat } from "../reducers/chatSlice";
-
-type Player = {
-  name?: string;
-  state?: string; // todo: use enum or boolean
-  isHost?: boolean;
-};
+import { useAppSelector } from "../hook";
+import { selectJoined } from "../reducers/joinSlice";
+import { selectChat } from "../reducers/chatSlice";
+import {
+  selectIsHost,
+  selectPlayer0,
+  selectPlayer1,
+  selectObserverCount,
+} from "../reducers/playerSlice";
+
+import socketMiddleWare, { socketCmd } from "../middleware/socket";
 
 const READY_STATE = "ready";
-const NO_READY_STATE = "not ready";
 
 export default function WaitRoom() {
   const params = useParams<{
@@ -24,234 +25,46 @@ export default function WaitRoom() {
   }>();
 
   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 ws = useRef<WebSocket | null>(null);
-
-  const dispatch = useAppDispatch();
-
   const { player, passWd, ip } = params;
 
   useEffect(() => {
-    if (!ws.current) {
-      ws.current = new WebSocket("ws://" + ip);
+    if (
+      player != null &&
+      player.length != 0 &&
+      passWd != null &&
+      passWd.length != 0
+    ) {
+      socketMiddleWare({
+        cmd: socketCmd.CONNECT,
+        ip,
+        player,
+        version: 4947,
+        passWd,
+      });
     }
-
-    ws.current.onopen = () => {
-      console.log("Websocket open");
-
-      if (
-        player != null &&
-        player.length != 0 &&
-        passWd != null &&
-        passWd.length != 0 &&
-        ws.current
-      ) {
-        const wsCurrent = ws.current;
-
-        wsCurrent.binaryType = "arraybuffer";
-
-        sendPlayerInfo(wsCurrent, player);
-        sendJoinGame(wsCurrent, 4947, passWd);
-      }
-    };
-
-    ws.current.onclose = () => {
-      console.log("Websocket closed");
-    };
-
-    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
-
-          dispatch(setJoined());
-          break;
-        }
-        case "stoc_chat": {
-          const chat = pb.stoc_chat;
-
-          dispatch(postChat(chat.msg));
-          break;
-        }
-        case "stoc_hs_player_change": {
-          const change = pb.stoc_hs_player_change;
-
-          if (change.pos > 1) {
-            console.log("Currently only supported 2v2 mode.");
-          } else {
-            switch (change.state) {
-              case ygopro.StocHsPlayerChange.State.UNKNOWN: {
-                console.log("Unknown HsPlayerChange State");
-
-                break;
-              }
-              case ygopro.StocHsPlayerChange.State.MOVE: {
-                console.log(
-                  "Player " + change.pos + " moved to " + change.moved_pos
-                );
-
-                let src = change.pos;
-                let dst = change.moved_pos;
-
-                if (src === 0 && dst === 1) {
-                  setPlayer1(player0);
-                  setPlayer0({});
-                } else if (src === 1 && dst === 0) {
-                  setPlayer0(player1);
-                  setPlayer1({});
-                }
-
-                break;
-              }
-              case ygopro.StocHsPlayerChange.State.READY: {
-                const updateState = (player: Player) => {
-                  player.state = READY_STATE;
-                  return player;
-                };
-
-                change.pos == 0
-                  ? setPlayer0(updateState)
-                  : setPlayer1(updateState);
-
-                break;
-              }
-              case ygopro.StocHsPlayerChange.State.NO_READY: {
-                const updateState = (player: Player) => {
-                  const state = NO_READY_STATE;
-                  player.state = state;
-                  return player;
-                };
-
-                change.pos == 0
-                  ? setPlayer0(updateState)
-                  : setPlayer1(updateState);
-
-                break;
-              }
-              case ygopro.StocHsPlayerChange.State.LEAVE: {
-                change.pos == 0 ? setPlayer0({}) : setPlayer1({});
-
-                break;
-              }
-              case ygopro.StocHsPlayerChange.State.TO_OBSERVER: {
-                change.pos == 0 ? setPlayer0({}) : setPlayer1({});
-                setObserverCount(observerCount + 1);
-
-                break;
-              }
-              default: {
-                break;
-              }
-            }
-
-            forceUpdate();
-          }
-
-          break;
-        }
-        case "stoc_hs_watch_change": {
-          const count = pb.stoc_hs_watch_change.count;
-
-          setObserverCount(count);
-          break;
-        }
-        case "stoc_hs_player_enter": {
-          const name = pb.stoc_hs_player_enter.name;
-          const pos = pb.stoc_hs_player_enter.pos;
-
-          if (pos > 1) {
-            console.log("Currently only supported 2v2 mode.");
-          } else {
-            const updatePlayer = (player: Player) => {
-              player.name = name;
-              return player;
-            };
-
-            pos == 0 ? setPlayer0(updatePlayer) : setPlayer1(updatePlayer);
-            forceUpdate();
-          }
-
-          break;
-        }
-        case "stoc_type_change": {
-          const selfType = pb.stoc_type_change.self_type;
-          const assertHost = pb.stoc_type_change.is_host;
-
-          setIsHost(assertHost);
-
-          if (assertHost) {
-            const updatePlayer = (player: Player) => {
-              player.isHost = assertHost;
-              player.state = NO_READY_STATE;
-              return player;
-            };
-
-            switch (selfType) {
-              case ygopro.StocTypeChange.SelfType.PLAYER1: {
-                setPlayer0(updatePlayer);
-
-                break;
-              }
-              case ygopro.StocTypeChange.SelfType.PLAYER2: {
-                setPlayer1(updatePlayer);
-
-                break;
-              }
-              default: {
-                break;
-              }
-            }
-            forceUpdate();
-          }
-
-          break;
-        }
-        default: {
-          break;
-        }
-      }
-    };
-
-    const wsCurrent = ws.current;
-
-    return () => {
-      if (wsCurrent.readyState == 1) {
-        wsCurrent.close();
-      }
-    };
-  }, [ws]);
+  }, []);
 
   const joined = useAppSelector(selectJoined);
   const chat = useAppSelector(selectChat);
+  const isHost = useAppSelector(selectIsHost);
+  const player0 = useAppSelector(selectPlayer0);
+  const player1 = useAppSelector(selectPlayer1);
+  const observerCount = useAppSelector(selectObserverCount);
 
   const handleChoseDeck = async () => {
-    if (ws.current) {
-      const deck = await fetchDeck("hero.ydk");
+    const deck = await fetchDeck("hero.ydk");
 
-      sendUpdateDeck(ws.current, deck);
+    sendUpdateDeck(deck);
 
-      setChoseDeck(true);
-    }
+    setChoseDeck(true);
   };
 
   const handleChoseReady = () => {
-    if (ws.current) {
-      sendHsReady(ws.current);
-    }
+    sendHsReady();
   };
 
   const handleChoseStart = () => {
-    if (ws.current) {
-      sendHsStart(ws.current);
-    }
+    sendHsStart();
   };
 
   return (
@@ -302,29 +115,8 @@ export default function WaitRoom() {
   );
 }
 
-function sendPlayerInfo(ws: WebSocket, player: string) {
-  const playerInfo = new ygopro.YgoCtosMsg({
-    ctos_player_info: new ygopro.CtosPlayerInfo({
-      name: player,
-    }),
-  });
-
-  ws.send(playerInfo.serialize());
-}
-
-function sendJoinGame(ws: WebSocket, version: number, passWd: string) {
-  const joinGame = new ygopro.YgoCtosMsg({
-    ctos_join_game: new ygopro.CtosJoinGame({
-      version, // todo: use config
-      gameid: 0,
-      passwd: passWd,
-    }),
-  });
-
-  ws.send(joinGame.serialize());
-}
-
-function sendUpdateDeck(ws: WebSocket, deck: IDeck) {
+// todo: move to api/*
+function sendUpdateDeck(deck: IDeck) {
   const updateDeck = new ygopro.YgoCtosMsg({
     ctos_update_deck: new ygopro.CtosUpdateDeck({
       main: deck.main,
@@ -333,21 +125,21 @@ function sendUpdateDeck(ws: WebSocket, deck: IDeck) {
     }),
   });
 
-  ws.send(updateDeck.serialize());
+  socketMiddleWare({ cmd: socketCmd.SEND, payload: updateDeck });
 }
 
-function sendHsReady(ws: WebSocket) {
+function sendHsReady() {
   const hasReady = new ygopro.YgoCtosMsg({
     ctos_hs_ready: new ygopro.CtosHsReady({}),
   });
 
-  ws.send(hasReady.serialize());
+  socketMiddleWare({ cmd: socketCmd.SEND, payload: hasReady });
 }
 
-function sendHsStart(ws: WebSocket) {
+function sendHsStart() {
   const hasStart = new ygopro.YgoCtosMsg({
     ctos_hs_start: new ygopro.CtosHsStart({}),
   });
 
-  ws.send(hasStart.serialize());
+  socketMiddleWare({ cmd: socketCmd.SEND, payload: hasStart });
 }