Display tweaks

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 (

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} />

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>
           ))}