add socket middleware

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";
+
+export enum socketCmd {
+  CONNECT,
+  DISCONNECT,
+  SEND,
+}
+
+export interface socketAction {
+  cmd: socketCmd;
+  ip?: string;
+  payload?: ygopro.YgoCtosMsg;
+}
+
+let ws: WebSocket | null = null;
+
+export default function (action: socketAction) {
+  switch (action.cmd) {
+    case socketCmd.CONNECT: {
+      const ip = action.ip;
+      if (ip) {
+        ws = new WebSocket("ws://" + ip);
+
+        ws.onopen = () => {
+          console.log("WebSocket open.");
+        };
+        ws.onclose = () => {
+          console.log("WebSocket closed.");
+          ws = null;
+        };
+        ws.onmessage = (e) => {
+          const pb = ygopro.YgoStocMsg.deserializeBinary(e.data);
+
+          // todo
+        };
+      }
+      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;
+    }
+  }
+}

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() {