explorata/src/components/Menu2dCA.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>