diff --git a/css/styles.css b/css/styles.css index b2b1d64..af61db5 100644 --- a/css/styles.css +++ b/css/styles.css @@ -372,6 +372,7 @@ legend { /* ----------- */ /* WAVE MASTER */ /* ----------- */ + .wavelovers { display: flex; flex-direction: column; @@ -384,57 +385,6 @@ legend { font-size: 24px; } -.device-box { - display: flex; - flex-direction: column; - justify-content: space-between; - gap: 16px; - text-align: center; -} - - .device-list { - display: flex; - flex-direction: row; - justify-content: space-around; - gap: 16px; - } - - .list-item { - max-width: 100%; - padding: 16px; - border: 4px solid var(--color-b); - border-radius: 4px; - display: flex; - flex-direction: column; - justify-content: space-between; - } - - .list-item_selected { - border: 4px solid var(--color-a); - background-color: var(--color-b); - } - - .list-item_selected > button { - border: 2px solid var(--color-a); - } - - .list-item__info { - display: flex; - flex-direction: column; - gap: 16px; - } - - .list-item__info > div { - 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,6 +430,41 @@ legend { color: var(--color-pattern-text); } +.device-box { + display: flex; + flex-direction: column; + justify-content: space-between; + gap: 16px; + text-align: center; +} + + .device-list { + display: flex; + flex-direction: row; + justify-content: space-around; + gap: 16px; + } + + .list-item { + max-width: 100%; + padding: 16px; + border: 4px solid var(--color-b); + border-radius: 4px; + display: flex; + flex-direction: column; + justify-content: space-between; + } + + .list-item__info { + display: flex; + flex-direction: column; + gap: 16px; + } + + .list-item_selected .list-item__info span { + color: var(--color-white); + } + .controls-box { display: flex; flex-direction: row; diff --git a/index.html b/index.html index cbda70e..0e3f4a7 100644 --- a/index.html +++ b/index.html @@ -99,52 +99,6 @@

Wavelovers

-
diff --git a/js/scripts.js b/js/scripts.js index e46b777..9c50b98 100644 --- a/js/scripts.js +++ b/js/scripts.js @@ -200,18 +200,11 @@ class Gamepad { generateBox = () => { const $list_item = document.createElement('div'); const $info_box = document.createElement('div'); - /*const $button = document.createElement('button');*/ $list_item.classList.add('list-item'); $info_box.classList.add('list-item__info'); - /*$button.innerText = 'Select';*/ - - /*$button.addEventListener('click', () => { - this.isSelected = !this.isSelected; - });*/ $list_item.appendChild($info_box); - /*$list_item.appendChild($button);*/ this.$container.appendChild($list_item); this.$list_item = $list_item; @@ -283,6 +276,7 @@ class Gamepad { this.cooldown = Date.now() + 500; }; }; + change = (index) => { this.index = index; this.pattern = this.library[this.index].pattern; @@ -315,7 +309,6 @@ class VibrationMaster { eventLoop = () => { this.update(); this.draw(); - /*this.eventHandler();*/ }; update = () => { if (this.gamepads.length > 0) { @@ -391,13 +384,11 @@ class VibrationMaster { change = (index) => { if (this.gamepads.length > 0) { this.gamepads.forEach(gamepad => { - /*if (gamepad.isSelected === true) { - gamepad.change(index); - };*/ this.unselect(); if (gamepad.index === index && gamepad.isVibrating === true) { gamepad.isVibrating = false; + gamepad.reset(); } else { gamepad.change(index); gamepad.vibrate();