From 36a734a9faa56c4da3aab0c30bbd1288a223c5b8 Mon Sep 17 00:00:00 2001
From: Murias10 <uo290009@uniovi.es>
Date: Mon, 29 Apr 2024 01:00:29 +0200
Subject: [PATCH 1/4] Slider horizontal

---
 .../src/components/Slider/ContinuousSlider.js | 24 +++++++++++--------
 1 file changed, 14 insertions(+), 10 deletions(-)

diff --git a/webapp/src/components/Slider/ContinuousSlider.js b/webapp/src/components/Slider/ContinuousSlider.js
index 25f098ef..1c0f1b54 100644
--- a/webapp/src/components/Slider/ContinuousSlider.js
+++ b/webapp/src/components/Slider/ContinuousSlider.js
@@ -8,19 +8,23 @@ import VolumeUp from '@mui/icons-material/VolumeUp';
 const ContinuousSlider = ({ volume, handleVolumeChange }) => {
 
     return (
-        <Box sx={{ width: 300 }}>
-            <Stack spacing={2} direction="row" sx={{ mb: 1, 
-                        '& .MuiSlider-thumb': {
-                            bgcolor: '#717bee',
-                        },'& .MuiSlider-track': {
-                            bgcolor: '#717bee',
-                        }}} alignItems="center">
-                <VolumeDown />
-                <Slider aria-label="Volume" value={volume} onChange={handleVolumeChange} />
+        <Box sx={{ height: 300 }}>
+            <Stack spacing={2} direction="column" sx={{
+                mb: 1,
+                '& .MuiSlider-thumb': {
+                    bgcolor: '#717bee',
+                }, '& .MuiSlider-track': {
+                    bgcolor: '#717bee',
+                }
+            }} alignItems="center">
                 <VolumeUp />
+                <Box sx={{ height: 220 }}>
+                    <Slider aria-label="Volume" value={volume} onChange={handleVolumeChange} orientation="vertical" defaultValue={50} />
+                </Box>
+                <VolumeDown />
             </Stack>
         </Box>
     );
 }
 
-export default ContinuousSlider;
\ No newline at end of file
+export default ContinuousSlider;

From 282c5cc2dc467698152f896825b1a3671218632c Mon Sep 17 00:00:00 2001
From: Murias10 <uo290009@uniovi.es>
Date: Mon, 29 Apr 2024 01:08:44 +0200
Subject: [PATCH 2/4] Slider position respect to Audio Button (center)

---
 webapp/src/components/AudioButton/AudioButton.css | 10 ++++++----
 1 file changed, 6 insertions(+), 4 deletions(-)

diff --git a/webapp/src/components/AudioButton/AudioButton.css b/webapp/src/components/AudioButton/AudioButton.css
index 90bbc089..c7bffee4 100644
--- a/webapp/src/components/AudioButton/AudioButton.css
+++ b/webapp/src/components/AudioButton/AudioButton.css
@@ -3,6 +3,7 @@
         transform: translateX(-80%) scaleX(0) scaleY(0);
         opacity: 0;
     }
+
     100% {
         transform: translateX(-80%) scaleX(1) scaleY(1);
         opacity: 1;
@@ -14,6 +15,7 @@
         transform: translateX(-80%) scaleX(1) scaleY(1);
         opacity: 1;
     }
+
     100% {
         transform: translateX(-80%) scaleX(0) scaleY(0);
         opacity: 0;
@@ -34,12 +36,12 @@
 
 .volume-slider-container {
     position: absolute;
-    top: 100%;
-    left: 50%;
+    top: 40px;
+    left: 48px;
     transform: translateX(-80%) scaleX(0) scaleY(0);
-    transform-origin: 80% top;
+    transform-origin: top;
     width: auto;
-    max-width: calc(100vw - 20px); 
+    max-width: calc(100vw - 20px);
     min-width: 100px;
     background: #fff;
     border: 1px solid #ccc;

From 9e08fcd30086c586607df779c66e48b1cf8a4a74 Mon Sep 17 00:00:00 2001
From: Murias10 <uo290009@uniovi.es>
Date: Mon, 29 Apr 2024 01:35:59 +0200
Subject: [PATCH 3/4] Add play button to hame page

---
 webapp/src/pages/Home/Home.css | 55 ++++++++++++++++++++++++++++++++++
 webapp/src/pages/Home/Home.js  | 14 +++++++++
 2 files changed, 69 insertions(+)

diff --git a/webapp/src/pages/Home/Home.css b/webapp/src/pages/Home/Home.css
index aa8a38b3..4446f8fa 100644
--- a/webapp/src/pages/Home/Home.css
+++ b/webapp/src/pages/Home/Home.css
@@ -38,6 +38,7 @@
     from {
         transform: rotate(0deg);
     }
+
     to {
         transform: rotate(360deg);
     }
@@ -71,4 +72,58 @@
 
 .username {
     color: #61dafb;
+}
+
+
+
+
+
+
+.swipe {
+    position: relative;
+    background-color: #F1F7F7;
+    width: 200px;
+    height: 60px;
+    color: black;
+    border-radius: 60px;
+    display: flex;
+    justify-content: center;
+    align-items: center;
+    text-decoration: none;
+    letter-spacing: 2px;
+    border-top: 0.5px solid rgba(0, 0, 0, 0.35);
+    border-left: 0.5px solid rgba(0, 0, 0, 0.35);
+    padding-left: 40px;
+    cursor: pointer;
+    transition: 0.35s ease;
+}
+
+.swipe:hover {
+    padding-left: 0;
+    padding-right: 40px;
+    color: #324B4C;
+}
+
+.container {
+    position: absolute;
+    left: 5px;
+    width: 50px;
+    height: 50px;
+    background: #717bee;
+    border-radius: 50%;
+    transition: 0.35s ease;
+    display: flex;
+    justify-content: center;
+    align-items: center;
+    color: #f1f4f7;
+}
+
+.swipe:hover .container {
+    left: calc(100% - 55px);
+}
+
+/* Anula la regla del agente de usuario para los elementos con la clase .btn */
+.btn:-webkit-any-link {
+    text-decoration: none !important;
+    /* Utiliza !important para priorizar este estilo */
 }
\ No newline at end of file
diff --git a/webapp/src/pages/Home/Home.js b/webapp/src/pages/Home/Home.js
index 0aeece46..3850de84 100644
--- a/webapp/src/pages/Home/Home.js
+++ b/webapp/src/pages/Home/Home.js
@@ -1,6 +1,7 @@
 import { useEffect } from 'react'
 import { useAuth } from '../../hooks/useAuth'
 import { useNavigate } from 'react-router-dom'
+import { Link } from 'react-router-dom'
 import './Home.css'
 
 import { useTranslation } from 'react-i18next'
@@ -29,6 +30,19 @@ function Home() {
       ) : (
         <div>Please, login to play the game</div>
       )}
+
+      <Link to="game" class="btn">
+        <div class="swipe">{t("play.nav_title")}
+          <span class="container">
+            <svg height="24" width="24" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg">
+              <path d="M0 0h24v24H0z" fill="none">
+              </path>
+              <path d="M16.172 11l-5.364-5.364 1.414-1.414L20 12l-7.778 7.778-1.414-1.414L16.172 13H4v-2z" fill="currentColor">
+              </path>
+            </svg>
+          </span>
+        </div>
+      </Link>
     </div>
   )
 }

From 1894c32806dca98f43e281a949ec744b1d9ae980 Mon Sep 17 00:00:00 2001
From: Murias10 <uo290009@uniovi.es>
Date: Mon, 29 Apr 2024 01:43:10 +0200
Subject: [PATCH 4/4] Delete comments

---
 webapp/src/pages/Home/Home.css | 7 -------
 1 file changed, 7 deletions(-)

diff --git a/webapp/src/pages/Home/Home.css b/webapp/src/pages/Home/Home.css
index 4446f8fa..2b168f32 100644
--- a/webapp/src/pages/Home/Home.css
+++ b/webapp/src/pages/Home/Home.css
@@ -74,11 +74,6 @@
     color: #61dafb;
 }
 
-
-
-
-
-
 .swipe {
     position: relative;
     background-color: #F1F7F7;
@@ -122,8 +117,6 @@
     left: calc(100% - 55px);
 }
 
-/* Anula la regla del agente de usuario para los elementos con la clase .btn */
 .btn:-webkit-any-link {
     text-decoration: none !important;
-    /* Utiliza !important para priorizar este estilo */
 }
\ No newline at end of file