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

Made program using single gamepad and like a mediaplayer look

Browse Source
This commit is contained in:
Eugene Serb 2022-06-17 18:10:41 +03:00
parent e676963b99
commit 0e6e926caa
3 changed files with 85 additions and 82 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

86
css/styles.css
View File

@ -42,6 +42,7 @@
--color-table-item: transparent; --color-table-item: transparent;
--color-anotation: var(--color-coal); --color-anotation: var(--color-coal);
--color-pattern-button: var(--color-c); --color-pattern-button: var(--color-c);
--color-pattern-text: var(--color-white);
} }
} }
@ -61,6 +62,7 @@
--color-table-item: transparent; --color-table-item: transparent;
--color-anotation: var(--color-milk); --color-anotation: var(--color-milk);
--color-pattern-button: var(--color-milk); --color-pattern-button: var(--color-milk);
--color-pattern-text: var(--color-black);
} }
} }
@ -377,15 +379,9 @@ legend {
gap: 16px; gap: 16px;
} }
.controls-box {
display: flex;
flex-direction: row;
justify-content: space-between;
}
.message { .message {
text-align: center; text-align: center;
font-size: 18px; font-size: 24px;
} }
.device-box { .device-box {
@ -411,13 +407,6 @@ legend {
display: flex; display: flex;
flex-direction: column; flex-direction: column;
justify-content: space-between; justify-content: space-between;
gap: 16px;
}
@media only screen and (min-width: 540px) {
.list-item {
max-width: 50%;
}
} }
.list-item_selected { .list-item_selected {
@ -430,17 +419,22 @@ legend {
} }
.list-item__info { .list-item__info {
padding: 16px;
display: flex; display: flex;
flex-direction: column; flex-direction: column;
gap: 16px; gap: 16px;
} }
.list-item__info > div { .list-item__info > div {
display: grid; display: flex;
grid-template-columns: repeat(3, 1fr); 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,20 +474,30 @@ legend {
} }
.pattern-item__name { .pattern-item__name {
font-size: 16px; font-size: 18px;
white-space: nowrap; white-space: nowrap;
overflow: hidden; overflow: hidden;
color: var(--color-pattern-text);
} }
.controls-box__item { .controls-box {
display: flex; display: flex;
flex-direction: column; flex-direction: row;
text-align: center; justify-content: space-around;
flex-wrap: wrap;
gap: 32px;
} }
.controls-box__item > span { .controls-box__item {
font-size: 24px; display: flex;
} flex-direction: column;
text-align: center;
gap: 8px;
}
.controls-box__item > span {
font-size: 24px;
}
.gamepad-button-container { .gamepad-button-container {
display: flex; display: flex;
@ -503,23 +507,23 @@ legend {
gap: 8px; gap: 8px;
} }
.gamepad-button { .gamepad-button {
width: 4ch; width: 4ch;
height: 4ch; height: 4ch;
border: 1px solid black; border: 1px solid black;
border-radius: 100%; border-radius: 100%;
display: flex; display: flex;
justify-content: center; justify-content: center;
align-items: center; align-items: center;
background: grey; background: grey;
color: white; color: white;
text-align: center; text-align: center;
} }
.gamepad-button > span { color: var(--color-white); } .gamepad-button > span { color: var(--color-white); }
.gamepad-button_a { background: green; } .gamepad-button_a { background: green; }
.gamepad-button_b { background: red; } .gamepad-button_b { background: red; }
.gamepad-button_x { background: blue; } .gamepad-button_x { background: blue; }
.gamepad-button_y { background: orange; } .gamepad-button_y { background: orange; }

18
index.html
View File

@ -99,12 +99,9 @@
<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="pattern-box" class="content pattern-box"> <div class="content controls-box hidden">
<div id="pattern-list" class="pattern-list"></div>
</div>
<div class="content controls-box">
<div class="controls-box__item"> <div class="controls-box__item">
<span>Start</span><br /> <span>Start</span>
<div class="gamepad-button-container"> <div class="gamepad-button-container">
<div class="gamepad-button gamepad-button_a"> <div class="gamepad-button gamepad-button_a">
<span>A</span> <span>A</span>
@ -112,7 +109,7 @@
</div> </div>
</div> </div>
<div class="controls-box__item"> <div class="controls-box__item">
<span>Stop</span><br /> <span>Stop</span>
<div class="gamepad-button-container"> <div class="gamepad-button-container">
<div class="gamepad-button gamepad-button_b"> <div class="gamepad-button gamepad-button_b">
<span>B</span> <span>B</span>
@ -120,7 +117,7 @@
</div> </div>
</div> </div>
<div class="controls-box__item"> <div class="controls-box__item">
<span>Previous</span><br /> <span>Previous</span>
<div class="gamepad-button-container"> <div class="gamepad-button-container">
<div class="gamepad-button"> <div class="gamepad-button">
<span>LB</span> <span>LB</span>
@ -128,7 +125,7 @@
</div> </div>
</div> </div>
<div class="controls-box__item"> <div class="controls-box__item">
<span>Next</span><br /> <span>Next</span>
<div class="gamepad-button-container"> <div class="gamepad-button-container">
<div class="gamepad-button"> <div class="gamepad-button">
<span>RB</span> <span>RB</span>
@ -136,7 +133,7 @@
</div> </div>
</div> </div>
<div class="controls-box__item"> <div class="controls-box__item">
<span>(Un-) lock</span><br /> <span>(Un-) lock</span>
<div class="gamepad-button-container"> <div class="gamepad-button-container">
<div class="gamepad-button gamepad-button_x"> <div class="gamepad-button gamepad-button_x">
<span>X</span> <span>X</span>
@ -148,6 +145,9 @@
</div> </div>
</div> </div>
</div> </div>
<div id="pattern-box" class="content pattern-box">
<div id="pattern-list" class="pattern-list"></div>
</div>
<div id="device-box" class="content"> <div id="device-box" class="content">
<div class="message"> <div class="message">
<span id="message"></span> <span id="message"></span>

63
js/scripts.js
View File

@ -192,7 +192,6 @@ class Gamepad {
} }
]; ];
this.generateBox(); this.generateBox();
this.select(this.index, this.index);
}; };
delete = () => { delete = () => {
@ -201,18 +200,18 @@ 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'); /*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.innerText = 'Select';*/
$button.addEventListener('click', () => { /*$button.addEventListener('click', () => {
this.isSelected = !this.isSelected; this.isSelected = !this.isSelected;
}); });*/
$list_item.appendChild($info_box); $list_item.appendChild($info_box);
$list_item.appendChild($button); /*$list_item.appendChild($button);*/
this.$container.appendChild($list_item); this.$container.appendChild($list_item);
this.$list_item = $list_item; this.$list_item = $list_item;
@ -221,19 +220,7 @@ class Gamepad {
}; };
draw = () => { draw = () => {
this.$info_box.innerHTML = ` this.$info_box.innerHTML = `
<h3>#${this.unit.index + 1}. ${this.unit.id}</h3> <span>Gamepad #${this.unit.index + 1}. ${this.unit.id}.</span>`;
<span>Vibration Actuator: ${this.unit.vibrationActuator ? 'Available' : 'missing'}</span>
<div>
<span>Status: </span>
<span>${this.isVibrating ? 'Vibrating' : 'Idle'}</span>
<span>A / B</span>
<span>Key locked: </span>
<span>${this.isLocked ? 'Yes' : 'No'}</span>
<span>X + Y</span>
<span>Mode: </span>
<span>${this.index + 1}. ${this.library[this.index].name}</span>
<span>LB / RB</span>
</div>`;
if (this.isSelected === true) { if (this.isSelected === true) {
this.$list_item.classList.add('list-item_selected'); this.$list_item.classList.add('list-item_selected');
} else { } else {
@ -270,7 +257,6 @@ class Gamepad {
}; };
previous = () => { previous = () => {
if (Date.now() >= this.cooldown) { if (Date.now() >= this.cooldown) {
const previousIndex = this.index;
if (this.index === 0) { if (this.index === 0) {
this.index = this.library.length - 1; this.index = this.library.length - 1;
} else { } else {
@ -278,12 +264,10 @@ class Gamepad {
}; };
this.pattern = this.library[this.index].pattern; this.pattern = this.library[this.index].pattern;
this.cooldown = Date.now() + 500; this.cooldown = Date.now() + 500;
this.select(previousIndex, this.index);
}; };
}; };
next = () => { next = () => {
if (Date.now() >= this.cooldown) { if (Date.now() >= this.cooldown) {
const previousIndex = this.index;
if (this.index === this.library.length - 1) { if (this.index === this.library.length - 1) {
this.index = 0; this.index = 0;
} else { } else {
@ -291,7 +275,6 @@ class Gamepad {
}; };
this.pattern = this.library[this.index].pattern; this.pattern = this.library[this.index].pattern;
this.cooldown = Date.now() + 500; this.cooldown = Date.now() + 500;
this.select(previousIndex, this.index);
}; };
}; };
lock = () => { lock = () => {
@ -301,15 +284,9 @@ class Gamepad {
}; };
}; };
change = (index) => { change = (index) => {
this.select(this.index, index);
this.index = index; this.index = index;
this.pattern = this.library[this.index].pattern; this.pattern = this.library[this.index].pattern;
}; };
select = (previous, next) => {
this.library[previous]['container'].classList.remove('pattern-item__selected');
this.library[next]['container'].classList.add('pattern-item__selected');
};
}; };
class VibrationMaster { class VibrationMaster {
@ -338,7 +315,7 @@ class VibrationMaster {
eventLoop = () => { eventLoop = () => {
this.update(); this.update();
this.draw(); this.draw();
this.eventHandler(); /*this.eventHandler();*/
}; };
update = () => { update = () => {
if (this.gamepads.length > 0) { if (this.gamepads.length > 0) {
@ -414,8 +391,17 @@ 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) { /*if (gamepad.isSelected === true) {
gamepad.change(index); gamepad.change(index);
};*/
this.unselect();
if (gamepad.index === index &&
gamepad.isVibrating === true) {
gamepad.isVibrating = false;
} else {
gamepad.change(index);
gamepad.vibrate();
this.select(index);
}; };
}); });
} else { } else {
@ -424,6 +410,15 @@ class VibrationMaster {
}; };
}; };
unselect = () => {
this.patterns.forEach(pattern => {
pattern['container'].classList.remove('pattern-item__selected');
});
};
select = (index) => {
this.patterns[index]['container'].classList.add('pattern-item__selected');
};
checkGamepadSupport = () => { checkGamepadSupport = () => {
return 'getGamepads' in window.navigator; return 'getGamepads' in window.navigator;
}; };
@ -437,7 +432,11 @@ class VibrationMaster {
}; };
#eventListeners = () => { #eventListeners = () => {
window.addEventListener('gamepadconnected', (event) => { window.addEventListener('gamepadconnected', (event) => {
this.gamepads.push(new Gamepad(event.gamepad, this.$DEVICE_LIST, this.patterns)); if (this.gamepads.length > 1) {
return;
} else {
this.gamepads.push(new Gamepad(event.gamepad, this.$DEVICE_LIST, this.patterns));
};
}); });
window.addEventListener('gamepaddisconnected', (event) => { window.addEventListener('gamepaddisconnected', (event) => {
this.gamepads.forEach((gamepad, index) => { this.gamepads.forEach((gamepad, index) => {