Finish stylings on the new game session window for buzzers

joshzcold · Sep 22, 2024 · 91f5c1a · 91f5c1a
1 parent 6a2b7f8
commit 91f5c1a
Show file tree

Hide file tree

Showing 3 changed files with 31 additions and 16 deletions.
diff --git a/components/buzzer.js b/components/buzzer.js
@@ -53,10 +53,6 @@ export default function Buzzer(props) {
       }
     }, 1000);
 
-    if (props.id !== null && props.team !== null) {
-      setBuzzerReg(props.id);
-    }
-
     ws.current.addEventListener("message", (evt) => {
       let received_msg = evt.data;
       let json = JSON.parse(received_msg);
@@ -270,7 +266,7 @@ export default function Buzzer(props) {
               </div>
               <div className="flex flex-row justify-center">
                 <button
-                  className="py-8 px-16 hover:shadow-md rounded-md bg-success-200 uppercase"
+                  className="py-8 px-16 hover:shadow-md rounded-md bg-success-200 uppercase font-bold"
                   onClick={() => {
                     if (props.team != null) {
                       send({ action: "registerbuzz", team: props.team });
@@ -280,21 +276,23 @@ export default function Buzzer(props) {
                         ? errors.push(t("pick your team"))
                         : null;
                       setError(errors.join(` ${t("and")} `));
+                      if (props.id !== null && props.team !== null) {
+                        setBuzzerReg(props.id);
+                      }
                     }
                   }}
                 >
                   {t("play")}
                 </button>
               </div>
               <div className="flex flex-row justify-center">
-                <a href="/game" target="_blank">
+                <a href="/game">
                   <button
-                    className="py-8 px-16 hover:shadow-md rounded-md bg-success-200"
+                    className="py-4 px-8 hover:shadow-md rounded-md bg-secondary-300"
                     onClick={() => {
-                      send({ action: "registerbuzz", team: props.team });
+                      send({ action: "registerspectator", team: props.team });
                     }}
                   >
-
                     {t("Open Game Window")}
                   </button>
                 </a>

diff --git a/pages/api/ws.js b/pages/api/ws.js
@@ -408,9 +408,24 @@ const ioHandler = (req, res) => {
                 JSON.stringify({ action: "data", data: game }),
               );
             } catch (e) {
-              console.error("Problem in register ", e);
+              console.error("Problem in buzzer register ", e);
             }
             pingInterval(rooms[message.room], id, ws);
+          } else if (message.action === "registerspectator") {
+            let id = message.id;
+            let game = rooms[message.room].game;
+            try {
+              console.debug("spectator ready: ", id);
+              // get inital latency, client pongs on registered
+              ws.send(JSON.stringify({ action: "ping", id: id }));
+              ws.send(JSON.stringify({ action: "registered", id: id }));
+              wss.broadcast(
+                message.room,
+                JSON.stringify({ action: "data", data: game }),
+              );
+            } catch (e) {
+              console.error("Problem in spectator register ", e);
+            }
           } else if (message.action === "pong") {
             let game = rooms[message.room].game;
             let player = game.registeredPlayers[message.id];

diff --git a/pages/game.js b/pages/game.js
@@ -150,14 +150,14 @@ export default function Game(props) {
     } else if (game.is_final_round) {
       gameSession = (
         <div className="flex w-full justify-center">
-          <div className="lg:w-5/6 sm:w-11/12 sm:px-8 md:w-4/6 w-11/12 flex flex-col space-y-6 pt-5">
+          <div className="lg:w-5/6 sm:w-11/12 sm:px-8 md:w-4/6 w-11/12 flex flex-col space-y-6 py-20">
             <Final game={game} timer={timer} />
           </div>
         </div>
       );
     } else {
       gameSession = (
-        <div className="flex flex-col space-y-10 py-5 px-10">
+        <div className="flex flex-col space-y-10 py-20 px-10">
           <Round game={game} />
           <QuestionBoard round={game.rounds[game.round]} />
           <div className="flex flex-row justify-around">
@@ -173,18 +173,20 @@ export default function Game(props) {
     }
     return (
       <>
-        <div className="min-h-screen absolute w-screen flex flex-col items-center justify-center pointer-events-none">
-          {!isHost ? (
+        {!isHost ? (
+          <div className="w-screen flex flex-col items-end absolute">
             <button
-              className="shadow-md rounded-lg p-2 bg-secondary-900 hover:bg-secondary-300 text-1xl font-bold uppercase w-24 self-end"
+              className="shadow-md rounded-lg m-1 p-2 bg-secondary-500 hover:bg-secondary-200 font-bold uppercase"
               onClick={() => {
                 cookieCutter.set("session", "");
                 window.location.href = "/";
               }}
             >
               {t("quit")}
             </button>
-          ) : null}
+          </div>
+        ) : null}
+        <div className="min-h-screen absolute w-screen flex flex-col items-center justify-center pointer-events-none">
           <img
             className={`w-4/12 ${showMistake ? "opacity-90" : "opacity-0"} transition-opacity ease-in-out duration-300`}
             src="x.svg"