mirror/wavelovers
1
0
Fork 0
mirror of https://github.com/eugene-serb/wavelovers.git synced 2023-09-09 23:41:16 +03:00
Code Issues Projects Releases Wiki Activity

Cleaned code

Browse Source
This commit is contained in:
Eugene Serb 2022-06-17 19:18:01 +03:00
parent 0e6e926caa
commit 602baec202
3 changed files with 38 additions and 108 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

87
css/styles.css
View File

@ -372,6 +372,7 @@ legend {
/* ----------- */ /* ----------- */
/* WAVE MASTER */ /* WAVE MASTER */
/* ----------- */ /* ----------- */
.wavelovers { .wavelovers {
display: flex; display: flex;
flex-direction: column; flex-direction: column;
@ -384,57 +385,6 @@ legend {
font-size: 24px; 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 { .pattern-box {
display: flex; display: flex;
flex-direction: column; flex-direction: column;
@ -480,6 +430,41 @@ legend {
color: var(--color-pattern-text); 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 { .controls-box {
display: flex; display: flex;
flex-direction: row; flex-direction: row;

46
index.html
View File

@ -99,52 +99,6 @@
<main class="page container"> <main class="page container">
<h1 class="visually-hidden">Wavelovers</h1> <h1 class="visually-hidden">Wavelovers</h1>
<div class="wavelovers"> <div class="wavelovers">
<div class="content controls-box hidden">
<div class="controls-box__item">
<span>Start</span>
<div class="gamepad-button-container">
<div class="gamepad-button gamepad-button_a">
<span>A</span>
</div>
</div>
</div>
<div class="controls-box__item">
<span>Stop</span>
<div class="gamepad-button-container">
<div class="gamepad-button gamepad-button_b">
<span>B</span>
</div>
</div>
</div>
<div class="controls-box__item">
<span>Previous</span>
<div class="gamepad-button-container">
<div class="gamepad-button">
<span>LB</span>
</div>
</div>
</div>
<div class="controls-box__item">
<span>Next</span>
<div class="gamepad-button-container">
<div class="gamepad-button">
<span>RB</span>
</div>
</div>
</div>
<div class="controls-box__item">
<span>(Un-) lock</span>
<div class="gamepad-button-container">
<div class="gamepad-button gamepad-button_x">
<span>X</span>
</div>
<span> + </span>
<div class="gamepad-button gamepad-button_y">
<span>Y</span>
</div>
</div>
</div>
</div>
<div id="pattern-box" class="content pattern-box"> <div id="pattern-box" class="content pattern-box">
<div id="pattern-list" class="pattern-list"></div> <div id="pattern-list" class="pattern-list"></div>
</div> </div>

13
js/scripts.js
View File

@ -200,18 +200,11 @@ class Gamepad {
generateBox = () => { generateBox = () => {
const $list_item = document.createElement('div'); const $list_item = document.createElement('div');
const $info_box = document.createElement('div'); const $info_box = document.createElement('div');
/*const $button = document.createElement('button');*/
$list_item.classList.add('list-item'); $list_item.classList.add('list-item');
$info_box.classList.add('list-item__info'); $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($info_box);
/*$list_item.appendChild($button);*/
this.$container.appendChild($list_item); this.$container.appendChild($list_item);
this.$list_item = $list_item; this.$list_item = $list_item;
@ -283,6 +276,7 @@ class Gamepad {
this.cooldown = Date.now() + 500; this.cooldown = Date.now() + 500;
}; };
}; };
change = (index) => { change = (index) => {
this.index = index; this.index = index;
this.pattern = this.library[this.index].pattern; this.pattern = this.library[this.index].pattern;
@ -315,7 +309,6 @@ class VibrationMaster {
eventLoop = () => { eventLoop = () => {
this.update(); this.update();
this.draw(); this.draw();
/*this.eventHandler();*/
}; };
update = () => { update = () => {
if (this.gamepads.length > 0) { if (this.gamepads.length > 0) {
@ -391,13 +384,11 @@ class VibrationMaster {
change = (index) => { change = (index) => {
if (this.gamepads.length > 0) { if (this.gamepads.length > 0) {
this.gamepads.forEach(gamepad => { this.gamepads.forEach(gamepad => {
/*if (gamepad.isSelected === true) {
gamepad.change(index);
};*/
this.unselect(); this.unselect();
if (gamepad.index === index && if (gamepad.index === index &&
gamepad.isVibrating === true) { gamepad.isVibrating === true) {
gamepad.isVibrating = false; gamepad.isVibrating = false;
gamepad.reset();
} else { } else {
gamepad.change(index); gamepad.change(index);
gamepad.vibrate(); gamepad.vibrate();