86 lines
2.2 KiB
Vue
86 lines
2.2 KiB
Vue
<script setup>
|
|
import MenuRow from "./MenuRow.vue";
|
|
import { globalStore } from "../stores/index.js";
|
|
import { preset2dRules } from "../modules/preset.js";
|
|
import { shallowRef } from "vue";
|
|
|
|
const store = globalStore();
|
|
|
|
const uploadedPicture = shallowRef(null);
|
|
const img = new Image();
|
|
|
|
// TODO : I have no idea why this works
|
|
const preparePicture = () => {
|
|
const file = uploadedPicture.value.files[0];
|
|
if (!file || file.type.indexOf("image/") !== 0) return;
|
|
|
|
if (FileReader && file) {
|
|
const reader = new FileReader();
|
|
reader.readAsDataURL(file);
|
|
|
|
reader.onload = (event) => {
|
|
img.onload = () => {
|
|
store.picture.width = img.width;
|
|
store.picture.height = img.height;
|
|
};
|
|
store.picture.src = event.target.result;
|
|
store.toggle2dDrawFromPicture();
|
|
};
|
|
|
|
reader.onerror = () => {
|
|
console.log(reader.error);
|
|
};
|
|
}
|
|
};
|
|
|
|
const update2dRules = (event) => {
|
|
const elem = event.target;
|
|
const id = elem.value;
|
|
const newRuleset = preset2dRules.find((ruleset) => {
|
|
return ruleset.id === id;
|
|
});
|
|
store.selected2dRules = newRuleset;
|
|
};
|
|
</script>
|
|
|
|
<template>
|
|
<MenuRow row-title="2D Cellular Automaton">
|
|
<div class="form-field">
|
|
<label>Start from empty board</label>
|
|
<input
|
|
type="button"
|
|
name="start2d"
|
|
value="▶"
|
|
@click="store.toggleDraw2d()"
|
|
/>
|
|
</div>
|
|
<div class="form-field">
|
|
<label>Start from last result</label>
|
|
<input type="button" value="▶" @click="store.toggleDraw2dLast()" />
|
|
</div>
|
|
<div class="form-field">
|
|
<label>Start from picture</label><br />
|
|
<input ref="uploadedPicture" type="file" @change="preparePicture" />
|
|
</div>
|
|
<div class="form-field">
|
|
<label>
|
|
Rules
|
|
<br />
|
|
<select
|
|
name="preset2dRules"
|
|
:value="store.selected2dRules.id"
|
|
@input="update2dRules"
|
|
>
|
|
<option
|
|
v-for="(state, index) in preset2dRules"
|
|
:key="'initial-state-elementary' + index"
|
|
:value="state.id"
|
|
>
|
|
{{ state.name }}
|
|
</option>
|
|
</select>
|
|
</label>
|
|
</div>
|
|
</MenuRow>
|
|
</template>
|