Merge pull request #3 from DarkNeos/router

Router

package.json

@@ -13,7 +13,8 @@
     "google-protobuf": "^3.21.0",
     "react": "^18.2.0",
     "react-dom": "^18.2.0",
-    "react-scripts": "5.0.1",
+    "react-router-dom": "^6.4.0",
+    "react-scripts": "^2.1.3",
     "socket.io-client": "^4.5.1",
     "typescript": "^4.7.4",
     "web-vitals": "^2.1.4"

src/App.tsx

 import React from "react";
 import "./App.css";
 import "./api/ocgcore";
-import JoinHome from "./JoinHome";
+import JoinRoom from "./JoinRoom";
+import WaitRoom from "./WaitRoom";
+import { Routes, Route } from "react-router-dom";
 
 function App() {
   return (
-    <div className="App">
-      <header className="App-header">
-        <JoinHome addr="ws://localhost:8000" />
-      </header>
-    </div>
+    <Routes>
+      <Route path="/" element={<JoinRoom />} />
+      <Route path="/:player/:passWd/:ip" element={<WaitRoom />} />
+    </Routes>
   );
 }
 

src/JoinRoom.tsx

+import React, { useState, ChangeEvent } from "react";
+import { Link } from "react-router-dom";
+
+export default function JoinRoom() {
+  const [player, setPlayer] = useState("");
+  const [passWd, setPasswd] = useState("");
+  const [ip, setIp] = useState("");
+
+  let handlePlayerChange = (event: ChangeEvent<HTMLInputElement>) => {
+    setPlayer(event.target.value);
+  };
+  let handlePasswdChange = (event: ChangeEvent<HTMLInputElement>) => {
+    setPasswd(event.target.value);
+  };
+  let handleIpChange = (event: ChangeEvent<HTMLInputElement>) => {
+    setIp(event.target.value);
+  };
+
+  return (
+    <div>
+      <p>
+        <input
+          type="text"
+          title="player"
+          value={player}
+          onChange={handlePlayerChange}
+        ></input>
+      </p>
+      <p>
+        <input
+          type="text"
+          title="passwd"
+          value={passWd}
+          onChange={handlePasswdChange}
+        ></input>
+      </p>
+      <p>
+        <input
+          type="text"
+          title="ip"
+          value={ip}
+          onChange={handleIpChange}
+        ></input>
+      </p>
+      <button>
+        <Link to={{ pathname: `/${player}/${passWd}/${ip}` }}>join</Link>
+      </button>
+    </div>
+  );
+}

src/JoinHome.tsx → src/WaitRoom.tsx

-import React, { useState, useEffect, ChangeEvent, useRef } from "react";
+import React, { useRef, useEffect } from "react";
+import { useParams } from "react-router-dom";
 import { ygopro } from "./api/ocgcore";
 
-export default function JoinHome(props: { addr: string }) {
+export default function WaitRoom() {
+  const params = useParams<{
+    player?: string;
+    passWd?: string;
+    ip?: string;
+  }>();
+
   const ws = useRef<WebSocket | null>(null);
-  const [userName, setUsername] = useState("");
-  const [passWd, setPasswd] = useState("");
-  const [isJoined, setJoined] = useState(false);
 
+  const { player, passWd, ip } = params;
   useEffect(() => {
     if (!ws.current) {
-      ws.current = new WebSocket(props.addr);
+      ws.current = new WebSocket("ws://" + ip);
     }
 
     ws.current.onopen = () => {
       console.log("websocket open");
-    };
-
-    ws.current.onclose = () => {
-      console.log("websocket closed");
-    };
-
-    ws.current.onmessage = (e) => {
-      console.log("websocket read message: " + e.data);
-    };
-
-    const wsCurrent = ws.current;
-
-    return () => {
-      if (wsCurrent.readyState == 1) {
-        wsCurrent.close();
-      }
-    };
-  }, [ws]);
-
-  let handleUsernameChange = (event: ChangeEvent<HTMLInputElement>) => {
-    setUsername(event.target.value);
-  };
-
-  let handlePasswdChange = (event: ChangeEvent<HTMLInputElement>) => {
-    setPasswd(event.target.value);
-  };
-
-  let handleButtonOnClick = () => {
-    if (!ws.current) {
-      console.error("websocket not connected");
-    } else {
-      const wsCurrent = ws.current;
 
       if (
-        userName != null &&
-        userName.length != 0 &&
+        player != null &&
+        player.length != 0 &&
         passWd != null &&
-        passWd.length != 0
+        passWd.length != 0 &&
+        ws.current
       ) {
-        console.log(
-          "ready to send playerInfo and joinGame packet, userName=" +
-            userName +
-            ", passWd=" +
-            passWd
-        );
+        const wsCurrent = ws.current;
+
         const playerInfo = new ygopro.YgoCtosMsg({
           ctos_player_info: new ygopro.CtosPlayerInfo({
-            name: userName,
-          }),
+            name: player
+          })
         });
 
         wsCurrent.send(playerInfo.serialize());
 
         const joinGame = new ygopro.YgoCtosMsg({
           ctos_join_game: new ygopro.CtosJoinGame({
-            version: 4947,
+            version: 4947, // todo: use config
             gameid: 0,
-            passwd: passWd,
-          }),
+            passwd: passWd
+          })
         });
 
         wsCurrent.send(joinGame.serialize());
       }
-    }
-  };
+    };
+
+    ws.current.onclose = () => {
+      console.log("websocket closed");
+    };
+
+    ws.current.onmessage = e => {
+      console.log("websocket read message: " + e.data);
+    };
+
+    const wsCurrent = ws.current;
+
+    return () => {
+      if (wsCurrent.readyState == 1) {
+        wsCurrent.close();
+      }
+    };
+  }, [ws]);
 
   return (
     <div>
-      <p>
-        <input
-          type="text"
-          title="username"
-          value={userName}
-          onChange={handleUsernameChange}
-        ></input>
-      </p>
-      <p>
-        <input
-          type="text"
-          title="passwd"
-          value={passWd}
-          onChange={handlePasswdChange}
-        ></input>
-      </p>
-      <button onClick={handleButtonOnClick}>Join</button>
-      <p>{"isJoined: " + isJoined}</p>
+      <p>player: {params.player}</p>
+      <p>passwd: {params.passWd}</p>
+      <p>ip: {params.ip}</p>
     </div>
   );
 }

src/index.tsx

@@ -3,13 +3,16 @@ import ReactDOM from "react-dom/client";
 import "./index.css";
 import App from "./App";
 import reportWebVitals from "./reportWebVitals";
+import { BrowserRouter } from "react-router-dom";
 
 const root = ReactDOM.createRoot(
   document.getElementById("root") as HTMLElement
 );
 root.render(
   <React.StrictMode>
-    <App />
+    <BrowserRouter>
+      <App />
+    </BrowserRouter>
   </React.StrictMode>
 );
 

tsconfig.json

@@ -18,9 +18,8 @@
     "resolveJsonModule": true,
     "isolatedModules": true,
     "noEmit": true,
-    "jsx": "react-jsx"
+    "jsx": "preserve"
   },
-  "files": [],
   "include": [
     "src",
     "src/api"