explorata/src/components/MenuElementaryCA.vue

148 lines
3.7 KiB
Vue
Raw Normal View History

<template>
<MenuRow row-title="Elementary Cellular Automata">
<form>
2022-01-11 13:16:42 +01:00
<div class="form-field">
<label>
Initial state presets
<br />
2022-01-11 13:16:42 +01:00
<select
name="initialStates"
:value="initialState"
@input="updateInitialState"
2022-01-11 13:16:42 +01:00
>
<option
2022-12-01 20:37:03 +01:00
v-for="(state, index) in initialStates"
:key="'initial-state-elementary' + index"
2022-01-11 13:16:42 +01:00
:value="state.id"
>
{{ state.name }}
2022-01-11 13:16:42 +01:00
</option>
</select>
</label>
</div>
<div class="form-field">
<label>Rules</label>
</div>
<div class="form-field">
<label
2022-12-02 17:11:34 +01:00
>Rules presets
<br />
<select
name="ruleset-elementary"
:value="rules.name"
@input="updateRules"
>
<option
2022-12-01 20:37:03 +01:00
v-for="(ruleset, index) in presetRules"
:key="'ruleset-preset-elementary-' + index"
:value="ruleset.name"
>
{{ ruleset.name }}
</option>
</select>
</label>
</div>
<div class="form-field">
<a style="cursor: pointer" @click="copyRules">copy rules</a>
</div>
2022-01-10 11:13:44 +01:00
<div
2022-12-01 20:37:03 +01:00
v-for="(rule, name, index) in rules.rules"
:key="'rule-' + index"
2022-01-10 11:13:44 +01:00
class="form-field"
>
<label
2022-12-02 17:11:34 +01:00
>{{ name }}
<input
:value="rule"
type="checkbox"
:name="name"
:checked="rule"
@input="updateSingleRule"
/>
</label>
</div>
</form>
<div class="form-field">
2022-12-02 17:10:21 +01:00
<input type="button" name="start" value="start" @click="toggleDraw1d()" />
<input
type="button"
name="reset"
class="reset"
value="reset"
2022-12-02 17:10:21 +01:00
@click="toggleReset"
/>
</div>
</MenuRow>
</template>
<script>
2022-12-02 17:11:34 +01:00
import { mapActions, mapWritableState } from "pinia";
import { presetRules, initialStates } from "./preset.js";
2022-12-02 15:52:43 +01:00
import { globalStore } from "../stores/index.js";
import MenuRow from "./MenuRow.vue";
export default {
name: "MenuElementaryCA",
components: {
MenuRow,
2022-12-01 20:37:03 +01:00
},
2022-12-02 15:52:43 +01:00
data() {
return {
presetRules: presetRules,
initialStates: initialStates,
};
2022-12-01 20:37:03 +01:00
},
2022-12-02 15:52:43 +01:00
computed: {
2022-12-02 17:11:34 +01:00
...mapWritableState(globalStore, {
initialState: "initial1dState",
rules: "rules1d",
}),
2022-12-02 15:52:43 +01:00
rules1dFileName() {
2022-12-02 17:10:21 +01:00
// TODO: broken
2022-12-02 15:52:43 +01:00
return (
Object.keys(this.rules)
2022-12-02 17:11:34 +01:00
.map((index) => {
return this.rules[index];
})
.join("_") + ".json"
2022-12-02 15:52:43 +01:00
);
},
},
2022-12-02 15:52:43 +01:00
methods: {
2022-12-02 17:10:21 +01:00
...mapActions(globalStore, ["toggleDraw1d", "toggleReset"]),
2022-12-02 15:52:43 +01:00
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;
});
2022-12-02 17:11:34 +01:00
this.rules.rules = newRuleset.rules;
2022-12-02 15:52:43 +01:00
},
updateInitialState(event) {
const elem = event.target;
2022-12-02 17:11:34 +01:00
this.initial1dState = elem.value;
2022-12-02 15:52:43 +01:00
},
},
2022-12-02 15:52:43 +01:00
};
</script>
<style>
2022-12-02 15:52:43 +01:00
.menu-row a {
2022-12-02 17:11:34 +01:00
color: white;
font-weight: bold;
text-decoration: none;
font-size: small;
2022-12-02 15:52:43 +01:00
}
</style>