From db70be9c79f149cd3596ed9db00fc6cd889c4ab8 Mon Sep 17 00:00:00 2001
From: Eugene Serb <46799701+eugene-serb@users.noreply.github.com>
Date: Thu, 16 Jun 2022 20:47:46 +0300
Subject: [PATCH] Added drawing patterns

---
 css/styles.css | 40 +++++++++++++++++++++++++++-------------
 index.html     | 18 +++++++++++-------
 js/scripts.js  | 30 ++++++++++++++++++++++++++++--
 3 files changed, 66 insertions(+), 22 deletions(-)

diff --git a/css/styles.css b/css/styles.css
index d407d7e..4ee3803 100644
--- a/css/styles.css
+++ b/css/styles.css
@@ -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;
+            }
+
diff --git a/index.html b/index.html
index 92b97a8..6d7fdb3 100644
--- a/index.html
+++ b/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">
-                <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>
diff --git a/js/scripts.js b/js/scripts.js
index 6ad160a..a24346a 100644
--- a/js/scripts.js
+++ b/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) => {