diff --git a/public/assets/icons/speaker.png b/public/assets/icons/speaker.png new file mode 100644 index 0000000..1beca43 Binary files /dev/null and b/public/assets/icons/speaker.png differ diff --git a/src/components/hud/Audio/BackgroundMusic.tsx b/src/components/hud/Audio/BackgroundMusic.tsx index d19840f..fe95da7 100644 --- a/src/components/hud/Audio/BackgroundMusic.tsx +++ b/src/components/hud/Audio/BackgroundMusic.tsx @@ -1,6 +1,6 @@ import { useSelector } from '@xstate/react'; +import { useEffect, useRef, useState } from 'react'; import { useGameMachineProvider } from '../../../hooks/use'; -import { useRef } from 'react'; import './backgroundMusic.css'; export const BackgroundMusic = () => { @@ -8,30 +8,55 @@ export const BackgroundMusic = () => { const gameService = useGameMachineProvider(); const state = useSelector(gameService, (state) => state.value); - if (audioRef.current && audioRef.current.volume !== 0.1) - audioRef.current.volume = 0.1; + const [isPlaying, setIsPlaying] = useState(false); - if (state === 'playing') audioRef.current?.play(); - if (state === 'paused') audioRef.current?.pause(); + useEffect(() => { + if (audioRef.current && audioRef.current.volume !== 0.1) + audioRef.current.volume = 0.1; + }, []); - const hiddenClass = - state === 'playing' || state === 'notStarted' || state === 'howToPlay' - ? 'audio__hidden' - : ''; + const playMusic = (play: boolean) => { + if (!audioRef.current) return; + + if (play) { + audioRef.current.play(); + setIsPlaying(true); + return; + } + + audioRef.current.pause(); + setIsPlaying(false); + }; + + useEffect(() => { + if (state === 'playing') { + playMusic(true); + } else { + playMusic(false); + } + }, [state]); + + const handleOnClick = () => { + if (!audioRef.current) return; + + isPlaying ? audioRef.current.pause() : audioRef.current.play(); + setIsPlaying(!isPlaying); + }; return ( -
-
+ audio icon + ); }; diff --git a/src/components/hud/Audio/backgroundMusic.css b/src/components/hud/Audio/backgroundMusic.css index 808dcfe..8ff7fac 100644 --- a/src/components/hud/Audio/backgroundMusic.css +++ b/src/components/hud/Audio/backgroundMusic.css @@ -1,18 +1,28 @@ -.audio__container { - position: absolute; - top: 138px; - left: 428px; - transform: rotate(4deg); - display: flex; - justify-content: center; - gap: 20px; - z-index: 2; +.audio__player { + display: none } -.audio__player { - position: relative; + +.audio__icon { + position: absolute; + bottom: 0; + left: 10px; + width: 120px; + filter: grayscale(1); + transition: 0.15s filter; } -.audio__hidden { - display: none; + +.audio__icon--playing { + filter: grayscale(0); } + +@media (max-width: 1024px) { + + .audio__icon { + top:0; + left:10px; + transform:rotateX(180deg); + } + +} \ No newline at end of file diff --git a/src/components/hud/Clock/clock.css b/src/components/hud/Clock/clock.css index cc5072b..344a269 100644 --- a/src/components/hud/Clock/clock.css +++ b/src/components/hud/Clock/clock.css @@ -12,3 +12,11 @@ max-width: 100vw; transition: all 1s linear; } + +@media (max-width:1024px) { + + .gameMeter__container img { + max-width:75vw; + } + +} \ No newline at end of file diff --git a/src/components/hud/Hotspots/HotSpots.tsx b/src/components/hud/Hotspots/HotSpots.tsx index 5701668..4174f4b 100644 --- a/src/components/hud/Hotspots/HotSpots.tsx +++ b/src/components/hud/Hotspots/HotSpots.tsx @@ -40,7 +40,7 @@ export const HotSpots = () => { }; return ( -
+ <> {hotspots.map((hotspot) => (
{
{getStats(hotspot)}
))} -
+ ); }; diff --git a/src/components/hud/Hotspots/hotspots.css b/src/components/hud/Hotspots/hotspots.css index 85b269d..98dcc5c 100644 --- a/src/components/hud/Hotspots/hotspots.css +++ b/src/components/hud/Hotspots/hotspots.css @@ -1,12 +1,3 @@ -.hotspots__container { - position: absolute; - top: 0; - width: 100%; - display: flex; - justify-content: center; - gap: 20px; - z-index: 2; -} .hotspots__card { position: relative; @@ -50,4 +41,4 @@ right: 0; text-align: center; z-index: 2; -} +} \ No newline at end of file diff --git a/src/components/hud/Hud.header.tsx b/src/components/hud/Hud.header.tsx new file mode 100644 index 0000000..ae63e3d --- /dev/null +++ b/src/components/hud/Hud.header.tsx @@ -0,0 +1,17 @@ +import { useSelector } from '@xstate/react'; +import { HypeGauge } from './HypeGauge/HypeGauge'; +import './hud.css'; +import { useGameMachineProvider } from '../../hooks/use'; +import { HotSpots } from './Hotspots/HotSpots'; + +export const HudHeader = () => { + const gameService = useGameMachineProvider(); + const hype = useSelector(gameService, (state) => state.context.meters.hype); + + return ( +
+ + +
+ ); +}; diff --git a/src/components/hud/Hud.tsx b/src/components/hud/Hud.tsx index 1e79ac8..f9b3bb4 100644 --- a/src/components/hud/Hud.tsx +++ b/src/components/hud/Hud.tsx @@ -1,13 +1,11 @@ import { useSelector } from '@xstate/react'; import { useGameMachineProvider } from '../../hooks/use'; +import { METERS_CONFIG } from '../../machines/game.machine'; import { Advisor } from './Advisor/Advisor'; -import { Clock } from './Clock/Clock'; -import { HotSpots } from './Hotspots/HotSpots'; import { Audio } from './Audio/Audio'; +import { Clock } from './Clock/Clock'; +import { HudHeader } from './Hud.header'; import { Menu } from './Menu/Menu'; -import { HypeGauge } from './HypeGauge/HypeGauge'; -import { METERS_CONFIG } from '../../machines/game.machine'; - import './hud.css'; export const Hud = () => { @@ -17,7 +15,6 @@ export const Hud = () => { gameService, (state) => state.context.clock, ); - const hype = useSelector(gameService, (state) => state.context.meters.hype); const guideText = useSelector( gameService, (state) => state.context.guideText, @@ -28,9 +25,8 @@ export const Hud = () => { <> {state !== 'playing' &&
}