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 */
/* ----------- */
.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;

46
index.html
View File

@ -99,52 +99,6 @@
<main class="page container">
<h1 class="visually-hidden">Wavelovers</h1>
<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-list" class="pattern-list"></div>
</div>

13
js/scripts.js
View File

@ -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();