Header changes

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-button-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-button-container:hover .volume-slider-container,
+.volume-slider-container:hover {
+    animation: expand 0.5s forwards;
 }

webapp/src/components/AudioButton/AudioButton.js

@@ -4,24 +4,20 @@ 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, setAudio] = 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);
+        audio.loop = true;
+        audio.volume = volume / 100;
     }, [volume]);
 
-    useEffect(() => {
-        if (audio) {
-            audio.volume = volume / 100;
-        }
-    }, [audio, volume]);
-
     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-button-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,42 @@
-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 [selectedLanguage, setSelectedLanguage] = useState(languages[0]);
+  const [showOptions, setShowOptions] = useState(false);
+  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 +47,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 +70,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;
 }

webapp/src/components/LanguageSelector/LanguageSelector.js

@@ -1,20 +1,61 @@
-import React from 'react';
+import React, { useState, useEffect, useRef } from 'react';
 import './LanguageSelector.css';
 import i18next from 'i18next';
 
 const LanguageSelector = ({ languages }) => {
+    const [showOptions, setShowOptions] = useState(false);
+    const [selectedLanguage, setSelectedLanguage] = useState(languages.find(lang => lang.code === i18next.language));
+    const languageSelectorRef = useRef(null);
+
+    const handleLanguageChange = (language) => {
+        i18next.changeLanguage(language.code);
+        setSelectedLanguage(language);
+        setShowOptions(false);
+    };
+
+    const handleClickOutside = (event) => {
+        if (languageSelectorRef.current && !languageSelectorRef.current.contains(event.target)) {
+            setShowOptions(false);
+        }
+    };
+
+    useEffect(() => {
+        document.addEventListener('mousedown', handleClickOutside);
+        return () => {
+            document.removeEventListener('mousedown', handleClickOutside);
+        };
+    }, []);
 
     return (
-        <div className="language-selector">
-            <select value={i18next.language} onChange={(event) => i18next.changeLanguage(event.target.value)}>
-                {languages.map(({ code, name, country_code }) => (
-                    <option key={country_code} value={code}>
-                        {name}
-                    </option>
+        <div className="language-selector" ref={languageSelectorRef}>
+            <div className="selected-language" onClick={() => setShowOptions(!showOptions)}>
+                <img className="flag"
+                    src={`https://flagsapi.com/${selectedLanguage.country_code}/shiny/16.png`}
+                    alt={selectedLanguage.name}
+                    style={{ marginRight: '8px' }}
+                />
+                {selectedLanguage.name}
+            </div>
+            <div className={`language-options ${showOptions ? 'open' : 'close'}`}>
+                {languages.map((language, index) => (
+                    <div
+                        key={language.code}
+                        onClick={() => handleLanguageChange(language)}
+                        className="language-option"
+                        style={{ animationDelay: `${index * 0.1}s` }}
+                    >
+                        <img
+                            className="flag"
+                            src={`https://flagsapi.com/${language.country_code}/shiny/16.png`}
+                            alt={language.name}
+                            style={{ marginRight: '8px' }}
+                        />
+                        {language.name}
+                    </div>
                 ))}
-            </select>
+            </div>
         </div>
     );
 };
 
-export default LanguageSelector;
+export default LanguageSelector;