pinia-migration #2
@ -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
95
src/components/preset.js
Normal 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 }
|
||||
Loading…
Reference in New Issue
Block a user