explorata/src/components/MenuElementaryCA.vue

146 lines
3.6 KiB
Vue
Raw Normal View History

<template>
2022-12-04 18:38:50 +01:00
<MenuRow row-title="Elementary Automaton">
<form>
2022-12-06 17:41:32 +01:00
<div class="form-field">
<input
type="button"
name="start"
value="start"
@click="toggleDraw1d()"
/>
</div>
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"
2022-12-04 18:17:14 +01:00
:value="ruleset.name"
2022-12-04 18:38:50 +01:00
@input="updateRuleset"
>
<option
2022-12-04 18:38:50 +01:00
v-for="(ruleset, index) in presetRuleset"
2022-12-01 20:37:03 +01:00
:key="'ruleset-preset-elementary-' + index"
:value="ruleset.name"
>
{{ ruleset.name }}
</option>
</select>
</label>
</div>
<div class="form-field">
2022-12-04 18:38:50 +01:00
<a style="cursor: pointer" @click="copyRuleset">copy rules</a>
</div>
2022-01-10 11:13:44 +01:00
<div
2022-12-04 18:38:50 +01:00
v-for="(rule, name, index) in ruleset.rules"
2022-12-01 20:37:03 +01:00
: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>
</MenuRow>
</template>
<script>
2022-12-02 17:11:34 +01:00
import { mapActions, mapWritableState } from "pinia";
2022-12-04 18:38:50 +01:00
import { presetRuleset, initialStates } from "../modules/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 {
2022-12-04 18:38:50 +01:00
presetRuleset: presetRuleset,
2022-12-02 15:52:43 +01:00
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",
2022-12-04 18:38:50 +01:00
ruleset: "ruleset1d",
2022-12-02 17:11:34 +01:00
}),
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 (
2022-12-04 18:38:50 +01:00
Object.keys(this.ruleset)
2022-12-02 17:11:34 +01:00
.map((index) => {
2022-12-04 18:38:50 +01:00
return this.ruleset[index];
2022-12-02 17:11:34 +01:00
})
.join("_") + ".json"
2022-12-02 15:52:43 +01:00
);
},
},
2022-12-02 15:52:43 +01:00
methods: {
2022-12-04 17:24:45 +01:00
...mapActions(globalStore, ["toggleDraw1d"]),
2022-12-04 18:38:50 +01:00
copyRuleset() {
const newRuleset = JSON.stringify(this.ruleset);
navigator.clipboard.writeText(newRuleset);
2022-12-02 15:52:43 +01:00
},
isCurrentPreset(event) {
const elem = event.target;
return this.initialState === elem.value;
},
updateSingleRule(event) {
const elem = event.target;
const value = elem.checked ? 1 : 0;
2022-12-04 18:38:50 +01:00
this.ruleset.rules[elem.name] = value;
2022-12-02 15:52:43 +01:00
},
2022-12-04 18:38:50 +01:00
updateRuleset(event) {
2022-12-02 15:52:43 +01:00
const elem = event.target;
const name = elem.value;
2022-12-04 18:38:50 +01:00
const newRuleset = this.presetRuleset.find((ruleset) => {
2022-12-02 15:52:43 +01:00
return ruleset.name === name;
});
2022-12-04 18:38:50 +01:00
this.ruleset = newRuleset;
2022-12-02 15:52:43 +01:00
},
updateInitialState(event) {
const elem = event.target;
2022-12-02 17:48:28 +01:00
this.initialState = 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>