more sfx and alot more hits

client/src/pages/game.tsx

@@ -1,4 +1,6 @@
+import { useLocalStorage } from "@uidotdev/usehooks"
 import deepcopy from "deepcopy"
+import { Howl } from "howler"
 import { useEffect, useMemo } from "react"
 import Button from "react-bootstrap/Button"
 import Modal from "react-bootstrap/Modal"
@@ -9,6 +11,10 @@ import { Trans, useTranslation } from "react-i18next"
 import type { LoaderFunction } from "react-router"
 import { json, useLoaderData, useNavigate } from "react-router-dom"
 import { useImmer } from "use-immer"
+import noInterception from "../../sfx/no_interception.mp3"
+import payToken from "../../sfx/pay_token.mp3"
+import youFail from "../../sfx/you_fail.mp3"
+import youScore from "../../sfx/you_score.mp3"
 import {
     Game as GameEntity,
     GameEvent,
@@ -49,6 +55,19 @@ export function Game() {
     let [showSettings, setShowSettings] = useImmer<boolean>(false)
     let navigate = useNavigate()
     let { t } = useTranslation()
+    let [sfxVolume] = useLocalStorage("sfxVolume", "1.0")
+    let hNoInterception = new Howl({
+        src: [noInterception],
+    })
+    let hPayToken = new Howl({
+        src: [payToken],
+    })
+    let hYouScore = new Howl({
+        src: [youScore],
+    })
+    let hYouFail = new Howl({
+        src: [youFail],
+    })
 
     const canSkip = () => {
         return (
@@ -78,6 +97,23 @@ export function Game() {
             } else if (ge.state === GameState.Open) {
                 setGameEnded(true)
                 setHitSrc("")
+            } else if (ge.state === GameState.Confirming) {
+                if (
+                    ge.players?.find(
+                        (p) =>
+                            p.id === cookies.logged_in?.id &&
+                            isSlotCorrect(ge.hit ?? null, p.guess),
+                    ) !== undefined
+                ) {
+                    hYouScore.volume(parseFloat(sfxVolume))
+                    hYouScore.play()
+                } else if (
+                    ge.players?.find((p) => p.id === cookies.logged_in?.id)
+                        ?.guess !== null
+                ) {
+                    hYouFail.volume(parseFloat(sfxVolume))
+                    hYouFail.play()
+                }
             }
         })
 
@@ -105,6 +141,16 @@ export function Game() {
                     g.players[idx] = pe
                 })
             })
+
+            if (ge.players !== undefined) {
+                if (ge.players[0].guess === null) {
+                    hNoInterception.volume(parseFloat(sfxVolume))
+                    hNoInterception.play()
+                } else {
+                    hPayToken.volume(parseFloat(sfxVolume))
+                    hPayToken.play()
+                }
+            }
         })
 
         eventSource.addEventListener("skip", (e) => {

client/src/pages/game/end-screen.tsx

@@ -1,9 +1,13 @@
+import { useLocalStorage } from "@uidotdev/usehooks"
+import { Howl } from "howler"
 import { useEffect } from "react"
 import Modal from "react-bootstrap/Modal"
 import Table from "react-bootstrap/Table"
 import { useCookies } from "react-cookie"
 import { useTranslation } from "react-i18next"
 import { useImmer } from "use-immer"
+import youLose from "../../../sfx/you_lose.mp3"
+import youWin from "../../../sfx/you_win.mp3"
 import type { Game, Player } from "../../entities"
 import { isSlotCorrect } from "./utils"
 
@@ -19,6 +23,13 @@ export default ({
     let [cookies] = useCookies()
     let { t } = useTranslation()
     let [winner, setWinner] = useImmer<Player | undefined>(undefined)
+    let [sfxVolume] = useLocalStorage("sfxVolume", "1.0")
+    let hYouLose = new Howl({
+        src: [youLose],
+    })
+    let hYouWin = new Howl({
+        src: [youWin],
+    })
 
     useEffect(() => {
         setWinner(
@@ -28,6 +39,22 @@ export default ({
                     isSlotCorrect(game.hit, p.guess),
             ),
         )
+
+        if (
+            winner !== undefined &&
+            game.players.find((p) => p.id === cookies.logged_in?.id) !==
+                undefined &&
+            winner.id !== cookies.logged_in?.id
+        ) {
+            hYouLose.volume(parseFloat(sfxVolume))
+            hYouLose.play()
+        } else if (
+            winner !== undefined &&
+            winner.id === cookies.logged_in?.id
+        ) {
+            hYouWin.volume(parseFloat(sfxVolume))
+            hYouWin.play()
+        }
     }, [game])
 
     return (