57 lines
1.1 KiB
Vue
57 lines
1.1 KiB
Vue
<script setup>
|
|
import { globalStore } from "../stores/index.js";
|
|
import { defineProps } from "vue";
|
|
|
|
const props = defineProps(
|
|
{
|
|
windowWidth: {
|
|
type: Number,
|
|
default: 800
|
|
}
|
|
}
|
|
);
|
|
const store = globalStore();
|
|
</script>
|
|
|
|
<template>
|
|
<div class="reset-menu">
|
|
<div v-if="props.windowWidth >= 800" class="desktop-title">
|
|
Cellular Automata Explorer
|
|
</div>
|
|
<div class="reset-input">
|
|
<div class="loop">
|
|
<label>
|
|
loop
|
|
<input
|
|
:value="store.loop"
|
|
type="checkbox"
|
|
:checked="store.loop"
|
|
@input="store.toggleLoop()"
|
|
/>
|
|
</label>
|
|
</div>
|
|
<input
|
|
type="button"
|
|
name="next"
|
|
class="next"
|
|
value="⇨"
|
|
@click="store.toggleNext()"
|
|
/>
|
|
<input
|
|
type="button"
|
|
name="stop"
|
|
class="stop"
|
|
value="⏹"
|
|
@click="store.toggleStop()"
|
|
/>
|
|
<input
|
|
type="button"
|
|
name="reset"
|
|
class="reset"
|
|
value="⌫"
|
|
@click="store.toggleReset()"
|
|
/>
|
|
</div>
|
|
</div>
|
|
</template>
|