add aip/helper.ts and service

src/api/helper.ts

+import { ygopro } from "./idl/ocgcore";
+import socketMiddleWare, { socketCmd } from "../middleware/socket";
+import { IDeck } from "./Card";
+
+export function sendUpdateDeck(deck: IDeck) {
+  const updateDeck = new ygopro.YgoCtosMsg({
+    ctos_update_deck: new ygopro.CtosUpdateDeck({
+      main: deck.main,
+      extra: deck.extra,
+      side: deck.side,
+    }),
+  });
+
+  socketMiddleWare({ cmd: socketCmd.SEND, payload: updateDeck });
+}
+
+export function sendHsReady() {
+  const hasReady = new ygopro.YgoCtosMsg({
+    ctos_hs_ready: new ygopro.CtosHsReady({}),
+  });
+
+  socketMiddleWare({ cmd: socketCmd.SEND, payload: hasReady });
+}
+
+export function sendHsStart() {
+  const hasStart = new ygopro.YgoCtosMsg({
+    ctos_hs_start: new ygopro.CtosHsStart({}),
+  });
+
+  socketMiddleWare({ cmd: socketCmd.SEND, payload: hasStart });
+}
+
+export function sendPlayerInfo(ws: WebSocket, player: string) {
+  const playerInfo = new ygopro.YgoCtosMsg({
+    ctos_player_info: new ygopro.CtosPlayerInfo({
+      name: player,
+    }),
+  });
+
+  ws.send(playerInfo.serialize());
+}
+
+export 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/middleware/socket.ts

@@ -14,6 +14,8 @@ import {
   observerChange,
   updateIsHost,
 } from "../reducers/playerSlice";
+import { sendPlayerInfo, sendJoinGame } from "../api/helper";
+import handleSocketOpen from "../service/onSocketOpen";
 
 export enum socketCmd {
   CONNECT,
@@ -23,10 +25,11 @@ export enum socketCmd {
 
 export interface socketAction {
   cmd: socketCmd;
-  ip?: string;
-  player?: string;
-  version?: number;
-  passWd?: string;
+  initInfo?: {
+    ip: string;
+    player: string;
+    passWd: string;
+  };
   payload?: ygopro.YgoCtosMsg;
 }
 
@@ -38,22 +41,12 @@ 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);
+      const info = action.initInfo;
+      if (info) {
+        ws = new WebSocket("ws://" + info.ip);
 
         ws.onopen = () => {
-          console.log("WebSocket open.");
-
-          if (ws && ws.readyState == 1) {
-            ws.binaryType = "arraybuffer";
-
-            sendPlayerInfo(ws, player);
-            sendJoinGame(ws, version, passWd);
-          }
+          handleSocketOpen(ws, info.ip, info.player, info.passWd);
         };
         ws.onclose = () => {
           console.log("WebSocket closed.");
@@ -221,26 +214,3 @@ export default function (action: socketAction) {
     }
   }
 }
-
-// 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/service/onSocketOpen.ts

+import { sendJoinGame, sendPlayerInfo } from "../api/helper";
+
+export default function handleSocketOpen(
+  ws: WebSocket | null,
+  ip: string,
+  player: string,
+  passWd: string
+) {
+  console.log("WebSocket opened.");
+
+  if (ws && ws.readyState == 1) {
+    ws.binaryType = "arraybuffer";
+
+    sendPlayerInfo(ws, player);
+    sendJoinGame(ws, 4947, passWd); // todo: version use config
+  }
+}

src/ui/WaitRoom.tsx

@@ -12,7 +12,7 @@ import {
   selectPlayer1,
   selectObserverCount,
 } from "../reducers/playerSlice";
-
+import { sendUpdateDeck, sendHsReady, sendHsStart } from "../api/helper";
 import socketMiddleWare, { socketCmd } from "../middleware/socket";
 
 const READY_STATE = "ready";
@@ -28,18 +28,14 @@ export default function WaitRoom() {
   const { player, passWd, ip } = params;
 
   useEffect(() => {
-    if (
-      player != null &&
-      player.length != 0 &&
-      passWd != null &&
-      passWd.length != 0
-    ) {
+    if (ip && player && player.length != 0 && passWd && passWd.length != 0) {
       socketMiddleWare({
         cmd: socketCmd.CONNECT,
-        ip,
-        player,
-        version: 4947,
-        passWd,
+        initInfo: {
+          ip,
+          player,
+          passWd,
+        },
       });
     }
   }, []);
@@ -114,32 +110,3 @@ export default function WaitRoom() {
     </div>
   );
 }
-
-// todo: move to api/*
-function sendUpdateDeck(deck: IDeck) {
-  const updateDeck = new ygopro.YgoCtosMsg({
-    ctos_update_deck: new ygopro.CtosUpdateDeck({
-      main: deck.main,
-      extra: deck.extra,
-      side: deck.side,
-    }),
-  });
-
-  socketMiddleWare({ cmd: socketCmd.SEND, payload: updateDeck });
-}
-
-function sendHsReady() {
-  const hasReady = new ygopro.YgoCtosMsg({
-    ctos_hs_ready: new ygopro.CtosHsReady({}),
-  });
-
-  socketMiddleWare({ cmd: socketCmd.SEND, payload: hasReady });
-}
-
-function sendHsStart() {
-  const hasStart = new ygopro.YgoCtosMsg({
-    ctos_hs_start: new ygopro.CtosHsStart({}),
-  });
-
-  socketMiddleWare({ cmd: socketCmd.SEND, payload: hasStart });
-}