Allow a joining player to spectate via the game window outside of admin

joshzcold · Sep 5, 2024 · 6a2b7f8 · 6a2b7f8
1 parent cf554de
commit 6a2b7f8
Show file tree

Hide file tree

Showing 2 changed files with 37 additions and 4 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(
@@ -75,6 +76,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 +253,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 +262,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);
                   }}
                 >
@@ -286,6 +286,19 @@ export default function Buzzer(props) {
                   {t("play")}
                 </button>
               </div>
+              <div className="flex flex-row justify-center">
+                <a href="/game" target="_blank">
+                  <button
+                    className="py-8 px-16 hover:shadow-md rounded-md bg-success-200"
+                    onClick={() => {
+                      send({ action: "registerbuzz", team: props.team });
+                    }}
+                  >
+
+                    {t("Open Game Window")}
+                  </button>
+                </a>
+              </div>
               {error != null && error !== "" ? <p>👾 {error}</p> : null}
             </>
           )}

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({});
@@ -168,7 +174,21 @@ export default function Game(props) {
     return (
       <>
         <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" />
+          {!isHost ? (
+            <button
+              className="shadow-md rounded-lg p-2 bg-secondary-900 hover:bg-secondary-300 text-1xl font-bold uppercase w-24 self-end"
+              onClick={() => {
+                cookieCutter.set("session", "");
+                window.location.href = "/";
+              }}
+            >
+              {t("quit")}
+            </button>
+          ) : null}
+          <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="">