ported react-router6

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/JoinHome.tsx

-import React, { useState, useEffect, ChangeEvent, useRef } from "react";
-import { ygopro } from "./api/ocgcore";
-
-export default function JoinHome(props: { addr: string }) {
-  const ws = useRef<WebSocket | null>(null);
-  const [userName, setUsername] = useState("");
-  const [passWd, setPasswd] = useState("");
-  const [isJoined, setJoined] = useState(false);
-
-  useEffect(() => {
-    if (!ws.current) {
-      ws.current = new WebSocket(props.addr);
-    }
-
-    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 &&
-        passWd != null &&
-        passWd.length != 0
-      ) {
-        console.log(
-          "ready to send playerInfo and joinGame packet, userName=" +
-            userName +
-            ", passWd=" +
-            passWd
-        );
-        const playerInfo = new ygopro.YgoCtosMsg({
-          ctos_player_info: new ygopro.CtosPlayerInfo({
-            name: userName,
-          }),
-        });
-
-        wsCurrent.send(playerInfo.serialize());
-
-        const joinGame = new ygopro.YgoCtosMsg({
-          ctos_join_game: new ygopro.CtosJoinGame({
-            version: 4947,
-            gameid: 0,
-            passwd: passWd,
-          }),
-        });
-
-        wsCurrent.send(joinGame.serialize());
-      }
-    }
-  };
-
-  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>
-    </div>
-  );
-}

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/WaitRoom.tsx

+import React from "react";
+import {useParams} from "react-router-dom";
+
+export default function WaitRoom() {
+  const params = useParams<{
+    player: string,
+    passWd: string,
+    ip: string
+  }>();
+
+  return (<div>
+    <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"