From ae9275647f7ae55eed79aec95f4a0986142b3a73 Mon Sep 17 00:00:00 2001
From: Gator <gator@ariona.fr>
Date: Fri, 16 Dec 2022 10:16:50 +0100
Subject: [PATCH] color switching button

---
 src/components/MenuCellProperties.vue | 18 ++++++++++++++++--
 1 file changed, 16 insertions(+), 2 deletions(-)

diff --git a/src/components/MenuCellProperties.vue b/src/components/MenuCellProperties.vue
index b8e42cc..85ee317 100644
--- a/src/components/MenuCellProperties.vue
+++ b/src/components/MenuCellProperties.vue
@@ -6,7 +6,7 @@
         <input
           name="liveColor"
           type="color"
-          @value="cellProperties.liveColor"
+          :value="cellProperties.liveColor"
           @input="updateCellProperties"
         />
       </div>
@@ -19,6 +19,9 @@
           @input="updateCellProperties"
         />
       </div>
+      <div class="form-field">
+        <a name="switchColor" @click="switchColor">Switch Colors</a>
+      </div>
       <div class="form-field">
         <label>Cell size</label>
         <input
@@ -26,7 +29,7 @@
           type="number"
           min="1"
           :value="cellProperties.size"
-          @input="updateCellProperties"
+          @click="updateCellProperties"
         />
       </div>
     </form>
@@ -58,6 +61,17 @@
         this.setBoardWidth();
         this.setBoardHeight();
       },
+      switchColor() {
+        [this.cellProperties["liveColor"], this.cellProperties["deadColor"]] = [
+          this.cellProperties["deadColor"],
+          this.cellProperties["liveColor"],
+        ];
+      },
     },
   };
 </script>
+<style scoped>
+  a:hover {
+    cursor: pointer;
+  }
+</style>