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;
|
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; }
|
||||||
|
|
||||||
|
58
index.html
58
index.html
@ -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">
|
<div id="pattern-box" class="content pattern-box">
|
||||||
|
<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>
|
<span id="message"></span>
|
||||||
</div>
|
</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 id="device-list" class="device-list"></div>
|
||||||
</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>
|
</div>
|
||||||
</main>
|
</main>
|
||||||
|
|
||||||
|
@ -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');
|
||||||
|
Loading…
Reference in New Issue
Block a user