Merge pull request 'mobile-friendly' (#3) from mobile-friendly into dev
Reviewed-on: #3
This commit is contained in:
commit
09f900ee95
9
.pre-commit-config.yaml
Normal file
9
.pre-commit-config.yaml
Normal file
@ -0,0 +1,9 @@
|
||||
repos:
|
||||
- repo: https://github.com/pre-commit/mirrors-eslint
|
||||
rev: "v8.28.0"
|
||||
hooks:
|
||||
- id: eslint
|
||||
- repo: https://github.com/pre-commit/mirrors-prettier
|
||||
rev: "v2.7.1"
|
||||
hooks:
|
||||
- id: prettier
|
||||
@ -1 +1,3 @@
|
||||
{}
|
||||
{
|
||||
"vueIndentScriptAndStyle": true
|
||||
}
|
||||
|
||||
12
README.md
12
README.md
@ -2,6 +2,8 @@
|
||||
|
||||
Explore 1D and 2D cellular automata, with a few bells and whistles.
|
||||
|
||||
|
||||
|
||||
## Project setup
|
||||
|
||||
```
|
||||
@ -11,7 +13,7 @@ npm install
|
||||
### Compiles and hot-reloads for development
|
||||
|
||||
```
|
||||
npm run serve
|
||||
npm run dev
|
||||
```
|
||||
|
||||
### Compiles and minifies for production
|
||||
@ -26,9 +28,15 @@ npm run build
|
||||
npm run lint
|
||||
```
|
||||
|
||||
### Format files
|
||||
|
||||
```
|
||||
npm run format
|
||||
```
|
||||
|
||||
### Customize configuration
|
||||
|
||||
See [Configuration Reference](https://cli.vuejs.org/config/).
|
||||
See [Configuration Reference](https://vitejs.dev/guide/).
|
||||
|
||||
### References
|
||||
|
||||
|
||||
BIN
example.png
Normal file
BIN
example.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 50 KiB |
90
package-lock.json
generated
90
package-lock.json
generated
@ -10,9 +10,9 @@
|
||||
"dependencies": {
|
||||
"@vitejs/plugin-vue": "^3.2.0",
|
||||
"install": "^0.13.0",
|
||||
"pinia": "^2.0.27",
|
||||
"vite": "^3.2.4",
|
||||
"vue": "3.2",
|
||||
"vuex": "4.1"
|
||||
"vue": "3.2"
|
||||
},
|
||||
"devDependencies": {
|
||||
"eslint": "^8.28.0",
|
||||
@ -1548,6 +1548,56 @@
|
||||
"resolved": "https://registry.npmjs.org/picocolors/-/picocolors-1.0.0.tgz",
|
||||
"integrity": "sha512-1fygroTLlHu66zi26VoTDv8yRgm0Fccecssto+MhsZ0D/DGW2sm8E8AjW7NU5VVTRt5GxbeZ5qBuJr+HyLYkjQ=="
|
||||
},
|
||||
"node_modules/pinia": {
|
||||
"version": "2.0.27",
|
||||
"resolved": "https://registry.npmjs.org/pinia/-/pinia-2.0.27.tgz",
|
||||
"integrity": "sha512-nOnXP0OFeL8R4WjAHsterU+11vptda643gH02xKNtSCDPiRzVfRYodOLihLDoa0gL1KKuQKV+KOzEgdt3YvqEw==",
|
||||
"dependencies": {
|
||||
"@vue/devtools-api": "^6.4.5",
|
||||
"vue-demi": "*"
|
||||
},
|
||||
"funding": {
|
||||
"url": "https://github.com/sponsors/posva"
|
||||
},
|
||||
"peerDependencies": {
|
||||
"@vue/composition-api": "^1.4.0",
|
||||
"typescript": ">=4.4.4",
|
||||
"vue": "^2.6.14 || ^3.2.0"
|
||||
},
|
||||
"peerDependenciesMeta": {
|
||||
"@vue/composition-api": {
|
||||
"optional": true
|
||||
},
|
||||
"typescript": {
|
||||
"optional": true
|
||||
}
|
||||
}
|
||||
},
|
||||
"node_modules/pinia/node_modules/vue-demi": {
|
||||
"version": "0.13.11",
|
||||
"resolved": "https://registry.npmjs.org/vue-demi/-/vue-demi-0.13.11.tgz",
|
||||
"integrity": "sha512-IR8HoEEGM65YY3ZJYAjMlKygDQn25D5ajNFNoKh9RSDMQtlzCxtfQjdQgv9jjK+m3377SsJXY8ysq8kLCZL25A==",
|
||||
"hasInstallScript": true,
|
||||
"bin": {
|
||||
"vue-demi-fix": "bin/vue-demi-fix.js",
|
||||
"vue-demi-switch": "bin/vue-demi-switch.js"
|
||||
},
|
||||
"engines": {
|
||||
"node": ">=12"
|
||||
},
|
||||
"funding": {
|
||||
"url": "https://github.com/sponsors/antfu"
|
||||
},
|
||||
"peerDependencies": {
|
||||
"@vue/composition-api": "^1.0.0-rc.1",
|
||||
"vue": "^3.0.0-0 || ^2.6.0"
|
||||
},
|
||||
"peerDependenciesMeta": {
|
||||
"@vue/composition-api": {
|
||||
"optional": true
|
||||
}
|
||||
}
|
||||
},
|
||||
"node_modules/postcss": {
|
||||
"version": "8.4.19",
|
||||
"resolved": "https://registry.npmjs.org/postcss/-/postcss-8.4.19.tgz",
|
||||
@ -1969,17 +2019,6 @@
|
||||
"eslint": ">=6.0.0"
|
||||
}
|
||||
},
|
||||
"node_modules/vuex": {
|
||||
"version": "4.1.0",
|
||||
"resolved": "https://registry.npmjs.org/vuex/-/vuex-4.1.0.tgz",
|
||||
"integrity": "sha512-hmV6UerDrPcgbSy9ORAtNXDr9M4wlNP4pEFKye4ujJF8oqgFFuxDCdOLS3eNoRTtq5O3hoBDh9Doj1bQMYHRbQ==",
|
||||
"dependencies": {
|
||||
"@vue/devtools-api": "^6.0.0-beta.11"
|
||||
},
|
||||
"peerDependencies": {
|
||||
"vue": "^3.2.0"
|
||||
}
|
||||
},
|
||||
"node_modules/which": {
|
||||
"version": "2.0.2",
|
||||
"resolved": "https://registry.npmjs.org/which/-/which-2.0.2.tgz",
|
||||
@ -3083,6 +3122,23 @@
|
||||
"resolved": "https://registry.npmjs.org/picocolors/-/picocolors-1.0.0.tgz",
|
||||
"integrity": "sha512-1fygroTLlHu66zi26VoTDv8yRgm0Fccecssto+MhsZ0D/DGW2sm8E8AjW7NU5VVTRt5GxbeZ5qBuJr+HyLYkjQ=="
|
||||
},
|
||||
"pinia": {
|
||||
"version": "2.0.27",
|
||||
"resolved": "https://registry.npmjs.org/pinia/-/pinia-2.0.27.tgz",
|
||||
"integrity": "sha512-nOnXP0OFeL8R4WjAHsterU+11vptda643gH02xKNtSCDPiRzVfRYodOLihLDoa0gL1KKuQKV+KOzEgdt3YvqEw==",
|
||||
"requires": {
|
||||
"@vue/devtools-api": "^6.4.5",
|
||||
"vue-demi": "*"
|
||||
},
|
||||
"dependencies": {
|
||||
"vue-demi": {
|
||||
"version": "0.13.11",
|
||||
"resolved": "https://registry.npmjs.org/vue-demi/-/vue-demi-0.13.11.tgz",
|
||||
"integrity": "sha512-IR8HoEEGM65YY3ZJYAjMlKygDQn25D5ajNFNoKh9RSDMQtlzCxtfQjdQgv9jjK+m3377SsJXY8ysq8kLCZL25A==",
|
||||
"requires": {}
|
||||
}
|
||||
}
|
||||
},
|
||||
"postcss": {
|
||||
"version": "8.4.19",
|
||||
"resolved": "https://registry.npmjs.org/postcss/-/postcss-8.4.19.tgz",
|
||||
@ -3324,14 +3380,6 @@
|
||||
"semver": "^7.3.6"
|
||||
}
|
||||
},
|
||||
"vuex": {
|
||||
"version": "4.1.0",
|
||||
"resolved": "https://registry.npmjs.org/vuex/-/vuex-4.1.0.tgz",
|
||||
"integrity": "sha512-hmV6UerDrPcgbSy9ORAtNXDr9M4wlNP4pEFKye4ujJF8oqgFFuxDCdOLS3eNoRTtq5O3hoBDh9Doj1bQMYHRbQ==",
|
||||
"requires": {
|
||||
"@vue/devtools-api": "^6.0.0-beta.11"
|
||||
}
|
||||
},
|
||||
"which": {
|
||||
"version": "2.0.2",
|
||||
"resolved": "https://registry.npmjs.org/which/-/which-2.0.2.tgz",
|
||||
|
||||
@ -12,9 +12,9 @@
|
||||
"dependencies": {
|
||||
"@vitejs/plugin-vue": "^3.2.0",
|
||||
"install": "^0.13.0",
|
||||
"pinia": "^2.0.27",
|
||||
"vite": "^3.2.4",
|
||||
"vue": "3.2",
|
||||
"vuex": "4.1"
|
||||
"vue": "3.2"
|
||||
},
|
||||
"devDependencies": {
|
||||
"eslint": "^8.28.0",
|
||||
|
||||
181
src/App.vue
181
src/App.vue
@ -1,66 +1,153 @@
|
||||
<template>
|
||||
<div id="main">
|
||||
<h1 id="main-title">Cellular Automata Explorer</h1>
|
||||
<h1 id="main-title">
|
||||
<span id="burger-toggle" @click="toggleMainMenu">{{
|
||||
mainMenu == true ? "▼" : "☰"
|
||||
}}</span>
|
||||
Cellular Automata Explorer
|
||||
</h1>
|
||||
<div id="container">
|
||||
<MainMenu />
|
||||
<MainMenu v-if="mainMenu || windowWidth >= 800" />
|
||||
<CanvasBoard />
|
||||
</div>
|
||||
<MenuReset row-title="" />
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import MainMenu from "./components/MainMenu.vue";
|
||||
import CanvasBoard from "./components/CanvasBoard.vue";
|
||||
import MainMenu from "./components/MainMenu.vue";
|
||||
import CanvasBoard from "./components/CanvasBoard.vue";
|
||||
import MenuReset from "./components/MenuReset.vue";
|
||||
import { mapWritableState, mapActions } from "pinia";
|
||||
import { globalStore } from "./stores/index.js";
|
||||
|
||||
export default {
|
||||
name: "App",
|
||||
components: {
|
||||
MainMenu,
|
||||
CanvasBoard,
|
||||
},
|
||||
};
|
||||
export default {
|
||||
name: "App",
|
||||
components: {
|
||||
MainMenu,
|
||||
MenuReset,
|
||||
CanvasBoard,
|
||||
},
|
||||
data() {
|
||||
return {
|
||||
mainMenu: false,
|
||||
windowWidth: window.innerWidth,
|
||||
};
|
||||
},
|
||||
computed: {
|
||||
...mapWritableState(globalStore, {
|
||||
canvasWidth: "canvasWidth",
|
||||
canvasHeight: "canvasHeight",
|
||||
}),
|
||||
},
|
||||
mounted() {
|
||||
this.$nextTick(() => {
|
||||
window.addEventListener("resize", this.onResize);
|
||||
});
|
||||
},
|
||||
beforeUnmount() {
|
||||
window.removeEventListener("resize", this.onResize);
|
||||
},
|
||||
methods: {
|
||||
...mapActions(globalStore, ["setBoardWidth", "setBoardHeight"]),
|
||||
toggleMainMenu() {
|
||||
this.mainMenu = !this.mainMenu;
|
||||
},
|
||||
onResize() {
|
||||
this.$nextTick(() => {
|
||||
this.windowWidth = window.innerWidth;
|
||||
this.canvasWidth = window.innerWidth;
|
||||
this.canvasHeight = window.innerHeight;
|
||||
this.setBoardWidth();
|
||||
this.setBoardHeight();
|
||||
});
|
||||
},
|
||||
},
|
||||
};
|
||||
</script>
|
||||
|
||||
<style>
|
||||
#app {
|
||||
font-family: Avenir, Helvetica, Arial, sans-serif;
|
||||
-webkit-font-smoothing: antialiased;
|
||||
-moz-osx-font-smoothing: grayscale;
|
||||
text-align: center;
|
||||
/* color: #2c3e50; */
|
||||
}
|
||||
<style scope>
|
||||
:root {
|
||||
--dark1: #000000;
|
||||
--dark2: #333333;
|
||||
--dark3: #666666;
|
||||
--light1: #999999;
|
||||
--light2: #cccccc;
|
||||
--light3: #eeeeee;
|
||||
}
|
||||
|
||||
* {
|
||||
margin: 0;
|
||||
padding: 0;
|
||||
}
|
||||
#app {
|
||||
font-family: Avenir, Helvetica, Arial, sans-serif;
|
||||
-webkit-font-smoothing: antialiased;
|
||||
-moz-osx-font-smoothing: grayscale;
|
||||
text-align: center;
|
||||
/* color: #2c3e50; */
|
||||
}
|
||||
|
||||
body {
|
||||
background: black;
|
||||
color: white;
|
||||
font-family: Courier New;
|
||||
}
|
||||
* {
|
||||
margin: 0;
|
||||
padding: 0;
|
||||
}
|
||||
|
||||
canvas {
|
||||
flex: auto;
|
||||
background: #110812;
|
||||
margin-right: 10px;
|
||||
}
|
||||
body {
|
||||
background: var(--dark1);
|
||||
color: var(--light3);
|
||||
font-family: Courier New;
|
||||
}
|
||||
|
||||
h1,
|
||||
h2 {
|
||||
font-weight: bold;
|
||||
}
|
||||
canvas {
|
||||
flex: auto;
|
||||
background: rgb(0, 0, 0);
|
||||
background: linear-gradient(
|
||||
90deg,
|
||||
rgba(0, 0, 0, 1) 0%,
|
||||
rgba(131, 131, 131, 1) 52%,
|
||||
rgba(0, 0, 0, 1) 100%
|
||||
);
|
||||
}
|
||||
|
||||
h1 {
|
||||
margin: 10px auto;
|
||||
font-size: larger;
|
||||
text-align: center;
|
||||
}
|
||||
h1,
|
||||
h2 {
|
||||
font-weight: bold;
|
||||
}
|
||||
|
||||
#container {
|
||||
display: flex;
|
||||
height: calc(100vh - 100px);
|
||||
overflow: hidden;
|
||||
}
|
||||
h1 {
|
||||
margin: 10px auto;
|
||||
font-size: larger;
|
||||
text-transform: uppercase;
|
||||
}
|
||||
|
||||
#container {
|
||||
display: flex;
|
||||
height: calc(100vh - 100px);
|
||||
overflow: hidden;
|
||||
flex-direction: column;
|
||||
}
|
||||
|
||||
#burger-toggle {
|
||||
display: none;
|
||||
cursor: pointer;
|
||||
font-size: 1.5em;
|
||||
vertical-align: middle;
|
||||
color: var(--light2);
|
||||
}
|
||||
|
||||
@media screen and (max-width: 800px) {
|
||||
h1 {
|
||||
font-size: medium;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: space-between;
|
||||
padding: 0 10px;
|
||||
}
|
||||
|
||||
#burger-toggle {
|
||||
display: inline;
|
||||
}
|
||||
|
||||
#main-menu {
|
||||
background: var(--dark2);
|
||||
margin: 0 auto;
|
||||
}
|
||||
}
|
||||
</style>
|
||||
|
||||
@ -1,146 +1,149 @@
|
||||
<template>
|
||||
<main id="mainContent">
|
||||
<canvas
|
||||
id="canvas-board"
|
||||
ref="canvas-board"
|
||||
:width="canvasWidth"
|
||||
:height="canvasHeight"
|
||||
/>
|
||||
</main>
|
||||
<canvas
|
||||
id="canvas-board"
|
||||
ref="canvas-board"
|
||||
:width="canvasWidth"
|
||||
:height="canvasHeight"
|
||||
/>
|
||||
</template>
|
||||
<script>
|
||||
import {
|
||||
create1dState,
|
||||
create1dStateOneCell,
|
||||
create2dState,
|
||||
createBoard,
|
||||
conwayRules,
|
||||
evolve2d,
|
||||
} from "../modules/automata.js";
|
||||
import { getRandomInt, sleep } from "../modules/common.js";
|
||||
import { mapGetters } from "vuex";
|
||||
export default {
|
||||
name: "CanvasBoard",
|
||||
data() {
|
||||
return {
|
||||
canvas: null,
|
||||
ctx: null,
|
||||
};
|
||||
},
|
||||
computed: {
|
||||
...mapGetters({
|
||||
cellProperties: "getCellProperties",
|
||||
rules: "get1dRules",
|
||||
canvasWidth: "getCanvasWidth",
|
||||
canvasHeight: "getCanvasHeight",
|
||||
refreshRate: "getRefreshRate",
|
||||
initial1dState: "getInitial1dState",
|
||||
drawingDirection: "getDrawingDirection",
|
||||
canDraw: "getCanDraw",
|
||||
lastBoard: "getLastBoard",
|
||||
getDraw1d: "getDraw1d",
|
||||
getDraw2d: "getDraw2d",
|
||||
getDraw2dLast: "getDraw2dLast",
|
||||
getReset: "getReset",
|
||||
}),
|
||||
boardWidth: function () {
|
||||
return Math.floor(this.canvasWidth / this.cellProperties.size);
|
||||
},
|
||||
boardHeight: function () {
|
||||
return Math.floor(this.canvasHeight / this.cellProperties.size);
|
||||
},
|
||||
},
|
||||
watch: {
|
||||
getDraw1d(value) {
|
||||
if (value == true) this.draw1d();
|
||||
},
|
||||
getDraw2d(value) {
|
||||
if (value == true) this.draw2dNew();
|
||||
},
|
||||
getDraw2dLast(value) {
|
||||
if (value == true) this.draw2dLast();
|
||||
},
|
||||
getReset(value) {
|
||||
if (value == true) this.reset();
|
||||
},
|
||||
},
|
||||
mounted() {
|
||||
this.canvas = Object.freeze(document.getElementById("canvas-board"));
|
||||
this.ctx = this.canvas.getContext("2d");
|
||||
this.$store.commit("setCanvasWidth", this.canvas.parentElement.clientWidth);
|
||||
this.$store.commit(
|
||||
"setCanvasHeight",
|
||||
this.canvas.parentElement.clientHeight
|
||||
);
|
||||
},
|
||||
methods: {
|
||||
drawCanvas(board) {
|
||||
const props = this.cellProperties;
|
||||
board.map((row, y) => {
|
||||
const d = props.size;
|
||||
return row.map((cell, x) => {
|
||||
this.ctx.fillStyle = (() => {
|
||||
if (cell === 1) return props.liveColor;
|
||||
return props.deadColor;
|
||||
})();
|
||||
if (this.drawingDirection === "x")
|
||||
this.ctx.fillRect(y * d, x * d, d, d);
|
||||
else this.ctx.fillRect(x * d, y * d, d, d);
|
||||
return cell;
|
||||
});
|
||||
});
|
||||
},
|
||||
compute1dInitialState() {
|
||||
if (this.initial1dState === "onecell")
|
||||
return create1dStateOneCell(this.boardWidth);
|
||||
return create1dState(this.boardWidth, getRandomInt, [0, 2]);
|
||||
},
|
||||
draw1d() {
|
||||
const initialState = this.compute1dInitialState();
|
||||
const board = createBoard(
|
||||
initialState,
|
||||
this.rules.rules,
|
||||
this.boardWidth
|
||||
);
|
||||
this.$store.commit("setLastBoard", Object.freeze(board));
|
||||
this.drawCanvas(board);
|
||||
this.$store.dispatch("stop");
|
||||
},
|
||||
draw2d(board) {
|
||||
if (!this.canDraw) return;
|
||||
const draw2dNext = async (b) => {
|
||||
if (!this.canDraw) return;
|
||||
const newBoard = evolve2d(b, conwayRules);
|
||||
this.drawCanvas(b, this.cellProperties);
|
||||
await sleep(this.refreshRate);
|
||||
draw2dNext(newBoard);
|
||||
import { mapActions, mapState, mapWritableState } from "pinia";
|
||||
import { globalStore } from "../stores/index.js";
|
||||
import {
|
||||
create1dState,
|
||||
create1dStateOneCell,
|
||||
create2dState,
|
||||
createBoard,
|
||||
conwayRules,
|
||||
evolve2d,
|
||||
} from "../modules/automata.js";
|
||||
import { getRandomInt, sleep } from "../modules/common.js";
|
||||
|
||||
export default {
|
||||
name: "CanvasBoard",
|
||||
data() {
|
||||
return {
|
||||
canvas: null,
|
||||
ctx: null,
|
||||
};
|
||||
return draw2dNext(board);
|
||||
},
|
||||
draw2dNew() {
|
||||
const initialState = create2dState(
|
||||
this.boardWidth,
|
||||
this.boardHeight,
|
||||
getRandomInt,
|
||||
[0, 2]
|
||||
);
|
||||
const board = evolve2d(initialState, conwayRules);
|
||||
this.$store.commit("setLastBoard", Object.freeze(board));
|
||||
this.draw2d(board);
|
||||
computed: {
|
||||
...mapState(globalStore, {
|
||||
cellProperties: "cellProperties",
|
||||
ruleset: "ruleset1d",
|
||||
refreshRate: "refreshRate",
|
||||
initial1dState: "initial1dState",
|
||||
drawingDirection: "drawingDirection",
|
||||
canDraw: "canDraw",
|
||||
getDraw1d: "draw1d",
|
||||
getDraw2d: "draw2d",
|
||||
getDraw2dLast: "draw2dLast",
|
||||
boardWidth: "boardWidth",
|
||||
boardHeight: "boardHeight",
|
||||
}),
|
||||
...mapWritableState(globalStore, {
|
||||
lastBoard: "lastBoard",
|
||||
canvasWidth: "canvasWidth",
|
||||
canvasHeight: "canvasHeight",
|
||||
getReset: "reset",
|
||||
}),
|
||||
},
|
||||
async draw2dLast() {
|
||||
this.draw2d(this.lastBoard);
|
||||
watch: {
|
||||
getDraw1d(value) {
|
||||
if (value == true) this.draw1d();
|
||||
},
|
||||
getDraw2d(value) {
|
||||
if (value == true) this.draw2dNew();
|
||||
},
|
||||
getDraw2dLast(value) {
|
||||
if (value == true) this.draw2dLast();
|
||||
},
|
||||
getReset(value) {
|
||||
if (value == true) this.reset();
|
||||
},
|
||||
},
|
||||
reset() {
|
||||
this.$store.dispatch("stop");
|
||||
this.ctx.clearRect(0, 0, this.canvas.width, this.canvas.height);
|
||||
this.$store.commit("toggleReset", 0);
|
||||
mounted() {
|
||||
this.canvas = Object.freeze(document.getElementById("canvas-board"));
|
||||
this.ctx = this.canvas.getContext("2d");
|
||||
this.canvasWidth = this.canvas.parentElement.clientWidth;
|
||||
this.canvasHeight = this.canvas.parentElement.clientHeight;
|
||||
this.setBoardWidth();
|
||||
this.setBoardHeight();
|
||||
},
|
||||
},
|
||||
};
|
||||
methods: {
|
||||
...mapActions(globalStore, [
|
||||
"toggleStop",
|
||||
"setBoardWidth",
|
||||
"setBoardHeight",
|
||||
]),
|
||||
drawCanvas(board) {
|
||||
const props = this.cellProperties;
|
||||
board.map((row, y) => {
|
||||
const d = props.size;
|
||||
return row.map((cell, x) => {
|
||||
this.ctx.fillStyle = (() => {
|
||||
if (cell === 1) return props.liveColor;
|
||||
return props.deadColor;
|
||||
})();
|
||||
if (this.drawingDirection === "x")
|
||||
this.ctx.fillRect(y * d, x * d, d, d);
|
||||
else this.ctx.fillRect(x * d, y * d, d, d);
|
||||
return cell;
|
||||
});
|
||||
});
|
||||
},
|
||||
compute1dInitialState() {
|
||||
if (this.initial1dState === "onecell")
|
||||
return create1dStateOneCell(this.boardWidth);
|
||||
return create1dState(this.boardWidth, getRandomInt, [0, 2]);
|
||||
},
|
||||
draw1d() {
|
||||
const initialState = this.compute1dInitialState();
|
||||
const board = createBoard(
|
||||
initialState,
|
||||
this.ruleset.rules,
|
||||
this.boardWidth
|
||||
);
|
||||
this.lastBoard = Object.freeze(board);
|
||||
this.drawCanvas(board);
|
||||
this.toggleStop();
|
||||
},
|
||||
draw2d(board) {
|
||||
if (!this.canDraw) return;
|
||||
const draw2dNext = async (b) => {
|
||||
if (!this.canDraw) return;
|
||||
const newBoard = evolve2d(b, conwayRules);
|
||||
this.drawCanvas(b, this.cellProperties);
|
||||
await sleep(this.refreshRate);
|
||||
draw2dNext(newBoard);
|
||||
};
|
||||
return draw2dNext(board);
|
||||
},
|
||||
draw2dNew() {
|
||||
const initialState = create2dState(
|
||||
this.boardWidth,
|
||||
this.boardHeight,
|
||||
getRandomInt,
|
||||
[0, 2]
|
||||
);
|
||||
const board = evolve2d(initialState, conwayRules);
|
||||
this.lastBoard = Object.freeze(board);
|
||||
this.draw2d(board);
|
||||
},
|
||||
async draw2dLast() {
|
||||
if (this.lastBoard != undefined) this.draw2d(this.lastBoard);
|
||||
},
|
||||
reset() {
|
||||
this.toggleStop();
|
||||
this.ctx.clearRect(0, 0, this.canvas.width, this.canvas.height);
|
||||
this.getReset = 0;
|
||||
},
|
||||
},
|
||||
};
|
||||
</script>
|
||||
<style>
|
||||
#mainContent {
|
||||
min-width: 70%;
|
||||
}
|
||||
#canvas-board {
|
||||
flex: 1;
|
||||
margin: 0 auto;
|
||||
}
|
||||
</style>
|
||||
|
||||
@ -1,5 +1,5 @@
|
||||
<template>
|
||||
<div id="sidebar">
|
||||
<div id="main-menu">
|
||||
<MenuGeneralOptions />
|
||||
<MenuCellProperties />
|
||||
<MenuElementaryCA />
|
||||
@ -8,55 +8,45 @@
|
||||
</template>
|
||||
|
||||
<script>
|
||||
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,
|
||||
},
|
||||
};
|
||||
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>
|
||||
#sidebar {
|
||||
width: 25%;
|
||||
padding: 0 10px;
|
||||
overflow-y: scroll;
|
||||
}
|
||||
|
||||
/* Hide scrollbar for Chrome, Safari and Opera */
|
||||
#sidebar::-webkit-scrollbar {
|
||||
display: none;
|
||||
}
|
||||
|
||||
/* Hide scrollbar for IE, Edge and Firefox */
|
||||
#sidebar {
|
||||
-ms-overflow-style: none; /* IE and Edge */
|
||||
scrollbar-width: none; /* Firefox */
|
||||
}
|
||||
|
||||
@media screen and (max-width: 800px) {
|
||||
#container {
|
||||
#main-menu {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
justify-content: center;
|
||||
flex-direction: row;
|
||||
width: 100%;
|
||||
|
||||
flex: 1;
|
||||
}
|
||||
|
||||
#mainContent {
|
||||
flex: 1;
|
||||
width: 100%;
|
||||
/* Hide scrollbar for Chrome, Safari and Opera */
|
||||
#main-menu::-webkit-scrollbar {
|
||||
display: none;
|
||||
}
|
||||
|
||||
#sidebar {
|
||||
flex: 1;
|
||||
padding: 0;
|
||||
width: 100%;
|
||||
/* Hide scrollbar for IE, Edge and Firefox */
|
||||
#main-menu {
|
||||
-ms-overflow-style: none; /* IE and Edge */
|
||||
scrollbar-width: none; /* Firefox */
|
||||
}
|
||||
|
||||
@media screen and (max-width: 800px) {
|
||||
#main-menu {
|
||||
flex-direction: column;
|
||||
position: absolute;
|
||||
}
|
||||
}
|
||||
}
|
||||
</style>
|
||||
|
||||
@ -1,56 +1,33 @@
|
||||
<template>
|
||||
<MenuRow row-title="2D Cellular Automata">
|
||||
<MenuRow row-title="2D Cellular Automaton">
|
||||
<div class="form-field">
|
||||
<label>Start from last result</label>
|
||||
<input type="button" value="start" @click="draw2dLast" />
|
||||
<label>Start from empty board</label>
|
||||
<input
|
||||
type="button"
|
||||
name="start2d"
|
||||
value="start"
|
||||
@click="toggleDraw2d()"
|
||||
/>
|
||||
</div>
|
||||
<div class="form-field">
|
||||
<input type="button" name="start2d" value="start" @click="draw2d" />
|
||||
<input
|
||||
type="button"
|
||||
name="stop"
|
||||
class="stop"
|
||||
value="stop"
|
||||
@click="stop"
|
||||
/>
|
||||
<input
|
||||
type="button"
|
||||
name="reset"
|
||||
class="reset"
|
||||
value="reset"
|
||||
@click="reset"
|
||||
/>
|
||||
<label>Start from last result</label>
|
||||
<input type="button" value="start" @click="toggleDraw2dLast()" />
|
||||
</div>
|
||||
</MenuRow>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import MenuRow from "./MenuRow.vue";
|
||||
import { mapGetters } from "vuex";
|
||||
import { mapActions } from "pinia";
|
||||
import MenuRow from "./MenuRow.vue";
|
||||
import { globalStore } from "../stores/index.js";
|
||||
|
||||
export default {
|
||||
name: "Menu2dCA",
|
||||
components: {
|
||||
MenuRow,
|
||||
},
|
||||
computed: {
|
||||
...mapGetters({
|
||||
lastBoard: "getLastBoard",
|
||||
}),
|
||||
},
|
||||
methods: {
|
||||
draw2d() {
|
||||
this.$store.dispatch("draw2d");
|
||||
export default {
|
||||
name: "Menu2dCA",
|
||||
components: {
|
||||
MenuRow,
|
||||
},
|
||||
draw2dLast() {
|
||||
this.$store.dispatch("draw2dLast");
|
||||
methods: {
|
||||
...mapActions(globalStore, ["toggleDraw2dLast", "toggleDraw2d"]),
|
||||
},
|
||||
reset() {
|
||||
this.$store.dispatch("reset");
|
||||
},
|
||||
stop() {
|
||||
this.$store.dispatch("stop");
|
||||
},
|
||||
},
|
||||
};
|
||||
};
|
||||
</script>
|
||||
|
||||
@ -34,29 +34,27 @@
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import MenuRow from "./MenuRow.vue";
|
||||
export default {
|
||||
name: "MainMenu",
|
||||
components: {
|
||||
MenuRow,
|
||||
},
|
||||
data() {
|
||||
return {
|
||||
cellProperties: this.$store.state.cellProperties,
|
||||
};
|
||||
},
|
||||
methods: {
|
||||
getCellProperties(event) {
|
||||
const elem = event.target;
|
||||
const prop = this.$store.state.cellProperties;
|
||||
return prop[elem.name];
|
||||
import { mapWritableState } from "pinia";
|
||||
import { globalStore } from "../stores/index.js";
|
||||
import MenuRow from "./MenuRow.vue";
|
||||
export default {
|
||||
name: "MainMenu",
|
||||
components: {
|
||||
MenuRow,
|
||||
},
|
||||
updateCellProperties(event) {
|
||||
const elem = event.target;
|
||||
const prop = { name: elem.name, value: elem.value };
|
||||
//console.log(prop)
|
||||
this.$store.commit("setCellProperties", prop);
|
||||
computed: {
|
||||
...mapWritableState(globalStore, ["cellProperties"]),
|
||||
},
|
||||
},
|
||||
};
|
||||
methods: {
|
||||
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;
|
||||
},
|
||||
},
|
||||
};
|
||||
</script>
|
||||
|
||||
@ -1,5 +1,5 @@
|
||||
<template>
|
||||
<MenuRow row-title="Elementary Cellular Automata">
|
||||
<MenuRow row-title="Elementary Automaton">
|
||||
<form>
|
||||
<div class="form-field">
|
||||
<label>
|
||||
@ -29,11 +29,11 @@
|
||||
<br />
|
||||
<select
|
||||
name="ruleset-elementary"
|
||||
:value="rules.name"
|
||||
@input="updateRules"
|
||||
:value="ruleset.name"
|
||||
@input="updateRuleset"
|
||||
>
|
||||
<option
|
||||
v-for="(ruleset, index) in presetRules"
|
||||
v-for="(ruleset, index) in presetRuleset"
|
||||
:key="'ruleset-preset-elementary-' + index"
|
||||
:value="ruleset.name"
|
||||
>
|
||||
@ -43,10 +43,10 @@
|
||||
</label>
|
||||
</div>
|
||||
<div class="form-field">
|
||||
<a style="cursor: pointer" @click="copyRules">copy rules</a>
|
||||
<a style="cursor: pointer" @click="copyRuleset">copy rules</a>
|
||||
</div>
|
||||
<div
|
||||
v-for="(rule, name, index) in rules.rules"
|
||||
v-for="(rule, name, index) in ruleset.rules"
|
||||
:key="'rule-' + index"
|
||||
class="form-field"
|
||||
>
|
||||
@ -63,183 +63,78 @@
|
||||
</div>
|
||||
</form>
|
||||
<div class="form-field">
|
||||
<input type="button" name="start" value="start" @click="draw1d" />
|
||||
<input
|
||||
type="button"
|
||||
name="reset"
|
||||
class="reset"
|
||||
value="reset"
|
||||
@click="reset"
|
||||
/>
|
||||
<input type="button" name="start" value="start" @click="toggleDraw1d()" />
|
||||
</div>
|
||||
</MenuRow>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import { mapGetters } from "vuex";
|
||||
import MenuRow from "./MenuRow.vue";
|
||||
export default {
|
||||
name: "MenuElementaryCA",
|
||||
components: {
|
||||
MenuRow,
|
||||
},
|
||||
data() {
|
||||
// TODO: Why not a getter in the store?
|
||||
return {
|
||||
presetRules: [
|
||||
{
|
||||
name: "rule 73",
|
||||
rules: {
|
||||
100: 0,
|
||||
101: 0,
|
||||
110: 1,
|
||||
111: 0,
|
||||
"011": 1,
|
||||
"010": 0,
|
||||
"001": 0,
|
||||
"000": 1,
|
||||
},
|
||||
},
|
||||
{
|
||||
name: "rule 86",
|
||||
rules: {
|
||||
100: 1,
|
||||
101: 0,
|
||||
110: 0,
|
||||
111: 1,
|
||||
"011": 0,
|
||||
"010": 1,
|
||||
"001": 0,
|
||||
"000": 1,
|
||||
},
|
||||
},
|
||||
{
|
||||
name: "rule 90",
|
||||
rules: {
|
||||
100: 1,
|
||||
101: 0,
|
||||
110: 1,
|
||||
111: 0,
|
||||
"011": 0,
|
||||
"010": 0,
|
||||
"001": 1,
|
||||
"000": 0,
|
||||
},
|
||||
},
|
||||
{
|
||||
name: "rule 45?",
|
||||
rules: {
|
||||
100: 0,
|
||||
101: 0,
|
||||
110: 1,
|
||||
111: 0,
|
||||
"011": 1,
|
||||
"010": 0,
|
||||
"001": 1,
|
||||
"000": 1,
|
||||
},
|
||||
},
|
||||
{
|
||||
name: "rule 54?",
|
||||
rules: {
|
||||
100: 1,
|
||||
101: 0,
|
||||
110: 1,
|
||||
111: 1,
|
||||
"011": 0,
|
||||
"010": 1,
|
||||
"001": 1,
|
||||
"000": 0,
|
||||
},
|
||||
},
|
||||
{
|
||||
name: "unknown rule",
|
||||
rules: {
|
||||
100: 0,
|
||||
101: 0,
|
||||
110: 0,
|
||||
111: 1,
|
||||
"011": 0,
|
||||
"010": 0,
|
||||
"001": 1,
|
||||
"000": 1,
|
||||
},
|
||||
},
|
||||
],
|
||||
initialStates: [
|
||||
{
|
||||
id: "onecell",
|
||||
name: "One cell at center",
|
||||
description: "State with a single cell in the middle",
|
||||
},
|
||||
{
|
||||
id: "random",
|
||||
name: "Random cell",
|
||||
description: "State populated with random cells",
|
||||
},
|
||||
],
|
||||
};
|
||||
},
|
||||
computed: {
|
||||
...mapGetters({
|
||||
initialState: "getInitial1dState",
|
||||
rules: "get1dRules",
|
||||
}),
|
||||
rules1dFileName() {
|
||||
return (
|
||||
Object.keys(this.rules)
|
||||
.map((index) => {
|
||||
return this.rules[index];
|
||||
})
|
||||
.join("_") + ".json"
|
||||
);
|
||||
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,
|
||||
},
|
||||
},
|
||||
methods: {
|
||||
copyRules() {
|
||||
const rules = JSON.stringify(this.rules);
|
||||
navigator.clipboard.writeText(rules);
|
||||
data() {
|
||||
return {
|
||||
presetRuleset: presetRuleset,
|
||||
initialStates: initialStates,
|
||||
};
|
||||
},
|
||||
isCurrentPreset(event) {
|
||||
const elem = event.target;
|
||||
return this.initialState === elem.value;
|
||||
computed: {
|
||||
...mapWritableState(globalStore, {
|
||||
initialState: "initial1dState",
|
||||
ruleset: "ruleset1d",
|
||||
}),
|
||||
rules1dFileName() {
|
||||
// TODO: broken
|
||||
return (
|
||||
Object.keys(this.ruleset)
|
||||
.map((index) => {
|
||||
return this.ruleset[index];
|
||||
})
|
||||
.join("_") + ".json"
|
||||
);
|
||||
},
|
||||
},
|
||||
updateSingleRule(event) {
|
||||
const elem = event.target;
|
||||
const value = elem.checked ? 1 : 0;
|
||||
const data = { rule: elem.name, value: value };
|
||||
this.$store.commit("update1dSingleRule", data);
|
||||
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;
|
||||
},
|
||||
},
|
||||
updateRules(event) {
|
||||
// TODO : change this, awfully confusing
|
||||
const elem = event.target;
|
||||
const name = elem.value;
|
||||
const rules = this.presetRules.find((ruleset) => {
|
||||
return ruleset.name === name;
|
||||
});
|
||||
Object.keys(rules.rules).map((value) => {
|
||||
const data = { name: name, rule: value, value: rules.rules[value] };
|
||||
this.$store.commit("update1dSingleRule", data);
|
||||
});
|
||||
},
|
||||
updateInitialState(event) {
|
||||
const elem = event.target;
|
||||
this.$store.commit("setInitial1dState", elem.value);
|
||||
},
|
||||
draw1d() {
|
||||
this.$store.dispatch("draw1d");
|
||||
},
|
||||
reset() {
|
||||
this.$store.dispatch("reset");
|
||||
},
|
||||
},
|
||||
};
|
||||
};
|
||||
</script>
|
||||
<style>
|
||||
.menu-row a {
|
||||
color: white;
|
||||
font-weight: bold;
|
||||
text-decoration: none;
|
||||
font-size: small;
|
||||
}
|
||||
.menu-row a {
|
||||
color: white;
|
||||
font-weight: bold;
|
||||
text-decoration: none;
|
||||
font-size: small;
|
||||
}
|
||||
</style>
|
||||
|
||||
@ -56,40 +56,40 @@
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import MenuRow from "./MenuRow.vue";
|
||||
import { mapGetters } from "vuex";
|
||||
export default {
|
||||
name: "MenuGeneralOptions",
|
||||
components: {
|
||||
MenuRow,
|
||||
},
|
||||
computed: {
|
||||
...mapGetters({
|
||||
canvasWidth: "getCanvasWidth",
|
||||
canvasHeight: "getCanvasHeight",
|
||||
refreshRate: "getRefreshRate",
|
||||
drawingDirection: "getDrawingDirection",
|
||||
}),
|
||||
},
|
||||
methods: {
|
||||
updateCanvasHeight: function (event) {
|
||||
const elem = event.target;
|
||||
this.$store.commit("setCanvasHeight", elem.value);
|
||||
import { mapWritableState } from "pinia";
|
||||
import { globalStore } from "../stores/index.js";
|
||||
import MenuRow from "./MenuRow.vue";
|
||||
export default {
|
||||
name: "MenuGeneralOptions",
|
||||
components: {
|
||||
MenuRow,
|
||||
},
|
||||
updateCanvasWidth: function (event) {
|
||||
const elem = event.target;
|
||||
this.$store.commit("setCanvasWidth", elem.value);
|
||||
computed: {
|
||||
...mapWritableState(globalStore, [
|
||||
"canvasWidth",
|
||||
"canvasHeight",
|
||||
"refreshRate",
|
||||
"drawingDirection",
|
||||
]),
|
||||
},
|
||||
updateRefreshRate: function (event) {
|
||||
const elem = event.target;
|
||||
this.$store.commit("setRefreshRate", elem.value);
|
||||
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;
|
||||
},
|
||||
},
|
||||
updateDrawingDirection: function (event) {
|
||||
const elem = event.target;
|
||||
const value = elem.checked ? "x" : "y";
|
||||
this.$store.commit("setDrawingDirection", value);
|
||||
console.log(this.drawingDirection);
|
||||
},
|
||||
},
|
||||
};
|
||||
};
|
||||
</script>
|
||||
|
||||
36
src/components/MenuReset.vue
Normal file
36
src/components/MenuReset.vue
Normal file
@ -0,0 +1,36 @@
|
||||
<template>
|
||||
<div class="form-field">
|
||||
<input
|
||||
type="button"
|
||||
name="stop"
|
||||
class="stop"
|
||||
value="stop"
|
||||
@click="toggleStop()"
|
||||
/>
|
||||
<input
|
||||
type="button"
|
||||
name="reset"
|
||||
class="reset"
|
||||
value="reset"
|
||||
@click="toggleReset()"
|
||||
/>
|
||||
</div>
|
||||
</template>
|
||||
<script>
|
||||
import { mapActions } from "pinia";
|
||||
import { globalStore } from "../stores/index.js";
|
||||
|
||||
export default {
|
||||
name: "MenuReset",
|
||||
methods: {
|
||||
...mapActions(globalStore, ["toggleReset", "toggleStop"]),
|
||||
},
|
||||
};
|
||||
</script>
|
||||
<style scoped>
|
||||
.form-field {
|
||||
display: flex;
|
||||
margin: 5px;
|
||||
justify-content: flex-end;
|
||||
}
|
||||
</style>
|
||||
@ -3,73 +3,103 @@
|
||||
<h2 :id="rowTitle" @click="updateActiveMenu">
|
||||
{{ rowTitle }}
|
||||
</h2>
|
||||
<div v-if="activeMenu === rowTitle" class="menu-row-content">
|
||||
<div class="menu-row-content">
|
||||
<slot />
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import { mapGetters } from "vuex";
|
||||
|
||||
export default {
|
||||
name: "MenuRow",
|
||||
props: {
|
||||
rowTitle: {
|
||||
type: String,
|
||||
default: "",
|
||||
export default {
|
||||
name: "MenuRow",
|
||||
props: {
|
||||
rowTitle: {
|
||||
type: String,
|
||||
default: "",
|
||||
},
|
||||
},
|
||||
},
|
||||
computed: {
|
||||
...mapGetters({
|
||||
activeMenu: "getActiveMenu",
|
||||
}),
|
||||
},
|
||||
methods: {
|
||||
updateActiveMenu(event) {
|
||||
const elem = event.target;
|
||||
const value = elem.id;
|
||||
if (value == this.activeMenu) this.$store.commit("setActiveMenu", "");
|
||||
else this.$store.commit("setActiveMenu", value);
|
||||
},
|
||||
},
|
||||
};
|
||||
};
|
||||
</script>
|
||||
|
||||
<style>
|
||||
.menu-row h2 {
|
||||
font-size: medium;
|
||||
padding: 10px;
|
||||
cursor: pointer;
|
||||
border: 2px solid darkgrey;
|
||||
margin: 0 0 10px 0;
|
||||
}
|
||||
.menu-row h2 {
|
||||
font-size: medium;
|
||||
padding: 10px;
|
||||
cursor: pointer;
|
||||
border-bottom: 1px solid var(--dark3);
|
||||
border-top: 1px solid var(--dark3);
|
||||
margin: 0 0 10px 0;
|
||||
}
|
||||
|
||||
select {
|
||||
margin-top: 10px;
|
||||
padding: 5px;
|
||||
}
|
||||
select {
|
||||
margin-top: 10px;
|
||||
padding: 5px;
|
||||
}
|
||||
|
||||
input[type="button"] {
|
||||
min-width: 60px;
|
||||
padding: 5px;
|
||||
font-weight: bold;
|
||||
margin-right: 10px;
|
||||
}
|
||||
input[type="button"] {
|
||||
min-width: 60px;
|
||||
padding: 5px;
|
||||
font-weight: bold;
|
||||
margin-right: 10px;
|
||||
}
|
||||
|
||||
.form-field {
|
||||
display: flex;
|
||||
margin: 10px;
|
||||
justify-content: space-between;
|
||||
}
|
||||
.form-field {
|
||||
display: flex;
|
||||
margin: 10px;
|
||||
justify-content: space-between;
|
||||
}
|
||||
|
||||
.menu-row {
|
||||
flex: 1;
|
||||
}
|
||||
.menu-row {
|
||||
flex: 1;
|
||||
position: relative;
|
||||
}
|
||||
|
||||
label,
|
||||
.form-field label {
|
||||
margin-right: 10px;
|
||||
font-weight: bold;
|
||||
}
|
||||
.menu-row:hover .menu-row-content {
|
||||
display: block;
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
.menu-row-content {
|
||||
position: absolute;
|
||||
background: var(--dark1);
|
||||
display: none;
|
||||
}
|
||||
|
||||
label,
|
||||
.form-field label {
|
||||
margin-right: 10px;
|
||||
font-weight: bold;
|
||||
}
|
||||
|
||||
@media screen and (max-width: 800px) {
|
||||
.menu-row {
|
||||
margin: 0 auto;
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
.menu-row h2,
|
||||
.form-field {
|
||||
margin: 0;
|
||||
}
|
||||
|
||||
.menu-row h2 {
|
||||
border-bottom: 1px solid var(--dark3);
|
||||
border-top: none;
|
||||
}
|
||||
|
||||
.form-field {
|
||||
padding: 10px;
|
||||
}
|
||||
|
||||
.menu-row:active .menu-row-content {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
height: 100%;
|
||||
}
|
||||
|
||||
.menu-row-content {
|
||||
position: relative;
|
||||
width: 100%;
|
||||
}
|
||||
}
|
||||
</style>
|
||||
|
||||
95
src/components/preset.js
Normal file
95
src/components/preset.js
Normal file
@ -0,0 +1,95 @@
|
||||
const presetRuleset = [
|
||||
{
|
||||
name: "rule 73",
|
||||
rules: {
|
||||
100: 0,
|
||||
101: 0,
|
||||
110: 1,
|
||||
111: 0,
|
||||
"011": 1,
|
||||
"010": 0,
|
||||
"001": 0,
|
||||
"000": 1,
|
||||
},
|
||||
},
|
||||
{
|
||||
name: "rule 86",
|
||||
rules: {
|
||||
100: 1,
|
||||
101: 0,
|
||||
110: 0,
|
||||
111: 1,
|
||||
"011": 0,
|
||||
"010": 1,
|
||||
"001": 0,
|
||||
"000": 1,
|
||||
},
|
||||
},
|
||||
{
|
||||
name: "rule 90",
|
||||
rules: {
|
||||
100: 1,
|
||||
101: 0,
|
||||
110: 1,
|
||||
111: 0,
|
||||
"011": 0,
|
||||
"010": 0,
|
||||
"001": 1,
|
||||
"000": 0,
|
||||
},
|
||||
},
|
||||
{
|
||||
name: "rule 45?",
|
||||
rules: {
|
||||
100: 0,
|
||||
101: 0,
|
||||
110: 1,
|
||||
111: 0,
|
||||
"011": 1,
|
||||
"010": 0,
|
||||
"001": 1,
|
||||
"000": 1,
|
||||
},
|
||||
},
|
||||
{
|
||||
name: "rule 54?",
|
||||
rules: {
|
||||
100: 1,
|
||||
101: 0,
|
||||
110: 1,
|
||||
111: 1,
|
||||
"011": 0,
|
||||
"010": 1,
|
||||
"001": 1,
|
||||
"000": 0,
|
||||
},
|
||||
},
|
||||
{
|
||||
name: "unknown rule",
|
||||
rules: {
|
||||
100: 0,
|
||||
101: 0,
|
||||
110: 0,
|
||||
111: 1,
|
||||
"011": 0,
|
||||
"010": 0,
|
||||
"001": 1,
|
||||
"000": 1,
|
||||
},
|
||||
},
|
||||
];
|
||||
|
||||
const initialStates = [
|
||||
{
|
||||
id: "onecell",
|
||||
name: "One cell at center",
|
||||
description: "State with a single cell in the middle",
|
||||
},
|
||||
{
|
||||
id: "random",
|
||||
name: "Random cell",
|
||||
description: "State populated with random cells",
|
||||
},
|
||||
];
|
||||
|
||||
export { presetRuleset, initialStates };
|
||||
@ -1,9 +1,10 @@
|
||||
import { createApp } from "vue";
|
||||
import App from "./App.vue";
|
||||
import { store } from "./store";
|
||||
import { createPinia } from "pinia";
|
||||
|
||||
const app = createApp(App);
|
||||
const pinia = createPinia();
|
||||
|
||||
app.use(store);
|
||||
app.use(pinia);
|
||||
|
||||
app.mount("#app");
|
||||
|
||||
95
src/modules/preset.js
Normal file
95
src/modules/preset.js
Normal file
@ -0,0 +1,95 @@
|
||||
const presetRuleset = [
|
||||
{
|
||||
name: "rule 73",
|
||||
rules: {
|
||||
100: 0,
|
||||
101: 0,
|
||||
110: 1,
|
||||
111: 0,
|
||||
"011": 1,
|
||||
"010": 0,
|
||||
"001": 0,
|
||||
"000": 1,
|
||||
},
|
||||
},
|
||||
{
|
||||
name: "rule 86",
|
||||
rules: {
|
||||
100: 1,
|
||||
101: 0,
|
||||
110: 0,
|
||||
111: 1,
|
||||
"011": 0,
|
||||
"010": 1,
|
||||
"001": 0,
|
||||
"000": 1,
|
||||
},
|
||||
},
|
||||
{
|
||||
name: "rule 90",
|
||||
rules: {
|
||||
100: 1,
|
||||
101: 0,
|
||||
110: 1,
|
||||
111: 0,
|
||||
"011": 0,
|
||||
"010": 0,
|
||||
"001": 1,
|
||||
"000": 0,
|
||||
},
|
||||
},
|
||||
{
|
||||
name: "rule 45?",
|
||||
rules: {
|
||||
100: 0,
|
||||
101: 0,
|
||||
110: 1,
|
||||
111: 0,
|
||||
"011": 1,
|
||||
"010": 0,
|
||||
"001": 1,
|
||||
"000": 1,
|
||||
},
|
||||
},
|
||||
{
|
||||
name: "rule 54?",
|
||||
rules: {
|
||||
100: 1,
|
||||
101: 0,
|
||||
110: 1,
|
||||
111: 1,
|
||||
"011": 0,
|
||||
"010": 1,
|
||||
"001": 1,
|
||||
"000": 0,
|
||||
},
|
||||
},
|
||||
{
|
||||
name: "unknown rule",
|
||||
rules: {
|
||||
100: 0,
|
||||
101: 0,
|
||||
110: 0,
|
||||
111: 1,
|
||||
"011": 0,
|
||||
"010": 0,
|
||||
"001": 1,
|
||||
"000": 1,
|
||||
},
|
||||
},
|
||||
];
|
||||
|
||||
const initialStates = [
|
||||
{
|
||||
id: "onecell",
|
||||
name: "One cell at center",
|
||||
description: "State with a single cell in the middle",
|
||||
},
|
||||
{
|
||||
id: "random",
|
||||
name: "Random cell",
|
||||
description: "State populated with random cells",
|
||||
},
|
||||
];
|
||||
|
||||
export { presetRuleset, initialStates };
|
||||
@ -1,174 +0,0 @@
|
||||
/* TODO: terminology is to be changed for :
|
||||
canvas/board :
|
||||
currently, the canvas object is named board,
|
||||
while the structure used to store automata current state is named "board" as well. This is confusing
|
||||
drawing board could be enough to lift any ambiguity
|
||||
|
||||
rules:
|
||||
confusion bewteen ruleset and rules.
|
||||
it's never clear if we refers to a rule or the whole (named) set
|
||||
*/
|
||||
import { createStore } from "vuex";
|
||||
|
||||
export const store = createStore({
|
||||
strict: process.env.NODE_ENV !== "production",
|
||||
state: {
|
||||
rules1d: {
|
||||
name: "rule 73",
|
||||
rules: {
|
||||
111: 0,
|
||||
110: 1,
|
||||
101: 0,
|
||||
100: 0,
|
||||
"011": 1,
|
||||
"010": 0,
|
||||
"001": 0,
|
||||
"000": 1,
|
||||
},
|
||||
},
|
||||
cellProperties: {
|
||||
size: 3,
|
||||
liveColor: "#000000",
|
||||
deadColor: "#F5F5F5",
|
||||
},
|
||||
canvasWidth: 0,
|
||||
canvasHeight: 0,
|
||||
boardWidth: 0,
|
||||
boardHeight: 0,
|
||||
refreshRate: 300,
|
||||
initial1dState: "onecell",
|
||||
activeMenu: "",
|
||||
drawingDirection: "y",
|
||||
lastBoard: {},
|
||||
draw1d: false,
|
||||
draw2d: false,
|
||||
draw2dLast: false,
|
||||
reset: false,
|
||||
canDraw: true,
|
||||
},
|
||||
mutations: {
|
||||
update1dSingleRule(state, data) {
|
||||
state.rules1d.name = data.name;
|
||||
state.rules1d.rules[data.rule] = data.value;
|
||||
},
|
||||
update1dRules(state, data) {
|
||||
state.rules1d = data;
|
||||
},
|
||||
setCellProperties(state, data) {
|
||||
state.cellProperties[data.name] = data.value;
|
||||
},
|
||||
setCanvasWidth(state, data) {
|
||||
state.canvasWidth = data;
|
||||
},
|
||||
setCanvasHeight(state, data) {
|
||||
state.canvasHeight = data;
|
||||
},
|
||||
setRefreshRate(state, data) {
|
||||
state.refreshRate = data;
|
||||
},
|
||||
setInitial1dState(state, data) {
|
||||
state.initial1dState = data;
|
||||
},
|
||||
setActiveMenu(state, data) {
|
||||
state.activeMenu = data;
|
||||
},
|
||||
setDrawingDirection(state, data) {
|
||||
state.drawingDirection = data;
|
||||
},
|
||||
setLastBoard(state, data) {
|
||||
state.lastBoard = data;
|
||||
},
|
||||
setCanvas(state, data) {
|
||||
state.canvas = data;
|
||||
},
|
||||
setContext(state, data) {
|
||||
state.ctx = data;
|
||||
},
|
||||
toggleDraw1d(state, data) {
|
||||
state.draw1d = data;
|
||||
},
|
||||
toggleDraw2d(state, data) {
|
||||
state.draw2d = data;
|
||||
},
|
||||
toggleDraw2dLast(state, data) {
|
||||
state.draw2dLast = data;
|
||||
},
|
||||
toggleReset(state, data) {
|
||||
state.reset = data;
|
||||
},
|
||||
canDraw(state, data) {
|
||||
state.canDraw = data;
|
||||
},
|
||||
},
|
||||
getters: {
|
||||
getCellProperties(state) {
|
||||
return state.cellProperties;
|
||||
},
|
||||
get1dRules(state) {
|
||||
return state.rules1d;
|
||||
},
|
||||
getRule1d(state) {
|
||||
return state.rules1d;
|
||||
},
|
||||
getCanvasWidth(state) {
|
||||
return state.canvasWidth;
|
||||
},
|
||||
getCanvasHeight(state) {
|
||||
return state.canvasHeight;
|
||||
},
|
||||
getRefreshRate(state) {
|
||||
return state.refreshRate;
|
||||
},
|
||||
getInitial1dState(state) {
|
||||
return state.initial1dState;
|
||||
},
|
||||
getActiveMenu(state) {
|
||||
return state.activeMenu;
|
||||
},
|
||||
getDrawingDirection(state) {
|
||||
return state.drawingDirection;
|
||||
},
|
||||
getLastBoard(state) {
|
||||
return state.lastBoard;
|
||||
},
|
||||
getDraw1d(state) {
|
||||
return state.draw1d;
|
||||
},
|
||||
getDraw2d(state) {
|
||||
return state.draw2d;
|
||||
},
|
||||
getDraw2dLast(state) {
|
||||
return state.draw2dLast;
|
||||
},
|
||||
getReset(state) {
|
||||
return state.reset;
|
||||
},
|
||||
getCanDraw(state) {
|
||||
return state.canDraw;
|
||||
},
|
||||
},
|
||||
actions: {
|
||||
draw1d({ commit }) {
|
||||
commit("toggleDraw1d", true);
|
||||
},
|
||||
draw2d({ commit }) {
|
||||
commit("canDraw", true);
|
||||
commit("toggleDraw2d", true);
|
||||
},
|
||||
draw2dLast({ commit }) {
|
||||
commit("canDraw", true);
|
||||
commit("toggleDraw2dLast", true);
|
||||
},
|
||||
reset({ dispatch, commit }) {
|
||||
dispatch("stop");
|
||||
commit("toggleReset", true);
|
||||
},
|
||||
stop({ commit }) {
|
||||
commit("toggleDraw1d", false);
|
||||
commit("toggleDraw2d", false);
|
||||
commit("toggleDraw2dLast", false);
|
||||
commit("canDraw", false);
|
||||
},
|
||||
},
|
||||
modules: {},
|
||||
});
|
||||
72
src/stores/index.js
Normal file
72
src/stores/index.js
Normal file
@ -0,0 +1,72 @@
|
||||
import { defineStore } from "pinia";
|
||||
|
||||
export const globalStore = defineStore("globalStore", {
|
||||
state: () => {
|
||||
return {
|
||||
ruleset1d: {
|
||||
name: "rule 73",
|
||||
rules: {
|
||||
111: 0,
|
||||
110: 1,
|
||||
101: 0,
|
||||
100: 0,
|
||||
"011": 1,
|
||||
"010": 0,
|
||||
"001": 0,
|
||||
"000": 1,
|
||||
},
|
||||
},
|
||||
cellProperties: {
|
||||
size: 3,
|
||||
liveColor: "#000000",
|
||||
deadColor: "#F5F5F5",
|
||||
},
|
||||
canvasWidth: 0,
|
||||
canvasHeight: 0,
|
||||
boardWidth: 0,
|
||||
boardHeight: 0,
|
||||
refreshRate: 300,
|
||||
initial1dState: "onecell",
|
||||
drawingDirection: "y",
|
||||
lastBoard: {},
|
||||
draw1d: false,
|
||||
draw2d: false,
|
||||
draw2dLast: false,
|
||||
reset: false,
|
||||
canDraw: true,
|
||||
};
|
||||
},
|
||||
actions: {
|
||||
setBoardWidth() {
|
||||
this.boardWidth = Math.floor(this.canvasWidth / this.cellProperties.size);
|
||||
},
|
||||
setBoardHeight() {
|
||||
this.boardHeight = Math.floor(
|
||||
this.canvasHeight / this.cellProperties.size
|
||||
);
|
||||
},
|
||||
toggleDraw1d() {
|
||||
this.draw1d = true;
|
||||
},
|
||||
toggleDraw2d() {
|
||||
this.toggleStop();
|
||||
this.canDraw = true;
|
||||
this.draw2d = true;
|
||||
},
|
||||
toggleDraw2dLast() {
|
||||
this.toggleStop();
|
||||
this.canDraw = true;
|
||||
this.draw2dLast = true;
|
||||
},
|
||||
toggleReset() {
|
||||
this.toggleStop();
|
||||
this.reset = true;
|
||||
},
|
||||
toggleStop() {
|
||||
this.draw1d = false;
|
||||
this.draw2d = false;
|
||||
this.draw2dLast = false;
|
||||
this.canDraw = false;
|
||||
},
|
||||
},
|
||||
});
|
||||
@ -1,13 +0,0 @@
|
||||
module.exports = {
|
||||
configureWebpack: {
|
||||
devServer: {
|
||||
overlay: {
|
||||
warnings: true,
|
||||
errors: true,
|
||||
},
|
||||
watchOptions: {
|
||||
ignored: [/node_modules/, /public/, /\.#/],
|
||||
},
|
||||
},
|
||||
},
|
||||
};
|
||||
Loading…
Reference in New Issue
Block a user