Merge pull request #57 from joshzcold/new_settings

New settings for admin. Styling for fast money questions
joshzcold · Jun 1, 2023 · 730f3ba · 730f3ba
2 parents ef55f47 + 6db3809
commit 730f3ba
Show file tree

Hide file tree

Showing 7 changed files with 145 additions and 32 deletions.
diff --git a/components/admin.js b/components/admin.js
@@ -347,7 +347,7 @@ export default function Admin(props) {
         </div>
 
         <hr />
-        <div class="pt-5">
+        <div class="pt-5 pb-5">
           {/* TITLE TEXT INPUT */}
           <div class="grid grid-cols-3 gap-5 px-12 justify-items-start">
             <p class="text-2xl">{t("Title Text")}:</p>
@@ -422,6 +422,42 @@ export default function Admin(props) {
             </div>
           </div>
         </div>
+        <hr />
+        {/* ADMIN CONTROLS */}
+        <div class="flex flex-col p-5">
+          <div>
+            <p class="text-xl capitalize">{t("settings")}:</p>
+            <hr class="w-24 p-1"/>
+          </div>
+          <div class="grid grid-cols-2">
+            {/* Hide questions to players */}
+            <div class="flex flex-col">
+              <div class="flex flex-row space-x-5 items-center">
+                <div>
+                  <p class="text-m normal-case">{t("Hide questions")}:</p>
+                </div>
+                <input
+                  class="w-4 h-4 rounded"
+                  checked={game.settings.hide_questions}
+                  onChange={(e) => {
+                    game.settings.hide_questions = e.target.checked;
+                    props.setGame((prv) => ({ ...prv }));
+                    send({ action: "data", data: game });
+                  }}
+                  type="checkbox"
+                ></input>
+              </div>
+              <div>
+                <p class="text-sm normal-case text-gray-500 italic">
+                  {t(
+                    'hide questions on the game window and player buzzer screens'
+                  )}
+                </p>
+              </div>
+            </div>
+          </div>
+        </div>
+        {/* SHOW ERRORS TO ADMIN */}
         {error !== "" ? <p class="text-2xl text-red-700">{error}</p> : null}
         {game.rounds == null ? (
           <p class="text-2xl text-center py-20 text-black text-opacity-50">
@@ -578,18 +614,37 @@ export default function Admin(props) {
             {!game.is_final_round ? (
               // GAME BOARD CONTROLS
               <div>
-                <div class="flex flex-row justify-between space-x-5 px-10 items-center pt-5">
+                <div class="flex flex-col space-y-2 px-10 pt-5">
                   {/* QUESTION */}
                   <p class="text-3xl font-bold">{current_round.question}</p>
                   {/* POINT TRACKER */}
-                  <div class="flex flex-row border-4 p-2 items-center space-x-5">
-                    <h3 class="text-xl">{t("Points")}: </h3>
-                    <h3 class="text-2xl flex-grow">
-                      {t("number", { count: game.point_tracker[game.round] })}
-                    </h3>
-                    <h3 class="text-xl">
-                      x{t("number", { count: current_round.multiply })}
-                    </h3>
+                  <div class="flex flex-row border-4 p-2 space-x-5 items-center justify-between">
+                    <div class="flex flex-row space-x-5 items-center">
+                      <h3 class="text-xl">{t("Points")}: </h3>
+                      <h3 class="text-2xl flex-grow">
+                        {t("number", { count: game.point_tracker[game.round] })}
+                      </h3>
+                    </div>
+                    <div class="flex flex-row space-x-2 items-center">
+                      <h3 class="text-xl">{t("multiplier")}: </h3>
+                      <h3 class="text-2xl">x</h3>
+                      <input
+                        type="number"
+                        min="1"
+                        class="p-1 border-2 w-24"
+                        value={current_round.multiply}
+                        placeholder={t("multiplier")}
+                        onChange={(e) => {
+                          let value = parseInt(e.target.value);
+                          if (value === 0) {
+                            value = 1;
+                          }
+                          current_round.multiply = value;
+                          props.setGame((prv) => ({ ...prv }));
+                          send({ action: "data", data: game });
+                        }}
+                      />
+                    </div>
                   </div>
                 </div>
 
@@ -616,6 +671,9 @@ export default function Admin(props) {
                             game.point_tracker[game.round] =
                               game.point_tracker[game.round] -
                               x.pnt * current_round.multiply;
+                            if (game.point_tracker[game.round] < 0) {
+                              game.point_tracker[game.round] = 0;
+                            }
                             props.setGame((prv) => ({ ...prv }));
                           }
                           send({ action: "data", data: game });

diff --git a/components/final.js b/components/final.js
@@ -58,19 +58,23 @@ export default function Final(props) {
         <p class="text-3xl">{t("Fast Money")}</p>
       </div>
       <div
-        class="border-8 bg-blue-800 p-5 border-black rounded-3xl grid lg:grid-rows-4 lg:grid-flow-col gap-3 text-white "
+        class="border-8 bg-blue-800 p-5 border-black rounded-3xl grid lg:grid-flow-col gap-3 text-white "
         style={{}}
       >
-        <Answers
-          round={props.game.final_round}
-          hide={props.game.hide_first_round}
-        />
+        <div class="grid lg:grid-flow-row gap-3">
+          <Answers
+            round={props.game.final_round}
+            hide={props.game.hide_first_round}
+          />
+        </div>
         <div class="border-yellow-600 border-4 rounded-3xl bg-yellow-600 lg:hidden" />
-        <Answers
-          round={props.game.final_round_2}
-          hide={!props.game.is_final_second}
-        />
-      </div>
+        <div class="grid lg:grid-flow-row gap-3" >
+          <Answers
+            round={props.game.final_round_2}
+            hide={!props.game.is_final_second}
+          />
+        </div>
+        </div>
       <div class="my-3 flex flex-row justify-evenly items-center align-middle">
         {/* Timer */}
         <div class="bg-black inline-block p-2 rounded">

diff --git a/components/round.js b/components/round.js
@@ -58,7 +58,11 @@ export default function Round(props) {
         ) : null}
       </div>
       <div class="flex flex-row justify-center">
-        <p class="text-end sm:text-1xl text-2xl ">{round.question}</p>
+        {props.game.settings.hide_questions === false ? (
+          <p class="text-end sm:text-1xl text-2xl ">{round.question}</p>
+        ) : (
+          <></>
+        )}
       </div>
     </div>
   );

diff --git a/package-lock.json b/package-lock.json
diff --git a/pages/api/ws.js b/pages/api/ws.js
@@ -80,6 +80,9 @@ const ioHandler = (req, res) => {
     let game = {
       registeredPlayers: {},
       buzzed: [],
+      settings: {
+        hide_questions: true
+      },
       teams: [
         {
           name: "Team 1",

diff --git a/pages/game.js b/pages/game.js
@@ -106,10 +106,10 @@ export default function Game(props) {
       setInterval(() => {
         if (ws.current.readyState !== 1) {
           setError(
-            `lost connection to server refreshing in ${10 - refreshCounter}`
+            `lost connection to server refreshing in ${5 - refreshCounter}`
           );
           refreshCounter++;
-          if (refreshCounter >= 10) {
+          if (refreshCounter >= 5) {
             console.debug("game reload()");
             location.reload();
           }

diff --git a/pages/new.js b/pages/new.js
@@ -14,7 +14,7 @@ export default function CreateGame(props) {
         multiply: "",
       },
     ],
-    final_round: Array.from(Array(4), (x, index) => {
+    final_round: Array.from(Array(5), (x, index) => {
       return {
         question: `${t("question")} ${t("number", { count: index + 1 })}`,
         answers: [],
@@ -191,7 +191,7 @@ export default function CreateGame(props) {
           </div>
         </div>
         <div class="border-2 p-3">
-          {game.final_round.map((q) => (
+          {game.final_round.map((q, qin) => (
             <div class="flex flex-col space-y-2 pt-5">
               <input
                 class="p-2 border-2"
@@ -242,11 +242,41 @@ export default function CreateGame(props) {
                   }}
                   class="hover:shadow-md rounded-md bg-green-200 px-3 py-1 text-md"
                 >
-                  +
+                  {t("Answer")} +
                 </button>
+                <div class="pt-5">
+                  <button
+                    onClick={() => {
+
+                      game.final_round.splice(qin, 1);
+                      setGame((prv) => ({ ...prv }));
+                    }}
+                    class="hover:shadow-md rounded-md bg-red-200 px-3 py-1 text-md"
+                  >
+                    {t("Question")} -
+                  </button>
+                </div>
               </div>
             </div>
           ))}
+          <div class="pt-5">
+            <button
+              onClick={() => {
+                game.final_round.push({
+                  question: `${t("question")} ${t("number", { count: game.final_round.length + 1 })}`,
+                  answers: [],
+                  selection: 0,
+                  points: 0,
+                  input: "",
+                  revealed: false,
+                });
+                setGame((prv) => ({ ...prv }));
+              }}
+              class="hover:shadow-md rounded-md bg-green-200 px-3 py-1 text-md"
+            >
+              {t("Question")} +
+            </button>
+          </div>
         </div>
       </div>