Merge branch 'refactoring' into development

Timtam · Feb 2, 2025 · 2e2936d · 2e2936d
2 parents ec55577 + f827131
commit 2e2936d
Show file tree

Hide file tree

Showing 7 changed files with 502 additions and 316 deletions.
diff --git a/client/package-lock.json b/client/package-lock.json
diff --git a/client/package.json b/client/package.json
@@ -10,14 +10,15 @@
         "format": "npm run yaml-sort && npx prettier --write .",
         "dev": "vite",
         "build": "tsc && vite build",
-        "build-dev": "tsc && vite build --sourcemap true --minify false",
+        "build-dev": "tsc && vite build -m=development --sourcemap true --minify false",
         "lint": "eslint . -c eslint.config.mjs --report-unused-disable-directives --max-warnings 0",
         "preview": "vite preview",
         "version": "node -e \"import('@corteks/gitversion').then(({default: _}) => _.default().then((gv) => console.log(!gv.COMMITS_SINCE_TAG ? gv.LAST_TAG_NAME : gv.LAST_TAG_NAME + '+' + gv.COMMITS_SINCE_TAG + '-' + gv.CURRENT_COMMIT_SHORT_ID)))\""
     },
     "dependencies": {
         "@lomray/event-manager": "^2.0.2",
         "@rwh/keystrokes": "^1.5.6",
+        "@simbathesailor/use-what-changed": "^2.0.0",
         "@uidotdev/usehooks": "^2.4.1",
         "boolify-string": "^2.0.2",
         "bootstrap": "^5.3.3",
@@ -39,6 +40,7 @@
         "react-router-dom": "^6.22.3",
         "slugify": "^1.6.6",
         "title-case": "^4.3.1",
+        "use-effect-event": "^1.0.2",
         "use-immer": "^0.11.0",
         "use-prefers-color-scheme": "^1.1.3",
         "zod": "^3.22.4"

diff --git a/client/src/main.tsx b/client/src/main.tsx
@@ -1,3 +1,4 @@
+import { setUseWhatChange } from "@simbathesailor/use-what-changed"
 import "bootstrap/dist/css/bootstrap.min.css"
 import React from "react"
 import { ToastsProvider } from "react-bootstrap-toasts"
@@ -18,6 +19,8 @@ import Login from "./pages/login.page"
 import RegistrationAction from "./pages/registration.action"
 import Registration from "./pages/registration.page"
 
+setUseWhatChange(import.meta.env.DEV)
+
 const router = createBrowserRouter(
     [
         {

diff --git a/client/src/pages/game.page.tsx b/client/src/pages/game.page.tsx
@@ -71,7 +71,7 @@ export default function Game() {
         if (game.players.some((p) => p.id === user?.id))
             await gameService.leave(game.id)
         else await gameService.join(game.id)
-    }, [game, gameService, user])
+    }, [game.id, game.players, gameService, user])
 
     const startOrStopGame = useCallback(async () => {
         if (game.state === GameState.Open) {
@@ -90,7 +90,7 @@ export default function Game() {
         } else {
             await gameService.stop(game.id)
         }
-    }, [game, gameService, showError])
+    }, [game.id, game.state, gameService, showError])
 
     const canSkip = useCallback(() => {
         return (
@@ -103,7 +103,7 @@ export default function Game() {
                         PlayerState.Guessing)) &&
             (game.players.find((p) => p.turn_player)?.tokens ?? 0) > 0
         )
-    }, [game, user])
+    }, [game.mode, game.players, user])
 
     const canClaim = (p?: Player) => {
         return p && p.tokens >= 3
@@ -117,15 +117,15 @@ export default function Game() {
                     ? game.players.find((p) => p.turn_player)?.id
                     : undefined,
             ),
-        [game, gameService],
+        [game.id, game.mode, game.players, gameService],
     )
 
     const canStartOrStopGame = useCallback((): boolean => {
         return (
             game.players.find((p) => p.id === user?.id)?.creator === true &&
             game.players.length >= 2
         )
-    }, [game, user])
+    }, [game.players, user])
 
     useEffect(() => {
         const eventSource = new EventSource(`/api/games/${game.id}/events`)
@@ -297,11 +297,15 @@ export default function Game() {
             eventSource.close()
             unsubscribeGameEnded()
         }
-    }, [game, navigate, setGame, setGameEndedState, setHitSrc, setWinner])
+
+        // this is by way no good practice, please don't do this at home kids
+        // we're waiting for useEffectEvent to become stable
+        // eslint-disable-next-line react-hooks/exhaustive-deps
+    }, [navigate, setGame, setGameEndedState, setHitSrc, setWinner])
 
     useEffect(() => {
         setShowHits(Array.from({ length: game.players.length }, () => false))
-    }, [game, setShowHits])
+    }, [game.players, setShowHits])
 
     // register keystrokes
     useEffect(() => {
@@ -365,7 +369,8 @@ export default function Game() {
     }, [
         canSkip,
         canStartOrStopGame,
-        game,
+        game.state,
+        game.players,
         joinOrLeaveGame,
         modalShown,
         setShowSettings,

diff --git a/client/src/pages/game/hit-player.tsx b/client/src/pages/game/hit-player.tsx
@@ -9,14 +9,14 @@ import { detect } from "detect-browser"
 import { Howl } from "howler"
 import {
     forwardRef,
-    useCallback,
     useEffect,
     useImperativeHandle,
     useRef,
     useState,
 } from "react"
 import Button from "react-bootstrap/Button"
 import { useTranslation } from "react-i18next"
+import { useEffectEvent } from "use-effect-event"
 import { Events, Sfx } from "../../events"
 import { useModalShown } from "../../hooks"
 
@@ -54,7 +54,7 @@ export const HitPlayer = forwardRef<HitPlayerRef, HitPlayerProps>(
         const [sfxVolume] = useLocalStorage("sfxVolume", "1.0")
         const modalShown = useModalShown()
 
-        const play = useCallback(() => {
+        const play = useEffectEvent(() => {
             if (timers.current.stopTimer) {
                 clearTimeout(timers.current.stopTimer)
             }
@@ -83,7 +83,7 @@ export const HitPlayer = forwardRef<HitPlayerRef, HitPlayerProps>(
                     setPlaying(false)
                 }, duration * 1000)
             if (onPlay !== undefined) onPlay()
-        }, [duration, onPlay, player, sfxVolume, src, timers, volume])
+        })
 
         const stop = () => {
             setPlaying(false)
@@ -108,7 +108,7 @@ export const HitPlayer = forwardRef<HitPlayerRef, HitPlayerProps>(
             } else {
                 setPlaying(false)
             }
-        }, [autoplay, play, src])
+        }, [autoplay, setPlaying, src])
 
         useEffect(() => {
             if (playing === true) {

diff --git a/client/src/pages/game/settings.tsx b/client/src/pages/game/settings.tsx
@@ -61,7 +61,10 @@ export default function GameSettings({
         } else {
             setAvailablePacks({})
         }
-    }, [packs, show])
+        // don't do this at home kids
+        // we're waiting for useEffectEvent to become stable
+        // eslint-disable-next-line react-hooks/exhaustive-deps
+    }, [setAvailablePacks, setPacks, show])
 
     useEffect(() => {
         if (selectAllPacks.current === null) return

diff --git a/client/src/pages/game/slot-selector.tsx b/client/src/pages/game/slot-selector.tsx
@@ -43,7 +43,7 @@ export default function SlotSelector({ game }: { game: Game }) {
                     null)
                   : (game.players.find((p) => p.creator) ?? null)
         }
-    }, [game, user])
+    }, [game.mode, game.state, game.players, user])
 
     const actionRequired = useCallback((): PlayerState => {
         if (user === null) return PlayerState.Waiting
@@ -72,7 +72,7 @@ export default function SlotSelector({ game }: { game: Game }) {
                 console.log(e)
             }
         },
-        [game],
+        [game.id],
     )
 
     const guess = useCallback(async () => {
@@ -96,7 +96,14 @@ export default function SlotSelector({ game }: { game: Game }) {
         } catch (e) {
             console.log(e)
         }
-    }, [actionPlayer, actionRequired, game, selectedSlot])
+    }, [
+        actionPlayer,
+        actionRequired,
+        game.id,
+        game.mode,
+        game.players,
+        selectedSlot,
+    ])
 
     useEffect(() => {
         game.players.forEach((p) => {
@@ -114,7 +121,7 @@ export default function SlotSelector({ game }: { game: Game }) {
         ) {
             setSelectedSlot(selectedKeySlot)
         }
-    }, [game, selectedKeySlot, selectedSlot])
+    }, [game.players, selectedKeySlot, selectedSlot])
 
     useEffect(() => {
         const handlePreviousSlot = {
@@ -326,7 +333,15 @@ export default function SlotSelector({ game }: { game: Game }) {
                 )
             }
         }
-    }, [actionRequired, confirm, game, guess, selectedKeySlot, t])
+    }, [
+        actionRequired,
+        confirm,
+        game.players,
+        game.state,
+        guess,
+        selectedKeySlot,
+        t,
+    ])
 
     if (game.state === GameState.Open)
         return <h2 className="h4">{t("gameNotStarted")}</h2>