From f089db674ba76aa4b1ecbc66c0f0589f5a528d93 Mon Sep 17 00:00:00 2001
From: BrownKnight <amanrk@hotmail.co.uk>
Date: Mon, 26 Aug 2024 21:28:46 +0100
Subject: [PATCH] Dynamically size answers for small screens

---
 ui/src/grid/InteractiveGrid.tsx           | 11 +++++++++--
 ui/src/timer-battle/TimerBattleScreen.tsx | 16 ++++++++++------
 2 files changed, 19 insertions(+), 8 deletions(-)

diff --git a/ui/src/grid/InteractiveGrid.tsx b/ui/src/grid/InteractiveGrid.tsx
index d22a4e6..eef326e 100644
--- a/ui/src/grid/InteractiveGrid.tsx
+++ b/ui/src/grid/InteractiveGrid.tsx
@@ -59,7 +59,12 @@ export default function InteractiveGrid({ grid, onCorrect, onIncorrect }: Props)
           {category.answers.map((word, j) => {
             const color = "bg-green-700 text-white";
             return (
-              <div key={j} className={`flex-1 grow rounded-lg content-center font-bold ${color}`}>
+              <div
+                key={j}
+                className={`flex-1 grow rounded-lg content-center font-bold ${
+                  word.length > 7 ? "text-[0.6rem]" : "text-sm"
+                } md:text-lg ${color}`}
+              >
                 {word}
               </div>
             );
@@ -75,7 +80,9 @@ export default function InteractiveGrid({ grid, onCorrect, onIncorrect }: Props)
             return (
               <button
                 key={j}
-                className={`flex-1 grow rounded-lg content-center font-semibold text-[0.6rem] md:text-lg ${color}`}
+                className={`flex-1 grow rounded-lg content-center font-semibold ${
+                  word.length > 7 ? "text-[0.6rem]" : "text-sm"
+                } md:text-lg ${color}`}
                 onClick={() => toggleSelected(word)}
               >
                 {word}
diff --git a/ui/src/timer-battle/TimerBattleScreen.tsx b/ui/src/timer-battle/TimerBattleScreen.tsx
index f5e1b5d..264bd05 100644
--- a/ui/src/timer-battle/TimerBattleScreen.tsx
+++ b/ui/src/timer-battle/TimerBattleScreen.tsx
@@ -47,6 +47,8 @@ export default function TimerBattleScreen() {
     sendMessage("EndRound");
   };
 
+  const isHost = battle?.players.find((x) => x.name.toUpperCase() === username.toUpperCase())?.isHost === true;
+
   if (battle.state === "InProgress") {
     return (
       <div className="flex flex-col grow mb-4">
@@ -84,12 +86,14 @@ export default function TimerBattleScreen() {
                 </div>
               ))}
 
-            <div className="flex flex-col content-center text-center justify-between w-36 border-2 px-2 pt-1 pb-2 rounded-lg">
-              <h3 className="text-sm font-semibold">Host Controls</h3>
-              <Button onClick={endRound} size="xs" color="red">
-                End Round
-              </Button>
-            </div>
+            {isHost && (
+              <div className="flex flex-col content-center text-center justify-between w-36 border-2 px-2 pt-1 pb-2 rounded-lg">
+                <h3 className="text-sm font-semibold">Host Controls</h3>
+                <Button onClick={endRound} size="xs" color="red">
+                  End Round
+                </Button>
+              </div>
+            )}
           </div>
         </div>
       </div>