switching to composition API
This commit is contained in:
parent
c825752405
commit
7c9d7d2d5b
97
src/App.vue
97
src/App.vue
@ -1,72 +1,55 @@
|
||||
<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;
|
||||
store.canvasWidth = window.innerWidth;
|
||||
store.canvasHeight = window.innerHeight;
|
||||
store.setBoardWidth();
|
||||
store.setBoardHeight();
|
||||
});
|
||||
};
|
||||
|
||||
onMounted(() => {
|
||||
nextTick(() => {
|
||||
window.addEventListener("resize", onResize);
|
||||
});
|
||||
});
|
||||
|
||||
onBeforeUnmount(() => {
|
||||
window.removeEventListener("resize", onResize);
|
||||
});
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<div id="main">
|
||||
<h1 id="main-title">
|
||||
<span id="burger-toggle" @click="toggleMainMenu">{{
|
||||
mainMenu == true ? "▼" : "☰"
|
||||
}}</span>
|
||||
<span id="burger-toggle" @click="toggleMainMenu">
|
||||
{{ store.mainMenu == true ? "▼" : "☰" }}
|
||||
</span>
|
||||
Cellular Automata Explorer
|
||||
</h1>
|
||||
<div id="container">
|
||||
<MainMenu v-if="mainMenu || windowWidth >= 800" />
|
||||
<MainMenu v-if="store.mainMenu || windowWidth >= 800" />
|
||||
<CanvasBoard />
|
||||
</div>
|
||||
<MenuReset row-title="" />
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import MainMenu from "./components/MainMenu.vue";
|
||||
import CanvasBoard from "./components/CanvasBoard.vue";
|
||||
import MenuReset from "./components/MenuReset.vue";
|
||||
import { mapState, mapWritableState, mapActions } from "pinia";
|
||||
import { globalStore } from "./stores/index.js";
|
||||
|
||||
export default {
|
||||
name: "App",
|
||||
components: {
|
||||
MainMenu,
|
||||
MenuReset,
|
||||
CanvasBoard,
|
||||
},
|
||||
data() {
|
||||
return {
|
||||
windowWidth: window.innerWidth,
|
||||
};
|
||||
},
|
||||
computed: {
|
||||
...mapState(globalStore, ["mainMenu", "activeSubMenu"]),
|
||||
...mapWritableState(globalStore, ["canvasWidth", "canvasHeight"]),
|
||||
},
|
||||
mounted() {
|
||||
this.$nextTick(() => {
|
||||
window.addEventListener("resize", this.onResize);
|
||||
});
|
||||
},
|
||||
beforeUnmount() {
|
||||
window.removeEventListener("resize", this.onResize);
|
||||
},
|
||||
methods: {
|
||||
...mapActions(globalStore, [
|
||||
"setBoardWidth",
|
||||
"setBoardHeight",
|
||||
"setMainMenu",
|
||||
]),
|
||||
toggleMainMenu() {
|
||||
this.setMainMenu(!this.mainMenu);
|
||||
},
|
||||
onResize() {
|
||||
this.$nextTick(() => {
|
||||
this.windowWidth = window.innerWidth;
|
||||
this.canvasWidth = window.innerWidth;
|
||||
this.canvasHeight = window.innerHeight;
|
||||
this.setBoardWidth();
|
||||
this.setBoardHeight();
|
||||
});
|
||||
},
|
||||
},
|
||||
};
|
||||
</script>
|
||||
|
||||
<style scope>
|
||||
:root {
|
||||
--dark1: #000000;
|
||||
|
||||
@ -1,19 +1,5 @@
|
||||
<template>
|
||||
<canvas
|
||||
id="board-canvas"
|
||||
ref="board-canvas"
|
||||
:width="canvasWidth"
|
||||
:height="canvasHeight"
|
||||
/>
|
||||
<canvas
|
||||
id="work-canvas"
|
||||
ref="work-canvas"
|
||||
:width="canvasWidth"
|
||||
:height="canvasHeight"
|
||||
/>
|
||||
</template>
|
||||
<script>
|
||||
import { mapActions, mapState, mapWritableState } from "pinia";
|
||||
<script setup>
|
||||
import { onMounted, watch } from "vue";
|
||||
import { globalStore } from "../stores/index.js";
|
||||
import {
|
||||
create1dState,
|
||||
@ -31,224 +17,214 @@
|
||||
import { getRandomInt } from "../modules/common.js";
|
||||
import { boardToPic, picToBoard } from "../modules/picture.js";
|
||||
|
||||
export default {
|
||||
name: "CanvasBoard",
|
||||
data() {
|
||||
return {
|
||||
board: null,
|
||||
canvas: null,
|
||||
workCanvas: null,
|
||||
workCtx: null,
|
||||
ctx: null,
|
||||
available2dRules: {
|
||||
conway: conwayRules,
|
||||
overpopulation: overpopulationRules,
|
||||
loneliness: lonelinessRules,
|
||||
threeborn: threebornRules,
|
||||
highlife: highLifeRules,
|
||||
serviette: servietteRules,
|
||||
},
|
||||
};
|
||||
},
|
||||
computed: {
|
||||
...mapState(globalStore, {
|
||||
loop: "loop",
|
||||
cellProperties: "cellProperties",
|
||||
ruleset: "ruleset1d",
|
||||
refreshRate: "refreshRate",
|
||||
initial1dState: "initial1dState",
|
||||
drawingDirection: "drawingDirection",
|
||||
canDraw: "canDraw",
|
||||
getDraw1d: "draw1d",
|
||||
getDraw2d: "draw2d",
|
||||
getDraw2dLast: "draw2dLast",
|
||||
getDraw2dPicture: "draw2dpicture",
|
||||
boardWidth: "boardWidth",
|
||||
boardHeight: "boardHeight",
|
||||
selected2dRules: "selected2dRules",
|
||||
picture: "picture",
|
||||
}),
|
||||
...mapWritableState(globalStore, {
|
||||
lastBoard: "lastBoard",
|
||||
canvasWidth: "canvasWidth",
|
||||
canvasHeight: "canvasHeight",
|
||||
getReset: "reset",
|
||||
}),
|
||||
// used to determine the dimensions of the board
|
||||
max() {
|
||||
return Math.max(this.boardWidth, this.boardHeight);
|
||||
},
|
||||
selectedRules() {
|
||||
return this.available2dRules[this.selected2dRules.id];
|
||||
},
|
||||
},
|
||||
watch: {
|
||||
getDraw1d(value) {
|
||||
if (value == true) this.draw1d();
|
||||
},
|
||||
getDraw2d(value) {
|
||||
if (value == true) this.draw2dNew();
|
||||
},
|
||||
async getDraw2dLast(value) {
|
||||
if (value == true) await this.draw2dLast();
|
||||
},
|
||||
getDraw2dPicture(value) {
|
||||
if (value == true) this.draw2dPicture();
|
||||
},
|
||||
getReset(value) {
|
||||
if (value == true) this.reset();
|
||||
},
|
||||
},
|
||||
mounted() {
|
||||
this.canvas = Object.freeze(document.getElementById("board-canvas"));
|
||||
this.workCanvas = Object.freeze(document.getElementById("work-canvas"));
|
||||
this.ctx = this.canvas.getContext("2d", { willReadFrequently: true });
|
||||
this.workCtx = this.workCanvas.getContext("2d", {
|
||||
willReadFrequently: true,
|
||||
const store = globalStore();
|
||||
|
||||
// TODO: Do we really need to declare a work canvas in this scope?
|
||||
// Do we really need to declare a canvas here at all?
|
||||
let canvas = null;
|
||||
let workCanvas = null;
|
||||
let workCtx = null;
|
||||
let ctx = null;
|
||||
const available2dRules = {
|
||||
conway: conwayRules,
|
||||
overpopulation: overpopulationRules,
|
||||
loneliness: lonelinessRules,
|
||||
threeborn: threebornRules,
|
||||
highlife: highLifeRules,
|
||||
serviette: servietteRules,
|
||||
};
|
||||
|
||||
// used to determine the dimensions of the board
|
||||
const max = () => {
|
||||
return Math.max(store.boardWidth, store.boardHeight);
|
||||
};
|
||||
|
||||
const selectedRules = () => {
|
||||
return available2dRules[store.selected2dRules.id];
|
||||
};
|
||||
|
||||
watch(
|
||||
() => store.draw1d,
|
||||
(value) => {
|
||||
if (value == true) draw1d();
|
||||
}
|
||||
);
|
||||
|
||||
watch(
|
||||
() => store.draw2d,
|
||||
(value) => {
|
||||
if (value == true) draw2dNew();
|
||||
}
|
||||
);
|
||||
|
||||
watch(
|
||||
() => store.draw2dLast,
|
||||
async (value) => {
|
||||
if (value == true) await draw2dLast();
|
||||
}
|
||||
);
|
||||
|
||||
watch(
|
||||
() => store.draw2dpicture,
|
||||
(value) => {
|
||||
if (value == true) draw2dPicture();
|
||||
}
|
||||
);
|
||||
|
||||
watch(
|
||||
() => store.reset,
|
||||
(value) => {
|
||||
if (value == true) reset();
|
||||
}
|
||||
);
|
||||
|
||||
onMounted(() => {
|
||||
canvas = Object.freeze(document.getElementById("board-canvas"));
|
||||
workCanvas = Object.freeze(document.getElementById("work-canvas"));
|
||||
ctx = canvas.getContext("2d", { willReadFrequently: true });
|
||||
workCtx = workCanvas.getContext("2d", {
|
||||
willReadFrequently: true,
|
||||
});
|
||||
store.canvasWidth = canvas.parentElement.clientWidth;
|
||||
store.canvasHeight = canvas.parentElement.clientHeight;
|
||||
store.setBoardWidth();
|
||||
store.setBoardHeight();
|
||||
});
|
||||
|
||||
// draws the board on the canvas
|
||||
const drawCanvas = async (board, width, height) => {
|
||||
const d = store.cellProperties.size;
|
||||
// bool to RGBA colors
|
||||
const img = await boardToPic(board, width, height, store.cellProperties);
|
||||
// rescale and draw
|
||||
ctx.save();
|
||||
ctx.clearRect(0, 0, store.canvasWidth, store.canvasHeight);
|
||||
workCtx.putImageData(img, 0, 0);
|
||||
ctx.imageSmoothingEnabled = false;
|
||||
ctx.scale(d, d);
|
||||
ctx.drawImage(workCanvas, 0, 0, store.canvasWidth, store.canvasHeight);
|
||||
ctx.restore();
|
||||
};
|
||||
|
||||
// create a first state, either a single living cell
|
||||
// at the center or random ones
|
||||
const compute1dInitialState = () => {
|
||||
if (store.initial1dState === "onecell")
|
||||
return create1dStateOneCell(store.boardWidth);
|
||||
return create1dState(store.boardWidth, getRandomInt, [0, 2]);
|
||||
};
|
||||
|
||||
// initialize board with random cells
|
||||
const randomInitialState = () => {
|
||||
return create2dState(
|
||||
store.boardWidth,
|
||||
store.boardHeight,
|
||||
getRandomInt,
|
||||
[0, 2]
|
||||
);
|
||||
};
|
||||
|
||||
// draw elementary automaton on the canvas based on selected ruleset
|
||||
const draw1d = () => {
|
||||
const initialState = compute1dInitialState();
|
||||
const board = createBoard(initialState, store.ruleset1d.rules, max());
|
||||
store.lastBoard = Object.freeze(board);
|
||||
// TODO: the board clearly could be an object
|
||||
drawCanvas(store.lastBoard, store.boardWidth, store.boardHeight);
|
||||
store.toggleStop();
|
||||
};
|
||||
|
||||
// draw 2D automaton on the canvas in a loop
|
||||
const draw2d = (board) => {
|
||||
const newBoard = evolve2d(board, selectedRules());
|
||||
drawCanvas(newBoard, store.boardWidth, store.boardHeight);
|
||||
store.lastBoard = Object.freeze(newBoard);
|
||||
};
|
||||
|
||||
// draw 2d automaton in a loop, starting from passed state
|
||||
const draw2dNext = async (board) => {
|
||||
setTimeout(() => {
|
||||
requestAnimationFrame(() => {
|
||||
if (!store.canDraw) return;
|
||||
draw2d(board);
|
||||
return draw2dNext(store.lastBoard);
|
||||
});
|
||||
this.canvasWidth = this.canvas.parentElement.clientWidth;
|
||||
this.canvasHeight = this.canvas.parentElement.clientHeight;
|
||||
this.setBoardWidth();
|
||||
this.setBoardHeight();
|
||||
},
|
||||
methods: {
|
||||
...mapActions(globalStore, [
|
||||
"toggleStop",
|
||||
"setBoardWidth",
|
||||
"setBoardHeight",
|
||||
]),
|
||||
// draws the board on the canvas
|
||||
async drawCanvas(board, width, height) {
|
||||
const d = this.cellProperties.size;
|
||||
// bool to RGBA colors
|
||||
const img = await boardToPic(board, width, height, this.cellProperties);
|
||||
// rescale and draw
|
||||
this.ctx.save();
|
||||
this.ctx.clearRect(0, 0, this.canvasWidth, this.canvasHeight);
|
||||
this.workCtx.putImageData(img, 0, 0);
|
||||
this.ctx.imageSmoothingEnabled = false;
|
||||
this.ctx.scale(d, d);
|
||||
this.ctx.drawImage(
|
||||
this.workCanvas,
|
||||
0,
|
||||
0,
|
||||
this.canvasWidth,
|
||||
this.canvasHeight
|
||||
);
|
||||
this.ctx.restore();
|
||||
},
|
||||
// create a first state, either a single living cell
|
||||
// at the center or random ones
|
||||
compute1dInitialState() {
|
||||
if (this.initial1dState === "onecell")
|
||||
return create1dStateOneCell(this.boardWidth);
|
||||
return create1dState(this.boardWidth, getRandomInt, [0, 2]);
|
||||
},
|
||||
// initialize board with random cells
|
||||
randomInitialState() {
|
||||
return create2dState(
|
||||
this.boardWidth,
|
||||
this.boardHeight,
|
||||
getRandomInt,
|
||||
[0, 2]
|
||||
);
|
||||
},
|
||||
// draw elementary automaton on the canvas based on selected ruleset
|
||||
draw1d() {
|
||||
const initialState = this.compute1dInitialState();
|
||||
const board = createBoard(initialState, this.ruleset.rules, this.max);
|
||||
this.lastBoard = Object.freeze(board);
|
||||
this.drawCanvas(this.lastBoard, this.boardWidth, this.boardHeight);
|
||||
this.toggleStop();
|
||||
},
|
||||
// draw 2D automaton on the canvas in a loop
|
||||
draw2d(board) {
|
||||
const newBoard = evolve2d(board, this.selectedRules);
|
||||
this.drawCanvas(newBoard, this.boardWidth, this.boardHeight);
|
||||
this.lastBoard = Object.freeze(newBoard);
|
||||
},
|
||||
// draw 2d automaton in a loop, starting from passed state
|
||||
async draw2dNext(board, time) {
|
||||
setTimeout(() => {
|
||||
requestAnimationFrame(() => {
|
||||
if (!this.canDraw) return;
|
||||
this.draw2d(board);
|
||||
return this.draw2dNext(this.lastBoard);
|
||||
});
|
||||
}, this.refreshRate);
|
||||
},
|
||||
// draw 2d automaton from a new state
|
||||
async draw2dNew() {
|
||||
if (!this.canDraw) return;
|
||||
const initialState = this.randomInitialState();
|
||||
let board = evolve2d(initialState, this.selectedRules);
|
||||
if (this.loop) return this.draw2dNext(board);
|
||||
else this.draw2d(board);
|
||||
this.toggleStop();
|
||||
},
|
||||
// draw 2d automaton from the last known generated board
|
||||
async draw2dLast() {
|
||||
if (!this.canDraw) return;
|
||||
if (this.loop) return this.draw2dNext(this.lastBoard);
|
||||
else this.draw2d(this.lastBoard);
|
||||
this.toggleStop();
|
||||
},
|
||||
// draw 2d automaton from an uploaded picture.
|
||||
// use the picture representation as an initial state
|
||||
draw2dPicture() {
|
||||
// draw image on canvas
|
||||
this.ctx.fillStyle = "black";
|
||||
this.ctx.fillRect(0, 0, this.canvasWidth, this.canvasHeight);
|
||||
this.ctx.drawImage(
|
||||
this.picture,
|
||||
Math.floor((this.canvasWidth - this.picture.width) / 2),
|
||||
Math.floor((this.canvasHeight - this.picture.height) / 2),
|
||||
this.picture.width,
|
||||
this.picture.height
|
||||
);
|
||||
}, store.refreshRate);
|
||||
};
|
||||
|
||||
// get image data from canvas
|
||||
const imgData = this.ctx.getImageData(
|
||||
0,
|
||||
0,
|
||||
this.canvasWidth,
|
||||
this.canvasHeight
|
||||
);
|
||||
// draw 2d automaton from a new state
|
||||
const draw2dNew = async () => {
|
||||
if (!store.canDraw) return;
|
||||
const initialState = randomInitialState();
|
||||
const board = evolve2d(initialState, selectedRules());
|
||||
if (store.loop) return draw2dNext(board);
|
||||
else draw2d(board);
|
||||
store.toggleStop();
|
||||
};
|
||||
|
||||
// draw the image back on the work canvas with the dimensions of the board
|
||||
this.workCtx.drawImage(
|
||||
this.picture,
|
||||
0,
|
||||
0,
|
||||
this.boardWidth,
|
||||
this.boardHeight
|
||||
);
|
||||
// draw 2d automaton from the last known generated board
|
||||
const draw2dLast = async () => {
|
||||
if (!store.canDraw) return;
|
||||
if (store.loop) return store.draw2dNext(store.lastBoard);
|
||||
else draw2d(store.lastBoard);
|
||||
store.toggleStop();
|
||||
};
|
||||
|
||||
// get the resized image data from work canvas
|
||||
const resized = this.workCtx.getImageData(
|
||||
0,
|
||||
0,
|
||||
this.boardWidth,
|
||||
this.boardHeight
|
||||
);
|
||||
// draw 2d automaton from an uploaded picture.
|
||||
// use the picture representation as an initial state
|
||||
const draw2dPicture = () => {
|
||||
// draw image on canvas
|
||||
ctx.fillStyle = "black";
|
||||
ctx.fillRect(0, 0, store.canvasWidth, store.canvasHeight);
|
||||
ctx.drawImage(
|
||||
store.picture,
|
||||
Math.floor((store.canvasWidth - store.picture.width) / 2),
|
||||
Math.floor((store.canvasHeight - store.picture.height) / 2),
|
||||
store.picture.width,
|
||||
store.picture.height
|
||||
);
|
||||
|
||||
// convert the image into a 2D board of boolean based on pixel value
|
||||
this.lastBoard = Object.freeze(
|
||||
picToBoard(resized.data, this.boardWidth, this.boardHeight)
|
||||
);
|
||||
// draw the image back on the work canvas with the dimensions of the board
|
||||
workCtx.drawImage(store.picture, 0, 0, store.boardWidth, store.boardHeight);
|
||||
|
||||
this.toggleStop();
|
||||
},
|
||||
// stop drawing routines and clear the canvas
|
||||
reset() {
|
||||
this.toggleStop();
|
||||
this.lastBoard = {};
|
||||
this.ctx.clearRect(0, 0, this.canvasWidth, this.canvasHeight);
|
||||
this.getReset = 0;
|
||||
},
|
||||
},
|
||||
// get the resized image data from work canvas
|
||||
const resized = workCtx.getImageData(
|
||||
0,
|
||||
0,
|
||||
store.boardWidth,
|
||||
store.boardHeight
|
||||
);
|
||||
|
||||
// convert the image into a 2D board of boolean based on pixel value
|
||||
store.lastBoard = Object.freeze(
|
||||
picToBoard(resized.data, store.boardWidth, store.boardHeight)
|
||||
);
|
||||
|
||||
store.toggleStop();
|
||||
};
|
||||
|
||||
// stop drawing routines and clear the canvas
|
||||
const reset = () => {
|
||||
store.toggleStop();
|
||||
store.lastBoard = null;
|
||||
ctx.clearRect(0, 0, store.canvasWidth, store.canvasHeight);
|
||||
store.reset = false;
|
||||
};
|
||||
</script>
|
||||
<template>
|
||||
<canvas
|
||||
id="board-canvas"
|
||||
ref="board-canvas"
|
||||
:width="store.canvasWidth"
|
||||
:height="store.canvasHeight"
|
||||
/>
|
||||
<canvas
|
||||
id="work-canvas"
|
||||
ref="work-canvas"
|
||||
:width="store.canvasWidth"
|
||||
:height="store.canvasHeight"
|
||||
/>
|
||||
</template>
|
||||
<style>
|
||||
#canvas-board {
|
||||
flex: 1;
|
||||
|
||||
@ -7,20 +7,11 @@
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
<script setup>
|
||||
import MenuCellProperties from "./MenuCellProperties.vue";
|
||||
import MenuGeneralOptions from "./MenuGeneralOptions.vue";
|
||||
import MenuElementaryCA from "./MenuElementaryCA.vue";
|
||||
import Menu2dCA from "./Menu2dCA.vue";
|
||||
export default {
|
||||
name: "MainMenu",
|
||||
components: {
|
||||
MenuCellProperties,
|
||||
MenuGeneralOptions,
|
||||
MenuElementaryCA,
|
||||
Menu2dCA,
|
||||
},
|
||||
};
|
||||
</script>
|
||||
|
||||
<style>
|
||||
|
||||
@ -1,3 +1,48 @@
|
||||
<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">
|
||||
@ -6,16 +51,16 @@
|
||||
type="button"
|
||||
name="start2d"
|
||||
value="start"
|
||||
@click="toggleDraw2d()"
|
||||
@click="store.toggleDraw2d()"
|
||||
/>
|
||||
</div>
|
||||
<div class="form-field">
|
||||
<label>Start from last result</label>
|
||||
<input type="button" value="start" @click="toggleDraw2dLast()" />
|
||||
<input type="button" value="start" @click="store.toggleDraw2dLast()" />
|
||||
</div>
|
||||
<div class="form-field">
|
||||
<label>Start from picture</label><br />
|
||||
<input type="file" @change="preparePicture" />
|
||||
<input ref="uploadedPicture" type="file" @change="preparePicture" />
|
||||
</div>
|
||||
<div class="form-field">
|
||||
<label>
|
||||
@ -23,7 +68,7 @@
|
||||
<br />
|
||||
<select
|
||||
name="preset2dRules"
|
||||
:value="selected2dRules.id"
|
||||
:value="store.selected2dRules.id"
|
||||
@input="update2dRules"
|
||||
>
|
||||
<option
|
||||
@ -38,58 +83,3 @@
|
||||
</div>
|
||||
</MenuRow>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import MenuRow from "./MenuRow.vue";
|
||||
import { mapActions, mapWritableState } from "pinia";
|
||||
import { globalStore } from "../stores/index.js";
|
||||
import { preset2dRules } from "../modules/preset.js";
|
||||
export default {
|
||||
name: "Menu2dCA",
|
||||
components: {
|
||||
MenuRow,
|
||||
},
|
||||
data() {
|
||||
return {
|
||||
uploadedFile: "",
|
||||
preset2dRules: preset2dRules,
|
||||
};
|
||||
},
|
||||
computed: {
|
||||
...mapWritableState(globalStore, ["picture", "selected2dRules"]),
|
||||
},
|
||||
methods: {
|
||||
...mapActions(globalStore, [
|
||||
"toggleDraw2dLast",
|
||||
"toggleDraw2d",
|
||||
"toggle2dDrawFromPicture",
|
||||
]),
|
||||
preparePicture(event) {
|
||||
const files = event.target.files;
|
||||
this.picture = new Image();
|
||||
if (FileReader && files && files.length) {
|
||||
const reader = new FileReader();
|
||||
|
||||
reader.onload = () => {
|
||||
this.picture.src = Object.freeze(reader.result);
|
||||
this.toggle2dDrawFromPicture();
|
||||
};
|
||||
|
||||
reader.onerror = () => {
|
||||
console.log(reader.error);
|
||||
};
|
||||
|
||||
reader.readAsDataURL(files[0]);
|
||||
}
|
||||
},
|
||||
update2dRules(event) {
|
||||
const elem = event.target;
|
||||
const id = elem.value;
|
||||
const newRuleset = this.preset2dRules.find((ruleset) => {
|
||||
return ruleset.id === id;
|
||||
});
|
||||
this.selected2dRules = newRuleset;
|
||||
},
|
||||
},
|
||||
};
|
||||
</script>
|
||||
|
||||
@ -1,3 +1,24 @@
|
||||
<script setup>
|
||||
import { globalStore } from "../stores/index.js";
|
||||
import MenuRow from "./MenuRow.vue";
|
||||
|
||||
const store = globalStore();
|
||||
|
||||
const updateCellProperties = (event) => {
|
||||
const elem = event.target;
|
||||
store.cellProperties[elem.name] = elem.value;
|
||||
store.setBoardWidth();
|
||||
store.setBoardHeight();
|
||||
};
|
||||
|
||||
const switchColor = () => {
|
||||
[store.cellProperties["liveColor"], store.cellProperties["deadColor"]] = [
|
||||
store.cellProperties["deadColor"],
|
||||
store.cellProperties["liveColor"],
|
||||
];
|
||||
};
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<MenuRow row-title="Cell Properties">
|
||||
<form>
|
||||
@ -6,7 +27,7 @@
|
||||
<input
|
||||
name="liveColor"
|
||||
type="color"
|
||||
:value="cellProperties.liveColor"
|
||||
:value="store.cellProperties.liveColor"
|
||||
@input="updateCellProperties"
|
||||
/>
|
||||
</div>
|
||||
@ -15,7 +36,7 @@
|
||||
<input
|
||||
name="deadColor"
|
||||
type="color"
|
||||
:value="cellProperties.deadColor"
|
||||
:value="store.cellProperties.deadColor"
|
||||
@input="updateCellProperties"
|
||||
/>
|
||||
</div>
|
||||
@ -28,7 +49,7 @@
|
||||
name="size"
|
||||
type="number"
|
||||
min="1"
|
||||
:value="cellProperties.size"
|
||||
:value="store.cellProperties.size"
|
||||
@click="updateCellProperties"
|
||||
/>
|
||||
</div>
|
||||
@ -36,40 +57,6 @@
|
||||
</MenuRow>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import { mapActions, mapWritableState } from "pinia";
|
||||
import { globalStore } from "../stores/index.js";
|
||||
import MenuRow from "./MenuRow.vue";
|
||||
export default {
|
||||
name: "MenuCellProperties",
|
||||
components: {
|
||||
MenuRow,
|
||||
},
|
||||
computed: {
|
||||
...mapWritableState(globalStore, ["cellProperties"]),
|
||||
},
|
||||
methods: {
|
||||
...mapActions(globalStore, ["setBoardHeight", "setBoardWidth"]),
|
||||
getCellProperties(event) {
|
||||
const elem = event.target;
|
||||
const prop = this.cellProperties;
|
||||
return prop[elem.name];
|
||||
},
|
||||
updateCellProperties(event) {
|
||||
const elem = event.target;
|
||||
this.cellProperties[elem.name] = elem.value;
|
||||
this.setBoardWidth();
|
||||
this.setBoardHeight();
|
||||
},
|
||||
switchColor() {
|
||||
[this.cellProperties["liveColor"], this.cellProperties["deadColor"]] = [
|
||||
this.cellProperties["deadColor"],
|
||||
this.cellProperties["liveColor"],
|
||||
];
|
||||
},
|
||||
},
|
||||
};
|
||||
</script>
|
||||
<style scoped>
|
||||
a {
|
||||
font-weight: bold;
|
||||
|
||||
@ -1,3 +1,36 @@
|
||||
<script setup>
|
||||
import { presetRuleset, initialStates } from "../modules/preset.js";
|
||||
import { globalStore } from "../stores/index.js";
|
||||
import MenuRow from "./MenuRow.vue";
|
||||
|
||||
const store = globalStore();
|
||||
|
||||
const copyRuleset = () => {
|
||||
const newRuleset = JSON.stringify(store.ruleset1d);
|
||||
navigator.clipboard.writeText(newRuleset);
|
||||
};
|
||||
|
||||
const updateSingleRule = (event) => {
|
||||
const elem = event.target;
|
||||
const value = elem.checked ? 1 : 0;
|
||||
store.ruleset1d.rules[elem.name] = value;
|
||||
};
|
||||
|
||||
const updateRuleset = (event) => {
|
||||
const elem = event.target;
|
||||
const name = elem.value;
|
||||
const newRuleset = presetRuleset.find((ruleset) => {
|
||||
return ruleset.name === name;
|
||||
});
|
||||
store.ruleset1d = newRuleset;
|
||||
};
|
||||
|
||||
const updateInitialState = (event) => {
|
||||
const elem = event.target;
|
||||
store.initial1dState = elem.value;
|
||||
};
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<MenuRow row-title="Elementary Automaton">
|
||||
<form>
|
||||
@ -6,7 +39,7 @@
|
||||
type="button"
|
||||
name="start"
|
||||
value="start"
|
||||
@click="toggleDraw1d()"
|
||||
@click="store.toggleDraw1d()"
|
||||
/>
|
||||
</div>
|
||||
<div class="form-field">
|
||||
@ -15,7 +48,7 @@
|
||||
<br />
|
||||
<select
|
||||
name="initialStates"
|
||||
:value="initialState"
|
||||
:value="store.initial1dState"
|
||||
@input="updateInitialState"
|
||||
>
|
||||
<option
|
||||
@ -37,7 +70,7 @@
|
||||
<br />
|
||||
<select
|
||||
name="ruleset-elementary"
|
||||
:value="ruleset.name"
|
||||
:value="store.ruleset1d.name"
|
||||
@input="updateRuleset"
|
||||
>
|
||||
<option
|
||||
@ -54,7 +87,7 @@
|
||||
<a style="cursor: pointer" @click="copyRuleset">copy rules</a>
|
||||
</div>
|
||||
<div
|
||||
v-for="(rule, name, index) in ruleset.rules"
|
||||
v-for="(rule, name, index) in store.ruleset1d.rules"
|
||||
:key="'rule-' + index"
|
||||
class="form-field"
|
||||
>
|
||||
@ -73,68 +106,6 @@
|
||||
</MenuRow>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import { mapActions, mapWritableState } from "pinia";
|
||||
import { presetRuleset, initialStates } from "../modules/preset.js";
|
||||
import { globalStore } from "../stores/index.js";
|
||||
import MenuRow from "./MenuRow.vue";
|
||||
export default {
|
||||
name: "MenuElementaryCA",
|
||||
components: {
|
||||
MenuRow,
|
||||
},
|
||||
data() {
|
||||
return {
|
||||
presetRuleset: presetRuleset,
|
||||
initialStates: initialStates,
|
||||
};
|
||||
},
|
||||
computed: {
|
||||
...mapWritableState(globalStore, {
|
||||
initialState: "initial1dState",
|
||||
ruleset: "ruleset1d",
|
||||
}),
|
||||
rules1dFileName() {
|
||||
// TODO: broken
|
||||
return (
|
||||
Object.keys(this.ruleset)
|
||||
.map((index) => {
|
||||
return this.ruleset[index];
|
||||
})
|
||||
.join("_") + ".json"
|
||||
);
|
||||
},
|
||||
},
|
||||
methods: {
|
||||
...mapActions(globalStore, ["toggleDraw1d"]),
|
||||
copyRuleset() {
|
||||
const newRuleset = JSON.stringify(this.ruleset);
|
||||
navigator.clipboard.writeText(newRuleset);
|
||||
},
|
||||
isCurrentPreset(event) {
|
||||
const elem = event.target;
|
||||
return this.initialState === elem.value;
|
||||
},
|
||||
updateSingleRule(event) {
|
||||
const elem = event.target;
|
||||
const value = elem.checked ? 1 : 0;
|
||||
this.ruleset.rules[elem.name] = value;
|
||||
},
|
||||
updateRuleset(event) {
|
||||
const elem = event.target;
|
||||
const name = elem.value;
|
||||
const newRuleset = this.presetRuleset.find((ruleset) => {
|
||||
return ruleset.name === name;
|
||||
});
|
||||
this.ruleset = newRuleset;
|
||||
},
|
||||
updateInitialState(event) {
|
||||
const elem = event.target;
|
||||
this.initialState = elem.value;
|
||||
},
|
||||
},
|
||||
};
|
||||
</script>
|
||||
<style>
|
||||
.menu-row a {
|
||||
color: white;
|
||||
|
||||
@ -1,3 +1,31 @@
|
||||
<script setup>
|
||||
import { globalStore } from "../stores/index.js";
|
||||
import MenuRow from "./MenuRow.vue";
|
||||
|
||||
const store = globalStore();
|
||||
|
||||
const updateCanvasHeight = (event) => {
|
||||
const elem = event.target;
|
||||
store.canvasHeight = elem.value;
|
||||
};
|
||||
|
||||
const updateCanvasWidth = (event) => {
|
||||
const elem = event.target;
|
||||
store.canvasWidth = elem.value;
|
||||
};
|
||||
|
||||
const updateRefreshRate = (event) => {
|
||||
const elem = event.target;
|
||||
store.refreshRate = elem.value;
|
||||
};
|
||||
|
||||
const updateDrawingDirection = (event) => {
|
||||
const elem = event.target;
|
||||
const value = elem.checked ? "x" : "y";
|
||||
store.drawingDirection = value;
|
||||
};
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<MenuRow row-title="General Options">
|
||||
<form>
|
||||
@ -11,7 +39,7 @@
|
||||
name="canvasWidth"
|
||||
type="number"
|
||||
step="10"
|
||||
:value="canvasWidth"
|
||||
:value="store.canvasWidth"
|
||||
@input="updateCanvasWidth"
|
||||
/>
|
||||
</div>
|
||||
@ -22,7 +50,7 @@
|
||||
name="canvasHeight"
|
||||
type="number"
|
||||
step="10"
|
||||
:value="canvasHeight"
|
||||
:value="store.canvasHeight"
|
||||
@input="updateCanvasHeight"
|
||||
/>
|
||||
</div>
|
||||
@ -36,7 +64,7 @@
|
||||
type="number"
|
||||
min="100"
|
||||
step="100"
|
||||
:value="refreshRate"
|
||||
:value="store.refreshRate"
|
||||
@input="updateRefreshRate"
|
||||
/>
|
||||
</div>
|
||||
@ -45,8 +73,8 @@
|
||||
>Invert Drawing Direction
|
||||
<input
|
||||
type="checkbox"
|
||||
:checked="drawingDirection === 'x'"
|
||||
:value="drawingDirection"
|
||||
:checked="store.drawingDirection === 'x'"
|
||||
:value="store.drawingDirection"
|
||||
@input="updateDrawingDirection"
|
||||
/>
|
||||
</label>
|
||||
@ -54,42 +82,3 @@
|
||||
</form>
|
||||
</MenuRow>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import { mapWritableState } from "pinia";
|
||||
import { globalStore } from "../stores/index.js";
|
||||
import MenuRow from "./MenuRow.vue";
|
||||
export default {
|
||||
name: "MenuGeneralOptions",
|
||||
components: {
|
||||
MenuRow,
|
||||
},
|
||||
computed: {
|
||||
...mapWritableState(globalStore, [
|
||||
"canvasWidth",
|
||||
"canvasHeight",
|
||||
"refreshRate",
|
||||
"drawingDirection",
|
||||
]),
|
||||
},
|
||||
methods: {
|
||||
updateCanvasHeight: function (event) {
|
||||
const elem = event.target;
|
||||
this.canvasHeight = elem.value;
|
||||
},
|
||||
updateCanvasWidth: function (event) {
|
||||
const elem = event.target;
|
||||
this.canvasWidth = elem.value;
|
||||
},
|
||||
updateRefreshRate: function (event) {
|
||||
const elem = event.target;
|
||||
this.refreshRate = elem.value;
|
||||
},
|
||||
updateDrawingDirection: function (event) {
|
||||
const elem = event.target;
|
||||
const value = elem.checked ? "x" : "y";
|
||||
this.drawingDirection = value;
|
||||
},
|
||||
},
|
||||
};
|
||||
</script>
|
||||
|
||||
@ -1,13 +1,19 @@
|
||||
<script setup>
|
||||
import { globalStore } from "../stores/index.js";
|
||||
|
||||
const store = globalStore();
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<div class="form-field">
|
||||
<div class="form-field">
|
||||
<label>
|
||||
Loop
|
||||
<input
|
||||
:value="loop"
|
||||
:value="store.loop"
|
||||
type="checkbox"
|
||||
:checked="loop"
|
||||
@input="toggleLoop()"
|
||||
:checked="store.loop"
|
||||
@input="store.toggleLoop()"
|
||||
/>
|
||||
</label>
|
||||
</div>
|
||||
@ -16,43 +22,25 @@
|
||||
name="next"
|
||||
class="next"
|
||||
value="Next"
|
||||
@click="toggleNext()"
|
||||
@click="store.toggleNext()"
|
||||
/>
|
||||
<input
|
||||
type="button"
|
||||
name="stop"
|
||||
class="stop"
|
||||
value="stop"
|
||||
@click="toggleStop()"
|
||||
@click="store.toggleStop()"
|
||||
/>
|
||||
<input
|
||||
type="button"
|
||||
name="reset"
|
||||
class="reset"
|
||||
value="reset"
|
||||
@click="toggleReset()"
|
||||
@click="store.toggleReset()"
|
||||
/>
|
||||
</div>
|
||||
</template>
|
||||
<script>
|
||||
import { mapState, mapActions } from "pinia";
|
||||
import { globalStore } from "../stores/index.js";
|
||||
|
||||
export default {
|
||||
name: "MenuReset",
|
||||
computed: {
|
||||
...mapState(globalStore, ["loop"]),
|
||||
},
|
||||
methods: {
|
||||
...mapActions(globalStore, [
|
||||
"toggleReset",
|
||||
"toggleStop",
|
||||
"toggleLoop",
|
||||
"toggleNext",
|
||||
]),
|
||||
},
|
||||
};
|
||||
</script>
|
||||
<style scoped>
|
||||
.form-field {
|
||||
display: flex;
|
||||
|
||||
@ -1,3 +1,44 @@
|
||||
<script setup>
|
||||
import { computed, defineProps, onBeforeUnmount, ref } from "vue";
|
||||
import { globalStore } from "../stores/index.js";
|
||||
|
||||
const store = globalStore();
|
||||
|
||||
const props = defineProps({
|
||||
rowTitle: {
|
||||
type: String,
|
||||
default: "",
|
||||
},
|
||||
});
|
||||
|
||||
const content = ref(null);
|
||||
|
||||
const isActive = computed(() => {
|
||||
return props.rowTitle == store.activeSubMenu;
|
||||
});
|
||||
|
||||
const storeActiveSubMenu = () => {
|
||||
window.addEventListener("click", onWindowClick);
|
||||
store.setActiveSubMenu(props.rowTitle);
|
||||
};
|
||||
|
||||
// hides submenu when click is detected outside from it
|
||||
const onWindowClick = (event) => {
|
||||
const form = content.value;
|
||||
if (form != null) {
|
||||
if (!form.contains(event.target)) {
|
||||
store.setActiveSubMenu("");
|
||||
store.setMainMenu(false);
|
||||
}
|
||||
return;
|
||||
}
|
||||
};
|
||||
|
||||
onBeforeUnmount(() => {
|
||||
window.removeEventListener("click", onWindowClick);
|
||||
});
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<div class="menu-row">
|
||||
<h2 :id="rowTitle" @click.stop="storeActiveSubMenu">
|
||||
@ -9,57 +50,6 @@
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import { mapActions, mapState } from "pinia";
|
||||
import { globalStore } from "../stores/index.js";
|
||||
export default {
|
||||
name: "MenuRow",
|
||||
props: {
|
||||
rowTitle: {
|
||||
type: String,
|
||||
default: "",
|
||||
},
|
||||
},
|
||||
computed: {
|
||||
...mapState(globalStore, ["activeSubMenu"]),
|
||||
isActive() {
|
||||
return this.rowTitle == this.activeSubMenu;
|
||||
},
|
||||
},
|
||||
beforeUnmount() {
|
||||
window.removeEventListener("click", this.onWindowClick);
|
||||
},
|
||||
methods: {
|
||||
...mapActions(globalStore, [
|
||||
"setActiveSubMenu",
|
||||
"toggleMainMenu",
|
||||
"setMainMenu",
|
||||
]),
|
||||
onKeyDown: function (event) {
|
||||
// escape
|
||||
if (event.keyCode == 27) {
|
||||
this.setActiveSubMenu("");
|
||||
}
|
||||
},
|
||||
storeActiveSubMenu() {
|
||||
window.addEventListener("click", this.onWindowClick);
|
||||
this.setActiveSubMenu(this.rowTitle);
|
||||
},
|
||||
// hides submenu when click is detected outside from it
|
||||
onWindowClick(event) {
|
||||
const form = this.$refs.content;
|
||||
if (form != null) {
|
||||
if (!form.contains(event.target)) {
|
||||
this.setActiveSubMenu("");
|
||||
this.setMainMenu(false);
|
||||
}
|
||||
return;
|
||||
}
|
||||
},
|
||||
},
|
||||
};
|
||||
</script>
|
||||
|
||||
<style>
|
||||
.menu-row h2 {
|
||||
font-size: medium;
|
||||
|
||||
@ -57,7 +57,7 @@ export function boardToPic(board, width, height, cellProperties) {
|
||||
const img = new ImageData(width, height);
|
||||
const colors = [hexToRGB(live), hexToRGB(dead)];
|
||||
board.flat().reduce((acc, cell, index) => {
|
||||
const color = colors[cell];
|
||||
const color = cell === 1 ? colors[0] : colors[1];
|
||||
const i = index * 4;
|
||||
acc[i] = color[0];
|
||||
acc[i + 1] = color[1];
|
||||
|
||||
@ -40,7 +40,7 @@ export const globalStore = defineStore("globalStore", {
|
||||
draw2dpicture: false,
|
||||
reset: false,
|
||||
canDraw: true,
|
||||
picture: null,
|
||||
picture: new Image(),
|
||||
mainMenu: false,
|
||||
activeSubMenu: "",
|
||||
loop: false,
|
||||
|
||||
Loading…
Reference in New Issue
Block a user