Added drawing patterns

css/styles.css

@@ -261,14 +261,7 @@ a {
 }
 
 .content__header {
-    font-size: 1.8em;
+    text-align: center;
-    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);
 }
 
 /* ------ */
@@ -353,14 +346,35 @@ a {
                 grid-template-columns: repeat(3, 1fr);
             }
 
-.controls-banner {
+.pattern-box {
-    width: 100%;
-    text-align: center;
-}
-
-    .controls-banner__list {
     display: flex;
     flex-direction: column;
+    gap: 32px;
+}
+
+    .pattern-list {
+        display: flex;
+        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;
             }
 

index.html

@@ -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">
+            <div id="pattern-box" class="content pattern-box">
-                <h2 class="">Disclaimer</h2>
+                <h2 class="content__header">Patterns</h2>
-                <div class="controls-banner__list">
+                <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>

js/scripts.js

@@ -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) => {