linting and formating
This commit is contained in:
parent
0556992c3b
commit
d7c2d45180
@ -1,9 +1,9 @@
|
|||||||
repos:
|
repos:
|
||||||
- repo: https://github.com/pre-commit/mirrors-eslint
|
- repo: https://github.com/pre-commit/mirrors-eslint
|
||||||
rev: 'v8.28.0'
|
rev: "v8.28.0"
|
||||||
hooks:
|
hooks:
|
||||||
- id: eslint
|
- id: eslint
|
||||||
- repo: https://github.com/pre-commit/mirrors-prettier
|
- repo: https://github.com/pre-commit/mirrors-prettier
|
||||||
rev: 'v2.7.1'
|
rev: "v2.7.1"
|
||||||
hooks:
|
hooks:
|
||||||
- id: prettier
|
- id: prettier
|
||||||
|
@ -9,7 +9,7 @@
|
|||||||
</main>
|
</main>
|
||||||
</template>
|
</template>
|
||||||
<script>
|
<script>
|
||||||
import { mapActions, mapState, mapWritableState } from 'pinia'
|
import { mapActions, mapState, mapWritableState } from "pinia";
|
||||||
import { globalStore } from "../stores/index.js";
|
import { globalStore } from "../stores/index.js";
|
||||||
import {
|
import {
|
||||||
create1dState,
|
create1dState,
|
||||||
@ -71,8 +71,8 @@
|
|||||||
mounted() {
|
mounted() {
|
||||||
this.canvas = Object.freeze(document.getElementById("canvas-board"));
|
this.canvas = Object.freeze(document.getElementById("canvas-board"));
|
||||||
this.ctx = this.canvas.getContext("2d");
|
this.ctx = this.canvas.getContext("2d");
|
||||||
this.canvasWidth = this.canvas.parentElement.clientWidth
|
this.canvasWidth = this.canvas.parentElement.clientWidth;
|
||||||
this.canvasHeight = this.canvas.parentElement.clientHeight
|
this.canvasHeight = this.canvas.parentElement.clientHeight;
|
||||||
},
|
},
|
||||||
methods: {
|
methods: {
|
||||||
...mapActions(globalStore, ["toggleStop"]),
|
...mapActions(globalStore, ["toggleStop"]),
|
||||||
@ -104,9 +104,9 @@
|
|||||||
this.rules.rules,
|
this.rules.rules,
|
||||||
this.boardWidth
|
this.boardWidth
|
||||||
);
|
);
|
||||||
this.lastBoard = Object.freeze(board)
|
this.lastBoard = Object.freeze(board);
|
||||||
this.drawCanvas(board);
|
this.drawCanvas(board);
|
||||||
this.toggleStop()
|
this.toggleStop();
|
||||||
},
|
},
|
||||||
draw2d(board) {
|
draw2d(board) {
|
||||||
if (!this.canDraw) return;
|
if (!this.canDraw) return;
|
||||||
@ -127,17 +127,16 @@
|
|||||||
[0, 2]
|
[0, 2]
|
||||||
);
|
);
|
||||||
const board = evolve2d(initialState, conwayRules);
|
const board = evolve2d(initialState, conwayRules);
|
||||||
this.lastBoard = Object.freeze(board)
|
this.lastBoard = Object.freeze(board);
|
||||||
this.draw2d(board);
|
this.draw2d(board);
|
||||||
},
|
},
|
||||||
async draw2dLast() {
|
async draw2dLast() {
|
||||||
if (this.lastBoard != undefined)
|
if (this.lastBoard != undefined) this.draw2d(this.lastBoard);
|
||||||
this.draw2d(this.lastBoard);
|
|
||||||
},
|
},
|
||||||
reset() {
|
reset() {
|
||||||
this.toggleStop()
|
this.toggleStop();
|
||||||
this.ctx.clearRect(0, 0, this.canvas.width, this.canvas.height);
|
this.ctx.clearRect(0, 0, this.canvas.width, this.canvas.height);
|
||||||
this.getReset = 0
|
this.getReset = 0;
|
||||||
},
|
},
|
||||||
},
|
},
|
||||||
};
|
};
|
||||||
|
@ -5,7 +5,12 @@
|
|||||||
<input type="button" value="start" @click="toggleDraw2dLast()" />
|
<input type="button" value="start" @click="toggleDraw2dLast()" />
|
||||||
</div>
|
</div>
|
||||||
<div class="form-field">
|
<div class="form-field">
|
||||||
<input type="button" name="start2d" value="start" @click="toggleDraw2d()" />
|
<input
|
||||||
|
type="button"
|
||||||
|
name="start2d"
|
||||||
|
value="start"
|
||||||
|
@click="toggleDraw2d()"
|
||||||
|
/>
|
||||||
<input
|
<input
|
||||||
type="button"
|
type="button"
|
||||||
name="stop"
|
name="stop"
|
||||||
@ -35,7 +40,12 @@
|
|||||||
MenuRow,
|
MenuRow,
|
||||||
},
|
},
|
||||||
methods: {
|
methods: {
|
||||||
...mapActions(globalStore, ["toggleDraw2d", "toggleDraw2dLast", "toggleReset", "toggleStop"]),
|
...mapActions(globalStore, [
|
||||||
|
"toggleDraw2d",
|
||||||
|
"toggleDraw2dLast",
|
||||||
|
"toggleReset",
|
||||||
|
"toggleStop",
|
||||||
|
]),
|
||||||
},
|
},
|
||||||
};
|
};
|
||||||
</script>
|
</script>
|
||||||
|
@ -34,7 +34,7 @@
|
|||||||
</template>
|
</template>
|
||||||
|
|
||||||
<script>
|
<script>
|
||||||
import { mapWritableState } from 'pinia'
|
import { mapWritableState } from "pinia";
|
||||||
import { globalStore } from "../stores/index.js";
|
import { globalStore } from "../stores/index.js";
|
||||||
import MenuRow from "./MenuRow.vue";
|
import MenuRow from "./MenuRow.vue";
|
||||||
export default {
|
export default {
|
||||||
@ -43,7 +43,7 @@
|
|||||||
MenuRow,
|
MenuRow,
|
||||||
},
|
},
|
||||||
computed: {
|
computed: {
|
||||||
...mapWritableState(globalStore, ["cellProperties"])
|
...mapWritableState(globalStore, ["cellProperties"]),
|
||||||
},
|
},
|
||||||
methods: {
|
methods: {
|
||||||
getCellProperties(event) {
|
getCellProperties(event) {
|
||||||
|
@ -25,7 +25,7 @@
|
|||||||
</div>
|
</div>
|
||||||
<div class="form-field">
|
<div class="form-field">
|
||||||
<label
|
<label
|
||||||
>Rules presets
|
>Rules presets
|
||||||
<br />
|
<br />
|
||||||
<select
|
<select
|
||||||
name="ruleset-elementary"
|
name="ruleset-elementary"
|
||||||
@ -51,7 +51,7 @@
|
|||||||
class="form-field"
|
class="form-field"
|
||||||
>
|
>
|
||||||
<label
|
<label
|
||||||
>{{ name }}
|
>{{ name }}
|
||||||
<input
|
<input
|
||||||
:value="rule"
|
:value="rule"
|
||||||
type="checkbox"
|
type="checkbox"
|
||||||
@ -76,8 +76,8 @@
|
|||||||
</template>
|
</template>
|
||||||
|
|
||||||
<script>
|
<script>
|
||||||
import { mapActions, mapWritableState } from 'pinia'
|
import { mapActions, mapWritableState } from "pinia";
|
||||||
import { presetRules, initialStates } from "./preset.js"
|
import { presetRules, initialStates } from "./preset.js";
|
||||||
import { globalStore } from "../stores/index.js";
|
import { globalStore } from "../stores/index.js";
|
||||||
import MenuRow from "./MenuRow.vue";
|
import MenuRow from "./MenuRow.vue";
|
||||||
export default {
|
export default {
|
||||||
@ -92,20 +92,18 @@
|
|||||||
};
|
};
|
||||||
},
|
},
|
||||||
computed: {
|
computed: {
|
||||||
...mapWritableState(
|
...mapWritableState(globalStore, {
|
||||||
globalStore, {
|
initialState: "initial1dState",
|
||||||
initialState: "initial1dState",
|
rules: "rules1d",
|
||||||
rules: "rules1d"
|
}),
|
||||||
}
|
|
||||||
),
|
|
||||||
rules1dFileName() {
|
rules1dFileName() {
|
||||||
// TODO: broken
|
// TODO: broken
|
||||||
return (
|
return (
|
||||||
Object.keys(this.rules)
|
Object.keys(this.rules)
|
||||||
.map((index) => {
|
.map((index) => {
|
||||||
return this.rules[index];
|
return this.rules[index];
|
||||||
})
|
})
|
||||||
.join("_") + ".json"
|
.join("_") + ".json"
|
||||||
);
|
);
|
||||||
},
|
},
|
||||||
},
|
},
|
||||||
@ -130,20 +128,20 @@
|
|||||||
const newRuleset = this.presetRules.find((ruleset) => {
|
const newRuleset = this.presetRules.find((ruleset) => {
|
||||||
return ruleset.name === name;
|
return ruleset.name === name;
|
||||||
});
|
});
|
||||||
this.rules.rules = newRuleset.rules
|
this.rules.rules = newRuleset.rules;
|
||||||
},
|
},
|
||||||
updateInitialState(event) {
|
updateInitialState(event) {
|
||||||
const elem = event.target;
|
const elem = event.target;
|
||||||
this.initial1dState = elem.value
|
this.initial1dState = elem.value;
|
||||||
},
|
},
|
||||||
},
|
},
|
||||||
};
|
};
|
||||||
</script>
|
</script>
|
||||||
<style>
|
<style>
|
||||||
.menu-row a {
|
.menu-row a {
|
||||||
color: white;
|
color: white;
|
||||||
font-weight: bold;
|
font-weight: bold;
|
||||||
text-decoration: none;
|
text-decoration: none;
|
||||||
font-size: small;
|
font-size: small;
|
||||||
}
|
}
|
||||||
</style>
|
</style>
|
||||||
|
@ -56,7 +56,7 @@
|
|||||||
</template>
|
</template>
|
||||||
|
|
||||||
<script>
|
<script>
|
||||||
import { mapWritableState } from 'pinia'
|
import { mapWritableState } from "pinia";
|
||||||
import { globalStore } from "../stores/index.js";
|
import { globalStore } from "../stores/index.js";
|
||||||
import MenuRow from "./MenuRow.vue";
|
import MenuRow from "./MenuRow.vue";
|
||||||
export default {
|
export default {
|
||||||
@ -65,24 +65,21 @@
|
|||||||
MenuRow,
|
MenuRow,
|
||||||
},
|
},
|
||||||
computed: {
|
computed: {
|
||||||
...mapWritableState(
|
...mapWritableState(globalStore, [
|
||||||
globalStore,
|
"canvasWidth",
|
||||||
[
|
"canvasHeight",
|
||||||
"canvasWidth",
|
"refreshRate",
|
||||||
"canvasHeight",
|
"drawingDirection",
|
||||||
"refreshRate",
|
]),
|
||||||
"drawingDirection"
|
|
||||||
]
|
|
||||||
),
|
|
||||||
},
|
},
|
||||||
methods: {
|
methods: {
|
||||||
updateCanvasHeight: function (event) {
|
updateCanvasHeight: function (event) {
|
||||||
const elem = event.target;
|
const elem = event.target;
|
||||||
this.canvasHeight = elem.value
|
this.canvasHeight = elem.value;
|
||||||
},
|
},
|
||||||
updateCanvasWidth: function (event) {
|
updateCanvasWidth: function (event) {
|
||||||
const elem = event.target;
|
const elem = event.target;
|
||||||
this.canvasWidth = elem.value
|
this.canvasWidth = elem.value;
|
||||||
},
|
},
|
||||||
updateRefreshRate: function (event) {
|
updateRefreshRate: function (event) {
|
||||||
const elem = event.target;
|
const elem = event.target;
|
||||||
@ -91,7 +88,7 @@
|
|||||||
updateDrawingDirection: function (event) {
|
updateDrawingDirection: function (event) {
|
||||||
const elem = event.target;
|
const elem = event.target;
|
||||||
const value = elem.checked ? "x" : "y";
|
const value = elem.checked ? "x" : "y";
|
||||||
this.drawingDirection = value
|
this.drawingDirection = value;
|
||||||
},
|
},
|
||||||
},
|
},
|
||||||
};
|
};
|
||||||
|
@ -10,7 +10,7 @@
|
|||||||
</template>
|
</template>
|
||||||
|
|
||||||
<script>
|
<script>
|
||||||
import { mapWritableState } from 'pinia'
|
import { mapWritableState } from "pinia";
|
||||||
import { globalStore } from "../stores/index.js";
|
import { globalStore } from "../stores/index.js";
|
||||||
|
|
||||||
export default {
|
export default {
|
||||||
@ -23,14 +23,14 @@
|
|||||||
},
|
},
|
||||||
computed: {
|
computed: {
|
||||||
// TODO: should be passed as a props/slot, not in a store
|
// TODO: should be passed as a props/slot, not in a store
|
||||||
...mapWritableState(globalStore, ["activeMenu"])
|
...mapWritableState(globalStore, ["activeMenu"]),
|
||||||
},
|
},
|
||||||
methods: {
|
methods: {
|
||||||
updateActiveMenu(event) {
|
updateActiveMenu(event) {
|
||||||
const elem = event.target;
|
const elem = event.target;
|
||||||
const value = elem.id;
|
const value = elem.id;
|
||||||
if (value == this.activeMenu) this.activeMenu = ""
|
if (value == this.activeMenu) this.activeMenu = "";
|
||||||
else this.activeMenu = value
|
else this.activeMenu = value;
|
||||||
},
|
},
|
||||||
},
|
},
|
||||||
};
|
};
|
||||||
|
@ -77,7 +77,7 @@ const presetRules = [
|
|||||||
"000": 1,
|
"000": 1,
|
||||||
},
|
},
|
||||||
},
|
},
|
||||||
]
|
];
|
||||||
|
|
||||||
const initialStates = [
|
const initialStates = [
|
||||||
{
|
{
|
||||||
@ -90,6 +90,6 @@ const initialStates = [
|
|||||||
name: "Random cell",
|
name: "Random cell",
|
||||||
description: "State populated with random cells",
|
description: "State populated with random cells",
|
||||||
},
|
},
|
||||||
]
|
];
|
||||||
|
|
||||||
export { presetRules, initialStates }
|
export { presetRules, initialStates };
|
||||||
|
@ -35,7 +35,7 @@ export const globalStore = defineStore("globalStore", {
|
|||||||
draw2dLast: false,
|
draw2dLast: false,
|
||||||
reset: false,
|
reset: false,
|
||||||
canDraw: true,
|
canDraw: true,
|
||||||
}
|
};
|
||||||
},
|
},
|
||||||
actions: {
|
actions: {
|
||||||
toggleDraw1d() {
|
toggleDraw1d() {
|
||||||
|
Loading…
Reference in New Issue
Block a user