Display tweaks

src/Contestant.tsx

@@ -11,10 +11,23 @@ const Contestant = () => {
 
   const signature = useAppSelector(selectSignature);
   const [canBuzz, setCanBuzz] = useState<boolean>(false);
+  const [active, setActive] = useState<boolean>(false);
 
   useEffect(() => {
     socket.emit("contestant-join", { room, signature });
     socket.on("clue-clock-on", () => setCanBuzz(true));
+    socket.on("clue-clock-off", () => setCanBuzz(false));
+    socket.on("contestant-buzzed", ({ sid }) => {
+      setCanBuzz(false);
+      if (sid === socket.id) {
+        setActive(true);
+      }
+    });
+    socket.on("contestant-scores", () => setActive(false));
+    socket.on("contestant-penalized", () => {
+      setActive(false);
+      setCanBuzz(true);
+    });
   }, []);
 
   const handleBuzz = debounce(() => {
@@ -30,7 +43,7 @@ const Contestant = () => {
           cx={50}
           cy={50}
           r={30}
-          fill={canBuzz ? "red" : "grey"}
+          fill={active ? "green" : canBuzz ? "red" : "grey"}
           stroke="black"
           onClick={handleBuzz}
         />

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/Host.tsx

@@ -2,8 +2,12 @@ import { useEffect } from "react";
 import { useParams } from "react-router-dom";
 
 import { socket } from "./socket";
-import { useAppSelector } from "./hooks";
+import { useAppSelector, useAppDispatch } from "./hooks";
-import { selectCategories, selectActiveClue } from "./store/cluesSlice";
+import {
+  selectCategories,
+  selectActiveClue,
+  clearActiveClue,
+} from "./store/cluesSlice";
 import Pregame from "./host/Pregame";
 import ActiveClue from "./host/ActiveClue";
 import CluesDisplay from "./host/CluesDisplay";
@@ -11,11 +15,15 @@ import CluesDisplay from "./host/CluesDisplay";
 const Host = () => {
   const { room } = useParams();
 
+  const dispatch = useAppDispatch();
+
   const activeClue = useAppSelector(selectActiveClue);
   const categories = useAppSelector(selectCategories);
 
   useEffect(() => {
     socket.emit("host-join", { room });
+    socket.on("contestant-scores", () => dispatch(clearActiveClue()));
+    socket.on("clue-clock-off", () => dispatch(clearActiveClue()));
   }, []);
 
   if (categories.length < 6) {

src/Timer.tsx

@@ -1,48 +0,0 @@
-import { useState, useEffect } from "react";
-import { clamp } from "lodash";
-
-interface Props {
-  startTime: number | null;
-  length: number;
-  onTimeout?: () => unknown;
-}
-
-const invLerp = (a: number, b: number, x: number): number =>
-  clamp((x - b) / (a - b), 0, 1);
-
-const Timer = ({ startTime, length, onTimeout }: Props) => {
-  const [segs, setSegs] = useState<number>(0);
-  const updateTimer = () => {
-    if (!startTime) return;
-    const endTime = startTime + length;
-    const currentTime = Date.now();
-    const segs = invLerp(startTime, endTime, currentTime) * 5;
-    setSegs(segs);
-    if (segs > 0) {
-      setTimeout(updateTimer, 100);
-    } else if (onTimeout) {
-      onTimeout();
-    }
-  };
-  useEffect(() => {
-    setTimeout(updateTimer, 100);
-  }, [startTime, length]);
-
-  return (
-    <svg viewBox="0 0 90 50" style={{ width: "100%", height: "100%" }}>
-      {[5, 4, 3, 2, 1, 2, 3, 4, 5].map((seg, i) => (
-        <rect
-          x={i * 10}
-          y="0"
-          width="10"
-          height="5"
-          key={i}
-          fill={seg <= segs ? "yellow" : "black"}
-          stroke="blue"
-        />
-      ))}
-    </svg>
-  );
-};
-
-export default Timer;

src/TimerWidget.tsx

@@ -0,0 +1,21 @@
+interface Props {
+  segs: number;
+}
+
+const TimerWidget = ({ segs }: Props) => (
+  <svg viewBox="0 0 90 50" style={{ width: "100%", height: "100%" }}>
+    {[5, 4, 3, 2, 1, 2, 3, 4, 5].map((seg, i) => (
+      <rect
+        x={i * 10}
+        y="0"
+        width="10"
+        height="5"
+        key={i}
+        fill={seg <= segs ? "yellow" : "black"}
+        stroke="blue"
+      />
+    ))}
+  </svg>
+);
+
+export default TimerWidget;

src/display/ClueDisplay.tsx

@@ -1,22 +1,31 @@
-import { useState, useEffect } from "react";
+import { useEffect } from "react";
 
-import Timer from "../Timer";
+import TimerWidget from "../TimerWidget";
 import type { Clue } from "../store/cluesSlice";
 import { socket } from "../socket";
 
+import { useTimer } from "../hooks";
+
 interface Props {
   activeClue: Clue;
 }
 
 const ClueDisplay = ({ activeClue }: Props) => {
-  const [startTime, setStartTime] = useState<number | null>(null);
+  const onTimeout = () => {
+    socket.emit("clue-clock-timeout");
+  };
+  const { start, cancel, segs } = useTimer(5000, onTimeout);
   useEffect(() => {
-    socket.on("clue-clock-on", () => setStartTime(Date.now()));
+    socket.on("clue-clock-on", start);
+    socket.on("contestant-buzzed", cancel);
+    socket.on("contestant-penalized", start);
   }, []);
   return (
     <>
-      <div className="text-center fs-1">{activeClue.question}</div>
+      <div className="text-center fs-1">
-      <Timer startTime={startTime} length={5000} />
+        {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>
           ))}

src/hooks.ts

@@ -1,5 +1,49 @@
+import { useState, useRef } from "react";
 import { TypedUseSelectorHook, useDispatch, useSelector } from "react-redux";
 import type { RootState, AppDispatch } from "./store";
+import { clamp } from "lodash";
 
 export const useAppDispatch: () => AppDispatch = useDispatch;
 export const useAppSelector: TypedUseSelectorHook<RootState> = useSelector;
+
+const invLerp = (a: number, b: number, x: number): number =>
+  clamp((x - b) / (a - b), 0, 1);
+
+interface Timer {
+  segs: number;
+  start: () => void;
+  cancel: () => void;
+}
+
+export const useTimer = (length: number, onTimeout?: () => unknown): Timer => {
+  const [segs, setSegs] = useState(0);
+  const timeoutId = useRef<ReturnType<typeof setTimeout>>();
+
+  const updateTimer = (startTime: number) => {
+    const endTime = startTime + length;
+    const currentTime = Date.now();
+    const segs = invLerp(startTime, endTime, currentTime) * 5;
+    setSegs(segs);
+    if (segs > 0) {
+      timeoutId.current = setTimeout(updateTimer, 100, startTime);
+    } else if (onTimeout) {
+      onTimeout();
+    }
+  };
+
+  const start = () => {
+    const startTime = Date.now();
+    timeoutId.current = setTimeout(updateTimer, 100, startTime);
+  };
+
+  const cancel = () => {
+    clearTimeout(timeoutId.current);
+    setSegs(0);
+  };
+
+  return {
+    segs,
+    start,
+    cancel,
+  };
+};

src/host/ActiveClue.tsx

@@ -1,22 +1,54 @@
+import { useState, useEffect } from "react";
 import { Container, Stack, Button } from "react-bootstrap";
 
 import type { Clue } from "../store/cluesSlice";
 import { socket } from "../socket";
+import { debounce } from "../utils";
 
 interface Props {
   activeClue: Clue;
 }
 
-// TODO implement timer
+type Mode = "reading" | "running" | "buzzed";
 
 const ActiveClue = ({ activeClue }: Props) => {
+  const [mode, setMode] = useState<Mode>("reading");
+  useEffect(() => {
+    socket.on("clue-clock-on", () => {
+      setMode("running");
+    });
+    socket.on("contestant-buzzed", () => {
+      setMode("buzzed");
+    });
+  }, []);
+  const startTimer = debounce(() => socket.emit("start-clue-clock"));
+  const contestantCorrect = debounce(() => socket.emit("contestant-correct"));
+  const contestantIncorrect = debounce(() => {
+    setMode("running");
+    socket.emit("contestant-incorrect");
+  });
   return (
     <Container>
       <p>{activeClue.question}</p>
+      <p className="fst-italic">{activeClue.answer}</p>
       <Stack gap={3} className="text-center">
-        <Button onClick={() => socket.emit("start-clue-clock")}>
+        {mode === "reading" && (
-          Start Timer
+          <Button onClick={startTimer}>Start Timer</Button>
-        </Button>
+        )}
+        {mode === "running" && ( // TODO remove this
+          <Button
+            variant="warning"
+            onClick={() => socket.emit("clue-clock-timeout")}
+          >
+            Cancel
+          </Button>
+        )}
+        {mode === "buzzed" && (
+          <>
+            <Button onClick={contestantCorrect}>Correct</Button>
+            <Button onClick={contestantIncorrect}>Incorrect</Button>
+          </>
+        )}
       </Stack>
     </Container>
   );

src/host/CluesDisplay.tsx

@@ -18,7 +18,7 @@ const CluesDisplay = () => {
       <Stack gap={3} className="text-center">
         {categories.map(({ name }) => (
           <Fragment key={name}>
-            <h2>{name}</h2>
+            <h2 className="text-uppercase">{name}</h2>
             {[200, 400, 600, 800, 1000].map((value) => (
               <Button key={value} onClick={() => activateClue(name, value)}>
                 {value}

src/main.tsx

@@ -1,12 +1,9 @@
-import React from "react";
 import ReactDOM from "react-dom/client";
 import App from "./App";
 import { setup } from "./socket";
 
 ReactDOM.createRoot(document.getElementById("root") as HTMLElement).render(
-  <React.StrictMode>
+  <App />
-    <App />
-  </React.StrictMode>
 );
 
 setup();

src/store/cluesSlice.ts

@@ -38,10 +38,14 @@ export const cluesSlice = createSlice({
     setActiveClue: (state, { payload }: PayloadAction<Clue | null>) => {
       state.activeClue = payload;
     },
+    clearActiveClue: (state) => {
+      state.activeClue = null;
+    },
   },
 });
 
-export const { setCategories, setActiveClue } = cluesSlice.actions;
+export const { setCategories, setActiveClue, clearActiveClue } =
+  cluesSlice.actions;
 export const selectCategories = (state: RootState) => state.clues.categories;
 export const selectActiveClue = (state: RootState) => state.clues.activeClue;