update WaitRoom.tsx and add WaitRoom.css

src/JoinRoom.tsx

 import React, { useState, ChangeEvent } from "react";
 import { Link } from "react-router-dom";
-import "./css/WaitRoom.css";
+import "./css/JoinRoom.css";
 
 export default function JoinRoom() {
   const [player, setPlayer] = useState("");

src/WaitRoom.tsx

@@ -2,6 +2,12 @@ import React, { useRef, useEffect, useState } from "react";
 import { useParams } from "react-router-dom";
 import { ygopro } from "./api/idl/ocgcore";
 import { fetchDeck, IDeck } from "./Card";
+import "./css/WaitRoom.css";
+
+type Player = {
+  name?: string;
+  state?: string;
+};
 
 export default function WaitRoom() {
   const params = useParams<{
@@ -13,6 +19,9 @@ export default function WaitRoom() {
   const [joined, setJoined] = useState<boolean>(false);
   const [chat, setChat] = useState<string>("");
   const [choseDeck, setChoseDeck] = useState<boolean>(false);
+  const [observerCount, setObserverCount] = useState<number>(0);
+  const [player0, setPlayer0] = useState<Player>({});
+  const [player1, setPlayer1] = useState<Player>({});
 
   const ws = useRef<WebSocket | null>(null);
 
@@ -64,6 +73,9 @@ export default function WaitRoom() {
         case "stoc_hs_player_change": {
           const change = pb.stoc_hs_player_change;
 
+          if (change.pos > 1) {
+            console.log("Currently only supported 2v2 mode.");
+          } else {
             switch (change.state) {
               case ygopro.StocHsPlayerChange.State.UNKNOWN: {
                 console.log("Unknown HsPlayerChange State");
@@ -75,39 +87,68 @@ export default function WaitRoom() {
                   "Player " + change.pos + " moved to " + change.moved_pos
                 );
 
+                let src = change.pos;
+                let dst = change.moved_pos;
+
+                if (src === 0 && dst === 1) {
+                  setPlayer1(player0);
+                  setPlayer0({});
+                } else if (src === 1 && dst === 0) {
+                  setPlayer0(player1);
+                  setPlayer1({});
+                }
+
                 break;
               }
               case ygopro.StocHsPlayerChange.State.READY: {
                 console.log("Player " + change.pos + " has ready");
 
+                const state = "ready";
+                let player = change.pos == 0 ? player0 : player1;
+                player.state = state;
+
+                change.pos == 0 ? setPlayer0(player) : setPlayer1(player);
+
                 break;
               }
               case ygopro.StocHsPlayerChange.State.NO_READY: {
                 console.log("Player " + change.pos + " not ready");
 
+                const state = "not ready";
+                let player = change.pos == 0 ? player0 : player1;
+                player.state = state;
+
+                change.pos == 0 ? setPlayer0(player) : setPlayer1(player);
+
                 break;
               }
               case ygopro.StocHsPlayerChange.State.LEAVE: {
                 console.log("Player " + change.pos + " has leave");
 
+                change.pos == 0 ? setPlayer0({}) : setPlayer1({});
+
                 break;
               }
               case ygopro.StocHsPlayerChange.State.TO_OBSERVER: {
                 console.log("Player " + change.pos + " has moved to observer");
 
+                change.pos == 0 ? setPlayer0({}) : setPlayer1({});
+                setObserverCount(observerCount + 1);
+
                 break;
               }
               default: {
                 break;
               }
             }
+          }
 
           break;
         }
         case "stoc_hs_watch_change": {
           const count = pb.stoc_hs_watch_change.count;
 
-          console.log("Watch change to " + count);
+          setObserverCount(count);
           break;
         }
         default: {
@@ -142,16 +183,32 @@ export default function WaitRoom() {
   };
 
   return (
-    <div>
-      <p>joined: {joined ? "true" : "false"}</p>
+    <div className="container">
+      <div className="playerRegion">
+        <h2>{joined ? "Room Joined!" : "Room Not Joined."}</h2>
+        <p>
           <button disabled={!joined} onClick={handleChoseDeck}>
             choose hero.ydk
           </button>
+        </p>
+        <p>
           <button disabled={!choseDeck} onClick={handleChoseReady}>
             ready
           </button>
+        </p>
+      </div>
+      <div className="roomRegion">
+        <h2>Room PassWd: {passWd}</h2>
+        <p>
+          player0: {player0.name} {player0.state}
+        </p>
+        <p>
+          player1: {player1.name} {player1.state}
+        </p>
+        <p>observer: {observerCount}</p>
         <p>chat: {chat}</p>
       </div>
+    </div>
   );
 }
 

src/css/JoinRoom.css

+body {
+  margin: 0;
+  justify-content: center;
+}
+
+div {
+  margin: auto;
+  padding: 10%;
+}
+
+p {
+  text-align: center;
+}

src/css/WaitRoom.css

-body {
-  margin: 0;
-  justify-content: center;
-}
-
-div {
+.container {
+  display: flex;
   margin: auto;
-  padding: 10%;
+  padding: 0;
 }
 
-p {
+.playerRegion {
   text-align: center;
+  flex: 1;
+}
+
+.roomRegion {
+  flex: 1;
+}
+.roomRegion > p {
+  text-align: start;
 }