From d181e127251082f8efd79f72e49ca286b3ff174b Mon Sep 17 00:00:00 2001
From: BrownKnight <amanrk@hotmail.co.uk>
Date: Fri, 30 Aug 2024 20:17:14 +0100
Subject: [PATCH] Show category name when a category is solved

---
 ui/src/grid/InteractiveGrid.tsx           | 17 ++++-------------
 ui/src/grid/SimpleGrid.tsx                |  6 ++----
 ui/src/timer-battle/TimerBattleScreen.tsx |  3 +--
 3 files changed, 7 insertions(+), 19 deletions(-)

diff --git a/ui/src/grid/InteractiveGrid.tsx b/ui/src/grid/InteractiveGrid.tsx
index 93ff5f2..673e3a0 100644
--- a/ui/src/grid/InteractiveGrid.tsx
+++ b/ui/src/grid/InteractiveGrid.tsx
@@ -55,19 +55,10 @@ export default function InteractiveGrid({ grid, onCorrect, onIncorrect }: Props)
 
       {matchedCategories.map((category, i) => (
         <Row key={i}>
-          {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 ${
-                  word.length > 7 ? "text-[0.6rem]" : "text-sm"
-                } md:text-lg ${color}`}
-              >
-                {word}
-              </div>
-            );
-          })}
+          <div className="flex-1 grow rounded-lg content-center bg-green-700 text-white">
+            <p className="font-bold text-lg">{category.name}</p>
+            <p className="font-normal text-sm">{category.answers.join(" | ")}</p>
+          </div>
         </Row>
       ))}
       {_.chunk(remaining, 4).map((words, i) => (
diff --git a/ui/src/grid/SimpleGrid.tsx b/ui/src/grid/SimpleGrid.tsx
index bd42308..2fd172a 100644
--- a/ui/src/grid/SimpleGrid.tsx
+++ b/ui/src/grid/SimpleGrid.tsx
@@ -10,10 +10,8 @@ export default function SimpleGrid({ grid, matchedCount, title }: { grid: Grid;
       {title && <h1 className="self-center font-semibold text-sm text-black dark:text-gray-200">{title}</h1>}
       {_.range(0, matchedCount).map((i) => {
         return (
-          <div key={i} className="flex flex-row gap-2 aspect-[6/1]">
-            {_.range(columnCount).map((j) => (
-              <div key={j} className="bg-green-700 grow rounded"></div>
-            ))}
+          <div key={i} className="flex flex-row aspect-[6/1] bg-green-700 rounded">
+
           </div>
         );
       })}
diff --git a/ui/src/timer-battle/TimerBattleScreen.tsx b/ui/src/timer-battle/TimerBattleScreen.tsx
index e582da1..a379238 100644
--- a/ui/src/timer-battle/TimerBattleScreen.tsx
+++ b/ui/src/timer-battle/TimerBattleScreen.tsx
@@ -74,9 +74,8 @@ export default function TimerBattleScreen() {
             {battle.players
               .filter((x) => x.name !== username)
               .map((player) => (
-                <div className="w-36">
+                <div key={player.name} className="w-36">
                   <TimedGrid
-                    key={player.name}
                     grid={battle.grid!}
                     startTime={Date.parse(battle.roundStartedAt!)}
                     staticTime={player.scores[battle.roundNumber]?.time}