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 drawing patterns

Browse Source
This commit is contained in:
Eugene Serb 2022-06-16 20:47:46 +03:00
parent f47de2f1ae
commit db70be9c79
3 changed files with 66 additions and 22 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

40
css/styles.css
View File

@ -261,14 +261,7 @@ a {
}
.content__header {
font-size: 1.8em;
margin-top: 0;
margin-bottom: 32px;
padding-left: 16px;
border: 4px solid var(--color-background);
outline: 2px solid var(--color-border);
border-radius: 4px;
color: var(--color-header);
text-align: center;
}
/* ------ */
@ -353,14 +346,35 @@ a {
grid-template-columns: repeat(3, 1fr);
}
.controls-banner {
width: 100%;
text-align: center;
.pattern-box {
display: flex;
flex-direction: column;
gap: 32px;
}
.controls-banner__list {
.pattern-list {
display: flex;
flex-direction: column;
flex-direction: row;
justify-content: space-between;
flex-wrap: wrap;
gap: 32px;
}
.pattern-item {
width: 128px;
padding: 8px;
display: flex;
flex-direction: column;
gap: 32px;
text-align: center;
}
.pattern-item__icon{
font-size: 64px;
}
.pattern-item__name {
font-size: 16px;
white-space: nowrap;
}

18
index.html
View File

@ -10,7 +10,7 @@
<meta name="robots" content="all" />
<link rel="canonical" href="https://eugene-serb.github.io/wavelovers/" />
<link rel="stylesheet" type="text/css" href="https://eugene-serb.github.io/wavelovers/css/styles.css" />
<link rel="stylesheet" type="text/css" href="css/styles.css" />
<link rel="shortcut icon" type="image/x-icon" href="https://eugene-serb.github.io/wavelovers/img/favicon.ico" />
<link rel="apple-touch-icon" sizes="180x180" href="https://eugene-serb.github.io/wavelovers/apple-touch-icon.png" />
<link rel="icon" type="image/png" sizes="32x32" href="https://eugene-serb.github.io/wavelovers/favicon-32x32.png" />
@ -83,16 +83,20 @@
<main class="page container">
<h1 class="visually-hidden">Wavelovers</h1>
<div class="wavelovers">
<div class="content message-box">
<div id="message-box" class="content message-box">
<span id="message"></span>
</div>
<div id="device-box" class="content device-box">
<h2>Device List</h2>
<h2 class="content__header">Device List</h2>
<div id="device-list" class="device-list"></div>
</div>
<section class="content controls-banner">
<h2 class="">Disclaimer</h2>
<div class="controls-banner__list">
<div id="pattern-box" class="content pattern-box">
<h2 class="content__header">Patterns</h2>
<div id="pattern-list" class="pattern-list"></div>
</div>
<section class="content">
<h2 class="content__header">Disclaimer</h2>
<div>
<span>
The author of the program code and the publisher is not responsible for the possible consequences of using the program. You use the program at your own risk. Check your device for correct operation. Please consult your doctor before using the program.
</span>
@ -110,7 +114,7 @@
</div>
</footer>
<script src="https://eugene-serb.github.io/wavelovers/js/scripts.js"></script>
<script src="js/scripts.js"></script>
<script src="https://eugene-serb.github.io/js/scripts.js"></script>
<noscript><div><img src="https://mc.yandex.ru/watch/79722217" style="position:absolute; left:-9999px;" alt="" /></div></noscript>
</body>

30
js/scripts.js
View File

@ -9,6 +9,7 @@ const __PATTERNS = [
{
name: 'Constant Weak',
type: 'Simple',
icon: '😏',
pattern: [
{
startDelay: 0,
@ -21,6 +22,7 @@ const __PATTERNS = [
{
name: 'Constant Strong',
type: 'Simple',
icon: '🤩',
pattern: [
{
startDelay: 0,
@ -33,6 +35,7 @@ const __PATTERNS = [
{
name: 'Constant Max',
type: 'Simple',
icon: '😍',
pattern: [
{
startDelay: 0,
@ -46,6 +49,7 @@ const __PATTERNS = [
{
name: 'Dotted Weak',
type: 'Simple',
icon: '😌',
pattern: [
{
startDelay: 100,
@ -58,6 +62,7 @@ const __PATTERNS = [
{
name: 'Dotted Strong',
type: 'Simple',
icon: '😉',
pattern: [
{
startDelay: 100,
@ -70,6 +75,7 @@ const __PATTERNS = [
{
name: 'Dotted Max',
type: 'Simple',
icon: '🙃',
pattern: [
{
startDelay: 0,
@ -83,6 +89,7 @@ const __PATTERNS = [
{
name: 'Short Dashed Weak',
type: 'Simple',
icon: '🙂',
pattern: [
{
startDelay: 100,
@ -95,6 +102,7 @@ const __PATTERNS = [
{
name: 'Short Dashed Strong',
type: 'Simple',
icon: '😇',
pattern: [
{
startDelay: 100,
@ -107,6 +115,7 @@ const __PATTERNS = [
{
name: 'Short Dashed Max',
type: 'Simple',
icon: '😊',
pattern: [
{
startDelay: 0,
@ -120,6 +129,7 @@ const __PATTERNS = [
{
name: 'Long Dashed Weak',
type: 'Simple',
icon: '😋',
pattern: [
{
startDelay: 100,
@ -132,6 +142,7 @@ const __PATTERNS = [
{
name: 'Long Dashed Strong',
type: 'Simple',
icon: '😜',
pattern: [
{
startDelay: 100,
@ -144,6 +155,7 @@ const __PATTERNS = [
{
name: 'Long Dashed Max',
type: 'Simple',
icon: '🤪',
pattern: [
{
startDelay: 0,
@ -290,6 +302,7 @@ class VibrationMaster {
};
init = () => {
this.#DOMs();
this.print(__PATTERNS);
if (!this.checkGamepadSupport()) {
console.log(`This browser does not support of gamepads.`);
@ -363,11 +376,24 @@ class VibrationMaster {
return 'getGamepads' in window.navigator;
};
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>
`;
});
};
#DOMs = () => {
this.$MESSAGE_BOX = document.querySelector('#message-box');
this.$MESSAGE = document.querySelector('#message');
this.$MESSAGE_BOX = document.querySelector('.message-box');
this.$DEVICE_LIST = document.querySelector('#device-list');
this.$DEVICE_BOX = document.querySelector('#device-box');
this.$DEVICE_LIST = document.querySelector('#device-list');
this.$PATTERN_BOX = document.querySelector('#pattern-box');
this.$PATTERN_LIST = document.querySelector('#pattern-list');
};
#eventListeners = () => {
window.addEventListener('gamepadconnected', (event) => {