diff --git a/src/assets/audio/DardDealt.mp3 b/src/assets/audio/CardDealt.mp3 similarity index 100% rename from src/assets/audio/DardDealt.mp3 rename to src/assets/audio/CardDealt.mp3 diff --git a/src/components/Table/Table.tsx b/src/components/Table/Table.tsx index 3f5e3b5..08415c8 100644 --- a/src/components/Table/Table.tsx +++ b/src/components/Table/Table.tsx @@ -13,7 +13,7 @@ import useAudioPlayer from "./hooks/useAudioPlayer"; const Table = ({ hide = false }: { hide?: boolean }) => { const game = useGame(); - const {play} = useAudioPlayer(); + const { play } = useAudioPlayer(); const { hitWarningsEnabled, stickWarningsEnabled } = useGameSettingsStore(); const [showHitWarning, setShowHitWarning] = useState(false); const [showStickWarning, setShowStickWarning] = useState(false); @@ -31,7 +31,7 @@ const Table = ({ hide = false }: { hide?: boolean }) => { game.getParticipantScore("Player") >= 18 && !overrideWarning ) { - play('warning'); + play("warning"); setShowHitWarning(true); return; } @@ -47,7 +47,7 @@ const Table = ({ hide = false }: { hide?: boolean }) => { game.getParticipantScore("Player") <= 10 && !overrideWarning ) { - play('warning'); + play("warning"); setShowStickWarning(true); return; } diff --git a/src/components/Table/hooks/useAudioPlayer.tsx b/src/components/Table/hooks/useAudioPlayer.tsx index b5fd215..489f19d 100644 --- a/src/components/Table/hooks/useAudioPlayer.tsx +++ b/src/components/Table/hooks/useAudioPlayer.tsx @@ -1,7 +1,8 @@ -import cardDealt from "../../../assets/audio/DardDealt.mp3"; +import cardDealt from "../../../assets/audio/CardDealt.mp3"; import roundLost from "../../../assets/audio/RoundLost.mp3"; import roundWon from "../../../assets/audio/RoundWon.mp3"; import warning from "../../../assets/audio/WarningAlert.mp3"; + import { useGameSettingsStore } from "../../../stores/gameSettingsStore"; type SoundEffect = "cardDealt" | "warning" | "roundWon" | "roundLost"; @@ -17,7 +18,8 @@ function useAudioPlayer() { const { audioEnabled } = useGameSettingsStore(); function play(soundEffect: SoundEffect) { - audioEnabled && new Audio(sounds[soundEffect]).play(); + if (!audioEnabled) return; + new Audio(sounds[soundEffect]).play(); } return { play }; diff --git a/src/components/Table/hooks/useGame.tsx b/src/components/Table/hooks/useGame.tsx index 4c5b010..002a5cd 100644 --- a/src/components/Table/hooks/useGame.tsx +++ b/src/components/Table/hooks/useGame.tsx @@ -23,7 +23,14 @@ export type WinType = | "high-card" | "draw"; -const delayBetweenCards = 400; +/** + * A delay used to prevent actions from happening too quickly, + * which would detract from the user experience in the UI. + * + * For example, this delay happens between cards being dealt, + * and between the final card being dealt and the result being displayed. + */ +const delayBetweenActions = 400; export function useGame() { const [state, setState] = useState("WaitingForStart"); @@ -34,13 +41,13 @@ export function useGame() { const player = useCardPile(); const dealer = useCardPile(); const stats = useGameStats(); - const {play} = useAudioPlayer(); + const { play } = useAudioPlayer(); const dealPlayerCard = state === "DealPlayerCard"; const dealDealerCard = state === "DealDealerCard"; const resultGame = state === "Result"; const dealerRound = state === "DealerRound"; - + /** * Takes card of determining the winner * when the game state changes to Result @@ -50,7 +57,11 @@ export function useGame() { const gameResult = determineWinner(player.hand, dealer.hand); - setResult(gameResult.winnerText, gameResult.winner); + const timeout = setResult(gameResult.winnerText, gameResult.winner); + + return () => { + clearTimeout(timeout); + }; // eslint-disable-next-line react-hooks/exhaustive-deps }, [resultGame]); @@ -61,11 +72,15 @@ export function useGame() { * to go bust or hit a five card trick. */ useEffect(() => { + let timeout: NodeJS.Timeout; if (player.bust) { - setResult("Player bust, dealer wins!", "Dealer"); + timeout = setResult("Player bust, dealer wins!", "Dealer"); } else if (player.fiveCardTrick) { - setResult("Player wins with a five card trick!", "Player"); + timeout = setResult("Player wins with a five card trick!", "Player"); } + return () => { + timeout && clearTimeout(timeout); + }; // eslint-disable-next-line react-hooks/exhaustive-deps }, [player.bust, player.fiveCardTrick]); @@ -81,15 +96,18 @@ export function useGame() { let timeout: NodeJS.Timeout | undefined; if (dealer.bust) { - setResult("Dealer bust, player wins!", "Player"); + timeout = setResult("Dealer bust, player wins!", "Player"); } else if (dealer.fiveCardTrick) { - setResult("Dealer wins with a five card trick!", "Dealer"); + timeout = setResult("Dealer wins with a five card trick!", "Dealer"); } // Dealer has to hit if they've got less than 16 or less than the players score. else if (dealerScore >= 16 && dealerScore > playerScore) { setState("Result"); } else { - timeout = setTimeout(() => dealCardsToParticipant("Dealer", 1), delayBetweenCards); + timeout = setTimeout( + () => dealCardsToParticipant("Dealer", 1), + delayBetweenActions + ); } return () => { @@ -109,7 +127,7 @@ export function useGame() { const timeout = setTimeout(() => { player.addCards(deck.take(1)); setState("DealDealerCard"); - }, delayBetweenCards); + }, delayBetweenActions); return () => { clearTimeout(timeout); @@ -134,7 +152,7 @@ export function useGame() { } else { setState("DealPlayerCard"); } - }, delayBetweenCards); + }, delayBetweenActions); return () => { clearTimeout(timeout); @@ -207,17 +225,20 @@ export function useGame() { * @param outcomeText The text to be displayed to describe the outcome * @param winner The participant that won the game, if any. */ - function setResult(outcomeText: string, winner?: Participant | null): void { - setState("GameOver"); - setOutcome(outcomeText); - setWinner(winner ?? "none"); - if (winner) { - play(winner === 'Player' ? 'roundWon' : 'roundLost' ); - } - - + function setResult( + outcomeText: string, + winner?: Participant | null + ): NodeJS.Timeout { + return setTimeout(() => { + setState("GameOver"); + setOutcome(outcomeText); + setWinner(winner ?? "none"); + if (winner) { + play(winner === "Player" ? "roundWon" : "roundLost"); + } - winner && stats.updateWinnerStats(winner); + winner && stats.updateWinnerStats(winner); + }, delayBetweenActions); } return {