From 9265ffa1ccac1219786994d9e06e6672b7f776bb Mon Sep 17 00:00:00 2001
From: Dane Johnson <daneallenjohnson@protonmail.com>
Date: Sun, 5 Mar 2023 09:57:18 -0600
Subject: [PATCH] Display tweaks

---
 src/Display.tsx             | 12 ++++++++++--
 src/display/ClueDisplay.tsx |  2 +-
 src/display/Gameboard.tsx   |  9 +++++++--
 3 files changed, 18 insertions(+), 5 deletions(-)

diff --git a/src/Display.tsx b/src/Display.tsx
index d0e7765..09fd5aa 100644
--- a/src/Display.tsx
+++ b/src/Display.tsx
@@ -3,10 +3,14 @@ import { Stack, Container } from "react-bootstrap";
 import { isEmpty } from "lodash";
 
 import { socket } from "./socket";
-import { useAppSelector } from "./hooks";
+import { useAppSelector, useAppDispatch } from "./hooks";
 import { selectRoomCode } from "./store/commonSlice";
 import { selectContestants } from "./store/displaySlice";
-import { selectCategories, selectActiveClue } from "./store/cluesSlice";
+import {
+  selectCategories,
+  selectActiveClue,
+  clearActiveClue,
+} from "./store/cluesSlice";
 import ContestantWidget from "./ContestantWidget";
 import Gameboard from "./display/Gameboard";
 import ClueDisplay from "./display/ClueDisplay";
@@ -16,9 +20,13 @@ const Display = () => {
   const contestants = useAppSelector(selectContestants);
   const categories = useAppSelector(selectCategories);
   const activeClue = useAppSelector(selectActiveClue);
+  const dispatch = useAppDispatch();
 
   useEffect(() => {
+    console.log(socket);
     socket.emit("new-game");
+    socket.on("clue-clock-off", () => dispatch(clearActiveClue()));
+    socket.on("contestant-scores", () => dispatch(clearActiveClue()));
   }, []);
 
   return (
diff --git a/src/display/ClueDisplay.tsx b/src/display/ClueDisplay.tsx
index 95654b3..1d810c2 100644
--- a/src/display/ClueDisplay.tsx
+++ b/src/display/ClueDisplay.tsx
@@ -22,7 +22,7 @@ const ClueDisplay = ({ activeClue }: Props) => {
   }, []);
   return (
     <>
-      <div className="text-center fs-1 text-uppercase">
+      <div className="text-center fs-1">
         {activeClue.question}
       </div>
       <TimerWidget segs={segs} />
diff --git a/src/display/Gameboard.tsx b/src/display/Gameboard.tsx
index 797195a..89c3622 100644
--- a/src/display/Gameboard.tsx
+++ b/src/display/Gameboard.tsx
@@ -14,8 +14,9 @@ const Gameboard = ({ categories }: Props) => {
       <Row>
         {categories.map(({ name }) => (
           <Col
+            xs={2}
             key={name}
-            className="fw-bolder border border-primary text-center"
+            className="fw-bolder border border-2 border-dark bg-primary text-center text-white text-uppercase p-4"
           >
             {name}
           </Col>
@@ -24,7 +25,11 @@ const Gameboard = ({ categories }: Props) => {
       {values.map((value) => (
         <Row key={value}>
           {categories.map(({ name }) => (
-            <Col key={name} className="text-center border border-primary">
+            <Col
+              xs={2}
+              key={name}
+              className="text-center border border-dark bg-primary text-white p-4"
+            >
               {value}
             </Col>
           ))}