drawing logic back into component

This commit is contained in:
Ali Gator 2022-12-01 20:37:03 +01:00
parent d0802d850b
commit 9b39bba6e7
6 changed files with 286 additions and 295 deletions

View File

@ -14,13 +14,12 @@ module.exports = {
rules: {
// override/add rules settings here, such as:
// 'vue/no-unused-vars': 'error'
'vue/match-component-import-name': 'warn',
'vue/no-ref-object-destructure': 'warn',
'vue/no-required-prop-with-default': 'warn',
'vue/no-restricted-class': 'warn',
'vue/no-template-target-blank' : 'warn',
'vue/no-this-in-before-route-enter' : 'warn',
'vue/prefer-prop-type-boolean-first' : 'warn',
"vue/match-component-import-name": "warn",
"vue/no-ref-object-destructure": "warn",
"vue/no-required-prop-with-default": "warn",
"vue/no-restricted-class": "warn",
"vue/no-template-target-blank": "warn",
"vue/no-this-in-before-route-enter": "warn",
"vue/prefer-prop-type-boolean-first": "warn",
},
};

View File

@ -5,52 +5,135 @@
ref="canvas-board"
:width="canvasWidth"
:height="canvasHeight"
>
</canvas>
/>
</main>
</template>
<script>
import { mapGetters } from "vuex";
export default {
import {
create1dState,
create1dStateOneCell,
create2dState,
createBoard,
conwayRules,
evolve2d,
} from "../modules/automata.js";
import { getRandomInt, sleep } from "../modules/common.js";
import { mapGetters } from "vuex";
export default {
name: "CanvasBoard",
data() {
return {
canvas: null,
ctx: null,
drawing: 0,
};
},
computed: {
...mapGetters({
cellProperties: "getCellProperties",
rules: "get1dRules",
canvasWidth: "getCanvasWidth",
canvasHeight: "getCanvasHeight",
refreshRate: "getRefreshRate",
initial1dState: "getInitial1dState",
drawingDirection: "getDrawingDirection",
lastBoard: "getLastBoard",
isDrawing1d: "getIsDrawing1d",
}),
boardWidth: function () {
return Math.floor(this.canvasWidth / this.cellProperties.size);
},
boardHeight: function () {
return Math.floor(this.canvasHeight / this.cellProperties.size);
},
},
watch: {
isDrawing1d(value) {
if (value == true) {
this.draw1d();
}
},
},
mounted() {
const canvas = document.getElementById("canvas-board")
const ctx = canvas.getContext("2d");
this.$store.commit(
"setCanvas",
canvas
)
this.$store.commit(
"setContext",
ctx
)
this.$store.commit(
"setCanvasWidth",
canvas.parentElement.clientWidth
);
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",
canvas.parentElement.clientHeight
);
this.$store.commit(
"setBoardWidth",
canvas.parentElement.clientWidth
);
this.$store.commit(
"setBoardHeight",
canvas.parentElement.clientHeight
this.canvas.parentElement.clientHeight
);
},
methods: {
drawCanvas(board) {
const props = this.cellProperties;
board.map((row, y) => {
const d = props.size;
return row.map((cell, x) => {
this.ctx.fillStyle = (() => {
if (cell === 1) return props.liveColor;
return props.deadColor;
})();
if (this.drawingDirection === "x")
this.ctx.fillRect(y * d, x * d, d, d);
else this.ctx.fillRect(x * d, y * d, d, d);
return cell;
});
});
},
compute1dInitialState() {
if (this.initial1dState === "onecell")
return create1dStateOneCell(this.boardWidth);
return create1dState(this.boardWidth, getRandomInt, [0, 2]);
},
async draw1d() {
const initialState = this.compute1dInitialState();
const board = createBoard(
initialState,
this.rules.rules,
this.boardWidth
);
this.$store.commit("setLastBoard", Object.freeze(board));
this.drawCanvas(board);
this.$store.dispatch("stop");
},
async draw2d(board) {
if (this.drawing === 0) return;
const draw2dNext = async (b) => {
if (this.drawing === 0) return;
const newBoard = evolve2d(b, conwayRules);
this.drawCanvas(b, this.cellProperties);
await sleep(this.refreshRate);
draw2dNext(newBoard);
};
return draw2dNext(board);
},
async draw2dNew() {
const initialState = create2dState(
this.boardWidth,
this.boardHeight,
getRandomInt,
[0, 2]
);
const board = evolve2d(initialState, conwayRules);
this.$store.commit("setLastBoard", board);
this.draw2d(board);
},
async draw2dLast() {
this.draw2d(this.lastBoard);
},
stop() {
this.$store.commit("setDrawingStatus", 0);
},
reset() {
this.stop();
this.ctx.clearRect(0, 0, this.canvas.width, this.canvas.height);
},
},
};
</script>
<style>
#mainContent {
#mainContent {
min-width: 70%;
}
}
</style>

View File

@ -11,7 +11,8 @@
@input="updateInitialState"
>
<option
v-for="state in initialStates"
v-for="(state, index) in initialStates"
:key="'initial-state-elementary' + index"
:value="state.id"
>
{{ state.name }}
@ -32,7 +33,8 @@
@input="updateRules"
>
<option
v-for="ruleset in presetRules"
v-for="(ruleset, index) in presetRules"
:key="'ruleset-preset-elementary-' + index"
:value="ruleset.name"
>
{{ ruleset.name }}
@ -44,7 +46,8 @@
<a style="cursor: pointer" @click="copyRules">copy rules</a>
</div>
<div
v-for="(rule, name) in rules.rules"
v-for="(rule, name, index) in rules.rules"
:key="'rule-' + index"
class="form-field"
>
<label
@ -73,9 +76,9 @@
</template>
<script>
import { mapGetters } from "vuex";
import MenuRow from "./MenuRow.vue";
export default {
import { mapGetters } from "vuex";
import MenuRow from "./MenuRow.vue";
export default {
name: "MenuElementaryCA",
components: {
MenuRow,
@ -95,11 +98,11 @@
"010": 0,
"001": 0,
"000": 1,
}
},
},
{
name: "rule 86",
rules:{
rules: {
100: 1,
101: 0,
110: 0,
@ -161,7 +164,7 @@
"001": 1,
"000": 1,
},
}
},
],
initialStates: [
{
@ -211,10 +214,10 @@
// TODO : change this, awfully confusing
const elem = event.target;
const name = elem.value;
const rules = this.presetRules.find(
(ruleset) => { return ruleset.name === name }
)
Object.keys(rules.rules).map((value, index) => {
const rules = this.presetRules.find((ruleset) => {
return ruleset.name === name;
});
Object.keys(rules.rules).map((value) => {
const data = { name: name, rule: value, value: rules.rules[value] };
this.$store.commit("update1dSingleRule", data);
});
@ -224,20 +227,20 @@
this.$store.commit("setInitial1dState", elem.value);
},
draw1d() {
this.$store.commit("setDrawingStatus", 1);
/* this.$store.commit("setDrawingStatus", 1); */
this.$store.dispatch("draw1d");
},
reset() {
this.$store.dispatch("reset");
},
},
};
};
</script>
<style>
.menu-row a {
.menu-row a {
color: white;
font-weight: bold;
text-decoration: none;
font-size: small;
}
}
</style>

View File

@ -1,13 +1,9 @@
import { createApp } from 'vue'
import { createApp } from "vue";
import App from "./App.vue";
import { store } from "./store";
const gobalsProperties = {'canvas': null};
const app = createApp(App);
const app = createApp(App)
app.use(store);
app.provide('gobalsProperties', gobalsProperties)
app.use(store)
app.mount('#app')
app.mount("#app");

View File

@ -8,25 +8,14 @@ rules:
confusion bewteen ruleset and rules.
it's never clear if we refers to a rule or the whole (named) set
*/
import { createStore } from 'vuex'
import {
create1dState,
create1dStateOneCell,
create2dState,
createBoard,
conwayRules,
evolve2d,
} from "../modules/automata.js";
import { getRandomInt, sleep } from "../modules/common.js";
import { createStore } from "vuex";
export const store = createStore({
strict: process.env.NODE_ENV !== 'production',
strict: process.env.NODE_ENV !== "production",
state: {
drawing: 0,
rules1d: {
name: "rule 73",
rules:
{
rules: {
111: 0,
110: 1,
101: 0,
@ -35,15 +24,13 @@ export const store = createStore({
"010": 0,
"001": 0,
"000": 1,
}
},
},
cellProperties: {
size: 3,
liveColor: "#000000",
deadColor: "#F5F5F5",
},
canvas: null,
ctx: null,
canvasWidth: 0,
canvasHeight: 0,
boardWidth: 0,
@ -53,10 +40,11 @@ export const store = createStore({
activeMenu: "",
drawingDirection: "y",
lastBoard: {},
isDrawing1d: false,
},
mutations: {
update1dSingleRule(state, data) {
state.rules1d.name = data.name
state.rules1d.name = data.name;
state.rules1d.rules[data.rule] = data.value;
},
update1dRules(state, data) {
@ -65,9 +53,6 @@ export const store = createStore({
setCellProperties(state, data) {
state.cellProperties[data.name] = data.value;
},
setDrawingStatus(state, data) {
state.drawing = data;
},
setCanvasWidth(state, data) {
state.canvasWidth = data;
},
@ -90,18 +75,13 @@ export const store = createStore({
state.lastBoard = data;
},
setCanvas(state, data) {
state.canvas = data
state.canvas = data;
},
setContext(state, data) {
state.ctx = data
state.ctx = data;
},
setBoardWidth(state) {
const width = Math.floor(state.canvasWidth / state.cellProperties.size);
state.boardWidth = width
},
setBoardHeight(state) {
const height = Math.floor(state.canvasHeight / state.cellProperties.size);
state.boardHeight = height
setIsDrawing1d(state, data) {
state.isDrawing1d = data;
},
},
getters: {
@ -115,9 +95,6 @@ export const store = createStore({
// getter with side-effect. no work
return state.rules1d;
},
isDrawing(state) {
return state.drawing;
},
getCanvasWidth(state) {
return state.canvasWidth;
},
@ -139,85 +116,18 @@ export const store = createStore({
getLastBoard(state) {
return state.lastBoard;
},
getIsDrawing1d(state) {
return state.isDrawing1d;
},
},
actions: {
async drawCanvas({state}, board) {
/** Draw the board on the canvas according to the
cells' properties and drawing direction */
const props = state.cellProperties
board.map((row, y) => {
const d = props.size;
return row.map((cell, x) => {
state.ctx.fillStyle = (() => {
if (cell === 1) return props.liveColor;
return props.deadColor;
})();
if (state.drawingDirection === "x")
state.ctx.fillRect(y * d, x * d, d, d);
else state.ctx.fillRect(x * d, y * d, d, d);
return cell;
});
});
},
async compute1dInitialState({state}) {
/**
create the initial state for an elementary automaton based :
- on the selected board dimensions
- if we want to start from a single cell or several random ones
*/
if (state.initial1dState === "onecell")
return create1dStateOneCell(state.canvasWidth);
return create1dState(state.canvasWidth, getRandomInt, [0, 2]);
},
async draw1d({state, commit, dispatch}) {
/** draw an elementary cellular automaton from an initial state and
a set of rules */
const initialState = await dispatch("compute1dInitialState")
const board = createBoard(initialState, state.rules1d.rules, state.boardWidth);
commit("setLastBoard", board);
await dispatch("drawCanvas", board);
},
async draw2d({state, dispatch}, board) {
/** draw a 2D cellular automaton from an initial state and
a set of rules */
if (this.drawing === 0) return;
const draw2dNext = async (b) => {
if (state.drawing === 0) return;
const newBoard = evolve2d(b, conwayRules);
dispatch("drawCanvas", b, this.cellProperties);
await sleep(this.refreshRate);
draw2dNext(newBoard);
};
return draw2dNext(board);
},
async draw2dNew({state, commit, dispatch}) {
/** draw a 2d cellular automaton from a random initial state
and a set of rules */
const initialState = create2dState(
state.boardWidth,
state.boardHeight,
getRandomInt,
[0, 2]
);
const board = evolve2d(initialState, conwayRules);
commit("setLastBoard", board);
await dispatch("draw2d", board);
},
async draw2dLast({state, dispatch}) {
/** draw a 2d cellular automaton from the latest known state
of the board and a set of rules */
await dispatch("draw2d", state.lastBoard);
draw1d({ commit }) {
commit("setIsDrawing1d", 1);
},
stop({ commit }) {
/** stop currently running drawing routine */
commit("setDrawingStatus", 0);
commit("setIsDrawing1d");
// commit("setIsDrawing2d")
},
reset({state, dispatch}) {
/** stop currently running drawing routine and clear the board */
dispatch("stop");
state.ctx.clearRect(0, 0, state.canvasWidth, state.canvasHeight);
}
},
modules: {},
});