Exploding files: Part 2 (AdminPage)

src/components/Admin/GameDisplay/FinalRoundButtonControls.jsx

@@ -0,0 +1,94 @@
+import { useTranslation } from "react-i18next";
+
+function FinalRoundButtonControls({ game, send, setGame }) {
+  const { t } = useTranslation();
+  const controlRound = game.is_final_second ? game.final_round_2 : game.final_round;
+  return controlRound?.map((x, i) => (
+    <div
+      key={`${game.is_final_second ? "final-round-2" : "final-round-1"}-question-${i}`}
+      className="flex flex-col space-y-5 border-2 p-12"
+    >
+      <p className="text-3xl font-bold text-foreground">{x.question}</p>
+      {game.is_final_second && (
+        <div className="flex flex-row space-x-5 pb-2">
+          {/* PARTNER'S ANSWER PROVIDED FINAL ROUND */}
+          <div className="w-48 grow p-5 align-middle text-3xl text-foreground">
+            <i>{t("Partner's Answer")}</i>: {game.final_round[i].input || `(${t("No Answer")})`}
+          </div>
+          {game.final_round[i].input && (
+            <button
+              id={`alreadyAnswered${i}Button`}
+              className="grow rounded border-4 bg-secondary-300 p-5 text-2xl text-foreground"
+              onClick={() => send({ action: "duplicate" })}
+            >
+              {t("Already Answered")}
+            </button>
+          )}
+        </div>
+      )}
+      <div className="flex flex-row space-x-5 pb-2">
+        {/* ANSWER PROVIDED FINAL ROUND */}
+        <input
+          id={`finalRoundAnswer${i}Input`}
+          className="w-48 grow rounded border-4 bg-secondary-300 p-5 text-2xl text-foreground placeholder:text-secondary-900"
+          placeholder={t("Answer")}
+          value={x.input}
+          onChange={(e) => {
+            x.input = e.target.value;
+            setGame((prv) => ({ ...prv }));
+          }}
+        />
+
+        <button
+          id={`finalRoundAnswer${i}RevealButton`}
+          className="grow rounded border-4 bg-secondary-300 p-5 text-2xl text-foreground"
+          onClick={() => {
+            x.revealed = true;
+            setGame((prv) => ({ ...prv }));
+            send({ action: "data", data: game });
+            send({ action: "final_reveal" });
+          }}
+        >
+          {t("Reveal Answer")}
+        </button>
+      </div>
+      <div className="flex flex-row space-x-5">
+        {/* POINTS AWARDED FINAL ROUND */}
+        <select
+          id={`finalRoundAnswer${i}Selector`}
+          value={x.selection}
+          className="w-48 grow rounded border-4 bg-secondary-300 p-5 text-2xl text-foreground"
+          onChange={(e) => {
+            x.selection = parseInt(e.target.value);
+            setGame((prv) => ({ ...prv }));
+            send({ action: "data", data: game });
+          }}
+        >
+          <option value={0}>({t("No Answer")}) 0</option>
+          {x.answers.map((key, index) => (
+            <option key={`answers-${key}`} value={index + 1}>
+              {x.answers[index][0]} {x.answers[index][1]}
+            </option>
+          ))}
+        </select>
+
+        <button
+          className="grow rounded border-4 bg-secondary-300 p-5 text-2xl text-foreground"
+          id={`finalRoundAnswers${i}SubmitButton`}
+          onClick={() => {
+            x.points = x.selection !== 0 ? x.answers[x.selection - 1][1] : 0;
+            setGame((prv) => ({ ...prv }));
+            send({ action: "data", data: game });
+            send({
+              action: x.selection !== 0 ? "final_submit" : "mistake",
+            });
+          }}
+        >
+          {t("Award points")}
+        </button>
+      </div>
+    </div>
+  ));
+}
+
+export default FinalRoundButtonControls;

src/components/Admin/GameDisplay/FinalRoundPointTotals.jsx

@@ -0,0 +1,53 @@
+import { useTranslation } from "react-i18next";
+
+function FinalRoundPointTotalsTextFunction({ title, total, isFinalSecond, place }) {
+  const { t } = useTranslation();
+  const backgroundColor =
+    (isFinalSecond && place === 1) || (!isFinalSecond && place === 0)
+      ? "bg-primary-200"
+      : "bg-secondary-300";
+  return (
+    <div
+      className={`flex flex-row items-center space-x-2 rounded-3xl border-2 p-4 text-2xl text-foreground ${backgroundColor} text-foreground`}
+    >
+      <p id={`finalRoundPointTotal${place}TitleText`}>
+        {t(title)}:{" "}
+      </p>
+      <p id={`finalRoundPointTotal${place}TotalText`}>
+        {total}
+      </p>
+    </div>
+  );
+}
+
+const calculateTotalPoints = (rounds) => 
+  rounds.reduce((total, round) => total + parseInt(round.points), 0);
+
+function FinalRoundPointTotals({ game }) {
+  const roundOneTotal = calculateTotalPoints(game.final_round);
+  const roundTwoTotal = calculateTotalPoints(game.final_round_2);
+  return (
+    <div className="flex flex-row items-center justify-start space-x-5 py-3">
+      <FinalRoundPointTotalsTextFunction
+        title="Round one"
+        total={roundOneTotal}
+        isFinalSecond={game.is_final_second}
+        place={0}
+      />
+      <FinalRoundPointTotalsTextFunction
+        title="Round two"
+        total={roundTwoTotal}
+        isFinalSecond={game.is_final_second}
+        place={1}
+      />
+      <FinalRoundPointTotalsTextFunction
+        title="Total"
+        total={roundOneTotal + roundTwoTotal}
+        isFinalSecond={game.is_final_second}
+        place={2}
+      />
+    </div>
+  );
+}
+
+export default FinalRoundPointTotals;

src/components/Admin/GameDisplay/TeamControls.jsx

@@ -0,0 +1,57 @@
+import { useTranslation } from "react-i18next";
+
+function TeamControls({ game, setGame, team, send, setPointsGiven, pointsGiven }) {
+  const { t } = useTranslation();
+
+  function TeamGetsPointsButton() {
+    return (
+      <button
+        disabled={pointsGiven.state}
+        id={`team${team}GivePointsButton`}
+        className={`border-4 text-2xl ${pointsGiven.color} rounded p-10 ${pointsGiven.textColor}`}
+        onClick={() => {
+          game.teams[team].points =
+            game.point_tracker[game.round] + game.teams[team].points;
+            setPointsGiven({
+            state: true,
+            color: "bg-secondary-500",
+            textColor: "text-foreground",
+          });
+          setGame((prv) => ({ ...prv }));
+          send({ action: "data", data: game });
+        }}
+      >
+        {t("team")} {t("number", { count: team + 1 })}: {game.teams[team].name} {t("Gets Points")}
+      </button>
+    );
+  }
+
+  function TeamMistakeButton() {
+    return (
+      <button
+        id={`team${team}MistakeButton`}
+        className="rounded border-4 bg-failure-500 p-10 text-2xl text-foreground"
+        onClick={() => {
+          if (game.teams[team].mistakes < 3) game.teams[team].mistakes++;
+          setGame((prv) => ({ ...prv }));
+          send({ action: "data", data: game });
+          send({
+            action: "mistake",
+            data: game.teams[team].mistake,
+          });
+        }}
+      >
+        {t("team")} {t("number", { count: team + 1 })}: {game.teams[team].name} {t("mistake")}
+      </button>
+    );
+  }
+
+  return (
+    <>
+      <TeamGetsPointsButton />
+      <TeamMistakeButton />
+    </>
+  );
+}
+
+export default TeamControls;

src/components/Admin/GameDisplay/TitleMusic.jsx

@@ -0,0 +1,15 @@
+import { useTranslation } from "react-i18next";
+
+function TitleMusic() {
+  const { t } = useTranslation();
+  return (
+    <div className="flex flex-row items-center space-x-5  p-5">
+      <h3 className="text-2xl text-foreground">{t("Title Music")}</h3>
+      <audio controls id="titleMusicAudio">
+        <source src="title.mp3" type="audio/mpeg" />
+      </audio>
+    </div>
+  );
+}
+
+export default TitleMusic;