feat: add turn timer

Author: jsardev

package.json

@@ -16,16 +16,15 @@
     "clsx": "2.0.0",
     "immer": "^10.0.3",
     "ky": "^1.0.1",
-    "lodash": "^4.17.21",
     "react": "18.2.0",
     "react-dom": "18.2.0",
     "react-router-dom": "6.16.0",
+    "remeda": "^1.29.0",
     "zustand": "4.4.2"
   },
   "devDependencies": {
     "@iconify-json/lucide": "1.1.131",
     "@testing-library/react": "^14.0.0",
-    "@types/lodash": "^4.14.199",
     "@types/node": "^20.8.2",
     "@types/react": "18.2.24",
     "@types/react-dom": "18.2.8",

pnpm-lock.yaml

@@ -0,0 +1,30 @@
+import { useShallow } from 'zustand/shallow'
+
+import { selectCollectedCards, selectCurrentPlayer } from './selectors'
+import { useGameState } from './state'
+import { GameCard } from './types'
+import { isCardCollected } from '../utils'
+
+export const useGameActions = () =>
+  useGameState(useShallow((state) => state.actions))
+
+export const usePlayers = () => useGameState((state) => state.players)
+
+export const useCurrentPlayer = () => useGameState(selectCurrentPlayer)
+
+export const useCards = () => useGameState((state) => state.cards)
+
+export const useAreCardsLoading = () =>
+  useGameState((state) => state.areCardsLoading)
+
+export const useCollectedCards = () => useGameState(selectCollectedCards)
+
+export const useIsCardCollected = () => {
+  const collectedCards = useCollectedCards()
+  return (card: GameCard) => isCardCollected(collectedCards, card)
+}
+
+export const useCardRefs = () => useGameState((state) => state.refs.cards)
+
+export const useAllCardsRegistered = () =>
+  useGameState((state) => state.cards.length === state.refs.cards.length)

src/modules/game/model/hooks.game.ts

@@ -1,52 +1,2 @@
-import { selectCollectedCards } from './selectors'
-import { useGameState } from './state'
-import { GameCard } from './types'
-import { isCardCollected, isCardRevealed } from '../utils'
-
-export const useTurn = () => useGameState((state) => state.turn)
-
-export const usePlayers = () => useGameState((state) => state.players)
-
-export const useCurrentPlayer = () =>
-  useGameState((state) => state.players[state.turn.playerIndex])
-
-export const useCards = () => useGameState((state) => state.cards)
-
-export const useAreCardsLoading = () =>
-  useGameState((state) => state.areCardsLoading)
-
-export const useCollectedCards = () => useGameState(selectCollectedCards)
-
-export const useSelectedCards = () =>
-  useGameState((state) => state.turn.selectedCards)
-
-export const useIsCardCollected = () => {
-  const collectedCards = useCollectedCards()
-  return (card: GameCard) => isCardCollected(collectedCards, card)
-}
-
-export const useIsCardRevealed = () => {
-  const selectedCards = useSelectedCards()
-  return (card: GameCard) => isCardRevealed(selectedCards, card)
-}
-
-export const useCardRefs = () => useGameState((state) => state.refs.cards)
-
-export const useAllCardsRegistered = () =>
-  useGameState((state) => state.cards.length === state.refs.cards.length)
-
-export const useGameActions = () => {
-  const selectCard = useGameState((state) => state.selectCard)
-  const startGame = useGameState((state) => state.startGame)
-  const endGame = useGameState((state) => state.endGame)
-  const endTurn = useGameState((state) => state.endTurn)
-  const registerCardRef = useGameState((state) => state.registerCardRef)
-
-  return {
-    startGame,
-    endGame,
-    selectCard,
-    endTurn,
-    registerCardRef,
-  }
-}
+export * from './hooks.game'
+export * from './hooks.turn'

src/modules/game/model/hooks.ts

@@ -0,0 +1,20 @@
+import { omit } from 'remeda'
+import { useShallow } from 'zustand/shallow'
+
+import { useGameState } from './state'
+import { GameCard } from './types'
+import { isCardRevealed } from '../utils'
+
+export const useTurn = () =>
+  useGameState(useShallow((state) => omit(state.turn, ['actions'])))
+
+export const useTurnActions = () =>
+  useGameState(useShallow((state) => state.turn.actions))
+
+export const useSelectedCards = () =>
+  useGameState((state) => state.turn.selectedCards)
+
+export const useIsCardRevealed = () => {
+  const selectedCards = useSelectedCards()
+  return (card: GameCard) => isCardRevealed(selectedCards, card)
+}

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

@@ -1,8 +1,12 @@
-import { GameCard } from '.'
-import { GameState } from './state'
+import { Draft } from 'immer'
+
+import { GameCard, GameState } from '.'
 
 export const selectCollectedCards = (state: GameState) =>
   state.players.reduce<GameCard[]>(
     (collectedCards, player) => [...collectedCards, ...player.cards],
     [],
   )
+
+export const selectCurrentPlayer = (state: GameState | Draft<GameState>) =>
+  state.players[state.turn.playerIndex]

src/modules/game/model/selectors.ts

@@ -0,0 +1,60 @@
+import { castDraft } from 'immer'
+
+import { GameSettings } from '@/modules/game-settings'
+import { ImmerStateCreator } from '@/shared/types/state'
+
+import { GameState, GameBaseStateSlice } from './types'
+import { GameService } from '../services/GameService'
+
+export const createGameStateSlice: ImmerStateCreator<
+  GameState,
+  GameBaseStateSlice
+> = (set, get) => ({
+  players: [],
+  cards: [],
+  areCardsLoading: true,
+  isFinished: false,
+
+  refs: {
+    cards: [],
+  },
+
+  actions: {
+    startGame: async (settings: GameSettings) => {
+      get().actions.resetGame()
+
+      const gameService = new GameService(settings)
+      const players = gameService.initializePlayers()
+      const cards = await gameService.initializeCards()
+
+      set({ players, cards, areCardsLoading: false })
+    },
+
+    resetGame: () => {
+      get().turn.actions.resetTurn()
+
+      set((state) => {
+        state.isFinished = false
+        state.areCardsLoading = true
+      })
+    },
+
+    endGame: () => {
+      set({ isFinished: true })
+    },
+
+    registerCardRef: (element: HTMLElement) => {
+      set((state) => {
+        state.refs.cards.push(castDraft(element))
+      })
+
+      return () => {
+        const elementIndex = get().refs.cards.indexOf(element)
+
+        set((state) => {
+          state.refs.cards.splice(elementIndex, 1)
+        })
+      }
+    },
+  },
+})