From 666d300b9e9c70d05ba0249f8e3ad1cf20c6d398 Mon Sep 17 00:00:00 2001
From: Michiel van der Geest <hello@michielvandergeest.com>
Date: Thu, 26 Sep 2024 09:51:29 +0200
Subject: [PATCH] Updated z-index on button.

---
 src/components/Button.js   |  4 ----
 src/pages/FocusHandling.js | 24 +++++++++++++++---------
 2 files changed, 15 insertions(+), 13 deletions(-)

diff --git a/src/components/Button.js b/src/components/Button.js
index 4d5c630..9347445 100644
--- a/src/components/Button.js
+++ b/src/components/Button.js
@@ -26,7 +26,6 @@ export default Blits.Component('Button', {
       :effects="[$shader('radius', {radius: 20})]"
       :alpha.transition="$alpha"
       :scale.transition="$scale"
-      :z="$zIndex"
       :rotation="$rotate"
     >
     </Element>
@@ -36,7 +35,6 @@ export default Blits.Component('Button', {
     return {
       alpha: 0.4,
       scale: 1,
-      zIndex: 1,
       rotate: 0,
     }
   },
@@ -45,13 +43,11 @@ export default Blits.Component('Button', {
       this.$log.info(`Button with color ${this.color} received focus`)
       this.alpha = 1
       this.scale = this.scale === 1 ? 1.2 : 1
-      this.zIndex = 100
     },
     unfocus() {
       this.$log.info(`Button with color ${this.color} lost focus`)
       this.alpha = 0.4
       this.scale = 1
-      this.zIndex = 1
       this.rotate = 0
     },
   },
diff --git a/src/pages/FocusHandling.js b/src/pages/FocusHandling.js
index 67449e1..f78bcad 100644
--- a/src/pages/FocusHandling.js
+++ b/src/pages/FocusHandling.js
@@ -27,15 +27,15 @@ export default Blits.Component('FocusHandling', {
   template: `
     <Element>
       <Element x="300" y="150">
-        <Button color="#ef4444" x="0" ref="button1" />
-        <Button color="#f97316" x="320" ref="button2" />
-        <Button color="#84cc16" x="640" ref="button3" />
-        <Button color="#10b981" x="0" y="100" ref="button4" />
-        <Button color="#06b6d4" y="100" x="320" ref="button5" />
-        <Button color="#3b82f6" y="100" x="640" ref="button6" />
-        <Button color="#8b5cf6" y="200" x="0" ref="button7" />
-        <Button color="#d946ef" y="200" x="320" ref="button8" />
-        <Button color="#f43f5e" y="200" x="640" ref="button9" />
+        <Button color="#ef4444" x="0" ref="button1" :z="$focused === 1 ? 1 : 0" />
+        <Button color="#f97316" x="320" ref="button2" :z="$focused === 2 ? 1 : 0" />
+        <Button color="#84cc16" x="640" ref="button3" :z="$focused === 3 ? 1 : 0" />
+        <Button color="#10b981" x="0" y="100" ref="button4" :z="$focused === 4 ? 1 : 0" />
+        <Button color="#06b6d4" y="100" x="320" ref="button5" :z="$focused === 5 ? 1 : 0" />
+        <Button color="#3b82f6" y="100" x="640" ref="button6" :z="$focused === 6 ? 1 : 0" />
+        <Button color="#8b5cf6" y="200" x="0" ref="button7" :z="$focused === 7 ? 1 : 0" />
+        <Button color="#d946ef" y="200" x="320" ref="button8" :z="$focused === 8 ? 1 : 0" />
+        <Button color="#f43f5e" y="200" x="640" ref="button9" :z="$focused === 9 ? 1 : 0" />
       </Element>
       <Menu ref="menu" />
     </Element>
@@ -74,4 +74,10 @@ export default Blits.Component('FocusHandling', {
       if (menu && menu.$focus) menu.$focus()
     },
   },
+  methods: {
+    zIndex(index) {
+      console.log(index)
+      return this.focused === index ? 1 : 0
+    },
+  },
 })