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

Added controls block, replaced device list and message to down in one block

Browse Source
This commit is contained in:
Eugene Serb 2022-06-17 16:36:30 +03:00
parent b7fb2dc176
commit e676963b99
3 changed files with 102 additions and 15 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

46
css/styles.css
View File

@ -377,7 +377,13 @@ legend {
gap: 16px; gap: 16px;
} }
.message-box { .controls-box {
display: flex;
flex-direction: row;
justify-content: space-between;
}
.message {
text-align: center; text-align: center;
font-size: 18px; font-size: 18px;
} }
@ -479,3 +485,41 @@ legend {
overflow: hidden; overflow: hidden;
} }
.controls-box__item {
display: flex;
flex-direction: column;
text-align: center;
}
.controls-box__item > span {
font-size: 24px;
}
.gamepad-button-container {
display: flex;
flex-direction: row;
justify-content: center;
align-items: center;
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 > 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; }

60
index.html
View File

@ -99,17 +99,61 @@
<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 id="message-box" class="content message-box">
<span id="message"></span>
</div>
<div id="device-box" class="content device-box">
<h2 class="content__header">Device List</h2>
<div id="device-list" class="device-list"></div>
</div>
<div id="pattern-box" class="content pattern-box"> <div id="pattern-box" class="content pattern-box">
<h2 class="content__header">Patterns</h2>
<div id="pattern-list" class="pattern-list"></div> <div id="pattern-list" class="pattern-list"></div>
</div> </div>
<div class="content controls-box">
<div class="controls-box__item">
<span>Start</span><br />
<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><br />
<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><br />
<div class="gamepad-button-container">
<div class="gamepad-button">
<span>LB</span>
</div>
</div>
</div>
<div class="controls-box__item">
<span>Next</span><br />
<div class="gamepad-button-container">
<div class="gamepad-button">
<span>RB</span>
</div>
</div>
</div>
<div class="controls-box__item">
<span>(Un-) lock</span><br />
<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="device-box" class="content">
<div class="message">
<span id="message"></span>
</div>
<div id="device-list" class="device-list"></div>
</div>
</div> </div>
</main> </main>

11
js/scripts.js
View File

@ -342,14 +342,14 @@ class VibrationMaster {
}; };
update = () => { update = () => {
if (this.gamepads.length > 0) { if (this.gamepads.length > 0) {
this.$MESSAGE_BOX.classList.add('hidden'); this.$MESSAGE.classList.add('hidden');
this.$DEVICE_BOX.classList.remove('hidden'); this.$DEVICE_LIST.classList.remove('hidden');
this.gamepads.forEach(gamepad => { this.gamepads.forEach(gamepad => {
gamepad.update(); gamepad.update();
}); });
} else { } else {
this.$MESSAGE_BOX.classList.remove('hidden'); this.$MESSAGE.classList.remove('hidden');
this.$DEVICE_BOX.classList.add('hidden'); this.$DEVICE_LIST.classList.add('hidden');
}; };
}; };
draw = () => { draw = () => {
@ -429,9 +429,8 @@ class VibrationMaster {
}; };
#DOMs = () => { #DOMs = () => {
this.$MESSAGE_BOX = document.querySelector('#message-box');
this.$MESSAGE = document.querySelector('#message');
this.$DEVICE_BOX = document.querySelector('#device-box'); this.$DEVICE_BOX = document.querySelector('#device-box');
this.$MESSAGE = document.querySelector('#message');
this.$DEVICE_LIST = document.querySelector('#device-list'); this.$DEVICE_LIST = document.querySelector('#device-list');
this.$PATTERN_BOX = document.querySelector('#pattern-box'); this.$PATTERN_BOX = document.querySelector('#pattern-box');
this.$PATTERN_LIST = document.querySelector('#pattern-list'); this.$PATTERN_LIST = document.querySelector('#pattern-list');