Merge pull request #15 from DarkNeos/dev

Dev

neos-protobuf @ ed6ff3b1

-Subproject commit 7b87e8a035a016c44d551f85c1ce0a719b507b8f
+Subproject commit ed6ff3b15aaa74e35feb40d33aa518b52a275402

src/WaitRoom.tsx

@@ -6,9 +6,13 @@ import "./css/WaitRoom.css";
 
 type Player = {
   name?: string;
-  state?: string;
+  state?: string; // todo: use enum or boolean
+  isHost?: boolean;
 };
 
+const READY_STATE = "ready";
+const NO_READY_STATE = "not ready";
+
 export default function WaitRoom() {
   const params = useParams<{
     player?: string;
@@ -22,6 +26,7 @@ export default function WaitRoom() {
   const [observerCount, setObserverCount] = useState<number>(0);
   const [player0, setPlayer0] = useState<Player>({});
   const [player1, setPlayer1] = useState<Player>({});
+  const [isHost, setIsHost] = useState<boolean>(false);
   const [_, forceUpdate] = useReducer(x => x + 1, 0); // todo: use correct update design
 
   const ws = useRef<WebSocket | null>(null);
@@ -34,7 +39,7 @@ export default function WaitRoom() {
     }
 
     ws.current.onopen = () => {
-      console.log("websocket open");
+      console.log("Websocket open");
 
       if (
         player != null &&
@@ -53,7 +58,7 @@ export default function WaitRoom() {
     };
 
     ws.current.onclose = () => {
-      console.log("websocket closed");
+      console.log("Websocket closed");
     };
 
     ws.current.onmessage = e => {
@@ -103,26 +108,20 @@ export default function WaitRoom() {
                 break;
               }
               case ygopro.StocHsPlayerChange.State.READY: {
-                console.log("Player " + change.pos + " has ready");
-
                 const updateState = (player: Player) => {
-                  const state = "ready";
-                  player.state = state;
+                  player.state = READY_STATE;
                   return player;
                 };
 
                 change.pos == 0
                   ? setPlayer0(updateState)
                   : setPlayer1(updateState);
-                forceUpdate();
 
                 break;
               }
               case ygopro.StocHsPlayerChange.State.NO_READY: {
-                console.log("Player " + change.pos + " not ready");
-
                 const updateState = (player: Player) => {
-                  const state = "not ready";
+                  const state = NO_READY_STATE;
                   player.state = state;
                   return player;
                 };
@@ -130,20 +129,15 @@ export default function WaitRoom() {
                 change.pos == 0
                   ? setPlayer0(updateState)
                   : setPlayer1(updateState);
-                forceUpdate();
 
                 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);
 
@@ -153,6 +147,8 @@ export default function WaitRoom() {
                 break;
               }
             }
+
+            forceUpdate();
           }
 
           break;
@@ -170,19 +166,47 @@ export default function WaitRoom() {
           if (pos > 1) {
             console.log("Currently only supported 2v2 mode.");
           } else {
-            const player = {
-              name,
-              state: "not ready"
+            const updatePlayer = (player: Player) => {
+              player.name = name;
+              return player;
             };
-            pos == 0 ? setPlayer0(player) : setPlayer1(player);
+
+            pos == 0 ? setPlayer0(updatePlayer) : setPlayer1(updatePlayer);
+            forceUpdate();
           }
 
           break;
         }
         case "stoc_type_change": {
-          const t = pb.stoc_type_change.type;
+          const selfType = pb.stoc_type_change.self_type;
+          const assertHost = pb.stoc_type_change.is_host;
+
+          setIsHost(assertHost);
+
+          if (assertHost) {
+            const updatePlayer = (player: Player) => {
+              player.isHost = assertHost;
+              player.state = NO_READY_STATE;
+              return player;
+            };
 
-          console.log("STOC type changed: " + t);
+            switch (selfType) {
+              case ygopro.StocTypeChange.SelfType.PLAYER1: {
+                setPlayer0(updatePlayer);
+
+                break;
+              }
+              case ygopro.StocTypeChange.SelfType.PLAYER2: {
+                setPlayer1(updatePlayer);
+
+                break;
+              }
+              default: {
+                break;
+              }
+            }
+            forceUpdate();
+          }
 
           break;
         }
@@ -217,6 +241,12 @@ export default function WaitRoom() {
     }
   };
 
+  const handleChoseStart = () => {
+    if (ws.current) {
+      sendHsStart(ws.current);
+    }
+  };
+
   return (
     <div className="container">
       <div className="playerRegion">
@@ -231,14 +261,32 @@ export default function WaitRoom() {
             ready
           </button>
         </p>
+        <p>
+          <button
+            disabled={
+              !(
+                isHost &&
+                player0.state != undefined &&
+                player0.state === READY_STATE &&
+                player1.state != undefined &&
+                player1.state === READY_STATE
+              )
+            }
+            onClick={handleChoseStart}
+          >
+            start
+          </button>
+        </p>
       </div>
       <div className="roomRegion">
         <h2>Room Passwd: {passWd}</h2>
         <p>
-          player0: {player0.name} {player0.state}
+          player0: {player0.isHost == true ? "[Host]" : ""} {player0.name}{" "}
+          {player0.state}
         </p>
         <p>
-          player1: {player1.name} {player1.state}
+          player1: {player1.isHost == true ? "[Host]" : ""} {player1.name}{" "}
+          {player1.state}
         </p>
         <p>observer: {observerCount}</p>
         <p>chat: {chat}</p>
@@ -288,3 +336,11 @@ function sendHsReady(ws: WebSocket) {
 
   ws.send(hasReady.serialize());
 }
+
+function sendHsStart(ws: WebSocket) {
+  const hasStart = new ygopro.YgoCtosMsg({
+    ctos_hs_start: new ygopro.CtosHsStart({})
+  });
+
+  ws.send(hasStart.serialize());
+}