Host can enable buzzer system

src/Display.tsx

@@ -4,7 +4,7 @@ import { isEmpty } from "lodash";
 
 import { socket } from "./socket";
 import { useAppSelector } from "./hooks";
-import { selectRoomCode } from "./store/socketSlice";
+import { selectRoomCode } from "./store/commonSlice";
 import { selectContestants } from "./store/displaySlice";
 import { selectCategories, selectActiveClue } from "./store/cluesSlice";
 import ContestantWidget from "./ContestantWidget";

src/host/ActiveClue.tsx

@@ -1,8 +1,7 @@
 import { Container, Stack, Button } from "react-bootstrap";
 
-import { useAppDispatch } from "../hooks";
-import { setActiveClue } from "../store/cluesSlice";
 import type { Clue } from "../store/cluesSlice";
+import { socket } from "../socket";
 
 interface Props {
   activeClue: Clue;
@@ -11,12 +10,11 @@ interface Props {
 // TODO implement timer
 
 const ActiveClue = ({ activeClue }: Props) => {
-  const dispatch = useAppDispatch();
   return (
     <Container>
       <p>{activeClue.question}</p>
       <Stack gap={3} className="text-center">
-        <Button onClick={() => dispatch(setActiveClue(null))}>
+        <Button onClick={() => socket.emit("start-clue-clock")}>
           Start Timer
         </Button>
       </Stack>

src/socket.ts

@@ -1,7 +1,8 @@
 import { io } from "socket.io-client";
 import store from "./store";
-import { setRoomCode } from "./store/socketSlice";
+import { setRoomCode, setShouldStartClueClock } from "./store/commonSlice";
 import { addContestant } from "./store/displaySlice";
+import { setCanBuzz } from "./store/contestantSlice";
 import { setCategories, setActiveClue } from "./store/cluesSlice";
 import type { Clue } from "./store/cluesSlice";
 
@@ -30,4 +31,9 @@ export const setup = () => {
   socket.on("active-clue", (data: Clue) => {
     store.dispatch(setActiveClue(data));
   });
+
+  socket.on("clue-clock-on", () => {
+    store.dispatch(setCanBuzz(true));
+    store.dispatch(setShouldStartClueClock(true));
+  });
 };

src/store/commonSlice.ts

@@ -0,0 +1,32 @@
+import { createSlice, PayloadAction } from "@reduxjs/toolkit";
+import type { RootState } from "./";
+
+interface CommonState {
+  roomCode: string;
+  shouldStartClueClock: boolean;
+}
+
+const initialState: CommonState = {
+  roomCode: "",
+  shouldStartClueClock: false,
+};
+
+export const commonSlice = createSlice({
+  name: "common",
+  initialState,
+  reducers: {
+    setRoomCode: (state, { payload }: PayloadAction<string>) => {
+      state.roomCode = payload;
+    },
+    setShouldStartClueClock: (state, { payload }: PayloadAction<boolean>) => {
+      state.shouldStartClueClock = payload;
+    },
+  },
+});
+
+export const { setRoomCode, setShouldStartClueClock } = commonSlice.actions;
+export const selectRoomCode = (state: RootState) => state.common.roomCode;
+export const selectShouldStartClueClock = (state: RootState) =>
+  state.common.shouldStartClueClock;
+
+export default commonSlice.reducer;

src/store/contestantSlice.ts

@@ -24,7 +24,7 @@ export const contestantSlice = createSlice({
   },
 });
 
-export const { addPathToSignature } = contestantSlice.actions;
+export const { addPathToSignature, setCanBuzz } = contestantSlice.actions;
 export const selectSignature = (state: RootState) => state.contestant.signature;
 export const selectCanBuzz = (state: RootState) => state.contestant.canBuzz;
 

src/store/index.ts

@@ -1,12 +1,12 @@
 import { configureStore } from "@reduxjs/toolkit";
-import socketReducer from "./socketSlice";
+import commonReducer from "./commonSlice";
 import contestantReducer from "./contestantSlice";
 import displayReducer from "./displaySlice";
 import cluesReducer from "./cluesSlice";
 
 const store = configureStore({
   reducer: {
-    socket: socketReducer,
+    common: commonReducer,
     contestant: contestantReducer,
     display: displayReducer,
     clues: cluesReducer,

src/store/socketSlice.ts

@@ -1,25 +0,0 @@
-import { createSlice, PayloadAction } from "@reduxjs/toolkit";
-import type { RootState } from "./";
-
-interface SocketState {
-  roomCode: string;
-}
-
-const initialState: SocketState = {
-  roomCode: "",
-};
-
-export const socketSlice = createSlice({
-  name: "socket",
-  initialState,
-  reducers: {
-    setRoomCode: (state, { payload }: PayloadAction<string>) => {
-      state.roomCode = payload;
-    },
-  },
-});
-
-export const { setRoomCode } = socketSlice.actions;
-export const selectRoomCode = (state: RootState) => state.socket.roomCode;
-
-export default socketSlice.reducer;