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

52
css/styles.css
View File

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

18
index.html
View File

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

61
js/scripts.js
View File

@ -192,7 +192,6 @@ class Gamepad {
}
];
this.generateBox();
this.select(this.index, this.index);
};
delete = () => {
@ -201,18 +200,18 @@ class Gamepad {
generateBox = () => {
const $list_item = 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');
$info_box.classList.add('list-item__info');
$button.innerText = 'Select';
/*$button.innerText = 'Select';*/
$button.addEventListener('click', () => {
/*$button.addEventListener('click', () => {
this.isSelected = !this.isSelected;
});
});*/
$list_item.appendChild($info_box);
$list_item.appendChild($button);
/*$list_item.appendChild($button);*/
this.$container.appendChild($list_item);
this.$list_item = $list_item;
@ -221,19 +220,7 @@ class Gamepad {
};
draw = () => {
this.$info_box.innerHTML = `
<h3>#${this.unit.index + 1}. ${this.unit.id}</h3>
<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>`;
<span>Gamepad #${this.unit.index + 1}. ${this.unit.id}.</span>`;
if (this.isSelected === true) {
this.$list_item.classList.add('list-item_selected');
} else {
@ -270,7 +257,6 @@ class Gamepad {
};
previous = () => {
if (Date.now() >= this.cooldown) {
const previousIndex = this.index;
if (this.index === 0) {
this.index = this.library.length - 1;
} else {
@ -278,12 +264,10 @@ class Gamepad {
};
this.pattern = this.library[this.index].pattern;
this.cooldown = Date.now() + 500;
this.select(previousIndex, this.index);
};
};
next = () => {
if (Date.now() >= this.cooldown) {
const previousIndex = this.index;
if (this.index === this.library.length - 1) {
this.index = 0;
} else {
@ -291,7 +275,6 @@ class Gamepad {
};
this.pattern = this.library[this.index].pattern;
this.cooldown = Date.now() + 500;
this.select(previousIndex, this.index);
};
};
lock = () => {
@ -301,15 +284,9 @@ class Gamepad {
};
};
change = (index) => {
this.select(this.index, index);
this.index = index;
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 {
@ -338,7 +315,7 @@ class VibrationMaster {
eventLoop = () => {
this.update();
this.draw();
this.eventHandler();
/*this.eventHandler();*/
};
update = () => {
if (this.gamepads.length > 0) {
@ -414,8 +391,17 @@ class VibrationMaster {
change = (index) => {
if (this.gamepads.length > 0) {
this.gamepads.forEach(gamepad => {
if (gamepad.isSelected === true) {
/*if (gamepad.isSelected === true) {
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 {
@ -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 = () => {
return 'getGamepads' in window.navigator;
};
@ -437,7 +432,11 @@ class VibrationMaster {
};
#eventListeners = () => {
window.addEventListener('gamepadconnected', (event) => {
if (this.gamepads.length > 1) {
return;
} else {
this.gamepads.push(new Gamepad(event.gamepad, this.$DEVICE_LIST, this.patterns));
};
});
window.addEventListener('gamepaddisconnected', (event) => {
this.gamepads.forEach((gamepad, index) => {