add titles

age-of-eykar · Aug 15, 2022 · fd53220 · fd53220
1 parent 0a7bfdc
commit fd53220
Show file tree

Hide file tree

Showing 4 changed files with 41 additions and 61 deletions.
diff --git a/components/discover/slider.js b/components/discover/slider.js
@@ -1,11 +1,9 @@
 import styles from '../../styles/components/Slider.module.css'
-import { useState, useEffect } from "react";
+import { useEffect } from "react";
 
-function Slider({ size, id, setPageId, setDirection }) {
+function Slider({ pages, id, setPageId, setDirection }) {
 
     const points = [];
-    let [changingID, setChangingID] = useState(-1);
-    let [changingSize, setChangingSize] = useState(12);
 
     useEffect(() => {
         if (typeof window === 'undefined')
@@ -33,12 +31,10 @@ function Slider({ size, id, setPageId, setDirection }) {
 
             if (Math.abs(xDiff) > Math.abs(yDiff)) {
                 if (xDiff > 7) {
-                    setChangingSize(0);
-                    setPageId((id + 1) % size);
+                    setPageId((id + 1) % pages.length);
                     setDirection(-1);
                 } else if (xDiff < -7) {
-                    setChangingSize(0);
-                    setPageId((id + size - 1) % size);
+                    setPageId((id + pages.length - 1) % pages.length);
                     setDirection(1);
                 }
             }
@@ -48,55 +44,15 @@ function Slider({ size, id, setPageId, setDirection }) {
 
         window.addEventListener('touchstart', handleTouchStart, false);
         window.addEventListener('touchmove', handleTouchMove, false);
+    }, [id, pages]);
 
-
-        let scrolled = 0;
-        let lastOffset = null;
-        function onScroll(event) {
-            if (event.offsetY === lastOffset) {
-                scrolled += event.deltaY;
-                let newId;
-                if (scrolled == 0)
-                    newId = -1;
-                else if (scrolled > 0)
-                    newId = (id + 1) % size;
-                else
-                    newId = (id + size - 1) % size;
-                setChangingSize(12 * Math.abs(scrolled) / 150);
-                setChangingID(newId)
-                if (scrolled > 150) {
-                    setPageId(newId);
-                    setDirection(-1)
-                    scrolled = 0;
-                    window.scrollTo(0, 0);
-                } else if (scrolled < -150) {
-                    setPageId(newId);
-                    setDirection(1)
-                    scrolled = 0;
-                }
-            }
-            lastOffset = event.offsetY;
-        }
-        window.addEventListener("wheel", onScroll);
-        return () => window.removeEventListener("wheel", onScroll);
-    }, [id, size]);
-
-    for (let i = 0; i < size; i++) {
-
+    for (let i = 0; i < pages.length; i++) {
         points.push(
             <div
                 key={i}
-                style={i === id ? {
-                    width: 24 - changingSize + 'px',
-                    height: 24 - changingSize + 'px'
-                }
-                    : i === changingID ? {
-                        width: 12 + changingSize + 'px',
-                        height: 12 + changingSize + 'px'
-                    }
-                        : { width: 12 + 'px', height: 12 + 'px' }}
                 onClick={i === id ? () => { } : () => setPageId(i)}
                 className={i === id ? styles.big_point : styles.small_point}>
+                <span className={styles.title}>{pages[i]}</span>
             </div>)
     }
 

diff --git a/pages/discover.js b/pages/discover.js
@@ -36,7 +36,7 @@ function Discover() {
             <Header />
             <div className={styles.wrapper}>
                 {page}
-                <Slider size={3} id={pageId} setPageId={setPageId} setDirection={setDirection} />
+                <Slider pages={["The game", "The factions", "Components"]} id={pageId} setPageId={setPageId} setDirection={setDirection} />
             </div>
         </div>
     );

diff --git a/styles/Game.module.css b/styles/Game.module.css
@@ -123,18 +123,12 @@
     border-radius   : 8px;
 }
 
-@media (max-width: 1200px) {
+@media (max-width: 1260px) {
     .box {
         max-width: 600px;
     }
 }
 
-@media (max-height: 1200px) {
-    .box {
-        max-height: 600px;
-    }
-}
-
 @media (max-width: 700px) {
     .box {
         max-width: 100%;

diff --git a/styles/components/Slider.module.css b/styles/components/Slider.module.css
@@ -31,17 +31,47 @@
     background-color: rgba(229, 228, 228, 0.8);
     border-radius   : 50%;
     cursor          : pointer;
+    height          : 12px;
+    width           : 12px;
+    align-items     : center;
+    text-align      : center;
 }
 
 .small_point:hover {
     transition: all .15s ease-in-out;
-    height    : 18px !important;
-    width     : 18px !important;
+    height    : 18px;
+    width     : 18px;
 }
 
 .big_point {
     background-color: rgb(227, 227, 227);
     border-radius   : 50%;
     height          : 24px;
     width           : 24px;
+}
+
+.title {
+    margin-top      : -48px;
+    margin-left     : -3em;
+    font-family     : 'Readex Pro', Verdana, sans-serif;
+    font-size       : 14px;
+    white-space     : nowrap;
+    width           : fit-content;
+    display         : flex;
+    cursor          : pointer;
+    border-radius   : 14px;
+    align-items     : center;
+    background-color: rgba(173, 166, 166, 0.133);
+    backdrop-filter : blur(5px);
+    padding         : 6px 10px;
+    color           : white;
+    margin-right    : 7px;
+}
+
+@media (max-width: 1260px) {
+
+    .title {
+        display: none;
+    }
+
 }