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

Added selecting pattern by mouse with adding classes to them an removing in previous

Browse Source
This commit is contained in:
Eugene Serb 2022-06-17 15:21:23 +03:00
parent 646716501b
commit b7fb2dc176
3 changed files with 51 additions and 3 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

19
css/styles.css
View File

@ -277,6 +277,19 @@ legend {
text-transform: uppercase;
}
.navigation__item a {
color: var(--color-logo);
}
.navigation__item a:hover {
color: var(--color-logo);
border-color: var(--color-logo);
}
.navigation__item a::selection {
background: var(--color-a);
}
@media only screen and (min-width: 720px) {
.header-wrapper {
display: grid;
@ -294,6 +307,7 @@ legend {
margin-top: 0px;
grid-column: 2 / 3;
grid-row: 1 / 2;
align-self: flex-end;
}
}
@ -448,6 +462,11 @@ legend {
align-items: center;
text-align: center;
overflow: hidden;
cursor: default;
}
.pattern-item__selected {
background: var(--color-b);
}
.pattern-item__icon{

16
index.html
View File

@ -77,6 +77,22 @@
<div class="logo-wrapper">
<span class="logo-wrapper__logo">Wavelovers</span>
</div>
<nav class="menu-wrapper hidden">
<ul class="navigation">
<li class="navigation__item">
<a href="https://eugene-serb.github.io/wavelovers/" target="_self" class="navigation__link">Home</a>
</li>
<li class="navigation__item">
<a href="https://eugene-serb.github.io/wavelovers/#faq" target="_self" class="navigation__link">FAQ</a>
</li>
<li class="navigation__item">
<a href="https://eugene-serb.github.io/wavelovers/#buy" target="_self" class="navigation__link">Buy Pro</a>
</li>
<li class="navigation__item">
<a href="https://eugene-serb.github.io/wavelovers/#donate" target="_self" class="navigation__link">Donate</a>
</li>
</ul>
</nav>
</div>
</header>

19
js/scripts.js
View File

@ -192,6 +192,7 @@ class Gamepad {
}
];
this.generateBox();
this.select(this.index, this.index);
};
delete = () => {
@ -269,6 +270,7 @@ class Gamepad {
};
previous = () => {
if (Date.now() >= this.cooldown) {
const previousIndex = this.index;
if (this.index === 0) {
this.index = this.library.length - 1;
} else {
@ -276,10 +278,12 @@ 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 {
@ -287,6 +291,7 @@ class Gamepad {
};
this.pattern = this.library[this.index].pattern;
this.cooldown = Date.now() + 500;
this.select(previousIndex, this.index);
};
};
lock = () => {
@ -296,9 +301,15 @@ 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 {
@ -307,7 +318,8 @@ class VibrationMaster {
};
init = () => {
this.#DOMs();
this.print(__PATTERNS);
this.patterns = __PATTERNS;
this.print(this.patterns);
if (!this.checkGamepadSupport()) {
console.log(`This browser does not support of gamepads.`);
@ -320,7 +332,6 @@ class VibrationMaster {
this.gamepads = [];
this.#eventListeners();
this.interval = setInterval(this.eventLoop, 1);
};
@ -378,6 +389,7 @@ class VibrationMaster {
};
print = (patterns) => {
this.$PATTERN_LIST.innerHTML = '';
patterns.forEach((pattern, index) => {
const $container = document.createElement('div');
const $icon = document.createElement('span');
@ -396,6 +408,7 @@ class VibrationMaster {
$container.addEventListener('click', () => this.change(index));
this.$PATTERN_LIST.appendChild($container);
pattern['container'] = $container;
});
};
change = (index) => {
@ -425,7 +438,7 @@ class VibrationMaster {
};
#eventListeners = () => {
window.addEventListener('gamepadconnected', (event) => {
this.gamepads.push(new Gamepad(event.gamepad, this.$DEVICE_LIST, __PATTERNS));
this.gamepads.push(new Gamepad(event.gamepad, this.$DEVICE_LIST, this.patterns));
});
window.addEventListener('gamepaddisconnected', (event) => {
this.gamepads.forEach((gamepad, index) => {