Header changes

webapp/src/App.js

@@ -5,7 +5,6 @@ import Profile from './pages/Profile/Profile'
 import Leaderboard from './pages/Leaderboard/Leaderboard'
 import Home from './pages/Home/Home'
 import AppLayout from './pages/AppLayout'
-import Settings from './pages/Settings/Settings'
 import Login from './pages/Login/Login'
 import Logout from './pages/Logout/Logout'
 import Register from './pages/Register/Register'
@@ -20,11 +19,7 @@ import { useState } from 'react'
 function App() {
 
   //State for the volume
-  const [volume, setVolume] = useState(10);
-
-  const handleVolumeChange = (event, newVolume) => {
-    setVolume(newVolume);
-  };
+  const [volume] = useState(10);
 
   return (
     <SettingsProvider>
@@ -45,7 +40,6 @@ function App() {
             ></Route>
             <Route path="profile/:username?" element={<Profile />} />
             <Route path="leaderboard" element={<Leaderboard />}></Route>
-            <Route path="settings" element={<Settings volume={volume} handleVolumeChange={handleVolumeChange} />}></Route>
           </Route>
         </Routes>
       </AuthProvider>

webapp/src/components/AudioButton/AudioButton.css

@@ -1,7 +1,58 @@
+@keyframes expand {
+    0% {
+        transform: translateX(-80%) scaleX(0) scaleY(0);
+        opacity: 0;
+    }
+    100% {
+        transform: translateX(-80%) scaleX(1) scaleY(1);
+        opacity: 1;
+    }
+}
+
+@keyframes collapse {
+    0% {
+        transform: translateX(-80%) scaleX(1) scaleY(1);
+        opacity: 1;
+    }
+    100% {
+        transform: translateX(-80%) scaleX(0) scaleY(0);
+        opacity: 0;
+    }
+}
+
 .pause-btn {
     background-image: url("../../assets/sound.svg");
 }
 
 .play-btn {
     background-image: url("../../assets/mute.svg")
+}
+
+.audio-container {
+    position: relative;
+}
+
+.volume-slider-container {
+    position: absolute;
+    top: 100%;
+    left: 50%;
+    transform: translateX(-80%) scaleX(0) scaleY(0);
+    transform-origin: 80% top;
+    width: auto;
+    max-width: calc(100vw - 20px); 
+    min-width: 100px;
+    background: #fff;
+    border: 1px solid #ccc;
+    padding: 10px;
+    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
+    z-index: 1000;
+    opacity: 0;
+    animation: collapse 0.5s forwards;
+    border-radius: 1em;
+    align-items: center;
+}
+
+.audio-container:hover .volume-slider-container,
+.volume-slider-container:hover {
+    animation: expand 0.5s forwards;
 }

webapp/src/components/AudioButton/AudioButton.js

@@ -4,23 +4,19 @@ import { ReactComponent as MuteIcon } from "../../assets/mute.svg";
 import "./AudioButton.css";
 import "../Header/Header.css";
 import song from "../../assets/music.mp3";
+import Slider from "../../components/Slider/ContinuousSlider"; 
 
-const AudioButton = ({ volume }) => {
+const AudioButton = () => {
     const [playing, setPlaying] = useState(false);
-    const [audio, setAudio] = useState(null);
+    const [audio] = useState(new Audio(song));
+    const [volume, setVolume] = useState(30);
+    const [showVolumeSlider, setShowVolumeSlider] = useState(false); 
+    const [hideTimeout, setHideTimeout] = useState(null);
 
     useEffect(() => {
-        const audioElement = new Audio(song);
-        audioElement.loop = true;
-        audioElement.volume = volume / 100;
-        setAudio(audioElement);
-    }, [volume]);
-
-    useEffect(() => {
-        if (audio) {
-            audio.volume = volume / 100;
-        }
-    }, [audio, volume]);
+        audio.loop = true;
+        audio.volume = volume / 100;
+    }, [volume, audio]);
 
     const play = () => {
         audio.play();
@@ -37,10 +33,27 @@ const AudioButton = ({ volume }) => {
             play();
         }
         setPlaying(!playing);
-        //onChangeSound(!playing);
+    };
+
+    const handleMouseEnter = () => {
+        clearTimeout(hideTimeout);
+        setShowVolumeSlider(true);
+    };
+
+    const handleMouseLeave = () => {
+        setHideTimeout(setTimeout(() => {
+            setShowVolumeSlider(false);
+        }, 500));
+    };
+
+    const handleVolumeChange = (event, newValue) => {
+        setVolume(newValue);
     };
 
     return (
+    <div className="audio-container"
+        onMouseEnter={handleMouseEnter}
+        onMouseLeave={handleMouseLeave}>
         <div className="sound" onClick={toggleAudio} data-testid="audio-button" tabIndex={0}
             onKeyDown={(event) => {
                 if (event.key === 'Enter' || event.key === ' ') {
@@ -49,6 +62,11 @@ const AudioButton = ({ volume }) => {
             }}>
             {playing ? <SoundIcon data-testid="sound-icon" /> : <MuteIcon data-testid="mute-icon" />}
         </div>
+        <div className={`volume-slider-container ${showVolumeSlider ? 'show' : ''}`}>
+            <Slider volume={volume} handleVolumeChange={handleVolumeChange} />
+        </div>
+    </div>
     );
 };
+
 export default AudioButton;

webapp/src/components/Header/Header.css

@@ -72,3 +72,75 @@ img {
   cursor: pointer;
   color: #717bee;
 }
+
+/* Estilo para el contenedor del selector de idioma */
+.language-selector {
+  position: relative;
+  display: inline-block;
+  margin-left: auto;
+  margin-right: 1em;
+}
+
+/* Estilo para el selector de idioma */
+.language-selector select {
+  position: relative;
+  padding: 10px;
+  font-size: 16px;
+  border: none;
+  border-radius: 4px;
+  background-color: inherit;
+  color: #717bee;
+  cursor: pointer;
+}
+
+/* Estilo para el selector de idioma */
+.selected-language {
+  position: relative;
+  padding: 10px;
+  font-size: 16px;
+  border: none;
+  border-radius: 4px;
+  background-color: #fff;
+  cursor: pointer;
+  width: 8rem;
+  align-items: center;
+  align-content: center;
+}
+
+/* Estilo para la flecha del desplegable */
+.selected-language::after {
+  content: '▼';
+  position: absolute;
+  top: 50%;
+  transform: translateY(-50%);
+  pointer-events: none;
+}
+
+.flag {
+  width: 1rem;
+  height: auto;
+  margin: 0rem;
+  margin-left: 0.5rem;
+}
+
+.language-options {
+  position: absolute;
+  background-color: #fff;
+  width: 100%;
+  box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2);
+  z-index: 1;
+  top: 100%;
+}
+
+.language-options div {
+  padding: 10px;
+  cursor: pointer;
+}
+
+.language-options div:hover {
+  background-color: #717bee;
+}
+
+.homeButton {
+  align-items: center;
+}

webapp/src/components/Header/Header.js

@@ -1,17 +1,40 @@
-import "./Header.css";
-import { Link } from 'react-router-dom'
+import React, { useState } from 'react';
+import { Link } from 'react-router-dom';
 import { ReactComponent as BarIcon } from "../../assets/bars-solid.svg";
 import { ReactComponent as SunIcon } from "../../assets/sun-solid.svg";
 import { ReactComponent as MoonIcon } from "../../assets/moon-solid.svg";
 import AudioButton from "../AudioButton/AudioButton";
+import Slider from "../../components/Slider/ContinuousSlider";
+import "./Header.css";
+import LanguageSelector from '../../components/LanguageSelector/LanguageSelector';
 
 const Header = props => {
+  const languages = [
+    {
+      code: 'en',
+      name: 'English',
+      country_code: 'GB'
+    },
+    {
+      code: 'es',
+      name: 'Español',
+      country_code: 'ES'
+    },
+    {
+      code: 'fr',
+      name: 'Français',
+      country_code: 'FR'
+    }
+  ];
+
+  const [showVolumeSlider, setShowVolumeSlider] = useState(false);
+
   return (
     <header className="header">
-      <Link to="/">
+      <Link className='homeButton' to="/">
         <img src="KaW.png" alt="Logo of Know and Win APP" />
       </Link>
-
+      <LanguageSelector languages={languages} />
       <div className="options">
         <div className="theme" onClick={props.onChangeTheme} tabIndex={0}
           onKeyDown={(event) => {
@@ -22,7 +45,18 @@ const Header = props => {
           {props.theme === "light" ? <MoonIcon /> : <SunIcon />}
         </div>
 
-        <AudioButton url="../../assets/music.wav" volume={props.volume} />
+        <AudioButton 
+          url="../../assets/music.wav" 
+          volume={props.volume} 
+          onMouseEnter={() => setShowVolumeSlider(true)}
+          onMouseLeave={() => setShowVolumeSlider(false)}
+        />
+
+        {showVolumeSlider && (
+          <div className="volume-slider-container">
+            <Slider id="selectVolume" volume={props.volume} handleVolumeChange={props.handleVolumeChange} />
+          </div>
+        )}
 
         <div className="header-button" onClick={props.onToggleNav} tabIndex={0}
           onKeyDown={(event) => {
@@ -34,7 +68,7 @@ const Header = props => {
         </div>
       </div>
     </header>
-  )
-}
+  );
+};
 
-export default Header
+export default Header;

webapp/src/components/LanguageSelector/LanguageSelector.css

@@ -1,17 +1,22 @@
-.language-selector select {
-    padding: 8px;
-    font-size: 16px;
-    border-radius: 5px;
-    border: 1px solid #ccc;
-    background-color: #fff;
-    outline: none;
-    cursor: pointer;
+@keyframes openAnimation {
+    0% { max-height: 0; }
+    100% { max-height: 100vh; }
 }
 
-.language-selector select:hover {
-    border-color: #999;
+@keyframes closeAnimation {
+    0% { max-height: 100vh; }
+    100% { max-height: 0; }
 }
 
-.language-selector select:focus {
-    border-color: #555;
+.language-options {
+    overflow: hidden;
+    transition: max-height 0.3s ease-in-out;
+}
+
+.language-options.open {
+    animation: openAnimation 0.3s forwards;
+}
+
+.language-options.close {
+    animation: closeAnimation 0.3s forwards;
 }