From 5b65f5b97a320a9c3850b7669e6a5cf84689d84b Mon Sep 17 00:00:00 2001
From: Eugene Serb <46799701+eugene-serb@users.noreply.github.com>
Date: Fri, 17 Jun 2022 12:42:19 +0300
Subject: [PATCH] Change style and order of the patterns buttons

---
 css/styles.css | 12 ++++----
 js/scripts.js  | 80 +++++++++++++++++++++++++-------------------------
 2 files changed, 47 insertions(+), 45 deletions(-)

diff --git a/css/styles.css b/css/styles.css
index 16cec01..fe0d518 100644
--- a/css/styles.css
+++ b/css/styles.css
@@ -420,20 +420,22 @@ legend {
     }
 
         .pattern-item {
-            width: 128px;
-            height: 128px;
+            width: 300px;
+            height: 64px;
             padding: 16px;
             border-radius: 8px;
             background: var(--color-pattern-button);
             display: flex;
-            flex-direction: column;
-            justify-content: flex-end;
+            flex-direction: row;
+            justify-content: flex-start;
             gap: 32px;
+            align-items: center;
             text-align: center;
+            overflow: hidden;
         }
 
             .pattern-item__icon{
-                font-size: 64px;
+                font-size: 32px;
             }
 
             .pattern-item__name {
diff --git a/js/scripts.js b/js/scripts.js
index 6d0c87f..de48436 100644
--- a/js/scripts.js
+++ b/js/scripts.js
@@ -5,46 +5,6 @@
 'use strict';
 
 const __PATTERNS = [
-    /* Constant, 0s, 1s */
-    {
-        name: 'Constant Weak',
-        type: 'Simple',
-        icon: '😏',
-        pattern: [
-            {
-                startDelay: 0,
-                duration: 1000,
-                weakMagnitude: 1.0,
-                strongMagnitude: 0.0,
-            },
-        ],
-    },
-    {
-        name: 'Constant Strong',
-        type: 'Simple',
-        icon: '🤩',
-        pattern: [
-            {
-                startDelay: 0,
-                duration: 1000,
-                weakMagnitude: 0.0,
-                strongMagnitude: 1.0,
-            },
-        ],
-    },
-    {
-        name: 'Constant Max',
-        type: 'Simple',
-        icon: '😍',
-        pattern: [
-            {
-                startDelay: 0,
-                duration: 1000,
-                weakMagnitude: 1.0,
-                strongMagnitude: 1.0,
-            },
-        ],
-    },
     /* Dotted, 0.1s, 0.1s */
     {
         name: 'Dotted Weak',
@@ -165,6 +125,46 @@ const __PATTERNS = [
             },
         ],
     },
+    /* Constant, 0s, 1s */
+    {
+        name: 'Constant Weak',
+        type: 'Simple',
+        icon: '😏',
+        pattern: [
+            {
+                startDelay: 0,
+                duration: 1000,
+                weakMagnitude: 1.0,
+                strongMagnitude: 0.0,
+            },
+        ],
+    },
+    {
+        name: 'Constant Strong',
+        type: 'Simple',
+        icon: '🤩',
+        pattern: [
+            {
+                startDelay: 0,
+                duration: 1000,
+                weakMagnitude: 0.0,
+                strongMagnitude: 1.0,
+            },
+        ],
+    },
+    {
+        name: 'Constant Max',
+        type: 'Simple',
+        icon: '😍',
+        pattern: [
+            {
+                startDelay: 0,
+                duration: 1000,
+                weakMagnitude: 1.0,
+                strongMagnitude: 1.0,
+            },
+        ],
+    },
 ];
 
 class Gamepad {