From 9e03336d1a4e67a81ebdb1cc48ab378061e453a9 Mon Sep 17 00:00:00 2001
From: Dane Johnson <daneallenjohnson@protonmail.com>
Date: Wed, 15 Feb 2023 13:36:16 -0600
Subject: [PATCH] Display questions

---
 .eslintrc.cjs               |  4 +++-
 src/Display.tsx             | 11 +++++++++--
 src/display/ClueDisplay.tsx | 11 +++++++++++
 src/display/Gameboard.tsx   | 18 +++++++++++++++++-
 vite.config.ts              | 17 +++++++----------
 5 files changed, 47 insertions(+), 14 deletions(-)
 create mode 100644 src/display/ClueDisplay.tsx

diff --git a/.eslintrc.cjs b/.eslintrc.cjs
index 1fc6fc7..5fac5fc 100644
--- a/.eslintrc.cjs
+++ b/.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",
diff --git a/src/Display.tsx b/src/Display.tsx
index ebc0882..fa8fcac 100644
--- a/src/Display.tsx
+++ b/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"
diff --git a/src/display/ClueDisplay.tsx b/src/display/ClueDisplay.tsx
new file mode 100644
index 0000000..169614d
--- /dev/null
+++ b/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;
diff --git a/src/display/Gameboard.tsx b/src/display/Gameboard.tsx
index 7cfee03..797195a 100644
--- a/src/display/Gameboard.tsx
+++ b/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>
   );
 };
diff --git a/vite.config.ts b/vite.config.ts
index e443edb..d4b8c82 100644
--- a/vite.config.ts
+++ b/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}"',
+      },
+    }),
   ],
 });