2022-01-09 11:47:18 +01:00
|
|
|
<template>
|
|
|
|
<MenuRow row-title="Elementary Cellular Automata">
|
|
|
|
<form>
|
2022-01-11 13:16:42 +01:00
|
|
|
<div class="form-field">
|
2022-11-29 17:31:01 +01:00
|
|
|
<label
|
|
|
|
>Initial state presets
|
|
|
|
<br />
|
2022-01-11 13:16:42 +01:00
|
|
|
<select
|
|
|
|
name="initial1dStates"
|
|
|
|
value="initial1dStates"
|
|
|
|
@input="updateInitial1dState"
|
|
|
|
>
|
|
|
|
<option
|
|
|
|
v-for="state in initial1dStates"
|
2022-01-12 19:10:16 +01:00
|
|
|
:key="'preset1d' + state.id"
|
2022-01-11 13:16:42 +01:00
|
|
|
:value="state.id"
|
2022-11-29 17:31:01 +01:00
|
|
|
>
|
|
|
|
{{ state.name }}
|
2022-01-11 13:16:42 +01:00
|
|
|
</option>
|
|
|
|
</select>
|
|
|
|
</label>
|
|
|
|
</div>
|
|
|
|
<div class="form-field">
|
|
|
|
<label>Rules</label>
|
|
|
|
</div>
|
2022-01-12 19:10:16 +01:00
|
|
|
<div class="form-field">
|
2022-11-29 17:31:01 +01:00
|
|
|
<label
|
|
|
|
>Rules presets
|
|
|
|
<br />
|
|
|
|
<select name="rules1d" value="rules" @input="update1dRules">
|
2022-01-12 19:10:16 +01:00
|
|
|
<option
|
|
|
|
v-for="(rule, name) in presetRules"
|
|
|
|
:key="'rule1d' + name"
|
|
|
|
:value="name"
|
2022-11-29 17:31:01 +01:00
|
|
|
>
|
|
|
|
{{ name }}
|
2022-01-12 19:10:16 +01:00
|
|
|
</option>
|
|
|
|
</select>
|
|
|
|
</label>
|
|
|
|
</div>
|
|
|
|
<div class="form-field">
|
2022-11-29 17:31:01 +01:00
|
|
|
<a style="cursor: pointer" @click="copy1dRules">copy rules</a>
|
2022-01-12 19:10:16 +01:00
|
|
|
</div>
|
2022-01-10 11:13:44 +01:00
|
|
|
<div
|
2022-01-12 19:10:16 +01:00
|
|
|
v-for="(rule, name) in rules"
|
|
|
|
:key="'rule1d' + name"
|
2022-01-10 11:13:44 +01:00
|
|
|
class="form-field"
|
|
|
|
>
|
2022-11-29 17:31:01 +01:00
|
|
|
<label
|
|
|
|
>{{ name }}
|
2022-01-09 11:47:18 +01:00
|
|
|
<input
|
2022-01-12 19:10:16 +01:00
|
|
|
:value="rule"
|
2022-01-09 11:47:18 +01:00
|
|
|
type="checkbox"
|
2022-01-12 19:10:16 +01:00
|
|
|
:name="name"
|
|
|
|
:checked="rule"
|
|
|
|
@input="update1dSingleRule"
|
2022-11-29 17:31:01 +01:00
|
|
|
/>
|
2022-01-09 11:47:18 +01:00
|
|
|
</label>
|
|
|
|
</div>
|
|
|
|
</form>
|
|
|
|
<div class="form-field">
|
2022-11-29 17:31:01 +01:00
|
|
|
<input type="button" name="start" value="start" @click="draw1d" />
|
2022-01-09 11:47:18 +01:00
|
|
|
<input
|
|
|
|
type="button"
|
|
|
|
name="reset"
|
|
|
|
class="reset"
|
|
|
|
value="reset"
|
2022-01-10 11:13:44 +01:00
|
|
|
@click="reset()"
|
2022-11-29 17:31:01 +01:00
|
|
|
/>
|
2022-01-09 11:47:18 +01:00
|
|
|
</div>
|
|
|
|
</MenuRow>
|
|
|
|
</template>
|
|
|
|
|
|
|
|
<script>
|
2022-11-29 17:31:01 +01:00
|
|
|
import { mapGetters } from "vuex";
|
|
|
|
import MenuRow from "./MenuRow.vue";
|
2022-01-09 11:47:18 +01:00
|
|
|
export default {
|
2022-11-29 17:31:01 +01:00
|
|
|
name: "MenuElementaryCA",
|
2022-01-09 11:47:18 +01:00
|
|
|
components: {
|
2022-11-29 17:31:01 +01:00
|
|
|
MenuRow,
|
2022-01-09 11:47:18 +01:00
|
|
|
},
|
2022-01-10 11:13:44 +01:00
|
|
|
data() {
|
2022-01-11 13:16:42 +01:00
|
|
|
// TODO: Why not a getter in the store?
|
2022-01-10 11:13:44 +01:00
|
|
|
return {
|
2022-01-12 19:10:16 +01:00
|
|
|
presetRules: {
|
2022-11-29 17:31:01 +01:00
|
|
|
"rule 73": {
|
|
|
|
100: 0,
|
|
|
|
101: 0,
|
|
|
|
110: 1,
|
|
|
|
111: 0,
|
|
|
|
"011": 1,
|
|
|
|
"010": 0,
|
|
|
|
"001": 0,
|
|
|
|
"000": 1,
|
|
|
|
},
|
|
|
|
"rule 86": {
|
|
|
|
100: 1,
|
|
|
|
101: 0,
|
|
|
|
110: 0,
|
|
|
|
111: 1,
|
|
|
|
"011": 0,
|
|
|
|
"010": 1,
|
|
|
|
"001": 0,
|
|
|
|
"000": 1,
|
|
|
|
},
|
|
|
|
"rule 90": {
|
|
|
|
100: 1,
|
|
|
|
101: 0,
|
|
|
|
110: 1,
|
|
|
|
111: 0,
|
|
|
|
"011": 0,
|
|
|
|
"010": 0,
|
|
|
|
"001": 1,
|
|
|
|
"000": 0,
|
|
|
|
},
|
|
|
|
"rule 45?": {
|
|
|
|
100: 0,
|
|
|
|
101: 0,
|
|
|
|
110: 1,
|
|
|
|
111: 0,
|
|
|
|
"011": 1,
|
|
|
|
"010": 0,
|
|
|
|
"001": 1,
|
|
|
|
"000": 1,
|
|
|
|
},
|
|
|
|
"rule 54?": {
|
|
|
|
100: 1,
|
|
|
|
101: 0,
|
|
|
|
110: 1,
|
|
|
|
111: 1,
|
|
|
|
"011": 0,
|
|
|
|
"010": 1,
|
|
|
|
"001": 1,
|
|
|
|
"000": 0,
|
|
|
|
},
|
|
|
|
"unknown rule": {
|
|
|
|
100: 0,
|
|
|
|
101: 0,
|
|
|
|
110: 0,
|
|
|
|
111: 1,
|
|
|
|
"011": 0,
|
|
|
|
"010": 0,
|
|
|
|
"001": 1,
|
|
|
|
"000": 1,
|
|
|
|
},
|
2022-01-12 19:10:16 +01:00
|
|
|
},
|
2022-01-11 13:16:42 +01:00
|
|
|
initial1dStates: [
|
2022-11-29 17:31:01 +01:00
|
|
|
{
|
|
|
|
id: "onecell",
|
|
|
|
name: "One cell at center",
|
|
|
|
description: "State with a single cell in the middle",
|
2022-01-11 13:16:42 +01:00
|
|
|
},
|
|
|
|
{
|
2022-11-29 17:31:01 +01:00
|
|
|
id: "random",
|
|
|
|
name: "Random cell",
|
|
|
|
description: "State populated with random cells",
|
|
|
|
},
|
|
|
|
],
|
|
|
|
};
|
2022-01-10 11:13:44 +01:00
|
|
|
},
|
2022-01-11 13:16:42 +01:00
|
|
|
computed: {
|
|
|
|
...mapGetters({
|
2022-11-29 17:31:01 +01:00
|
|
|
initial1dState: "getInitial1dState",
|
|
|
|
rules: "get1dRules",
|
2022-01-12 19:10:16 +01:00
|
|
|
}),
|
|
|
|
rules1dFileName() {
|
2022-11-29 17:31:01 +01:00
|
|
|
return (
|
|
|
|
Object.keys(this.rules)
|
|
|
|
.map((index) => {
|
|
|
|
return this.rules[index];
|
|
|
|
})
|
|
|
|
.join("_") + ".json"
|
|
|
|
);
|
2022-01-12 19:10:16 +01:00
|
|
|
},
|
2022-01-11 13:16:42 +01:00
|
|
|
},
|
2022-01-09 11:47:18 +01:00
|
|
|
methods: {
|
2022-11-29 17:31:01 +01:00
|
|
|
copy1dRules() {
|
|
|
|
const rules = JSON.stringify(this.rules);
|
|
|
|
navigator.clipboard.writeText(rules);
|
2022-01-12 19:10:16 +01:00
|
|
|
},
|
2022-01-11 13:16:42 +01:00
|
|
|
isCurrentPreset(event) {
|
2022-11-29 17:31:01 +01:00
|
|
|
const elem = event.target;
|
|
|
|
return this.initialState === elem.value;
|
2022-01-11 13:16:42 +01:00
|
|
|
},
|
2022-01-12 19:10:16 +01:00
|
|
|
update1dSingleRule(event) {
|
2022-11-29 17:31:01 +01:00
|
|
|
const elem = event.target;
|
|
|
|
const value = elem.checked ? 1 : 0;
|
|
|
|
const data = { rule: elem.name, value: value };
|
|
|
|
this.$store.commit("update1dSingleRule", data);
|
2022-01-12 19:10:16 +01:00
|
|
|
},
|
|
|
|
update1dRules(event) {
|
2022-11-29 17:31:01 +01:00
|
|
|
const elem = event.target;
|
|
|
|
const name = elem.value;
|
|
|
|
const rules = this.presetRules[name];
|
2022-01-12 19:10:16 +01:00
|
|
|
Object.keys(rules).map((index) => {
|
2022-11-29 17:31:01 +01:00
|
|
|
const data = { rule: index, value: rules[index] };
|
|
|
|
this.$store.commit("update1dSingleRule", data);
|
|
|
|
});
|
2022-01-09 11:47:18 +01:00
|
|
|
},
|
2022-01-11 13:16:42 +01:00
|
|
|
updateInitial1dState(event) {
|
2022-11-29 17:31:01 +01:00
|
|
|
const elem = event.target;
|
|
|
|
this.$store.commit("setInitial1dState", elem.value);
|
2022-01-11 13:16:42 +01:00
|
|
|
},
|
2022-01-09 11:47:18 +01:00
|
|
|
draw1d() {
|
2022-11-29 17:31:01 +01:00
|
|
|
this.$root.$store.state.drawing = 1;
|
|
|
|
this.$root.$emit("draw1d");
|
2022-01-09 11:47:18 +01:00
|
|
|
},
|
2022-01-10 11:13:44 +01:00
|
|
|
reset() {
|
2022-11-29 17:31:01 +01:00
|
|
|
this.$root.$emit("reset");
|
2022-01-10 11:13:44 +01:00
|
|
|
},
|
2022-11-29 17:31:01 +01:00
|
|
|
},
|
|
|
|
};
|
2022-01-09 11:47:18 +01:00
|
|
|
</script>
|
2022-01-12 19:10:16 +01:00
|
|
|
<style>
|
2022-11-29 17:31:01 +01:00
|
|
|
.menu-row a {
|
2022-01-12 19:10:16 +01:00
|
|
|
color: white;
|
|
|
|
font-weight: bold;
|
|
|
|
text-decoration: none;
|
|
|
|
font-size: small;
|
2022-11-29 17:31:01 +01:00
|
|
|
}
|
2022-01-12 19:10:16 +01:00
|
|
|
</style>
|