rules preset in separate file

This commit is contained in:
Ali Gator 2022-12-02 15:52:43 +01:00
parent aa66c523a3
commit 239be6204e
2 changed files with 164 additions and 162 deletions

View File

@ -25,7 +25,7 @@
</div> </div>
<div class="form-field"> <div class="form-field">
<label <label
>Rules presets >Rules presets
<br /> <br />
<select <select
name="ruleset-elementary" name="ruleset-elementary"
@ -51,7 +51,7 @@
class="form-field" class="form-field"
> >
<label <label
>{{ name }} >{{ name }}
<input <input
:value="rule" :value="rule"
type="checkbox" type="checkbox"
@ -76,170 +76,77 @@
</template> </template>
<script> <script>
import { mapGetters } from "vuex"; import { mapActions, mapState, mapWritableState } from 'pinia'
import MenuRow from "./MenuRow.vue"; import { presetRules, initialStates } from "./preset.js"
export default { import { globalStore } from "../stores/index.js";
name: "MenuElementaryCA", import MenuRow from "./MenuRow.vue";
components: { export default {
MenuRow, name: "MenuElementaryCA",
}, components: {
data() { MenuRow,
// 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: {
100: 1,
101: 0,
110: 0,
111: 1,
"011": 0,
"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 45?",
rules: {
100: 0,
101: 0,
110: 1,
111: 0,
"011": 1,
"010": 0,
"001": 1,
"000": 1,
},
},
{
name: "rule 54?",
rules: {
100: 1,
101: 0,
110: 1,
111: 1,
"011": 0,
"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",
},
{
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"
);
}, },
}, data() {
methods: { return {
copyRules() { presetRules: presetRules,
const rules = JSON.stringify(this.rules); initialStates: initialStates,
navigator.clipboard.writeText(rules); };
}, },
isCurrentPreset(event) { computed: {
const elem = event.target; ...mapWritableState(
return this.initialState === elem.value; globalStore, {
initialState: "initial1dState",
}
),
...mapState(
globalStore, {
rules: "rules1d"
}
),
rules1dFileName() {
return (
Object.keys(this.rules)
.map((index) => {
return this.rules[index];
})
.join("_") + ".json"
);
},
}, },
updateSingleRule(event) { methods: {
const elem = event.target; ...mapActions(globalStore, ["draw1d", "reset"]),
const value = elem.checked ? 1 : 0; copyRules() {
const data = { rule: elem.name, value: value }; const rules = JSON.stringify(this.rules);
this.$store.commit("update1dSingleRule", data); 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;
this.rules.rules[elem.name] = value;
},
updateRules(event) {
const elem = event.target;
const name = elem.value;
const newRuleset = this.presetRules.find((ruleset) => {
return ruleset.name === name;
});
this.rules.rules = newRuleset.rules
},
updateInitialState(event) {
const elem = event.target;
this.initial1dState = elem.value
},
}, },
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);
});
},
updateInitialState(event) {
const elem = event.target;
this.$store.commit("setInitial1dState", elem.value);
},
draw1d() {
this.$store.dispatch("draw1d");
},
reset() {
this.$store.dispatch("reset");
},
},
};
</script> </script>
<style> <style>
.menu-row a { .menu-row a {
color: white; color: white;
font-weight: bold; font-weight: bold;
text-decoration: none; text-decoration: none;
font-size: small; font-size: small;
} }
</style> </style>

95
src/components/preset.js Normal file
View File

@ -0,0 +1,95 @@
const 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: {
100: 1,
101: 0,
110: 0,
111: 1,
"011": 0,
"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 45?",
rules: {
100: 0,
101: 0,
110: 1,
111: 0,
"011": 1,
"010": 0,
"001": 1,
"000": 1,
},
},
{
name: "rule 54?",
rules: {
100: 1,
101: 0,
110: 1,
111: 1,
"011": 0,
"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,
},
},
]
const 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",
},
]
export { presetRules, initialStates }