color switching button

This commit is contained in:
Ali Gator 2022-12-16 10:16:50 +01:00
parent 2d57acd0a5
commit ae9275647f

View File

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