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>