58 lines
1.5 KiB
Vue
58 lines
1.5 KiB
Vue
<script setup>
|
|
import MainMenu from "./components/MainMenu.vue";
|
|
import CanvasBoard from "./components/CanvasBoard.vue";
|
|
import MenuReset from "./components/MenuReset.vue";
|
|
import { globalStore } from "./stores/index.js";
|
|
import { nextTick, onBeforeUnmount, onMounted, ref } from "vue";
|
|
|
|
const store = globalStore();
|
|
|
|
const windowWidth = ref(window.innerWidth);
|
|
|
|
const toggleMainMenu = () => {
|
|
store.setMainMenu(!store.mainMenu);
|
|
};
|
|
|
|
const onResize = () => {
|
|
nextTick(() => {
|
|
windowWidth.value = window.innerWidth;
|
|
// TODO: changing the width will clear the canvas. Find something else
|
|
store.renderer.resize(window.innerWidth, window.innerHeight);
|
|
store.setBoardWidth();
|
|
store.setBoardHeight();
|
|
});
|
|
};
|
|
|
|
onMounted(() => {
|
|
nextTick(() => {
|
|
window.addEventListener("resize", onResize);
|
|
});
|
|
});
|
|
|
|
onBeforeUnmount(() => {
|
|
window.removeEventListener("resize", onResize);
|
|
});
|
|
</script>
|
|
|
|
<template>
|
|
<main>
|
|
<h1
|
|
v-if="store.mainMenu || windowWidth <= 800"
|
|
id="main-title"
|
|
class="main-title"
|
|
>
|
|
<span id="burger-toggle" class="burger-toggle" @click="toggleMainMenu">
|
|
{{ store.mainMenu == true ? "▼" : "☰" }}
|
|
</span>
|
|
<span>Cellular Automata Explorer</span>
|
|
</h1>
|
|
<div id="container" class="container">
|
|
<MainMenu v-if="store.mainMenu || windowWidth >= 800" class="main-menu" />
|
|
<CanvasBoard />
|
|
</div>
|
|
<MenuReset :window-width="windowWidth" />
|
|
</main>
|
|
</template>
|
|
|
|
<style src="./assets/css/main.css"></style>
|