drawing logic back into component
This commit is contained in:
Gator
@ -11,7 +11,8 @@
|
||||
@input="updateInitialState"
|
||||
>
|
||||
<option
|
||||
v-for="state in initialStates"
|
||||
v-for="(state, index) in initialStates"
|
||||
:key="'initial-state-elementary' + index"
|
||||
:value="state.id"
|
||||
>
|
||||
{{ state.name }}
|
||||
@ -24,7 +25,7 @@
|
||||
</div>
|
||||
<div class="form-field">
|
||||
<label
|
||||
>Rules presets
|
||||
>Rules presets
|
||||
<br />
|
||||
<select
|
||||
name="ruleset-elementary"
|
||||
@ -32,7 +33,8 @@
|
||||
@input="updateRules"
|
||||
>
|
||||
<option
|
||||
v-for="ruleset in presetRules"
|
||||
v-for="(ruleset, index) in presetRules"
|
||||
:key="'ruleset-preset-elementary-' + index"
|
||||
:value="ruleset.name"
|
||||
>
|
||||
{{ ruleset.name }}
|
||||
@ -44,11 +46,12 @@
|
||||
<a style="cursor: pointer" @click="copyRules">copy rules</a>
|
||||
</div>
|
||||
<div
|
||||
v-for="(rule, name) in rules.rules"
|
||||
v-for="(rule, name, index) in rules.rules"
|
||||
:key="'rule-' + index"
|
||||
class="form-field"
|
||||
>
|
||||
<label
|
||||
>{{ name }}
|
||||
>{{ name }}
|
||||
<input
|
||||
:value="rule"
|
||||
type="checkbox"
|
||||
@ -73,33 +76,33 @@
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import { mapGetters } from "vuex";
|
||||
import MenuRow from "./MenuRow.vue";
|
||||
export default {
|
||||
name: "MenuElementaryCA",
|
||||
components: {
|
||||
MenuRow,
|
||||
},
|
||||
data() {
|
||||
// TODO: Why not a getter in the store?
|
||||
return {
|
||||
presetRules: [
|
||||
{
|
||||
name: "rule 73",
|
||||
rules: {
|
||||
100: 0,
|
||||
101: 0,
|
||||
import { mapGetters } from "vuex";
|
||||
import MenuRow from "./MenuRow.vue";
|
||||
export default {
|
||||
name: "MenuElementaryCA",
|
||||
components: {
|
||||
MenuRow,
|
||||
},
|
||||
data() {
|
||||
// TODO: Why not a getter in the store?
|
||||
return {
|
||||
presetRules: [
|
||||
{
|
||||
name: "rule 73",
|
||||
rules: {
|
||||
100: 0,
|
||||
101: 0,
|
||||
110: 1,
|
||||
111: 0,
|
||||
"011": 1,
|
||||
"010": 0,
|
||||
"001": 0,
|
||||
"000": 1,
|
||||
}
|
||||
},
|
||||
{
|
||||
name: "rule 86",
|
||||
rules:{
|
||||
},
|
||||
{
|
||||
name: "rule 86",
|
||||
rules: {
|
||||
100: 1,
|
||||
101: 0,
|
||||
110: 0,
|
||||
@ -108,24 +111,24 @@
|
||||
"010": 1,
|
||||
"001": 0,
|
||||
"000": 1,
|
||||
},
|
||||
},
|
||||
{
|
||||
name: "rule 90",
|
||||
rules: {
|
||||
100: 1,
|
||||
101: 0,
|
||||
110: 1,
|
||||
111: 0,
|
||||
"011": 0,
|
||||
"010": 0,
|
||||
"001": 1,
|
||||
"000": 0,
|
||||
},
|
||||
},
|
||||
{
|
||||
name: "rule 90",
|
||||
rules: {
|
||||
100: 1,
|
||||
101: 0,
|
||||
110: 1,
|
||||
111: 0,
|
||||
"011": 0,
|
||||
"010": 0,
|
||||
"001": 1,
|
||||
"000": 0,
|
||||
},
|
||||
{
|
||||
name: "rule 45?",
|
||||
rules: {
|
||||
},
|
||||
{
|
||||
name: "rule 45?",
|
||||
rules: {
|
||||
100: 0,
|
||||
101: 0,
|
||||
110: 1,
|
||||
@ -134,11 +137,11 @@
|
||||
"010": 0,
|
||||
"001": 1,
|
||||
"000": 1,
|
||||
},
|
||||
},
|
||||
{
|
||||
name: "rule 54?",
|
||||
rules: {
|
||||
},
|
||||
{
|
||||
name: "rule 54?",
|
||||
rules: {
|
||||
100: 1,
|
||||
101: 0,
|
||||
110: 1,
|
||||
@ -147,97 +150,97 @@
|
||||
"010": 1,
|
||||
"001": 1,
|
||||
"000": 0,
|
||||
},
|
||||
},
|
||||
{
|
||||
name: "unknown rule",
|
||||
rules: {
|
||||
100: 0,
|
||||
101: 0,
|
||||
110: 0,
|
||||
111: 1,
|
||||
"011": 0,
|
||||
"010": 0,
|
||||
"001": 1,
|
||||
"000": 1,
|
||||
},
|
||||
}
|
||||
],
|
||||
initialStates: [
|
||||
{
|
||||
id: "onecell",
|
||||
name: "One cell at center",
|
||||
description: "State with a single cell in the middle",
|
||||
},
|
||||
{
|
||||
name: "unknown rule",
|
||||
rules: {
|
||||
100: 0,
|
||||
101: 0,
|
||||
110: 0,
|
||||
111: 1,
|
||||
"011": 0,
|
||||
"010": 0,
|
||||
"001": 1,
|
||||
"000": 1,
|
||||
},
|
||||
{
|
||||
id: "random",
|
||||
name: "Random cell",
|
||||
description: "State populated with random cells",
|
||||
},
|
||||
],
|
||||
};
|
||||
},
|
||||
],
|
||||
initialStates: [
|
||||
{
|
||||
id: "onecell",
|
||||
name: "One cell at center",
|
||||
description: "State with a single cell in the middle",
|
||||
},
|
||||
{
|
||||
id: "random",
|
||||
name: "Random cell",
|
||||
description: "State populated with random cells",
|
||||
},
|
||||
],
|
||||
};
|
||||
},
|
||||
computed: {
|
||||
...mapGetters({
|
||||
initialState: "getInitial1dState",
|
||||
rules: "get1dRules",
|
||||
}),
|
||||
rules1dFileName() {
|
||||
return (
|
||||
Object.keys(this.rules)
|
||||
.map((index) => {
|
||||
return this.rules[index];
|
||||
})
|
||||
.join("_") + ".json"
|
||||
);
|
||||
},
|
||||
computed: {
|
||||
...mapGetters({
|
||||
initialState: "getInitial1dState",
|
||||
rules: "get1dRules",
|
||||
}),
|
||||
rules1dFileName() {
|
||||
return (
|
||||
Object.keys(this.rules)
|
||||
.map((index) => {
|
||||
return this.rules[index];
|
||||
})
|
||||
.join("_") + ".json"
|
||||
);
|
||||
},
|
||||
},
|
||||
methods: {
|
||||
copyRules() {
|
||||
const rules = JSON.stringify(this.rules);
|
||||
navigator.clipboard.writeText(rules);
|
||||
},
|
||||
methods: {
|
||||
copyRules() {
|
||||
const rules = JSON.stringify(this.rules);
|
||||
navigator.clipboard.writeText(rules);
|
||||
},
|
||||
isCurrentPreset(event) {
|
||||
const elem = event.target;
|
||||
return this.initialState === elem.value;
|
||||
},
|
||||
updateSingleRule(event) {
|
||||
const elem = event.target;
|
||||
const value = elem.checked ? 1 : 0;
|
||||
const data = { rule: elem.name, value: value };
|
||||
isCurrentPreset(event) {
|
||||
const elem = event.target;
|
||||
return this.initialState === elem.value;
|
||||
},
|
||||
updateSingleRule(event) {
|
||||
const elem = event.target;
|
||||
const value = elem.checked ? 1 : 0;
|
||||
const data = { rule: elem.name, value: value };
|
||||
this.$store.commit("update1dSingleRule", data);
|
||||
},
|
||||
updateRules(event) {
|
||||
// TODO : change this, awfully confusing
|
||||
const elem = event.target;
|
||||
const name = elem.value;
|
||||
const rules = this.presetRules.find((ruleset) => {
|
||||
return ruleset.name === name;
|
||||
});
|
||||
Object.keys(rules.rules).map((value) => {
|
||||
const data = { name: name, rule: value, value: rules.rules[value] };
|
||||
this.$store.commit("update1dSingleRule", data);
|
||||
},
|
||||
updateRules(event) {
|
||||
// TODO : change this, awfully confusing
|
||||
const elem = event.target;
|
||||
const name = elem.value;
|
||||
const rules = this.presetRules.find(
|
||||
(ruleset) => { return ruleset.name === name }
|
||||
)
|
||||
Object.keys(rules.rules).map((value, index) => {
|
||||
const data = { name: name, rule: value, value: rules.rules[value] };
|
||||
this.$store.commit("update1dSingleRule", data);
|
||||
});
|
||||
},
|
||||
updateInitialState(event) {
|
||||
const elem = event.target;
|
||||
this.$store.commit("setInitial1dState", elem.value);
|
||||
},
|
||||
draw1d() {
|
||||
this.$store.commit("setDrawingStatus", 1);
|
||||
this.$store.dispatch("draw1d");
|
||||
},
|
||||
reset() {
|
||||
this.$store.dispatch("reset");
|
||||
},
|
||||
});
|
||||
},
|
||||
};
|
||||
updateInitialState(event) {
|
||||
const elem = event.target;
|
||||
this.$store.commit("setInitial1dState", elem.value);
|
||||
},
|
||||
draw1d() {
|
||||
/* this.$store.commit("setDrawingStatus", 1); */
|
||||
this.$store.dispatch("draw1d");
|
||||
},
|
||||
reset() {
|
||||
this.$store.dispatch("reset");
|
||||
},
|
||||
},
|
||||
};
|
||||
</script>
|
||||
<style>
|
||||
.menu-row a {
|
||||
color: white;
|
||||
font-weight: bold;
|
||||
text-decoration: none;
|
||||
font-size: small;
|
||||
}
|
||||
.menu-row a {
|
||||
color: white;
|
||||
font-weight: bold;
|
||||
text-decoration: none;
|
||||
font-size: small;
|
||||
}
|
||||
</style>
|
||||
|
||||
Reference in New Issue
Block a user