Display questions

src/Display.tsx

@@ -6,14 +6,16 @@ import { socket } from "./socket";
 import { useAppSelector } from "./hooks";
 import { selectRoomCode } from "./store/socketSlice";
 import { selectContestants } from "./store/displaySlice";
-import { selectCategories } from "./store/cluesSlice";
+import { selectCategories, selectActiveClue } from "./store/cluesSlice";
 import ContestantWidget from "./ContestantWidget";
 import Gameboard from "./display/Gameboard";
+import ClueDisplay from "./display/ClueDisplay";
 
 const Display = () => {
   const roomCode = useAppSelector(selectRoomCode);
   const contestants = useAppSelector(selectContestants);
   const categories = useAppSelector(selectCategories);
+  const activeClue = useAppSelector(selectActiveClue);
 
   useEffect(() => {
     socket.emit("new-game");
@@ -25,7 +27,12 @@ const Display = () => {
         <h1 className="text-center">Room code is: {roomCode}</h1>
       </Container>
 
-      {!isEmpty(categories) && <Gameboard categories={categories} />}
+      {!isEmpty(categories) && !activeClue && (
+        <Gameboard categories={categories} />
+      )}
+      {!isEmpty(categories) && activeClue && (
+        <ClueDisplay activeClue={activeClue} />
+      )}
 
       <Stack
         direction="horizontal"

src/display/ClueDisplay.tsx

@@ -0,0 +1,11 @@
+import type { Clue } from "../store/cluesSlice";
+
+interface Props {
+  activeClue: Clue;
+}
+
+const ClueDisplay = ({ activeClue }: Props) => {
+  return <div className="text-center fs-1">{activeClue.question}</div>;
+};
+
+export default ClueDisplay;

src/display/Gameboard.tsx

@@ -6,14 +6,30 @@ interface Props {
   categories: Category[];
 }
 
+const values = [200, 400, 600, 800, 1000];
+
 const Gameboard = ({ categories }: Props) => {
   return (
     <Container fluid>
       <Row>
         {categories.map(({ name }) => (
-          <Col key={name}>{name}</Col>
+          <Col
+            key={name}
+            className="fw-bolder border border-primary text-center"
+          >
+            {name}
+          </Col>
         ))}
       </Row>
+      {values.map((value) => (
+        <Row key={value}>
+          {categories.map(({ name }) => (
+            <Col key={name} className="text-center border border-primary">
+              {value}
+            </Col>
+          ))}
+        </Row>
+      ))}
     </Container>
   );
 };