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

67
src/components/CanvasBoard.vue
View File

@ -9,17 +9,19 @@
</main>
</template>
<script>
import {
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";
import { mapGetters } from "vuex";
export default {
} from "../modules/automata.js";
import { getRandomInt, sleep } from "../modules/common.js";
export default {
name: "CanvasBoard",
data() {
return {
@ -28,20 +30,22 @@ export default {
};
},
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",
...mapState(globalStore, {
cellProperties: "cellProperties",
rules: "rules1d",
refreshRate: "refreshRate",
initial1dState: "initial1dState",
drawingDirection: "drawingDirection",
canDraw: "canDraw",
getDraw1d: "draw1d",
getDraw2d: "draw2d",
getDraw2dLast: "draw2dLast",
}),
...mapWritableState(globalStore, {
lastBoard: "lastBoard",
canvasWidth: "canvasWidth",
canvasHeight: "canvasHeight",
getReset: "reset",
}),
boardWidth: function () {
return Math.floor(this.canvasWidth / this.cellProperties.size);
@ -67,13 +71,11 @@ export default {
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
);
this.canvasWidth = this.canvas.parentElement.clientWidth
this.canvasHeight = this.canvas.parentElement.clientHeight
},
methods: {
...mapActions(globalStore, ["toggleStop"]),
drawCanvas(board) {
const props = this.cellProperties;
board.map((row, y) => {
@ -102,9 +104,9 @@ export default {
this.rules.rules,
this.boardWidth
);
this.$store.commit("setLastBoard", Object.freeze(board));
this.lastBoard = Object.freeze(board)
this.drawCanvas(board);
this.$store.dispatch("stop");
this.toggleStop()
},
draw2d(board) {
if (!this.canDraw) return;
@ -125,22 +127,23 @@ export default {
[0, 2]
);
const board = evolve2d(initialState, conwayRules);
this.$store.commit("setLastBoard", Object.freeze(board));
this.lastBoard = Object.freeze(board)
this.draw2d(board);
},
async draw2dLast() {
if (this.lastBoard != undefined)
this.draw2d(this.lastBoard);
},
reset() {
this.$store.dispatch("stop");
this.toggleStop()
this.ctx.clearRect(0, 0, this.canvas.width, this.canvas.height);
this.$store.commit("toggleReset", 0);
this.getReset = 0
},
},
};
};
</script>
<style>
#mainContent {
#mainContent {
min-width: 70%;
}
}
</style>

32
src/components/MainMenu.vue
View File

@ -8,11 +8,11 @@
</template>
<script>
import MenuCellProperties from "./MenuCellProperties.vue";
import MenuGeneralOptions from "./MenuGeneralOptions.vue";
import MenuElementaryCA from "./MenuElementaryCA.vue";
import Menu2dCA from "./Menu2dCA.vue";
export default {
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,
@ -20,28 +20,28 @@ export default {
MenuElementaryCA,
Menu2dCA,
},
};
};
</script>
<style>
#sidebar {
#sidebar {
width: 25%;
padding: 0 10px;
overflow-y: scroll;
}
}
/* Hide scrollbar for Chrome, Safari and Opera */
#sidebar::-webkit-scrollbar {
/* Hide scrollbar for Chrome, Safari and Opera */
#sidebar::-webkit-scrollbar {
display: none;
}
}
/* Hide scrollbar for IE, Edge and Firefox */
#sidebar {
/* 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) {
@media screen and (max-width: 800px) {
#container {
display: flex;
flex-direction: column;
@ -58,5 +58,5 @@ export default {
padding: 0;
width: 100%;
}
}
}
</style>

35
src/components/Menu2dCA.vue
View File

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

20
src/components/MenuCellProperties.vue
View File

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

13
src/components/MenuElementaryCA.vue
View File

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

33
src/components/MenuGeneralOptions.vue
View File

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

42
src/components/MenuRow.vue
View File

@ -10,9 +10,10 @@
</template>
<script>
import { mapGetters } from "vuex";
import { mapWritableState } from 'pinia'
import { globalStore } from "../stores/index.js";
export default {
export default {
name: "MenuRow",
props: {
rowTitle: {
@ -21,55 +22,54 @@ export default {
},
},
computed: {
...mapGetters({
activeMenu: "getActiveMenu",
}),
// TODO: should be passed as a props/slot, not in a store
...mapWritableState(globalStore, ["activeMenu"])
},
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);
if (value == this.activeMenu) this.activeMenu = ""
else this.activeMenu = value
},
},
};
};
</script>
<style>
.menu-row h2 {
.menu-row h2 {
font-size: medium;
padding: 10px;
cursor: pointer;
border: 2px solid darkgrey;
margin: 0 0 10px 0;
}
}
select {
select {
margin-top: 10px;
padding: 5px;
}
}
input[type="button"] {
input[type="button"] {
min-width: 60px;
padding: 5px;
font-weight: bold;
margin-right: 10px;
}
}
.form-field {
.form-field {
display: flex;
margin: 10px;
justify-content: space-between;
}
}
.menu-row {
.menu-row {
flex: 1;
}
}
label,
.form-field label {
label,
.form-field label {
margin-right: 10px;
font-weight: bold;
}
}
</style>

12
src/stores/index.js
View File

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