vue 2 to 3 #1

Merged
gator merged 25 commits from dev into master 2022-12-02 11:23:43 +01:00
4 changed files with 93 additions and 21 deletions
Showing only changes of commit 93f9426f56 - Show all commits

View File

@ -9,7 +9,7 @@
</main>
</template>
<script>
import { evolve2d, initialState1d, initialState2d, conwayRules, createBoard } from '../modules/automata.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 {
@ -27,8 +27,19 @@ export default {
drawing: 'isDrawing',
canvasWidth: 'getCanvasWidth',
canvasHeight: 'getCanvasHeight',
refreshRate: 'getRefreshRate'
})
refreshRate: 'getRefreshRate',
initial1dState: 'getInitial1dState'
}),
boardWidth: function() {
return Math.floor(
this.canvas.width /
this.cellProperties.size)
},
boardHeight: function() {
return Math.floor(
this.canvas.height /
this.cellProperties.size)
}
},
mounted() {
this.canvas = this.$refs['canvas']
@ -56,24 +67,25 @@ export default {
)
})
},
compute1dInitialState() {
if(this.initial1dState === "onecell")
return create1dStateOneCell(this.boardWidth)
return create1dState(this.boardWidth, getRandomInt, [0, 2])
},
async draw1d() {
const initialState = initialState1d(
Math.floor(this.canvas.width / this.cellProperties.size),
getRandomInt,
[0, 2],
)
const initialState = this.compute1dInitialState()
const board = createBoard(
initialState,
this.rules,
Math.floor(this.canvas.height / this.cellProperties.size)
this.boardHeight
)
this.drawCanvas(board)
},
async draw2d() {
if (this.drawing === 0) return
const initialState = initialState2d(
Math.floor(this.canvas.width / this.cellProperties.size),
Math.floor(this.canvas.height / this.cellProperties.size),
const initialState = create2dState(
this.boardWidth,
this.boardHeight,
getRandomInt,
[0, 2],
);

View File

@ -1,9 +1,26 @@
<template>
<MenuRow row-title="Elementary Cellular Automata">
<div class="form-field">
<label>Rules</label>
</div>
<form>
<div class="form-field">
<label>Initial state presets
<br>
<select
name="initial1dStates"
value="initial1dStates"
@input="updateInitial1dState"
>
<option
v-for="state in initial1dStates"
:key="state.id"
:value="state.id"
>{{ state.name }}
</option>
</select>
</label>
</div>
<div class="form-field">
<label>Rules</label>
</div>
<div
v-for="rule in rules"
:key="rule"
@ -45,6 +62,7 @@
</template>
<script>
import {mapGetters} from 'vuex'
import MenuRow from './MenuRow.vue'
export default {
name: 'MenuElementaryCA',
@ -52,17 +70,43 @@ export default {
MenuRow
},
data() {
// TODO: Why not a getter in the store?
return {
rules: ["111", "110", "101", "100", "011", "010", "001", "000"]
rules: ["111", "110", "101", "100", "011", "010", "001", "000"],
initial1dStates: [
{ id : "onecell",
name : "One cell at center",
description : "State with a single cell in the middle",
},
{
id : "random",
name : "Random cell",
description : "State populated with random cells",
}
]
}
},
computed: {
...mapGetters({
initial1dState: 'getInitial1dState'
})
},
methods: {
isCurrentPreset(event) {
console.log(elem.value)
const elem = event.target
return this.initialState === elem.value
},
update1dRules(event) {
const elem = event.target
const value = elem.checked ? 1 : 0
const data = { 'rule' : elem.name, 'value' : value}
this.$store.commit('update1dRules', data)
},
updateInitial1dState(event) {
const elem = event.target
this.$store.commit('setInitial1dState', elem.value)
},
draw1d() {
this.$root.$store.state.drawing = 1
this.$root.$emit('draw1d')

View File

@ -99,17 +99,26 @@ function getDrawingValues(state, acc, cell) {
);
}
// 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
})
}
// Populates the first state of a 1D CA with cells returned
// by initFn
function initialState1d(width, initFn, args) {
function create1dState(width, initFn, args) {
return [...Array(width)].map(
() => initFn(...args),
() => initFn(...args)
);
}
// Populates the first state of a 2D CA with cells returned
// by initFn
function initialState2d(width, height, initFn, args) {
function create2dState(width, height, initFn, args) {
return [...Array(height)].map(
() => [...Array(width)].map(
() => initFn(...args),
@ -118,5 +127,5 @@ function initialState2d(width, height, initFn, args) {
}
export {
getDrawingValues, initialState1d, initialState2d, evolve1d, evolve2d, conwayRules, createBoard,
getDrawingValues, create1dState, create2dState, createBoard, create1dStateOneCell, conwayRules, evolve1d, evolve2d
};

View File

@ -23,7 +23,8 @@ export default new Vuex.Store({
},
canvasWidth: 1280,
canvasHeight: 720,
refreshRate: 300
refreshRate: 300,
initial1dState: "onecell"
},
mutations: {
update1dRules(state, data) {
@ -43,6 +44,9 @@ export default new Vuex.Store({
},
setRefreshRate(state, data) {
state.refreshRate = data;
},
setInitial1dState(state, data) {
state.initial1dState = data
}
},
getters: {
@ -66,6 +70,9 @@ export default new Vuex.Store({
},
getRefreshRate(state) {
return state.refreshRate
},
getInitial1dState(state) {
return state.initial1dState
}
},
actions: {