Show category name when a category is solved

JustAman62 · Aug 30, 2024 · d181e12 · d181e12
1 parent e57c08a
commit d181e12
Show file tree

Hide file tree

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