mirror of
https://github.com/eugene-serb/wavelovers.git
synced 2023-09-09 23:41:16 +03:00
Added controls block, replaced device list and message to down in one block
This commit is contained in:
parent
b7fb2dc176
commit
e676963b99
@ -377,7 +377,13 @@ legend {
|
||||
gap: 16px;
|
||||
}
|
||||
|
||||
.message-box {
|
||||
.controls-box {
|
||||
display: flex;
|
||||
flex-direction: row;
|
||||
justify-content: space-between;
|
||||
}
|
||||
|
||||
.message {
|
||||
text-align: center;
|
||||
font-size: 18px;
|
||||
}
|
||||
@ -479,3 +485,41 @@ legend {
|
||||
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
60
index.html
@ -99,17 +99,61 @@
|
||||
<main class="page container">
|
||||
<h1 class="visually-hidden">Wavelovers</h1>
|
||||
<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">
|
||||
<h2 class="content__header">Patterns</h2>
|
||||
<div id="pattern-list" class="pattern-list"></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>
|
||||
</main>
|
||||
|
||||
|
@ -342,14 +342,14 @@ class VibrationMaster {
|
||||
};
|
||||
update = () => {
|
||||
if (this.gamepads.length > 0) {
|
||||
this.$MESSAGE_BOX.classList.add('hidden');
|
||||
this.$DEVICE_BOX.classList.remove('hidden');
|
||||
this.$MESSAGE.classList.add('hidden');
|
||||
this.$DEVICE_LIST.classList.remove('hidden');
|
||||
this.gamepads.forEach(gamepad => {
|
||||
gamepad.update();
|
||||
});
|
||||
} else {
|
||||
this.$MESSAGE_BOX.classList.remove('hidden');
|
||||
this.$DEVICE_BOX.classList.add('hidden');
|
||||
this.$MESSAGE.classList.remove('hidden');
|
||||
this.$DEVICE_LIST.classList.add('hidden');
|
||||
};
|
||||
};
|
||||
draw = () => {
|
||||
@ -429,9 +429,8 @@ class VibrationMaster {
|
||||
};
|
||||
|
||||
#DOMs = () => {
|
||||
this.$MESSAGE_BOX = document.querySelector('#message-box');
|
||||
this.$MESSAGE = document.querySelector('#message');
|
||||
this.$DEVICE_BOX = document.querySelector('#device-box');
|
||||
this.$MESSAGE = document.querySelector('#message');
|
||||
this.$DEVICE_LIST = document.querySelector('#device-list');
|
||||
this.$PATTERN_BOX = document.querySelector('#pattern-box');
|
||||
this.$PATTERN_LIST = document.querySelector('#pattern-list');
|
||||
|
Loading…
Reference in New Issue
Block a user