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> </main>
</template> </template>
<script> <script>
import { import { mapActions, mapState, mapWritableState } from 'pinia'
import { globalStore } from "../stores/index.js";
import {
create1dState, create1dState,
create1dStateOneCell, create1dStateOneCell,
create2dState, create2dState,
createBoard, createBoard,
conwayRules, conwayRules,
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() {
return { return {
@ -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,22 +127,23 @@ 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
}, },
}, },
}; };
</script> </script>
<style> <style>
#mainContent { #mainContent {
min-width: 70%; min-width: 70%;
} }
</style> </style>

32
src/components/MainMenu.vue
View File

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

35
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 MenuRow from "./MenuRow.vue"; import { mapActions } from "pinia";
import { mapGetters } from "vuex"; import MenuRow from "./MenuRow.vue";
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>

20
src/components/MenuCellProperties.vue
View File

@ -34,29 +34,27 @@
</template> </template>
<script> <script>
import MenuRow from "./MenuRow.vue"; import { mapWritableState } from 'pinia'
export default { import { globalStore } from "../stores/index.js";
import MenuRow from "./MenuRow.vue";
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);
}, },
}, },
}; };
</script> </script>

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);

33
src/components/MenuGeneralOptions.vue
View File

@ -56,40 +56,43 @@
</template> </template>
<script> <script>
import MenuRow from "./MenuRow.vue"; import { mapWritableState } from 'pinia'
import { mapGetters } from "vuex"; import { globalStore } from "../stores/index.js";
export default { import MenuRow from "./MenuRow.vue";
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);
}, },
}, },
}; };
</script> </script>

42
src/components/MenuRow.vue
View File

@ -10,9 +10,10 @@
</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",
props: { props: {
rowTitle: { rowTitle: {
@ -21,55 +22,54 @@ 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
}, },
}, },
}; };
</script> </script>
<style> <style>
.menu-row h2 { .menu-row h2 {
font-size: medium; font-size: medium;
padding: 10px; padding: 10px;
cursor: pointer; cursor: pointer;
border: 2px solid darkgrey; border: 2px solid darkgrey;
margin: 0 0 10px 0; margin: 0 0 10px 0;
} }
select { select {
margin-top: 10px; margin-top: 10px;
padding: 5px; padding: 5px;
} }
input[type="button"] { input[type="button"] {
min-width: 60px; min-width: 60px;
padding: 5px; padding: 5px;
font-weight: bold; font-weight: bold;
margin-right: 10px; margin-right: 10px;
} }
.form-field { .form-field {
display: flex; display: flex;
margin: 10px; margin: 10px;
justify-content: space-between; justify-content: space-between;
} }
.menu-row { .menu-row {
flex: 1; flex: 1;
} }
label, label,
.form-field label { .form-field label {
margin-right: 10px; margin-right: 10px;
font-weight: bold; font-weight: bold;
} }
</style> </style>

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;