From e676963b999b90cb5b5e0200a7d2e2c3d10ec23b Mon Sep 17 00:00:00 2001
From: Eugene Serb <46799701+eugene-serb@users.noreply.github.com>
Date: Fri, 17 Jun 2022 16:36:30 +0300
Subject: [PATCH] Added controls block, replaced device list and message to
 down in one block

---
 css/styles.css | 46 +++++++++++++++++++++++++++++++++++++-
 index.html     | 60 +++++++++++++++++++++++++++++++++++++++++++-------
 js/scripts.js  | 11 +++++----
 3 files changed, 102 insertions(+), 15 deletions(-)

diff --git a/css/styles.css b/css/styles.css
index 6b3f99f..dfa32e7 100644
--- a/css/styles.css
+++ b/css/styles.css
@@ -377,7 +377,13 @@ legend {
     gap: 16px;
 }
 
-.message-box {
+.controls-box {
+    display: flex;
+    flex-direction: row;
+    justify-content: space-between;
+}
+
+.message {
     text-align: center;
     font-size: 18px;
 }
@@ -479,3 +485,41 @@ legend {
                 overflow: hidden;
             }
 
+.controls-box__item {
+    display: flex;
+    flex-direction: column;
+    text-align: center;
+}
+
+.controls-box__item > span {
+    font-size: 24px;
+}
+
+.gamepad-button-container {
+    display: flex;
+    flex-direction: row;
+    justify-content: center;
+    align-items: center;
+    gap: 8px;
+}
+
+.gamepad-button {
+    width: 4ch;
+    height: 4ch;
+    border: 1px solid black;
+    border-radius: 100%;
+    display: flex;
+    justify-content: center;
+    align-items: center;
+    background: grey;
+    color: white;
+    text-align: center;
+}
+
+    .gamepad-button > span { color: var(--color-white); }
+
+    .gamepad-button_a { background: green; }
+    .gamepad-button_b { background: red; }
+    .gamepad-button_x { background: blue; }
+    .gamepad-button_y { background: orange; }
+
diff --git a/index.html b/index.html
index 820ed4a..698811a 100644
--- a/index.html
+++ b/index.html
@@ -99,17 +99,61 @@
     <main class="page container">
         <h1 class="visually-hidden">Wavelovers</h1>
         <div class="wavelovers">
-            <div id="message-box" class="content message-box">
-                <span id="message"></span>
-            </div>
-            <div id="device-box" class="content device-box">
-                <h2 class="content__header">Device List</h2>
-                <div id="device-list" class="device-list"></div>
-            </div>
             <div id="pattern-box" class="content pattern-box">
-                <h2 class="content__header">Patterns</h2>
                 <div id="pattern-list" class="pattern-list"></div>
             </div>
+            <div class="content controls-box">
+                <div class="controls-box__item">
+                    <span>Start</span><br />
+                    <div class="gamepad-button-container">
+                        <div class="gamepad-button gamepad-button_a">
+                            <span>A</span>
+                        </div>
+                    </div>
+                </div>
+                <div class="controls-box__item">
+                    <span>Stop</span><br />
+                    <div class="gamepad-button-container">
+                        <div class="gamepad-button gamepad-button_b">
+                            <span>B</span>
+                        </div>
+                    </div>
+                </div>
+                <div class="controls-box__item">
+                    <span>Previous</span><br />
+                    <div class="gamepad-button-container">
+                        <div class="gamepad-button">
+                            <span>LB</span>
+                        </div>
+                    </div>
+                </div>
+                <div class="controls-box__item">
+                    <span>Next</span><br />
+                    <div class="gamepad-button-container">
+                        <div class="gamepad-button">
+                            <span>RB</span>
+                        </div>
+                    </div>
+                </div>
+                <div class="controls-box__item">
+                    <span>(Un-) lock</span><br />
+                    <div class="gamepad-button-container">
+                        <div class="gamepad-button gamepad-button_x">
+                            <span>X</span>
+                        </div>
+                        <span> + </span>
+                        <div class="gamepad-button gamepad-button_y">
+                            <span>Y</span>
+                        </div>
+                    </div>
+                </div>
+            </div>
+            <div id="device-box" class="content">
+                <div class="message">
+                    <span id="message"></span>
+                </div>
+                <div id="device-list" class="device-list"></div>
+            </div>
         </div>
     </main>
 
diff --git a/js/scripts.js b/js/scripts.js
index efe8fe6..203c8dd 100644
--- a/js/scripts.js
+++ b/js/scripts.js
@@ -342,14 +342,14 @@ class VibrationMaster {
     };
     update = () => {
         if (this.gamepads.length > 0) {
-            this.$MESSAGE_BOX.classList.add('hidden');
-            this.$DEVICE_BOX.classList.remove('hidden');
+            this.$MESSAGE.classList.add('hidden');
+            this.$DEVICE_LIST.classList.remove('hidden');
             this.gamepads.forEach(gamepad => {
                 gamepad.update();
             });
         } else {
-            this.$MESSAGE_BOX.classList.remove('hidden');
-            this.$DEVICE_BOX.classList.add('hidden');
+            this.$MESSAGE.classList.remove('hidden');
+            this.$DEVICE_LIST.classList.add('hidden');
         };
     };
     draw = () => {
@@ -429,9 +429,8 @@ class VibrationMaster {
     };
 
     #DOMs = () => {
-        this.$MESSAGE_BOX = document.querySelector('#message-box');
-        this.$MESSAGE = document.querySelector('#message');
         this.$DEVICE_BOX = document.querySelector('#device-box');
+        this.$MESSAGE = document.querySelector('#message');
         this.$DEVICE_LIST = document.querySelector('#device-list');
         this.$PATTERN_BOX = document.querySelector('#pattern-box');
         this.$PATTERN_LIST = document.querySelector('#pattern-list');