From 0e6e926caa068a647e080fc53aa080c0babb1dd2 Mon Sep 17 00:00:00 2001
From: Eugene Serb <46799701+eugene-serb@users.noreply.github.com>
Date: Fri, 17 Jun 2022 18:10:41 +0300
Subject: [PATCH] Made program using single gamepad and like a mediaplayer look

---
 css/styles.css | 86 ++++++++++++++++++++++++++------------------------
 index.html     | 18 +++++------
 js/scripts.js  | 63 ++++++++++++++++++------------------
 3 files changed, 85 insertions(+), 82 deletions(-)

diff --git a/css/styles.css b/css/styles.css
index dfa32e7..b2b1d64 100644
--- a/css/styles.css
+++ b/css/styles.css
@@ -42,6 +42,7 @@
         --color-table-item: transparent;
         --color-anotation: var(--color-coal);
         --color-pattern-button: var(--color-c);
+        --color-pattern-text: var(--color-white);
     }
 }
 
@@ -61,6 +62,7 @@
         --color-table-item: transparent;
         --color-anotation: var(--color-milk);
         --color-pattern-button: var(--color-milk);
+        --color-pattern-text: var(--color-black);
     }
 }
 
@@ -377,15 +379,9 @@ legend {
     gap: 16px;
 }
 
-.controls-box {
-    display: flex;
-    flex-direction: row;
-    justify-content: space-between;
-}
-
 .message {
     text-align: center;
-    font-size: 18px;
+    font-size: 24px;
 }
 
 .device-box {
@@ -411,13 +407,6 @@ legend {
             display: flex;
             flex-direction: column;
             justify-content: space-between;
-            gap: 16px;
-        }
-
-        @media only screen and (min-width: 540px) {
-            .list-item {
-                max-width: 50%;
-            }
         }
 
         .list-item_selected {
@@ -430,17 +419,22 @@ legend {
         }
 
             .list-item__info {
-                padding: 16px;
                 display: flex;
                 flex-direction: column;
                 gap: 16px;
             }
 
             .list-item__info > div {
-                display: grid;
-                grid-template-columns: repeat(3, 1fr);
+                display: flex;
+                flex-direction: row;
+                justify-content: space-between;
             }
 
+        .list-item_selected .list-item__info span,
+        .list-item_selected .list-item__info h4 {
+            color: var(--color-white);
+        }
+
 .pattern-box {
     display: flex;
     flex-direction: column;
@@ -480,20 +474,30 @@ legend {
             }
 
             .pattern-item__name {
-                font-size: 16px;
+                font-size: 18px;
                 white-space: nowrap;
                 overflow: hidden;
+                color: var(--color-pattern-text);
             }
 
-.controls-box__item {
+.controls-box {
     display: flex;
-    flex-direction: column;
-    text-align: center;
+    flex-direction: row;
+    justify-content: space-around;
+    flex-wrap: wrap;
+    gap: 32px;
 }
 
-.controls-box__item > span {
-    font-size: 24px;
-}
+    .controls-box__item {
+        display: flex;
+        flex-direction: column;
+        text-align: center;
+        gap: 8px;
+    }
+
+    .controls-box__item > span {
+        font-size: 24px;
+    }
 
 .gamepad-button-container {
     display: flex;
@@ -503,23 +507,23 @@ legend {
     gap: 8px;
 }
 
-.gamepad-button {
-    width: 4ch;
-    height: 4ch;
-    border: 1px solid black;
-    border-radius: 100%;
-    display: flex;
-    justify-content: center;
-    align-items: center;
-    background: grey;
-    color: white;
-    text-align: center;
-}
+    .gamepad-button {
+        width: 4ch;
+        height: 4ch;
+        border: 1px solid black;
+        border-radius: 100%;
+        display: flex;
+        justify-content: center;
+        align-items: center;
+        background: grey;
+        color: white;
+        text-align: center;
+    }
 
-    .gamepad-button > span { color: var(--color-white); }
+        .gamepad-button > span { color: var(--color-white); }
 
-    .gamepad-button_a { background: green; }
-    .gamepad-button_b { background: red; }
-    .gamepad-button_x { background: blue; }
-    .gamepad-button_y { background: orange; }
+        .gamepad-button_a { background: green; }
+        .gamepad-button_b { background: red; }
+        .gamepad-button_x { background: blue; }
+        .gamepad-button_y { background: orange; }
 
diff --git a/index.html b/index.html
index 698811a..cbda70e 100644
--- a/index.html
+++ b/index.html
@@ -99,12 +99,9 @@
     <main class="page container">
         <h1 class="visually-hidden">Wavelovers</h1>
         <div class="wavelovers">
-            <div id="pattern-box" class="content pattern-box">
-                <div id="pattern-list" class="pattern-list"></div>
-            </div>
-            <div class="content controls-box">
+            <div class="content controls-box hidden">
                 <div class="controls-box__item">
-                    <span>Start</span><br />
+                    <span>Start</span>
                     <div class="gamepad-button-container">
                         <div class="gamepad-button gamepad-button_a">
                             <span>A</span>
@@ -112,7 +109,7 @@
                     </div>
                 </div>
                 <div class="controls-box__item">
-                    <span>Stop</span><br />
+                    <span>Stop</span>
                     <div class="gamepad-button-container">
                         <div class="gamepad-button gamepad-button_b">
                             <span>B</span>
@@ -120,7 +117,7 @@
                     </div>
                 </div>
                 <div class="controls-box__item">
-                    <span>Previous</span><br />
+                    <span>Previous</span>
                     <div class="gamepad-button-container">
                         <div class="gamepad-button">
                             <span>LB</span>
@@ -128,7 +125,7 @@
                     </div>
                 </div>
                 <div class="controls-box__item">
-                    <span>Next</span><br />
+                    <span>Next</span>
                     <div class="gamepad-button-container">
                         <div class="gamepad-button">
                             <span>RB</span>
@@ -136,7 +133,7 @@
                     </div>
                 </div>
                 <div class="controls-box__item">
-                    <span>(Un-) lock</span><br />
+                    <span>(Un-) lock</span>
                     <div class="gamepad-button-container">
                         <div class="gamepad-button gamepad-button_x">
                             <span>X</span>
@@ -148,6 +145,9 @@
                     </div>
                 </div>
             </div>
+            <div id="pattern-box" class="content pattern-box">
+                <div id="pattern-list" class="pattern-list"></div>
+            </div>
             <div id="device-box" class="content">
                 <div class="message">
                     <span id="message"></span>
diff --git a/js/scripts.js b/js/scripts.js
index 203c8dd..e46b777 100644
--- a/js/scripts.js
+++ b/js/scripts.js
@@ -192,7 +192,6 @@ class Gamepad {
             }
         ];
         this.generateBox();
-        this.select(this.index, this.index);
     };
 
     delete = () => {
@@ -201,18 +200,18 @@ class Gamepad {
     generateBox = () => {
         const $list_item = document.createElement('div');
         const $info_box = document.createElement('div');
-        const $button = document.createElement('button');
+        /*const $button = document.createElement('button');*/
 
         $list_item.classList.add('list-item');
         $info_box.classList.add('list-item__info');
-        $button.innerText = 'Select';
+        /*$button.innerText = 'Select';*/
 
-        $button.addEventListener('click', () => {
+        /*$button.addEventListener('click', () => {
             this.isSelected = !this.isSelected;
-        });
+        });*/
 
         $list_item.appendChild($info_box);
-        $list_item.appendChild($button);
+        /*$list_item.appendChild($button);*/
         this.$container.appendChild($list_item);
 
         this.$list_item = $list_item;
@@ -221,19 +220,7 @@ class Gamepad {
     };
     draw = () => {
         this.$info_box.innerHTML = `
-                    <h3>#${this.unit.index + 1}. ${this.unit.id}</h3>
-                    <span>Vibration Actuator: ${this.unit.vibrationActuator ? 'Available' : 'missing'}</span>
-                    <div>
-                        <span>Status: </span>
-                        <span>${this.isVibrating ? 'Vibrating' : 'Idle'}</span>
-                        <span>A / B</span>
-                        <span>Key locked: </span>
-                        <span>${this.isLocked ? 'Yes' : 'No'}</span>
-                        <span>X + Y</span>
-                        <span>Mode: </span>
-                        <span>${this.index + 1}. ${this.library[this.index].name}</span>
-                        <span>LB / RB</span>
-                    </div>`;
+            <span>Gamepad #${this.unit.index + 1}. ${this.unit.id}.</span>`;
         if (this.isSelected === true) {
             this.$list_item.classList.add('list-item_selected');
         } else {
@@ -270,7 +257,6 @@ class Gamepad {
     };
     previous = () => {
         if (Date.now() >= this.cooldown) {
-            const previousIndex = this.index;
             if (this.index === 0) {
                 this.index = this.library.length - 1;
             } else {
@@ -278,12 +264,10 @@ 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 {
@@ -291,7 +275,6 @@ class Gamepad {
             };
             this.pattern = this.library[this.index].pattern;
             this.cooldown = Date.now() + 500;
-            this.select(previousIndex, this.index);
         };
     };
     lock = () => {
@@ -301,15 +284,9 @@ 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 {
@@ -338,7 +315,7 @@ class VibrationMaster {
     eventLoop = () => {
         this.update();
         this.draw();
-        this.eventHandler();
+        /*this.eventHandler();*/
     };
     update = () => {
         if (this.gamepads.length > 0) {
@@ -414,8 +391,17 @@ class VibrationMaster {
     change = (index) => {
         if (this.gamepads.length > 0) {
             this.gamepads.forEach(gamepad => {
-                if (gamepad.isSelected === true) {
+                /*if (gamepad.isSelected === true) {
                     gamepad.change(index);
+                };*/
+                this.unselect();
+                if (gamepad.index === index &&
+                    gamepad.isVibrating === true) {
+                    gamepad.isVibrating = false;
+                } else {
+                    gamepad.change(index);
+                    gamepad.vibrate();
+                    this.select(index);
                 };
             });
         } else {
@@ -424,6 +410,15 @@ class VibrationMaster {
         };
     };
 
+    unselect = () => {
+        this.patterns.forEach(pattern => {
+            pattern['container'].classList.remove('pattern-item__selected');
+        });
+    };
+    select = (index) => {
+        this.patterns[index]['container'].classList.add('pattern-item__selected');
+    };
+
     checkGamepadSupport = () => {
         return 'getGamepads' in window.navigator;
     };
@@ -437,7 +432,11 @@ class VibrationMaster {
     };
     #eventListeners = () => {
         window.addEventListener('gamepadconnected', (event) => {
-            this.gamepads.push(new Gamepad(event.gamepad, this.$DEVICE_LIST, this.patterns));
+            if (this.gamepads.length > 1) {
+                return;
+            } else {
+                this.gamepads.push(new Gamepad(event.gamepad, this.$DEVICE_LIST, this.patterns));
+            };
         });
         window.addEventListener('gamepaddisconnected', (event) => {
             this.gamepads.forEach((gamepad, index) => {