linting and formating

This commit is contained in:
Ali Gator 2022-12-02 17:11:34 +01:00
parent 0556992c3b
commit d7c2d45180
9 changed files with 66 additions and 62 deletions

View File

@ -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

View File

@ -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;
}, },
}, },
}; };

View File

@ -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>

View File

@ -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) {

View File

@ -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>

View File

@ -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;
}, },
}, },
}; };

View File

@ -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;
}, },
}, },
}; };

View File

@ -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 };

View File

@ -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() {