refactor: remove GameTurnTimer, move logic to store

Author: jsardev

src/modules/game/model/state.game.ts

@@ -3,6 +3,7 @@ import { castDraft } from 'immer'
 import { GameSettings } from '@/modules/game-settings'
 import { ImmerStateCreator } from '@/shared/types/state'
 
+import { listenToTurnTimer } from './subscriptions'
 import { GameState, GameBaseStateSlice } from './types'
 import { GameService } from '../services/GameService'
 
@@ -20,7 +21,7 @@ export const createGameStateSlice: ImmerStateCreator<
   },
 
   actions: {
-    startGame: async (settings: GameSettings) => {
+    prepareGame: async (settings: GameSettings) => {
       get().actions.resetGame()
 
       const gameService = new GameService(settings)
@@ -30,6 +31,22 @@ export const createGameStateSlice: ImmerStateCreator<
       set({ players, cards, areCardsLoading: false })
     },
 
+    startGame: () => {
+      get().turn.actions.startTurnTimer()
+
+      // TODO: refactor to observable that only emits on timer finished
+      const unsubscribeFromTurnTimer = listenToTurnTimer((timer) => {
+        if (timer === 0) {
+          get().turn.actions.nextTurnPhase()
+        }
+      })
+
+      return () => {
+        get().turn.actions.stopTurnTimer()
+        unsubscribeFromTurnTimer()
+      }
+    },
+
     resetGame: () => {
       get().turn.actions.resetTurn()
 

src/modules/game/model/state.turn.ts

@@ -1,5 +1,3 @@
-import { merge } from 'remeda'
-
 import { ImmerStateCreator } from '@/shared/types/state'
 
 import { selectCurrentPlayer } from './selectors'
@@ -61,9 +59,21 @@ export const createTurnStateSlice: ImmerStateCreator<
 
       setTurnPhase: (phase: GameTurnPhase) => {
         set((state) => {
-          state.turn.timer = GAME_TURN_PHASE_TO_TIMER_VALUE[phase]
           state.turn.phase = phase
         })
+
+        get().turn.actions.resetTurnTimer()
+      },
+
+      nextTurnPhase: () => {
+        switch (get().turn.phase) {
+          case GameTurnPhase.ACTION: {
+            return get().turn.actions.endTurn()
+          }
+          case GameTurnPhase.COOLDOWN: {
+            return get().turn.actions.nextTurn()
+          }
+        }
       },
 
       startTurnTimer: () => {
@@ -85,8 +95,7 @@ export const createTurnStateSlice: ImmerStateCreator<
 
       resetTurnTimer: () => {
         set((state) => {
-          state.turn.timer =
-            GAME_TURN_PHASE_TO_TIMER_VALUE[GameTurnPhase.ACTION]
+          state.turn.timer = GAME_TURN_PHASE_TO_TIMER_VALUE[state.turn.phase]
         })
 
         get().turn.actions.restartTurnTimer()
@@ -120,7 +129,7 @@ export const createTurnStateSlice: ImmerStateCreator<
 
       resetTurn: () => {
         set((state) => {
-          merge(state.turn, defaultState)
+          state.turn = { ...state.turn, ...defaultState }
         })
       },
     },

src/modules/game/model/subscriptions.ts

@@ -3,7 +3,7 @@ import { useGameState } from './state'
 
 type GameStateListener<T> = (selectedState: T, previousSelectedState: T) => void
 
-export const listenForAllCardsCollected = (
+export const listenToAllCardsCollected = (
   listener: GameStateListener<boolean>,
 ) =>
   useGameState.subscribe((state) => {

src/modules/game/model/types.ts

@@ -39,6 +39,7 @@ export type GameTurnActions = {
   actions: {
     selectCard: (card: GameCard) => void
     setTurnPhase: (phase: GameTurnPhase) => void
+    nextTurnPhase: () => void
     startTurnTimer: () => void
     stopTurnTimer: () => void
     restartTurnTimer: () => void
@@ -65,7 +66,8 @@ export type GameBaseState = {
 
 export type GameBaseActions = {
   actions: {
-    startGame: (settings: GameSettings) => void
+    prepareGame: (settings: GameSettings) => Promise<void>
+    startGame: () => () => void
     resetGame: () => void
     endGame: () => void
     registerCardRef: (element: HTMLElement) => () => void

src/modules/game/ui/GameManager/hooks.ts

@@ -1,18 +1,31 @@
 import { useEffect } from 'react'
 import { useNavigate } from 'react-router-dom'
 
-import { listenForAllCardsCollected, useGameActions } from '../..'
+import { useGameSettings } from '@/modules/game-settings'
+
+import { listenToAllCardsCollected, useGameActions } from '../..'
 
 export const useGameManager = () => {
   const navigate = useNavigate()
-  const { endGame } = useGameActions()
+  const gameSettings = useGameSettings()
+  const { startGame, endGame } = useGameActions()
 
   useEffect(() => {
-    return listenForAllCardsCollected((areAllCardsCollected) => {
-      if (areAllCardsCollected) {
-        endGame()
-        navigate('/scoreboard')
-      }
-    })
-  }, [navigate, endGame])
+    const unsubscribeFromGameEvents = startGame()
+
+    // TODO: refactor to use an observable that emits when game ends
+    const unsubscribeFromAllCardsCollected = listenToAllCardsCollected(
+      (areAllCardsCollected) => {
+        if (areAllCardsCollected) {
+          endGame()
+          navigate('/scoreboard')
+        }
+      },
+    )
+
+    return () => {
+      unsubscribeFromGameEvents()
+      unsubscribeFromAllCardsCollected()
+    }
+  }, [navigate, endGame, startGame, gameSettings])
 }

src/modules/game/ui/GameStartButton.tsx

@@ -13,10 +13,10 @@ export const GameStartButton = ({
   children,
 }: GameStartButtonProps) => {
   const gameSettings = useGameSettings()
-  const { startGame } = useGameActions()
+  const { prepareGame } = useGameActions()
 
   const handleClick = () => {
-    startGame(gameSettings)
+    prepareGame(gameSettings)
   }
 
   return (

src/modules/game/ui/GameTurnManager/GameTurnManager.tsx

@@ -4,5 +4,4 @@ export * from './GameOverlay'
 export * from './GameStartButton'
 export * from './GameNextTurnButton/GameNextTurnButton'
 export * from './GameScoreboard'
-export * from './GameTurnManager'
 export * from './GameTurnTimer'

src/modules/game/ui/GameTurnManager/hooks.ts

@@ -4,7 +4,6 @@ import {
   GameNextTurnButton,
   useAreCardsLoading,
   GameManager,
-  GameTurnManager,
   GameTurnTimer,
 } from '@/modules/game'
 import { Loader } from '@/shared/ui/Loader'
@@ -22,7 +21,6 @@ export function GamePage() {
       ) : (
         <>
           <GameManager />
-          <GameTurnManager />
           <GameOverlay />
 
           <div className="grid grid-cols-1 grid-rows-1 max-h-full w-full place-items-center gap-8 lg:justify-start">