chore: add end game sounds

src/app/stores/mainStore.ts

@@ -1,11 +1,11 @@
 /* eslint-disable @typescript-eslint/no-explicit-any */
-import { soundReducer } from "@/entites/sound";
+import { settingsReducer } from "@/entites/settings";
 import { deskReducer } from "@/pages/game";
 import { combineReducers, configureStore } from "@reduxjs/toolkit";
 
 const mainReducer = combineReducers({
 	"desk": deskReducer as any,
-	"sound": soundReducer as any,
+	"sound": settingsReducer as any,
 });
 
 export const mainStore = configureStore({

src/entites/settings/index.ts

@@ -0,0 +1,4 @@
+export { setActivateSound, settingsReducer } from './model';
+export type { TSettingsSliceState, TSettingsSliceStore } from './model';
+export { PlaySoundButton } from './ui';
+

src/entites/settings/model/index.ts

@@ -0,0 +1,4 @@
+export { setActivateSound, default as settingsReducer } from './settings.slice';
+export type { TSettingsSliceState } from './settings.slice';
+export type { TSettingsSliceStore } from './types';
+

src/entites/settings/model/settings.slice.ts

@@ -0,0 +1,23 @@
+import { createSlice } from '@reduxjs/toolkit';
+
+export type TSettingsSliceState = {
+	isActivatedSound: boolean;
+}
+
+const initialState: TSettingsSliceState = {
+	isActivatedSound: localStorage.getItem('sound_is_activated') === 'true',
+}
+
+const settingsSlice = createSlice({
+	name: 'settingsSlice',
+	initialState,
+	reducers: {
+		setActivateSound(state, action) {
+			state.isActivatedSound = action.payload;
+			localStorage.setItem('sound_is_activated', String(action.payload));
+		},
+	},
+})
+
+export const { setActivateSound } = settingsSlice.actions;
+export default settingsSlice.reducer;

src/entites/settings/model/types.ts

@@ -0,0 +1,7 @@
+import { Reducer } from "@reduxjs/toolkit";
+
+import { TSettingsSliceState } from "./settings.slice";
+
+export type TSettingsSliceStore = ReturnType<Reducer<{
+	sound: TSettingsSliceState;
+}>>

src/entites/sound/ui/playSoundButton/PlaySoundButton.tsx → src/entites/settings/ui/playSoundButton/PlaySoundButton.tsx

@@ -1,7 +1,7 @@
 import clsx from 'clsx';
 import { useDispatch, useSelector } from 'react-redux';
 
-import { setActivateSound, TSoundSliceStore } from '@/entites/sound';
+import { setActivateSound, TSettingsSliceStore } from '@/entites/settings';
 import mutedImage from '@/shared/assets/images/muted.png';
 import soundImage from '@/shared/assets/images/sound.png';
 
@@ -14,7 +14,7 @@ type Props = {
 export const PlaySoundButton = ({ className }: Props) => {
 	const dispatch = useDispatch();
 
-	const isActivatedSound = useSelector<TSoundSliceStore>((state) => state.sound.isActivated) as boolean;
+	const isActivatedSound = useSelector<TSettingsSliceStore>((state) => state.sound.isActivatedSound) as boolean;
 
 	const onToggleSoundStatusHandler = () => {
 		dispatch(setActivateSound(!isActivatedSound));

src/pages/game/lib/constants.ts

@@ -7,6 +7,20 @@ import win1 from '@/shared/assets/images/win.png';
 import win2 from '@/shared/assets/images/win2.png';
 import win3 from '@/shared/assets/images/win3.png';
 import win4 from '@/shared/assets/images/win4.png';
+import draw1sound from '@/shared/assets/sounds/endVoices/draw1.ogg';
+import draw2sound from '@/shared/assets/sounds/endVoices/draw2.ogg';
+import draw3sound from '@/shared/assets/sounds/endVoices/draw3.ogg';
+import lose1sound from '@/shared/assets/sounds/endVoices/lose1.ogg';
+import lose2sound from '@/shared/assets/sounds/endVoices/lose2.ogg';
+import lose3sound from '@/shared/assets/sounds/endVoices/lose3.ogg';
+import lose4sound from '@/shared/assets/sounds/endVoices/lose4.ogg';
+import lose5sound from '@/shared/assets/sounds/endVoices/lose5.ogg';
+import lose6sound from '@/shared/assets/sounds/endVoices/lose6.ogg';
+import win1sound from '@/shared/assets/sounds/endVoices/win1.ogg';
+import win2sound from '@/shared/assets/sounds/endVoices/win2.ogg';
+import win3sound from '@/shared/assets/sounds/endVoices/win3.ogg';
+import win4sound from '@/shared/assets/sounds/endVoices/win4.ogg';
+import win5sound from '@/shared/assets/sounds/endVoices/win5.ogg';
 
 export enum GameStatuses {
 	StepPlayer,
@@ -26,20 +40,24 @@ export const END_GAME_STATE = {
 		title: 'Победа!',
 		description: 'Вы обыграли хозяниа леса! Хотите повторить игру?',
 		images: [win1, win2, win3, win4],
+		sounds: [win1sound, win2sound, win3sound, win4sound, win5sound],
 	},
 	[GameWinners.Opponent]: {
 		title: 'Поражение',
 		description: 'Хозяин леса обыграл Вас! Хотите повторить игру?',
 		images: [lose1, lose2, lose3, lose4],
+		sounds: [lose1sound, lose2sound, lose3sound, lose4sound, lose5sound, lose6sound],
 	},
 	[GameWinners.Draw]: {
 		title: 'Ничья',
 		description: 'В данной партии нет победителя! Хотите повторить игру?',
 		images: [draw1],
+		sounds: [draw1sound, draw2sound, draw3sound],
 	},
 	[GameWinners.Nobody]: {
 		title: '',
 		description: '',
 		images: [],
+		sounds: [],
 	}
 }

src/pages/game/ui/Game.tsx

@@ -3,7 +3,7 @@ import { useDispatch, useSelector } from 'react-redux';
 import { useNavigate } from 'react-router-dom';
 
 import { IconButton } from '@/entites/IconButton';
-import { PlaySoundButton, TSoundSliceStore } from '@/entites/sound';
+import { PlaySoundButton, TSettingsSliceStore } from '@/entites/settings';
 import gameSound from '@/shared/assets/sounds/game.ogg';
 
 import { GameStatuses } from '../lib';
@@ -23,7 +23,7 @@ export const GamePage = () => {
 	const navigate = useNavigate();
 
 	const gameStatus = useSelector<TDeskSliceStore>((state) => state.desk.status) as TGameStatus;
-	const isActivatedSound = useSelector<TSoundSliceStore>((state) => state.sound.isActivated) as boolean;
+	const isActivatedSound = useSelector<TSettingsSliceStore>((state) => state.sound.isActivatedSound) as boolean;
 
 	const onGoBackHandler = () => {
 		navigate('/');
@@ -67,7 +67,7 @@ export const GamePage = () => {
 			</div>
 			<EndGameModal />
 			<PlaySoundButton className={s.sound} />
-			{isActivatedSound && gameStatus !== GameStatuses.End ? (
+			{isActivatedSound ? (
 				<audio autoPlay loop id="game">
 					<source src={gameSound} type="audio/ogg"></source>
 				</audio>

src/pages/game/ui/endGameModal/EndGameModal.tsx

@@ -4,7 +4,7 @@ import { useDispatch, useSelector } from 'react-redux';
 import { useNavigate } from 'react-router-dom';
 
 import { HatchButton } from '@/entites/hatchButton';
-import { TSoundSliceStore } from '@/entites/sound';
+import { TSettingsSliceStore } from '@/entites/settings';
 import endGameSound from '@/shared/assets/sounds/end_game.ogg';
 import { Modal } from '@/shared/ui/Modal';
 
@@ -18,12 +18,13 @@ export const EndGameModal = () => {
 	const navigate = useNavigate();
 
 	const gameWinner = useSelector<TDeskSliceStore>((state) => state.desk.winner) as TWinnerGame;
-	const isActivatedSound = useSelector<TSoundSliceStore>((state) => state.sound.isActivated) as boolean;
+	const isActivatedSound = useSelector<TSettingsSliceStore>((state) => state.sound.isActivatedSound) as boolean;
 
 	const [isOpenedModal, setIsOpenedModal] = useState<boolean>(false);
 
 	const winnerData = END_GAME_STATE[gameWinner];
 	const randomImage = winnerData.images[Math.floor(Math.random() * winnerData.images.length)]
+	const randomSound = winnerData.sounds[Math.floor(Math.random() * winnerData.sounds.length)]
 
 	const onCloseHandler = () => {
 		dispatch(setGameWinner(GameWinners.Nobody));
@@ -44,12 +45,18 @@ export const EndGameModal = () => {
 		if (gameWinner !== GameWinners.Nobody) {
 			timer = setTimeout(() => {
 				setIsOpenedModal(true);
+				if (isActivatedSound) {
+					const sound = new Audio(randomSound);
+					sound.volume = 0.5;
+					sound.play();
+				}
 			}, 2000)
 		}
 		return () => {
 			clearTimeout(timer);
 		}
-	}, [gameWinner])
+		// eslint-disable-next-line react-hooks/exhaustive-deps
+	}, [gameWinner, isActivatedSound])
 
 	return (
 		<Modal

src/pages/game/ui/playerActions/PlayerActions.tsx

@@ -3,7 +3,7 @@ import { toast } from 'react-toastify';
 
 import { TGameCard } from '@/entites/gameCards';
 import { HatchButton } from '@/entites/hatchButton';
-import { TSoundSliceStore } from '@/entites/sound';
+import { TSettingsSliceStore } from '@/entites/settings';
 import getCardSound from '@/shared/assets/sounds/get_card.ogg';
 import hoverSound from '@/shared/assets/sounds/hover.ogg';
 import nextStepSound from '@/shared/assets/sounds/next_step.ogg';
@@ -27,7 +27,7 @@ export const PlayerActions = () => {
 	const unusedCards = useSelector<TDeskSliceStore>((state) => state.desk.unusedCards) as TGameCard[];
 	const playerCards = useSelector<TDeskSliceStore>((state) => state.desk.playerCards) as TGameCard[];
 	const opponentCards = useSelector<TDeskSliceStore>((state) => state.desk.opponentCards) as TGameCard[];
-	const isActivatedSound = useSelector<TSoundSliceStore>((state) => state.sound.isActivated) as boolean;
+	const isActivatedSound = useSelector<TSettingsSliceStore>((state) => state.sound.isActivatedSound) as boolean;
 
 	const nextStepButtonDisabled = (
 		gameStatus !== GameStatuses.StepPlayer ||

src/pages/game/ui/viewOpponentCards/ViewOpponentCards.tsx

@@ -3,7 +3,7 @@ import { ReactNode, useEffect } from 'react';
 import { useDispatch, useSelector } from 'react-redux';
 
 import { TGameCard } from '@/entites/gameCards';
-import { TSoundSliceStore } from '@/entites/sound';
+import { TSettingsSliceStore } from '@/entites/settings';
 import TShirtCard from '@/shared/assets/images/tshirt.png';
 import getCardSound from '@/shared/assets/sounds/get_card.ogg';
 
@@ -28,7 +28,7 @@ export const ViewOpponentCards = ({ leftRenderSlot, rightRenderSlot }: Props) =>
 	const opponentCards = useSelector<TDeskSliceStore>((state) => state.desk.opponentCards) as TGameCard[];
 	const unusedCards = useSelector<TDeskSliceStore>((state) => state.desk.unusedCards) as TGameCard[];
 	const gameStatus = useSelector<TDeskSliceStore>((state) => state.desk.status) as TGameStatus;
-	const isActivatedSound = useSelector<TSoundSliceStore>((state) => state.sound.isActivated) as boolean;
+	const isActivatedSound = useSelector<TSettingsSliceStore>((state) => state.sound.isActivatedSound) as boolean;
 
 	// Pseudo AI
 	useEffect(() => {

src/pages/home/ui/Home.tsx

@@ -3,7 +3,7 @@ import { useSelector } from "react-redux"
 import { useNavigate } from "react-router-dom"
 
 import { HatchButton } from "@/entites/hatchButton"
-import { PlaySoundButton, TSoundSliceStore } from "@/entites/sound"
+import { PlaySoundButton, TSettingsSliceStore } from "@/entites/settings"
 import logo from '@/shared/assets/images/logo.png'
 import authorsSound from '@/shared/assets/sounds/authors.ogg'
 import hoverSound from '@/shared/assets/sounds/hover.ogg'
@@ -22,7 +22,7 @@ export const HomePage = () => {
 	const [isOpenedModalAuthors, setIsOpenedModalAuthors] = useState<boolean>(false);
 	const [isOpenedModalAboutGame, setIsOpenedModalAboutGame] = useState<boolean>(false);
 
-	const isActivatedSound = useSelector<TSoundSliceStore>((state) => state.sound.isActivated) as boolean;
+	const isActivatedSound = useSelector<TSettingsSliceStore>((state) => state.sound.isActivatedSound) as boolean;
 
 	const onClickAuthorsHandler = () => {
 		if (isActivatedSound) {