Added func for changing vibration mode with mouse

This commit is contained in:
Eugene Serb 2022-06-16 21:20:25 +03:00
parent db70be9c79
commit f66714140b
2 changed files with 96 additions and 17 deletions

View File

@ -127,6 +127,54 @@ a {
text-decoration: none;
}
/* ----- */
/* FORMS */
/* ----- */
hr {
margin-block-start: 0.5em;
margin-block-end: 0.5em;
}
button, input, textarea, select {
padding: 4px 8px;
border: 2px solid var(--color-link);
background: var(--color-background);
color: var(--color-text);
font-size: 16px;
line-height: 1.382em;
white-space: nowrap;
}
button:hover, input:hover,
textarea:hover, select:hover {
border: 2px solid var(--color-link-hover);
transition: all 0.5s ease;
}
option {
background: var(--color-background);
color: var(--color-text);
font-size: 16px;
line-height: 1.382em;
}
option:hover {
background-color: var(--color-selection);
color: var(--color-white);
}
fieldset {
border: 2px solid var(--color-border-alpha);
border-radius: 4px;
padding: 8px;
}
legend {
padding: 2px 4px;
text-align: left;
}
/* ------------- */
/* SERVICE RULES */
/* ------------- */
@ -331,7 +379,11 @@ a {
}
.list-item_selected {
outline: 2px solid var(--color-border);
border: 4px solid var(--color-e);
}
.list-item_selected > button {
border: 2px solid var(--color-e);
}
.list-item__info {

View File

@ -199,18 +199,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;
@ -294,6 +294,10 @@ class Gamepad {
this.cooldown = Date.now() + 500;
};
};
change = (index) => {
this.index = index;
this.pattern = this.library[this.index].pattern;
};
};
class VibrationMaster {
@ -372,19 +376,42 @@ class VibrationMaster {
};
};
checkGamepadSupport = () => {
return 'getGamepads' in window.navigator;
print = (patterns) => {
patterns.forEach((pattern, index) => {
const $container = document.createElement('div');
const $icon = document.createElement('span');
const $name = document.createElement('span');
$container.classList.add('pattern-item');
$icon.classList.add('pattern-item__icon');
$name.classList.add('pattern-item__name');
$icon.innerHTML = pattern.icon;
$name.innerHTML = pattern.name;
$container.appendChild($icon);
$container.appendChild($name);
$container.addEventListener('click', () => this.change(index));
this.$PATTERN_LIST.appendChild($container);
});
};
change = (index) => {
if (this.gamepads.length > 0) {
this.gamepads.forEach(gamepad => {
if (gamepad.isSelected === true) {
gamepad.change(index);
};
});
} else {
console.log('No connected devices...');
return;
};
};
print = (patterns) => {
patterns.forEach(pattern => {
this.$PATTERN_LIST.innerHTML += `
<div class="pattern-item">
<span class="pattern-item__icon">${pattern.icon}</span>
<span class="pattern-item__name">${pattern.name}</span>
</div>
`;
});
checkGamepadSupport = () => {
return 'getGamepads' in window.navigator;
};
#DOMs = () => {