mirror of
https://github.com/eugene-serb/wavelovers.git
synced 2023-09-09 23:41:16 +03:00
Made program using single gamepad and like a mediaplayer look
This commit is contained in:
Eugene Serb
parent
e676963b99
commit
0e6e926caa
@ -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,17 +419,22 @@ 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 {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
@ -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: column;
|
||||
text-align: center;
|
||||
flex-direction: row;
|
||||
justify-content: space-around;
|
||||
flex-wrap: wrap;
|
||||
gap: 32px;
|
||||
}
|
||||
|
||||
.controls-box__item > span {
|
||||
font-size: 24px;
|
||||
}
|
||||
.controls-box__item {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
text-align: center;
|
||||
gap: 8px;
|
||||
}
|
||||
|
||||
.controls-box__item > span {
|
||||
font-size: 24px;
|
||||
}
|
||||
|
||||
.gamepad-button-container {
|
||||
display: flex;
|
||||
@ -503,23 +507,23 @@ legend {
|
||||
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 {
|
||||
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 > 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; }
|
||||
.gamepad-button_a { background: green; }
|
||||
.gamepad-button_b { background: red; }
|
||||
.gamepad-button_x { background: blue; }
|
||||
.gamepad-button_y { background: orange; }
|
||||
|
||||
|
||||
18
index.html
18
index.html
@ -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>
|
||||
|
||||
@ -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) => {
|
||||
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) => {
|
||||
this.gamepads.forEach((gamepad, index) => {
|
||||
|
||||
Loading…
Reference in New Issue
Block a user