feat: add cats/dogs setting (#4)

Author: jsardev

.gitignore

@@ -25,4 +25,5 @@ dist-ssr
 
 # Custom
 .env
-.eslintcache
+.eslintcache
+.vercel

docs/architecture.md

@@ -46,7 +46,7 @@ Those are building blocks that encapsulate some of the domain logic to decrease
 
 Infrastructure elements related to the domain. Often composed from reusable elements from `shared/infrastructure`.
 
-Examples: `CardRepository`, `CardAPIClient`
+Examples: `PetImageApiClient`
 
 #### Services
 

src/modules/game-settings/infrastructure/PetImageApiClientFactory.ts

@@ -0,0 +1,44 @@
+import ky from 'ky'
+
+import { PetType } from '@/modules/game-settings'
+import {
+  ImageApiClient,
+  ImageApiSearchParams,
+  ImageApiClientFactory,
+} from '@/shared/infrastructure'
+
+const PET_TYPE_TO_API_URL_MAP = {
+  [PetType.CATS]: 'https://api.thecatapi.com',
+  [PetType.DOGS]: 'https://api.thedogapi.com',
+}
+
+const PET_TYPE_TO_API_KEY_MAP = {
+  [PetType.CATS]: import.meta.env.VITE_CAT_API_KEY,
+  [PetType.DOGS]: import.meta.env.VITE_DOG_API_KEY,
+}
+
+export class PetImageApiClientFactory extends ImageApiClientFactory {
+  constructor(private petType: PetType) {
+    super()
+  }
+
+  public create(): ImageApiClient {
+    const baseApiClient = ky.create({
+      prefixUrl: PET_TYPE_TO_API_URL_MAP[this.petType],
+      headers: {
+        'x-api-key': PET_TYPE_TO_API_KEY_MAP[this.petType],
+      },
+    })
+
+    return {
+      fetchImages: ({ limit }: ImageApiSearchParams) =>
+        baseApiClient
+          .get('v1/images/search', {
+            searchParams: {
+              limit,
+            },
+          })
+          .json(),
+    }
+  }
+}

src/modules/game-settings/infrastructure/index.ts

@@ -0,0 +1 @@
+export * from './PetImageApiClientFactory'

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

@@ -1,11 +1,18 @@
 import { useShallow } from 'zustand/shallow'
 
 import { useGameSettingsState } from './state'
+import { GameSettings } from './types'
+import { PetImageApiClientFactory } from '../infrastructure'
 
-export const useGameSettings = () =>
+export const useGameSettings = (): GameSettings =>
   useGameSettingsState(
-    useShallow(({ playerCount, cardMatrixSize }) => ({
-      playerCount,
-      cardMatrixSize,
-    })),
+    useShallow(({ playerCount, cardMatrixSize, petType }) => {
+      const petImageApiClientFactory = new PetImageApiClientFactory(petType)
+
+      return {
+        playerCount,
+        cardMatrixSize,
+        apiClient: petImageApiClientFactory.create(),
+      }
+    }),
   )

src/modules/game-settings/model/index.ts

@@ -1 +1,2 @@
 export * from './hooks'
+export * from './types'

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

@@ -1,15 +1,23 @@
 import { create } from 'zustand'
 
-type GameSettingsState = {
+import { PetType } from './types'
+
+export type GameSettingsState = {
   playerCount: number
   cardMatrixSize: number
+  petType: PetType
+
   setPlayerCount: (players: number) => void
   setCardMatrixSize: (cards: number) => void
+  setPetType: (petType: PetType) => void
 }
 
 export const useGameSettingsState = create<GameSettingsState>((set) => ({
   playerCount: 1,
   cardMatrixSize: 4,
+  petType: PetType.CATS,
+
   setPlayerCount: (playerCount: number) => set({ playerCount }),
   setCardMatrixSize: (cardMatrixSize: number) => set({ cardMatrixSize }),
+  setPetType: (petType: PetType) => set({ petType }),
 }))

src/modules/game-settings/model/types.ts

@@ -0,0 +1,15 @@
+import { ImageApiClient } from '@/shared/infrastructure'
+
+import { GameSettingsState } from './state'
+
+export type GameSettings = Pick<
+  GameSettingsState,
+  'playerCount' | 'cardMatrixSize'
+> & {
+  apiClient: ImageApiClient
+}
+
+export enum PetType {
+  CATS = 'CATS',
+  DOGS = 'DOGS',
+}

src/modules/game-settings/ui/PetTypeSettingsChooser.tsx

@@ -0,0 +1,31 @@
+import { useShallow } from 'zustand/shallow'
+
+import { Chooser } from '@/shared/ui/Chooser'
+
+import { useGameSettingsState } from '../model/state'
+import { PetType } from '../model/types'
+
+const OPTIONS = [
+  { option: 'Cats', value: PetType.CATS },
+  { option: 'Dogs', value: PetType.DOGS },
+]
+
+const PET_TYPE_TO_ICON_MAP = {
+  [PetType.CATS]: 'i-lucide-cat',
+  [PetType.DOGS]: 'i-lucide-dog',
+}
+
+export const PetTypeSettingsChooser = () => {
+  const [petType, setPetType] = useGameSettingsState(
+    useShallow((state) => [state.petType, state.setPetType]),
+  )
+
+  return (
+    <Chooser
+      icon={PET_TYPE_TO_ICON_MAP[petType]}
+      options={OPTIONS}
+      value={petType}
+      onChange={setPetType}
+    />
+  )
+}

src/modules/game-settings/ui/index.ts

@@ -1,2 +1,3 @@
 export * from './CardMatrixSettingsChooser'
 export * from './PlayersSettingsChooser'
+export * from './PetTypeSettingsChooser'