gator/explorata
gator/explorata
1
0
Fork 0
Code Pull Requests Projects Releases 1 Activity

adapted components to pinia

Browse Source
This commit is contained in:
Ali Gator 2022-12-02 17:10:21 +01:00
parent f318350149
commit 3a2cbc9349
8 changed files with 310 additions and 324 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

53
src/components/CanvasBoard.vue
View File

@ -9,6 +9,8 @@
</main> </main>
</template> </template>
<script> <script>
import { mapActions, mapState, mapWritableState } from 'pinia'
import { globalStore } from "../stores/index.js";
import { import {
create1dState, create1dState,
create1dStateOneCell, create1dStateOneCell,
@ -18,7 +20,7 @@ import {
evolve2d, evolve2d,
} from "../modules/automata.js"; } from "../modules/automata.js";
import { getRandomInt, sleep } from "../modules/common.js"; import { getRandomInt, sleep } from "../modules/common.js";
import { mapGetters } from "vuex";
export default { export default {
name: "CanvasBoard", name: "CanvasBoard",
data() { data() {
@ -28,20 +30,22 @@ export default {
}; };
}, },
computed: { computed: {
...mapGetters({ ...mapState(globalStore, {
cellProperties: "getCellProperties", cellProperties: "cellProperties",
rules: "get1dRules", rules: "rules1d",
canvasWidth: "getCanvasWidth", refreshRate: "refreshRate",
canvasHeight: "getCanvasHeight", initial1dState: "initial1dState",
refreshRate: "getRefreshRate", drawingDirection: "drawingDirection",
initial1dState: "getInitial1dState", canDraw: "canDraw",
drawingDirection: "getDrawingDirection", getDraw1d: "draw1d",
canDraw: "getCanDraw", getDraw2d: "draw2d",
lastBoard: "getLastBoard", getDraw2dLast: "draw2dLast",
getDraw1d: "getDraw1d", }),
getDraw2d: "getDraw2d", ...mapWritableState(globalStore, {
getDraw2dLast: "getDraw2dLast", lastBoard: "lastBoard",
getReset: "getReset", canvasWidth: "canvasWidth",
canvasHeight: "canvasHeight",
getReset: "reset",
}), }),
boardWidth: function () { boardWidth: function () {
return Math.floor(this.canvasWidth / this.cellProperties.size); return Math.floor(this.canvasWidth / this.cellProperties.size);
@ -67,13 +71,11 @@ export default {
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.$store.commit("setCanvasWidth", this.canvas.parentElement.clientWidth); this.canvasWidth = this.canvas.parentElement.clientWidth
this.$store.commit( this.canvasHeight = this.canvas.parentElement.clientHeight
"setCanvasHeight",
this.canvas.parentElement.clientHeight
);
}, },
methods: { methods: {
...mapActions(globalStore, ["toggleStop"]),
drawCanvas(board) { drawCanvas(board) {
const props = this.cellProperties; const props = this.cellProperties;
board.map((row, y) => { board.map((row, y) => {
@ -102,9 +104,9 @@ export default {
this.rules.rules, this.rules.rules,
this.boardWidth this.boardWidth
); );
this.$store.commit("setLastBoard", Object.freeze(board)); this.lastBoard = Object.freeze(board)
this.drawCanvas(board); this.drawCanvas(board);
this.$store.dispatch("stop"); this.toggleStop()
}, },
draw2d(board) { draw2d(board) {
if (!this.canDraw) return; if (!this.canDraw) return;
@ -125,16 +127,17 @@ export default {
[0, 2] [0, 2]
); );
const board = evolve2d(initialState, conwayRules); const board = evolve2d(initialState, conwayRules);
this.$store.commit("setLastBoard", Object.freeze(board)); this.lastBoard = Object.freeze(board)
this.draw2d(board); this.draw2d(board);
}, },
async draw2dLast() { async draw2dLast() {
if (this.lastBoard != undefined)
this.draw2d(this.lastBoard); this.draw2d(this.lastBoard);
}, },
reset() { reset() {
this.$store.dispatch("stop"); 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.$store.commit("toggleReset", 0); this.getReset = 0
}, },
}, },
}; };

29
src/components/Menu2dCA.vue
View File

@ -2,55 +2,40 @@
<MenuRow row-title="2D Cellular Automata"> <MenuRow row-title="2D Cellular Automata">
<div class="form-field"> <div class="form-field">
<label>Start from last result</label> <label>Start from last result</label>
<input type="button" value="start" @click="draw2dLast" /> <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="draw2d" /> <input type="button" name="start2d" value="start" @click="toggleDraw2d()" />
<input <input
type="button" type="button"
name="stop" name="stop"
class="stop" class="stop"
value="stop" value="stop"
@click="stop" @click="toggleStop()"
/> />
<input <input
type="button" type="button"
name="reset" name="reset"
class="reset" class="reset"
value="reset" value="reset"
@click="reset" @click="toggleReset()"
/> />
</div> </div>
</MenuRow> </MenuRow>
</template> </template>
<script> <script>
import { mapActions } from "pinia";
import MenuRow from "./MenuRow.vue"; import MenuRow from "./MenuRow.vue";
import { mapGetters } from "vuex"; import { globalStore } from "../stores/index.js";
export default { export default {
name: "Menu2dCA", name: "Menu2dCA",
components: { components: {
MenuRow, MenuRow,
}, },
computed: {
...mapGetters({
lastBoard: "getLastBoard",
}),
},
methods: { methods: {
draw2d() { ...mapActions(globalStore, ["toggleDraw2d", "toggleDraw2dLast", "toggleReset", "toggleStop"]),
this.$store.dispatch("draw2d");
},
draw2dLast() {
this.$store.dispatch("draw2dLast");
},
reset() {
this.$store.dispatch("reset");
},
stop() {
this.$store.dispatch("stop");
},
}, },
}; };
</script> </script>

14
src/components/MenuCellProperties.vue
View File

@ -34,28 +34,26 @@
</template> </template>
<script> <script>
import { mapWritableState } from 'pinia'
import { globalStore } from "../stores/index.js";
import MenuRow from "./MenuRow.vue"; import MenuRow from "./MenuRow.vue";
export default { export default {
name: "MainMenu", name: "MainMenu",
components: { components: {
MenuRow, MenuRow,
}, },
data() { computed: {
return { ...mapWritableState(globalStore, ["cellProperties"])
cellProperties: this.$store.state.cellProperties,
};
}, },
methods: { methods: {
getCellProperties(event) { getCellProperties(event) {
const elem = event.target; const elem = event.target;
const prop = this.$store.state.cellProperties; const prop = this.cellProperties;
return prop[elem.name]; return prop[elem.name];
}, },
updateCellProperties(event) { updateCellProperties(event) {
const elem = event.target; const elem = event.target;
const prop = { name: elem.name, value: elem.value }; this.cellProperties[elem.name] = elem.value;
//console.log(prop)
this.$store.commit("setCellProperties", prop);
}, },
}, },
}; };

13
src/components/MenuElementaryCA.vue
View File

@ -63,20 +63,20 @@
</div> </div>
</form> </form>
<div class="form-field"> <div class="form-field">
<input type="button" name="start" value="start" @click="draw1d" /> <input type="button" name="start" value="start" @click="toggleDraw1d()" />
<input <input
type="button" type="button"
name="reset" name="reset"
class="reset" class="reset"
value="reset" value="reset"
@click="reset" @click="toggleReset"
/> />
</div> </div>
</MenuRow> </MenuRow>
</template> </template>
<script> <script>
import { mapActions, mapState, 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";
@ -95,14 +95,11 @@
...mapWritableState( ...mapWritableState(
globalStore, { globalStore, {
initialState: "initial1dState", initialState: "initial1dState",
}
),
...mapState(
globalStore, {
rules: "rules1d" rules: "rules1d"
} }
), ),
rules1dFileName() { rules1dFileName() {
// TODO: broken
return ( return (
Object.keys(this.rules) Object.keys(this.rules)
.map((index) => { .map((index) => {
@ -113,7 +110,7 @@
}, },
}, },
methods: { methods: {
...mapActions(globalStore, ["draw1d", "reset"]), ...mapActions(globalStore, ["toggleDraw1d", "toggleReset"]),
copyRules() { copyRules() {
const rules = JSON.stringify(this.rules); const rules = JSON.stringify(this.rules);
navigator.clipboard.writeText(rules); navigator.clipboard.writeText(rules);

27
src/components/MenuGeneralOptions.vue
View File

@ -56,39 +56,42 @@
</template> </template>
<script> <script>
import { mapWritableState } from 'pinia'
import { globalStore } from "../stores/index.js";
import MenuRow from "./MenuRow.vue"; import MenuRow from "./MenuRow.vue";
import { mapGetters } from "vuex";
export default { export default {
name: "MenuGeneralOptions", name: "MenuGeneralOptions",
components: { components: {
MenuRow, MenuRow,
}, },
computed: { computed: {
...mapGetters({ ...mapWritableState(
canvasWidth: "getCanvasWidth", globalStore,
canvasHeight: "getCanvasHeight", [
refreshRate: "getRefreshRate", "canvasWidth",
drawingDirection: "getDrawingDirection", "canvasHeight",
}), "refreshRate",
"drawingDirection"
]
),
}, },
methods: { methods: {
updateCanvasHeight: function (event) { updateCanvasHeight: function (event) {
const elem = event.target; const elem = event.target;
this.$store.commit("setCanvasHeight", elem.value); this.canvasHeight = elem.value
}, },
updateCanvasWidth: function (event) { updateCanvasWidth: function (event) {
const elem = event.target; const elem = event.target;
this.$store.commit("setCanvasWidth", elem.value); this.canvasWidth = elem.value
}, },
updateRefreshRate: function (event) { updateRefreshRate: function (event) {
const elem = event.target; const elem = event.target;
this.$store.commit("setRefreshRate", elem.value); this.refreshRate = elem.value;
}, },
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.$store.commit("setDrawingDirection", value); this.drawingDirection = value
console.log(this.drawingDirection);
}, },
}, },
}; };

12
src/components/MenuRow.vue
View File

@ -10,7 +10,8 @@
</template> </template>
<script> <script>
import { mapGetters } from "vuex"; import { mapWritableState } from 'pinia'
import { globalStore } from "../stores/index.js";
export default { export default {
name: "MenuRow", name: "MenuRow",
@ -21,16 +22,15 @@ export default {
}, },
}, },
computed: { computed: {
...mapGetters({ // TODO: should be passed as a props/slot, not in a store
activeMenu: "getActiveMenu", ...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.$store.commit("setActiveMenu", ""); if (value == this.activeMenu) this.activeMenu = ""
else this.$store.commit("setActiveMenu", value); else this.activeMenu = value
}, },
}, },
}; };

12
src/stores/index.js
View File

@ -38,22 +38,22 @@ export const globalStore = defineStore("globalStore", {
} }
}, },
actions: { actions: {
draw1d() { toggleDraw1d() {
this.draw1d = true; this.draw1d = true;
}, },
draw2d() { toggleDraw2d() {
this.canDraw = true; this.canDraw = true;
this.draw2d = true; this.draw2d = true;
}, },
draw2dLast() { toggleDraw2dLast() {
this.canDraw = true; this.canDraw = true;
this.draw2dLast = true; this.draw2dLast = true;
}, },
reset() { toggleReset() {
this.stop(); this.toggleStop();
this.reset = true; this.reset = true;
}, },
stop() { toggleStop() {
this.draw1d = false; this.draw1d = false;
this.draw2d = false; this.draw2d = false;
this.draw2dLast = false; this.draw2dLast = false;