Dynamically size answers for small screens

JustAman62 · Aug 26, 2024 · f089db6 · f089db6
1 parent b2c71f3
commit f089db6
Show file tree

Hide file tree

Showing 2 changed files with 19 additions and 8 deletions.
diff --git 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
@@ -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>