From b7fb2dc1764a505855ff469269648f5dc8324448 Mon Sep 17 00:00:00 2001
From: Eugene Serb <46799701+eugene-serb@users.noreply.github.com>
Date: Fri, 17 Jun 2022 15:21:23 +0300
Subject: [PATCH] Added selecting pattern by mouse with adding classes to them
 an removing in previous

---
 css/styles.css | 19 +++++++++++++++++++
 index.html     | 16 ++++++++++++++++
 js/scripts.js  | 19 ++++++++++++++++---
 3 files changed, 51 insertions(+), 3 deletions(-)

diff --git a/css/styles.css b/css/styles.css
index f7e5e17..6b3f99f 100644
--- a/css/styles.css
+++ b/css/styles.css
@@ -277,6 +277,19 @@ legend {
     text-transform: uppercase;
 }
 
+    .navigation__item a {
+        color: var(--color-logo);
+    }
+
+        .navigation__item a:hover {
+            color: var(--color-logo);
+            border-color: var(--color-logo);
+        }
+
+        .navigation__item a::selection {
+            background: var(--color-a);
+        }
+
 @media only screen and (min-width: 720px) {
     .header-wrapper {
         display: grid;
@@ -294,6 +307,7 @@ legend {
         margin-top: 0px;
         grid-column: 2 / 3;
         grid-row: 1 / 2;
+        align-self: flex-end;
     }
 }
 
@@ -448,6 +462,11 @@ legend {
             align-items: center;
             text-align: center;
             overflow: hidden;
+            cursor: default;
+        }
+
+        .pattern-item__selected {
+            background: var(--color-b);
         }
 
             .pattern-item__icon{
diff --git a/index.html b/index.html
index 3e111a0..820ed4a 100644
--- a/index.html
+++ b/index.html
@@ -77,6 +77,22 @@
             <div class="logo-wrapper">
                 <span class="logo-wrapper__logo">Wavelovers</span>
             </div>
+            <nav class="menu-wrapper hidden">
+                <ul class="navigation">
+                    <li class="navigation__item">
+                        <a href="https://eugene-serb.github.io/wavelovers/" target="_self" class="navigation__link">Home</a>
+                    </li>
+                    <li class="navigation__item">
+                        <a href="https://eugene-serb.github.io/wavelovers/#faq" target="_self" class="navigation__link">FAQ</a>
+                    </li>
+                    <li class="navigation__item">
+                        <a href="https://eugene-serb.github.io/wavelovers/#buy" target="_self" class="navigation__link">Buy Pro</a>
+                    </li>
+                    <li class="navigation__item">
+                        <a href="https://eugene-serb.github.io/wavelovers/#donate" target="_self" class="navigation__link">Donate</a>
+                    </li>
+                </ul>
+            </nav>
         </div>
     </header>
 
diff --git a/js/scripts.js b/js/scripts.js
index 922e50d..efe8fe6 100644
--- a/js/scripts.js
+++ b/js/scripts.js
@@ -192,6 +192,7 @@ class Gamepad {
             }
         ];
         this.generateBox();
+        this.select(this.index, this.index);
     };
 
     delete = () => {
@@ -269,6 +270,7 @@ class Gamepad {
     };
     previous = () => {
         if (Date.now() >= this.cooldown) {
+            const previousIndex = this.index;
             if (this.index === 0) {
                 this.index = this.library.length - 1;
             } else {
@@ -276,10 +278,12 @@ class Gamepad {
             };
             this.pattern = this.library[this.index].pattern;
             this.cooldown = Date.now() + 500;
+            this.select(previousIndex, this.index);
         };
     };
     next = () => {
         if (Date.now() >= this.cooldown) {
+            const previousIndex = this.index;
             if (this.index === this.library.length - 1) {
                 this.index = 0;
             } else {
@@ -287,6 +291,7 @@ class Gamepad {
             };
             this.pattern = this.library[this.index].pattern;
             this.cooldown = Date.now() + 500;
+            this.select(previousIndex, this.index);
         };
     };
     lock = () => {
@@ -296,9 +301,15 @@ class Gamepad {
         };
     };
     change = (index) => {
+        this.select(this.index, index);
         this.index = index;
         this.pattern = this.library[this.index].pattern;
     };
+
+    select = (previous, next) => {
+        this.library[previous]['container'].classList.remove('pattern-item__selected');
+        this.library[next]['container'].classList.add('pattern-item__selected');
+    };
 };
 
 class VibrationMaster {
@@ -307,7 +318,8 @@ class VibrationMaster {
     };
     init = () => {
         this.#DOMs();
-        this.print(__PATTERNS);
+        this.patterns = __PATTERNS;
+        this.print(this.patterns);
 
         if (!this.checkGamepadSupport()) {
             console.log(`This browser does not support of gamepads.`);
@@ -320,7 +332,6 @@ class VibrationMaster {
 
         this.gamepads = [];
         this.#eventListeners();
-
         this.interval = setInterval(this.eventLoop, 1);
     };
 
@@ -378,6 +389,7 @@ class VibrationMaster {
     };
 
     print = (patterns) => {
+        this.$PATTERN_LIST.innerHTML = '';
         patterns.forEach((pattern, index) => {
             const $container = document.createElement('div');
             const $icon = document.createElement('span');
@@ -396,6 +408,7 @@ class VibrationMaster {
             $container.addEventListener('click', () => this.change(index));
 
             this.$PATTERN_LIST.appendChild($container);
+            pattern['container'] = $container;
         });
     };
     change = (index) => {
@@ -425,7 +438,7 @@ class VibrationMaster {
     };
     #eventListeners = () => {
         window.addEventListener('gamepadconnected', (event) => {
-            this.gamepads.push(new Gamepad(event.gamepad, this.$DEVICE_LIST, __PATTERNS));
+            this.gamepads.push(new Gamepad(event.gamepad, this.$DEVICE_LIST, this.patterns));
         });
         window.addEventListener('gamepaddisconnected', (event) => {
             this.gamepads.forEach((gamepad, index) => {