Merge pull request #177 from Arquisoft/header-changes

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,43 +19,36 @@ import { useState } from 'react'
 
 function App() {
 
-    //State for the volume
-    const [volume, setVolume] = useState(10);
-
-    const handleVolumeChange = (event, newVolume) => {
-        setVolume(newVolume);
-    };
-
-    return (
-        <SettingsProvider>
-            <AuthProvider>
-                <Routes>
-                    <Route element={<AppLayout volume={volume} />}>
-                        <Route path="/" index element={<Home />}></Route>
-                        <Route path="/login" element={<Login />}></Route>
-                        <Route path="/register" element={<Register />}></Route>
-                        <Route path="/logout" element={<Logout />} />
-                        <Route
-                            path="game"
-                            element={
-                                <ProtectedRoute>
-                                    <Game />
-                                </ProtectedRoute>
-                            }
-                        ></Route>
-                        <Route path="profile/:username?" element={<Profile />} />
-                        <Route path="leaderboard" element={<Leaderboard />}></Route>
-                        <Route path="settings" element={<Settings volume={volume} handleVolumeChange={handleVolumeChange} />}></Route>
-                        <Route
-                            path="*"
-                            element={<PageNotFound />}
-                        />
-                    </Route>
-                </Routes>
-            </AuthProvider>
-        </SettingsProvider>
-    )
-
+  //State for the volume
+  const [volume] = useState(10);
+
+  return (
+    <SettingsProvider>
+      <AuthProvider>
+        <Routes>
+          <Route element={<AppLayout volume={volume} />}>
+            <Route path="/" index element={<Home />}></Route>
+            <Route path="/login" element={<Login />}></Route>
+            <Route path="/register" element={<Register />}></Route>
+            <Route path="/logout" element={<Logout />} />
+            <Route
+              path="game"
+              element={
+                <ProtectedRoute>
+                  <Game />
+                </ProtectedRoute>
+              }
+            ></Route>
+            <Route path="profile/:username?" element={<Profile />} />
+            <Route path="leaderboard" element={<Leaderboard />}></Route>
+            <Route
+              path="*"
+              element={<PageNotFound />}
+            />
+          </Route>
+        </Routes>
+      </AuthProvider>
+    </SettingsProvider>
+  )
 }
-
 export default App

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,45 @@
-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'
+    },
+    {
+      code: 'uk',
+      name: 'Ukranian',
+      country_code: 'UA'
+    }
+  ];
+
+  const [showVolumeSlider, setShowVolumeSlider] = useState(false);
+
   return (
     <header className="header">
-      <Link to="/">
-        <img src="/KaW.png" alt="Logo of Know and Win APP" />
+      <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 +50,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 +73,7 @@ const Header = props => {
         </div>
       </div>
     </header>
-  )
-}
+  );
+};
 
-export default Header
+export default Header;