Merge pull request #88 from joshzcold/game_window_on_buzzer

Game window on buzzer
joshzcold · Sep 22, 2024 · 5be44ba · 5be44ba
2 parents cf554de + 91f5c1a
commit 5be44ba
Show file tree

Hide file tree

Showing 3 changed files with 60 additions and 12 deletions.
diff --git a/components/buzzer.js b/components/buzzer.js
@@ -37,6 +37,7 @@ export default function Buzzer(props) {
   };
 
   useEffect(() => {
+    cookieCutter.set("session", `${props.room}:${props.id}:0`);
     setInterval(() => {
       if (ws.current.readyState !== 1) {
         setError(
@@ -52,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);
@@ -75,6 +72,7 @@ export default function Buzzer(props) {
       } else if (json.action === "quit") {
         props.setGame(null);
         props.setTeam(null);
+        location.reload();
       } else if (json.action === "set_timer") {
         setTimer(json.data);
       } else if (json.action === "stop_timer") {
@@ -251,7 +249,6 @@ export default function Buzzer(props) {
                 <button
                   className="hover:shadow-md rounded-md bg-primary-200 p-5"
                   onClick={() => {
-                    cookieCutter.set("session", `${props.room}:${props.id}:0`);
                     props.setTeam(0);
                   }}
                 >
@@ -261,7 +258,6 @@ export default function Buzzer(props) {
                 <button
                   className="hover:shadow-md rounded-md bg-primary-200 p-5"
                   onClick={() => {
-                    cookieCutter.set("session", `${props.room}:${props.id}:1`);
                     props.setTeam(1);
                   }}
                 >
@@ -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,12 +276,27 @@ 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">
+                  <button
+                    className="py-4 px-8 hover:shadow-md rounded-md bg-secondary-300"
+                    onClick={() => {
+                      send({ action: "registerspectator", team: props.team });
+                    }}
+                  >
+                    {t("Open Game Window")}
+                  </button>
+                </a>
+              </div>
               {error != null && error !== "" ? <p>👾 {error}</p> : null}
             </>
           )}

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
@@ -16,6 +16,7 @@ export default function Game(props) {
   const [timer, setTimer] = useState(0);
   const [error, setErrorVal] = useState("");
   const [showMistake, setShowMistake] = useState(false);
+  const [isHost, setIsHost] = useState(false);
   const ws = useRef(null);
   let refreshCounter = 0;
 
@@ -67,6 +68,11 @@ export default function Game(props) {
             })}`;
           }
           setGame(json.data);
+          let session = cookieCutter.get("session");
+          let [_, id] = session.split(":");
+          if (json.data?.registeredPlayers[id] == "host") {
+            setIsHost(true);
+          }
         } else if (
           json.action === "mistake" ||
           json.action === "show_mistake"
@@ -75,7 +81,7 @@ export default function Game(props) {
           audio.play();
           setShowMistake(true);
           setTimeout(() => {
-            setShowMistake(false)
+            setShowMistake(false);
           }, 2000);
         } else if (json.action === "quit") {
           setGame({});
@@ -144,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">
@@ -167,8 +173,24 @@ export default function Game(props) {
     }
     return (
       <>
+        {!isHost ? (
+          <div className="w-screen flex flex-col items-end absolute">
+            <button
+              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>
+          </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" />
+          <img
+            className={`w-4/12 ${showMistake ? "opacity-90" : "opacity-0"} transition-opacity ease-in-out duration-300`}
+            src="x.svg"
+          />
         </div>
         <div className={`${game?.settings?.theme} min-h-screen`}>
           <div className="">