From d201a73ede27471b056d9c028fc79f21910f0f6b Mon Sep 17 00:00:00 2001 From: Gator Date: Tue, 29 Nov 2022 17:31:01 +0100 Subject: [PATCH] linting and formating. renamed canvas component --- .eslintrc.js | 10 +- .prettierrc.json | 1 + README.md | 7 + babel.config.js | 6 +- docker-compose.yml | 2 +- index.html | 14 +- package.json | 3 +- src/App.vue | 65 ++++----- src/components/Canvas.vue | 134 ------------------ src/components/CanvasBoard.vue | 142 +++++++++++++++++++ src/components/MainMenu.vue | 53 ++++--- src/components/Menu2dCA.vue | 45 +++--- src/components/MenuCellProperties.vue | 32 ++--- src/components/MenuElementaryCA.vue | 197 ++++++++++++++++---------- src/components/MenuGeneralOptions.vue | 65 ++++----- src/components/MenuRow.vue | 75 +++++----- src/main.js | 12 +- src/modules/automata.js | 87 ++++++------ src/modules/main.js | 146 ------------------- src/store/index.js | 84 ++++++----- vite.config.js | 8 +- vue.config.js | 10 +- 22 files changed, 549 insertions(+), 649 deletions(-) create mode 100644 .prettierrc.json delete mode 100644 src/components/Canvas.vue create mode 100644 src/components/CanvasBoard.vue delete mode 100644 src/modules/main.js diff --git a/.eslintrc.js b/.eslintrc.js index dca8c07..da313c5 100644 --- a/.eslintrc.js +++ b/.eslintrc.js @@ -5,12 +5,12 @@ module.exports = { }, extends: [ // add more generic rulesets here, such as: - 'eslint:recommended', - 'plugin:vue/vue3-recommended', - "prettier" + "eslint:recommended", + "plugin:vue/vue3-recommended", + "prettier", ], rules: { // override/add rules settings here, such as: // 'vue/no-unused-vars': 'error' - } -} + }, +}; diff --git a/.prettierrc.json b/.prettierrc.json new file mode 100644 index 0000000..0967ef4 --- /dev/null +++ b/.prettierrc.json @@ -0,0 +1 @@ +{} diff --git a/README.md b/README.md index 973f04f..e7a8642 100644 --- a/README.md +++ b/README.md @@ -1,30 +1,37 @@ # explorata + Explore 1D and 2D cellular automata, with a few bells and whistles. ## Project setup + ``` npm install ``` ### Compiles and hot-reloads for development + ``` npm run serve ``` ### Compiles and minifies for production + ``` npm run build ``` ### Lints and fixes files + ``` npm run lint ``` ### Customize configuration + See [Configuration Reference](https://cli.vuejs.org/config/). ### References + - https://natureofcode.com/book/chapter-7-cellular-automata/ - https://en.wikipedia.org/wiki/Hashlife - https://plato.stanford.edu/entries/cellular-automata/supplement.html diff --git a/babel.config.js b/babel.config.js index 2d47eef..162a3ea 100644 --- a/babel.config.js +++ b/babel.config.js @@ -1,5 +1,3 @@ module.exports = { - presets: [ - '@vue/cli-plugin-babel/preset' - ], -} + presets: ["@vue/cli-plugin-babel/preset"], +}; diff --git a/docker-compose.yml b/docker-compose.yml index 5a0c0a7..0d23232 100644 --- a/docker-compose.yml +++ b/docker-compose.yml @@ -1,4 +1,4 @@ -version: '3.4' +version: "3.4" services: explorata: diff --git a/index.html b/index.html index 87ba56b..43651ea 100644 --- a/index.html +++ b/index.html @@ -1,18 +1,18 @@ - - - - + + + + Explorata
diff --git a/package.json b/package.json index 5825f8b..8590f1b 100644 --- a/package.json +++ b/package.json @@ -6,7 +6,8 @@ "dev": "vite", "build": "vite build", "serve": "vite preview", - "lint": "eslint --ext .js,.vue --ignore-path .gitignore --fix src" + "lint": "eslint --ext .js,.vue --ignore-path .gitignore --fix src", + "format": "prettier . --write" }, "dependencies": { "@vitejs/plugin-vue": "^3.2.0", diff --git a/src/App.vue b/src/App.vue index 9e58434..379637c 100644 --- a/src/App.vue +++ b/src/App.vue @@ -1,71 +1,66 @@ diff --git a/src/components/Canvas.vue b/src/components/Canvas.vue deleted file mode 100644 index a41a9dc..0000000 --- a/src/components/Canvas.vue +++ /dev/null @@ -1,134 +0,0 @@ - - - diff --git a/src/components/CanvasBoard.vue b/src/components/CanvasBoard.vue new file mode 100644 index 0000000..eda14c6 --- /dev/null +++ b/src/components/CanvasBoard.vue @@ -0,0 +1,142 @@ + + + diff --git a/src/components/MainMenu.vue b/src/components/MainMenu.vue index 87e774e..86166fd 100644 --- a/src/components/MainMenu.vue +++ b/src/components/MainMenu.vue @@ -8,29 +8,28 @@ diff --git a/src/components/Menu2dCA.vue b/src/components/Menu2dCA.vue index 20e8287..97ef740 100644 --- a/src/components/Menu2dCA.vue +++ b/src/components/Menu2dCA.vue @@ -2,65 +2,56 @@
- +
- + + /> + />
diff --git a/src/components/MenuCellProperties.vue b/src/components/MenuCellProperties.vue index b1b6efc..a88bf50 100644 --- a/src/components/MenuCellProperties.vue +++ b/src/components/MenuCellProperties.vue @@ -8,7 +8,7 @@ type="color" @value="cellProperties.liveColor" @input="updateCellProperties" - > + />
@@ -17,7 +17,7 @@ type="color" :value="cellProperties.deadColor" @input="updateCellProperties" - > + />
@@ -27,36 +27,36 @@ min="1" :value="cellProperties.size" @input="updateCellProperties" - > + />
diff --git a/src/components/MenuElementaryCA.vue b/src/components/MenuElementaryCA.vue index 37656d1..914708d 100644 --- a/src/components/MenuElementaryCA.vue +++ b/src/components/MenuElementaryCA.vue @@ -2,8 +2,9 @@
-
-
- copy rules + copy rules
-
- + + />
diff --git a/src/components/MenuGeneralOptions.vue b/src/components/MenuGeneralOptions.vue index c51dd89..66cb8aa 100644 --- a/src/components/MenuGeneralOptions.vue +++ b/src/components/MenuGeneralOptions.vue @@ -13,7 +13,7 @@ step="10" :value="canvasWidth" @input="updateCanvasWidth" - > + />
@@ -24,7 +24,7 @@ step="10" :value="canvasHeight" @input="updateCanvasHeight" - > + />
@@ -38,57 +38,58 @@ step="100" :value="refreshRate" @input="updateRefreshRate" - > + />
-
- + diff --git a/src/components/MenuRow.vue b/src/components/MenuRow.vue index 42e053a..1db739a 100644 --- a/src/components/MenuRow.vue +++ b/src/components/MenuRow.vue @@ -1,82 +1,75 @@ diff --git a/src/main.js b/src/main.js index ba1641e..1f764d8 100644 --- a/src/main.js +++ b/src/main.js @@ -1,10 +1,10 @@ -import Vue from 'vue' -import App from './App.vue' -import store from './store' +import Vue from "vue"; +import App from "./App.vue"; +import store from "./store"; -Vue.config.productionTip = false +Vue.config.productionTip = false; new Vue({ store, - render: h => h(App) -}).$mount('#app') + render: (h) => h(App), +}).$mount("#app"); diff --git a/src/modules/automata.js b/src/modules/automata.js index 6f9454d..4fb914c 100644 --- a/src/modules/automata.js +++ b/src/modules/automata.js @@ -1,7 +1,7 @@ // handles negative index and index bigger than its array length function guard(index, array) { - if (index > (array.length - 1)) return 0; - if (index < 0) return (array.length - 1); + if (index > array.length - 1) return 0; + if (index < 0) return array.length - 1; return index; } @@ -12,11 +12,8 @@ function evolve1d(state, rules) { return state[safeIndex]; } const newState = state.map((_, x) => { - const cells = [ - getCell(x - 1), - getCell(x), - getCell(x + 1)]; - return rules[cells.join('')]; + const cells = [getCell(x - 1), getCell(x), getCell(x + 1)]; + return rules[cells.join("")]; }); return newState.map(Number); @@ -47,10 +44,14 @@ function getCellNeighbors(board, cellCoordinates) { // the current cell is not included in the result return [ - getCell(x - 1, y - 1), getCell(x, y - 1), - getCell(x + 1, y - 1), getCell(x - 1, y), - getCell(x + 1, y), getCell(x - 1, y + 1), - getCell(x, y + 1), getCell(x + 1, y - 1), + getCell(x - 1, y - 1), + getCell(x, y - 1), + getCell(x + 1, y - 1), + getCell(x - 1, y), + getCell(x + 1, y), + getCell(x - 1, y + 1), + getCell(x, y + 1), + getCell(x + 1, y - 1), ]; } @@ -75,58 +76,60 @@ function conwayRules(cell, neighbors) { // get the next evolution of a 2D CA initial state // Rules : Moore neighborhood function evolve2d(board, rulesFn) { - return board.map((row, x) => row.map((cell, y) => { - const neighbors = getCellNeighbors(board, [x, y]); - const sum = getNeighborsSum(neighbors); - return rulesFn(cell, sum); - })); + return board.map((row, x) => + row.map((cell, y) => { + const neighbors = getCellNeighbors(board, [x, y]); + const sum = getNeighborsSum(neighbors); + return rulesFn(cell, sum); + }) + ); } function getDrawingValues(state, acc, cell) { const d = cell.dimension; - return Object.keys(state).map( - (key) => { - const fillStyle = (() => { - if (state[key] === '1') return cell.liveColor; - return cell.deadColor; - })(); + return Object.keys(state).map((key) => { + const fillStyle = (() => { + if (state[key] === "1") return cell.liveColor; + return cell.deadColor; + })(); - return { - move: [key * d, acc * d], - fill: [key * d, acc * d, d, d], - fillStyle, - }; - }, - ); + return { + move: [key * d, acc * d], + fill: [key * d, acc * d, d, d], + fillStyle, + }; + }); } // Populates the first state with a single living cell in the center function create1dStateOneCell(width) { - return [...Array(width)].map( - (cell, index) => { - if (index === width / 2 || index === width + 1 / 2) return 1 - return 0 - }) + return [...Array(width)].map((cell, index) => { + if (index === width / 2 || index === width + 1 / 2) return 1; + return 0; + }); } // Populates the first state of a 1D CA with cells returned // by initFn function create1dState(width, initFn, args) { - return [...Array(width)].map( - () => initFn(...args) - ); + return [...Array(width)].map(() => initFn(...args)); } // Populates the first state of a 2D CA with cells returned // by initFn function create2dState(width, height, initFn, args) { - return [...Array(height)].map( - () => [...Array(width)].map( - () => initFn(...args), - ), + return [...Array(height)].map(() => + [...Array(width)].map(() => initFn(...args)) ); } export { - getDrawingValues, create1dState, create2dState, createBoard, create1dStateOneCell, conwayRules, evolve1d, evolve2d + getDrawingValues, + create1dState, + create2dState, + createBoard, + create1dStateOneCell, + conwayRules, + evolve1d, + evolve2d, }; diff --git a/src/modules/main.js b/src/modules/main.js deleted file mode 100644 index d203fe3..0000000 --- a/src/modules/main.js +++ /dev/null @@ -1,146 +0,0 @@ -import { getRandomInt, sleep } from './common.js'; -import { - evolve2d, initialState1d, initialState2d, conwayRules, createBoard, -} from './automata.js'; - -let drawing = 1; - -const form = Array.from(document.forms.rules.elements); -const canvas = document.querySelector('#canvas'); -const ctx = canvas.getContext('2d'); -const main = document.querySelector('#main'); -const dead = document.querySelector('#dead'); -const live = document.querySelector('#live'); -const cellSize = document.querySelector('#cellSize'); -const startBtn = document.querySelector('#start'); -const startBtn2d = document.querySelector('#start2d'); -const canvasRefreshBtn = document.querySelector('#canvasRefresh'); -const resetBtn = document.querySelectorAll('.reset'); -const stopBtn = document.querySelectorAll('.stop'); -// const loop = document.querySelector('#loop'); -const menuRow = document.querySelectorAll('.menu-row'); -const menuRowContent = document.querySelectorAll('.menu-row-content'); - -function drawCanvas(board, props) { - board.map((row, y) => { - const d = props.size; - return row.map( - (cell, x) => { - ctx.fillStyle = ( - () => { - if (cell === 1) return props.liveColor; - return props.deadColor; - })(); - ctx.fillRect(x * d, y * d, d, d); - return cell; - }, - ); - }); -} - -function getRules() { - const rules = {}; - - form.reduce((_, i) => { - if (i !== undefined - && i.type === 'checkbox') { - if (i.checked) rules[i.name] = '1'; - else rules[i.name] = '0'; - } - return rules; - }, rules); - - return rules; -} - -function getCellProperties() { - return { - size: cellSize.value, - liveColor: live.value, - deadColor: dead.value, - }; -} - -function reset() { - drawing = 0; - ctx.clearRect(0, 0, canvas.width, canvas.height); -} - -function resizeCanvas() { - canvas.width = main.offsetWidth * 0.9; - canvas.height = main.offsetHeight * 0.9; -} - -async function draw1d() { - const rules = getRules(); - const props = getCellProperties(); - const initialState = initialState1d( - Math.floor(canvas.width / props.size), - getRandomInt, - [0, 2], - ); - const board = createBoard(initialState, rules, Math.floor(canvas.height / props.size)); - - drawCanvas(board, props); -} - -async function draw2d() { - const props = getCellProperties(); - const initialState = initialState2d( - Math.floor(canvas.width / props.size), - Math.floor(canvas.height / props.size), - getRandomInt, - [0, 2], - ); - const board = evolve2d(initialState, conwayRules); - - async function draw2dNext(b) { - if (drawing === 0) return; - const newBoard = evolve2d(b, conwayRules); - drawCanvas(b, props); - await sleep(300); - draw2dNext(newBoard); - } - return draw2dNext(board); -} - -// Listeners - -startBtn.addEventListener('click', async () => { - reset(); - - await sleep(60); - - drawing = 1; - - draw1d(); -}); - -startBtn2d.addEventListener('click', async () => { - reset(); - - await sleep(60); - - drawing = 1; - - draw2d(); -}); - -resetBtn.forEach((elem) => { - elem.addEventListener('click', async () => { - reset(); - }); -}); - -stopBtn.forEach((elem) => { - elem.addEventListener('click', async () => { - drawing = 0; - }); -}); - -canvasRefreshBtn.addEventListener('click', () => { - const width = document.querySelector('#canvasWidth').value; - const height = document.querySelector('#canvasWidth').value; - canvas.width = width; - canvas.height = height; -}); diff --git a/src/store/index.js b/src/store/index.js index a111bc5..4847d02 100644 --- a/src/store/index.js +++ b/src/store/index.js @@ -1,25 +1,25 @@ -import Vue from 'vue' -import Vuex from 'vuex' +import Vue from "vue"; +import Vuex from "vuex"; -Vue.use(Vuex) +Vue.use(Vuex); export default new Vuex.Store({ state: { drawing: 0, - rules1d : { - "111" : 0, - "110" : 1, - "101" : 0, - "100" : 0, - "011" : 1, - "010" : 0, - "001" : 0, - "000" : 1 + rules1d: { + 111: 0, + 110: 1, + 101: 0, + 100: 0, + "011": 1, + "010": 0, + "001": 0, + "000": 1, }, cellProperties: { size: 3, - liveColor: '#000000', - deadColor: '#F5F5F5', + liveColor: "#000000", + deadColor: "#F5F5F5", }, canvasWidth: 0, canvasHeight: 0, @@ -27,80 +27,78 @@ export default new Vuex.Store({ initial1dState: "onecell", activeMenu: "", drawingDirection: "y", - lastBoard: {} + lastBoard: {}, }, mutations: { update1dSingleRule(state, data) { - state.rules1d[data.rule] = data.value + state.rules1d[data.rule] = data.value; }, update1dRules(state, data) { - state.rules1d = data + state.rules1d = data; }, setCellProperties(state, data) { - state.cellProperties[data.name] = data.value + state.cellProperties[data.name] = data.value; }, setDrawingStatus(state, data) { - state.drawing = data + state.drawing = data; }, setCanvasWidth(state, data) { - state.canvasWidth = data + state.canvasWidth = data; }, setCanvasHeight(state, data) { - state.canvasHeight = data + state.canvasHeight = data; }, setRefreshRate(state, data) { - state.refreshRate = data + state.refreshRate = data; }, setInitial1dState(state, data) { - state.initial1dState = data + state.initial1dState = data; }, setActiveMenu(state, data) { - state.activeMenu = data + state.activeMenu = data; }, setDrawingDirection(state, data) { - state.drawingDirection = data + state.drawingDirection = data; }, setLastBoard(state, data) { - state.lastBoard = data + state.lastBoard = data; }, }, getters: { getCellProperties(state) { - return state.cellProperties + return state.cellProperties; }, get1dRules(state) { - return state.rules1d + return state.rules1d; }, getRule1d(state) { - return (rule) => state.rules1d[rule] + return (rule) => state.rules1d[rule]; }, isDrawing(state) { - return state.drawing + return state.drawing; }, getCanvasWidth(state) { - return state.canvasWidth + return state.canvasWidth; }, getCanvasHeight(state) { - return state.canvasHeight + return state.canvasHeight; }, getRefreshRate(state) { - return state.refreshRate + return state.refreshRate; }, getInitial1dState(state) { - return state.initial1dState + return state.initial1dState; }, getActiveMenu(state) { - return state.activeMenu + return state.activeMenu; }, getDrawingDirection(state) { - return state.drawingDirection + return state.drawingDirection; }, getLastBoard(state) { - return state.lastBoard - } + return state.lastBoard; + }, }, - actions: { - }, - modules: { - } -}) + actions: {}, + modules: {}, +}); diff --git a/vite.config.js b/vite.config.js index fc8661f..45f01b9 100644 --- a/vite.config.js +++ b/vite.config.js @@ -1,16 +1,16 @@ -import { defineConfig } from 'vite' -import vue from '@vitejs/plugin-vue' +import { defineConfig } from "vite"; +import vue from "@vitejs/plugin-vue"; const path = require("path"); export default defineConfig({ plugins: [vue()], server: { - host: '127.0.0.1' + host: "127.0.0.1", }, resolve: { alias: { "@": path.resolve(__dirname, "./src"), }, }, -}) +}); diff --git a/vue.config.js b/vue.config.js index 4463e85..680f0de 100644 --- a/vue.config.js +++ b/vue.config.js @@ -3,11 +3,11 @@ module.exports = { devServer: { overlay: { warnings: true, - errors: true + errors: true, }, watchOptions: { ignored: [/node_modules/, /public/, /\.#/], - } - } - } -} + }, + }, + }, +};