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 class="form-field">
<label
>Rules presets
>Rules presets
<br />
<select
name="ruleset-elementary"
@ -51,7 +51,7 @@
class="form-field"
>
<label
>{{ name }}
>{{ name }}
<input
:value="rule"
type="checkbox"
@ -76,170 +76,77 @@
</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,
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"
);
import { mapActions, mapState, mapWritableState } from 'pinia'
import { presetRules, initialStates } from "./preset.js"
import { globalStore } from "../stores/index.js";
import MenuRow from "./MenuRow.vue";
export default {
name: "MenuElementaryCA",
components: {
MenuRow,
},
},
methods: {
copyRules() {
const rules = JSON.stringify(this.rules);
navigator.clipboard.writeText(rules);
data() {
return {
presetRules: presetRules,
initialStates: initialStates,
};
},
isCurrentPreset(event) {
const elem = event.target;
return this.initialState === elem.value;
computed: {
...mapWritableState(
globalStore, {
initialState: "initial1dState",
}
),
...mapState(
globalStore, {
rules: "rules1d"
}
),
rules1dFileName() {
return (
Object.keys(this.rules)
.map((index) => {
return this.rules[index];
})
.join("_") + ".json"
);
},
},
updateSingleRule(event) {
const elem = event.target;
const value = elem.checked ? 1 : 0;
const data = { rule: elem.name, value: value };
this.$store.commit("update1dSingleRule", data);
methods: {
...mapActions(globalStore, ["draw1d", "reset"]),
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;
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>
<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>

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 }