Layer submenu implemented

public/index.js

@@ -157,7 +157,7 @@ const Cube = function (width, depth, height) {
             this.frames[this.currentFrame].layers[layerIndex][index] = state;
         }
 
-        for (const row of this.html.children.item(this.height - layerIndex - 1).children) {
+        for (const row of this.html.children.item(this.height - layerIndex - 1).querySelectorAll('.row')) {
             for (const led of row.children) {
                 this._setLed(led, state);
             }
@@ -169,7 +169,7 @@ const Cube = function (width, depth, height) {
      */
     this.setLedColor = function (color) {
         for (const layer of this.html.children) {
-            for (const row of layer.children) {
+            for (const row of layer.querySelectorAll('.row')) {
                 for (const led of row.children) {
                     for (const cssClass of COLOR_CLASS) {
                         led.classList.remove(cssClass);
@@ -238,7 +238,18 @@ const Cube = function (width, depth, height) {
     
                 layerElement.appendChild(row);
             }
-    
+
+            const layerIndex = this.height - z - 1;
+
+            const submenu = new LayerSubmenu(layerElement);
+            submenu.onLayerOn = () => {
+                this.setLayer(layerIndex, true);
+            }
+            submenu.onLayerOff = () => {
+                this.setLayer(layerIndex, false);
+            }
+            submenu.init();
+
             this.html.appendChild(layerElement);
         }
     }
@@ -256,6 +267,55 @@ const Cube = function (width, depth, height) {
     }
 }
 
+/**
+ * @param {HTMLElement} layer 
+ */
+const LayerSubmenu = function (layer) {
+    this.layer = layer;
+    this.html = document.createElement('div');
+    this.buttonLayerOn = document.createElement('button');
+    this.buttonLayerOff = document.createElement('button');
+
+    this,onLayerOn = function () {}
+    this.onLayerOff = function () {}
+
+    this.init = function () {
+        this.html.classList.add('layer-submenu');
+        
+        const line = document.createElement('div');
+        line.classList.add('submenu-line');
+        this.html.appendChild(line);
+
+        const buttons = document.createElement('div');
+        buttons.classList.add('layer-buttons');
+        this.html.appendChild(buttons);
+
+        this.buttonLayerOn.classList.add('layer-button', 'layer-button-on');
+        this.buttonLayerOn.title = 'Alle LEDs an';
+        buttons.appendChild(this.buttonLayerOn);
+
+        this.buttonLayerOn.addEventListener(
+            'click',
+            () => {
+                this.onLayerOn();
+            }
+        );
+
+        this.buttonLayerOff.classList.add('layer-button', 'layer-button-off');
+        this.buttonLayerOff.title = 'Alle LEDs aus';
+        buttons.appendChild(this.buttonLayerOff);
+
+        this.buttonLayerOff.addEventListener(
+            'click',
+            () => {
+                this.onLayerOff();
+            }
+        );
+
+        this.layer.appendChild(this.html);
+    }
+}
+
 /**
  * @param {string} id 
  */

public/style.css

@@ -149,36 +149,6 @@ button:hover {
     padding-bottom: 200px;
 }
 
-.layer {
-    position: relative;
-    transform: scale(1.0, 0.4) rotate(-45deg);
-    margin-bottom: -40%;
-    border: 2px solid transparent;
-    border-radius: 20px;
-    background-color: black;
-}
-
-.layer:hover {
-    border: 2px solid white;
-    border-radius: 20px;
-}
-
-.layer-submenu {
-    position: absolute;
-    left: 67%;
-    bottom: -74px;
-    display: flex;
-    align-items: center;
-    transform: rotate(45deg) scale(1.0, 2.1);
-    visibility: hidden;
-    padding-left: 58px;
-}
-
-.submenu-line {
-    border: 1px solid white;
-    width: 80px;
-}
-
 .selector {
     position: relative;
 }
@@ -227,14 +197,44 @@ button:hover {
     color: black;
 }
 
+.layer {
+    position: relative;
+    transform: scale(1.0, 0.4) rotate(-45deg);
+    margin-bottom: -40%;
+    border: 2px solid transparent;
+    border-radius: 20px;
+    background-color: black;
+}
+
+.layer:hover {
+    border: 2px solid white;
+    border-radius: 20px;
+}
+
+.layer-submenu {
+    position: absolute;
+    left: 67%;
+    bottom: -74px;
+    display: flex;
+    align-items: center;
+    transform: rotate(45deg) scale(1.0, 3);
+    visibility: hidden;
+    padding-left: 58px;
+}
+
+.submenu-line {
+    border: 0.25px solid white;
+    width: 80px;
+}
+
 .layer:hover .layer-submenu {
     visibility: visible;
 }
 
 .layer-buttons {
     display: flex;
-    border: solid 2px white;
-    padding: 10px;
+    border: solid 0.5px white;
+    padding: 5px 10px;
     border-radius: 10px;
 }
 
@@ -247,11 +247,11 @@ button:hover {
     cursor: pointer;
 }
 
-.layer-button-on {
+.layer-button-on, .layer-button-on:hover {
     background-color: white;
 }
 
-.layer-button-off {
+.layer-button-off, .layer-button-off:hover {
     background-color: black;
 }