Display questions

.eslintrc.cjs

@@ -20,7 +20,9 @@ module.exports = {
     tsconfigRootDir: __dirname,
   },
   plugins: ["react", "@typescript-eslint"],
-  rules: {},
+  rules: {
+    "@typescript-eslint/no-unsafe-return": "off", // Allow quick oners
+  },
   settings: {
     react: {
       version: "detect",

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

vite.config.ts

@@ -3,20 +3,17 @@ import { checker } from "vite-plugin-checker";
 import react from "@vitejs/plugin-react";
 import eslint from "vite-plugin-eslint";
 
-// https://vitejs.dev/config/
 export default defineConfig({
   server: {
     host: true,
   },
   plugins: [
-    {
-      ...react(),
-      ...checker({
-        typescript: true,
-        eslint: {
-          lintCommand: 'eslint "./src/**/*.{ts,tsx}"',
-        },
-      }),
-    },
+    react(),
+    checker({
+      typescript: true,
+      eslint: {
+        lintCommand: 'eslint "./src/**/*.{ts,tsx}"',
+      },
+    }),
   ],
 });