Merge pull request #3 from Console-buche/fix/responsive-ui

fix: Responsive UI

src/components/hud/Audio/BackgroundMusic.tsx

@@ -1,37 +1,62 @@
 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 = () => {
   const audioRef = useRef<HTMLAudioElement>(null);
   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 (
-    <div className="audio__container">
-      <audio
-        ref={audioRef}
-        className={`"audio__player" ${hiddenClass}`}
-        controls
-        loop
-      >
+    <>
+      <audio ref={audioRef} className="audio__player" controls loop>
         <source
           src="./assets/sounds/Snifit-or-Whiffit-PaperMario-Color-Splash.mp3"
           type="audio/mpeg"
         />
       </audio>
-    </div>
+      <img
+        src="./assets/icons/speaker.png"
+        alt="audio icon"
+        className={`audio__icon ${isPlaying ? 'audio__icon--playing' : ''}`}
+        onClick={handleOnClick}
+      />
+    </>
   );
 };

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);
+  }
+
+}

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;
+  }
+
+}

src/components/hud/Hotspots/HotSpots.tsx

@@ -40,7 +40,7 @@ export const HotSpots = () => {
   };
 
   return (
-    <div className="hotspots__container">
+    <>
       {hotspots.map((hotspot) => (
         <div
           className="hotspots__card"
@@ -65,6 +65,6 @@ export const HotSpots = () => {
           <div className="hotspots__card__stats">{getStats(hotspot)}</div>
         </div>
       ))}
-    </div>
+    </>
   );
 };

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;
-}
+}

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 (
+    <div className="header__container">
+      <HypeGauge hype={hype} />
+      <HotSpots />
+    </div>
+  );
+};

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' && <div className="hud__faded" />}
       <Audio />
-      <HotSpots />
+      <HudHeader />
       <Clock elapsedPercent={timerPercent} />
-      <HypeGauge hype={hype} />
       <Advisor
         text={guideText}
         onSkipText={() => {

src/components/hud/HypeGauge/hypegauge.css

@@ -1,7 +1,6 @@
 .hype__gauge__container {
-  position: absolute;
+  position: relative;
   top: 30px;
-  left: 30px;
 }
 
 .hype__gauge__container img {
@@ -15,3 +14,11 @@
   transform-origin: 50% 90%;
   transition: transform 0.5s ease;
 }
+
+@media (max-width: 1024px) {
+
+  .hype__gauge__container {
+    top:0;
+  }
+
+}

src/components/hud/hud.css

@@ -23,6 +23,15 @@
   text-align: center;
 }
 
+.header__container {
+    position: absolute;
+    top: 0;
+    width: 100%;
+    display: flex;
+    justify-content: center;
+    gap: 5px;
+}
+
 /* light shake */
 @keyframes light-shake {
   0% {
@@ -69,3 +78,18 @@
 .hard-shake {
   animation: hard-shake 0.1s infinite;
 }
+
+@media (max-width:1024px) {
+
+  .header__container {
+    flex-direction: column;
+    gap: 0;
+    right:0;
+    bottom:0;
+    margin:auto;
+    width: fit-content;
+    justify-content: flex-start;
+    gap:0;
+  }
+
+}