diff --git a/src/Display.tsx b/src/Display.tsx index fa8fcac..d0e7765 100644 --- a/src/Display.tsx +++ b/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"; diff --git a/src/host/ActiveClue.tsx b/src/host/ActiveClue.tsx index 43cdd3b..36dec1f 100644 --- a/src/host/ActiveClue.tsx +++ b/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 (

{activeClue.question}

- diff --git a/src/socket.ts b/src/socket.ts index 2ac2f78..9a479c1 100644 --- a/src/socket.ts +++ b/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)); + }); }; diff --git a/src/store/commonSlice.ts b/src/store/commonSlice.ts new file mode 100644 index 0000000..4c09eed --- /dev/null +++ b/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) => { + state.roomCode = payload; + }, + setShouldStartClueClock: (state, { payload }: PayloadAction) => { + 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; diff --git a/src/store/contestantSlice.ts b/src/store/contestantSlice.ts index 072d4da..609b64b 100644 --- a/src/store/contestantSlice.ts +++ b/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; diff --git a/src/store/index.ts b/src/store/index.ts index b302714..d20c38d 100644 --- a/src/store/index.ts +++ b/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, diff --git a/src/store/socketSlice.ts b/src/store/socketSlice.ts deleted file mode 100644 index b7ea3e0..0000000 --- a/src/store/socketSlice.ts +++ /dev/null @@ -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) => { - state.roomCode = payload; - }, - }, -}); - -export const { setRoomCode } = socketSlice.actions; -export const selectRoomCode = (state: RootState) => state.socket.roomCode; - -export default socketSlice.reducer;