Merge pull request #8 from DarkNeos/dev

Dev

src/JoinRoom.tsx

@@ -29,17 +29,17 @@ export default function JoinRoom() {
       <p>
         <input
           type="text"
-          title="passwd"
-          value={passWd}
-          onChange={handlePasswdChange}
+          title="ip"
+          value={ip}
+          onChange={handleIpChange}
         ></input>
       </p>
       <p>
         <input
           type="text"
-          title="ip"
-          value={ip}
-          onChange={handleIpChange}
+          title="passwd"
+          value={passWd}
+          onChange={handlePasswdChange}
         ></input>
       </p>
       <button>

src/WaitRoom.tsx

-import React, { useRef, useEffect } from "react";
+import React, { useRef, useEffect, useState } from "react";
 import { useParams } from "react-router-dom";
 import { ygopro } from "./api/idl/ocgcore";
 
@@ -9,6 +9,9 @@ export default function WaitRoom() {
     ip?: string;
   }>();
 
+  const [joined, setJoined] = useState<string>("false");
+  const [chat, setChat] = useState<string>("");
+
   const ws = useRef<WebSocket | null>(null);
 
   const { player, passWd, ip } = params;
@@ -29,23 +32,10 @@ export default function WaitRoom() {
       ) {
         const wsCurrent = ws.current;
 
-        const playerInfo = new ygopro.YgoCtosMsg({
-          ctos_player_info: new ygopro.CtosPlayerInfo({
-            name: player
-          })
-        });
-
-        wsCurrent.send(playerInfo.serialize());
+        wsCurrent.binaryType = "arraybuffer";
 
-        const joinGame = new ygopro.YgoCtosMsg({
-          ctos_join_game: new ygopro.CtosJoinGame({
-            version: 4947, // todo: use config
-            gameid: 0,
-            passwd: passWd
-          })
-        });
-
-        wsCurrent.send(joinGame.serialize());
+        sendPlayerInfo(wsCurrent, player);
+        sendJoinGame(wsCurrent, 4947, passWd);
       }
     };
 
@@ -54,7 +44,27 @@ export default function WaitRoom() {
     };
 
     ws.current.onmessage = e => {
-      console.log("websocket read message: " + e.data);
+      const pb = ygopro.YgoStocMsg.deserializeBinary(e.data);
+
+      switch (pb.msg) {
+        case "stoc_join_game": {
+          const msg = pb.stoc_join_game;
+
+          console.log("joinGame msg=" + msg);
+
+          setJoined("true");
+          break;
+        }
+        case "stoc_chat": {
+          const chat = pb.stoc_chat;
+
+          setChat(chat.msg);
+          break;
+        }
+        default: {
+          break;
+        }
+      }
     };
 
     const wsCurrent = ws.current;
@@ -68,9 +78,30 @@ export default function WaitRoom() {
 
   return (
     <div>
-      <p>player: {params.player}</p>
-      <p>passwd: {params.passWd}</p>
-      <p>ip: {params.ip}</p>
+      <p>joined: {joined}</p>
+      <p>chat: {chat}</p>
     </div>
   );
 }
+
+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());
+}