diff --git a/.eslintrc.js b/.eslintrc.js index b7db048..edac359 100644 --- a/.eslintrc.js +++ b/.eslintrc.js @@ -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", }, }; diff --git a/src/App.vue b/src/App.vue index 10b1827..1519d90 100644 --- a/src/App.vue +++ b/src/App.vue @@ -27,7 +27,7 @@ export default { -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; text-align: center; - /* color: #2c3e50; */ + /* color: #2c3e50; */ } * { diff --git a/src/components/CanvasBoard.vue b/src/components/CanvasBoard.vue index d307a31..1f1338d 100644 --- a/src/components/CanvasBoard.vue +++ b/src/components/CanvasBoard.vue @@ -5,52 +5,135 @@ ref="canvas-board" :width="canvasWidth" :height="canvasHeight" - > - + /> diff --git a/src/components/MenuElementaryCA.vue b/src/components/MenuElementaryCA.vue index 4e3ce31..d968453 100644 --- a/src/components/MenuElementaryCA.vue +++ b/src/components/MenuElementaryCA.vue @@ -11,7 +11,8 @@ @input="updateInitialState" > {{ state.name }} @@ -24,7 +25,7 @@ Rules presets + >Rules presets {{ ruleset.name }} @@ -44,11 +46,12 @@ copy rules {{ name }} + >{{ name }} diff --git a/src/main.js b/src/main.js index 94d53fb..a965a4f 100644 --- a/src/main.js +++ b/src/main.js @@ -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"); diff --git a/src/store/index.js b/src/store/index.js index af39d2d..0c9cb5a 100644 --- a/src/store/index.js +++ b/src/store/index.js @@ -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: {}, });