76 lines
1.7 KiB
Vue
76 lines
1.7 KiB
Vue
<template>
|
|
<main id="main">
|
|
<canvas
|
|
id="canvas"
|
|
ref="canvas"
|
|
width="500"
|
|
height="500"
|
|
/>
|
|
</main>
|
|
</template>
|
|
<script>
|
|
import { initialState1d, createBoard } from '../modules/automata.js'
|
|
import { getRandomInt } from '../modules/common.js'
|
|
import {mapGetters} from 'vuex'
|
|
export default {
|
|
name: 'Canvas',
|
|
data() {
|
|
return {
|
|
canvas: null,
|
|
ctx: null,
|
|
}
|
|
},
|
|
computed: {
|
|
...mapGetters({
|
|
cellProperties: 'getCellProperties',
|
|
rules: 'getRuleSet1d',
|
|
})
|
|
},
|
|
mounted() {
|
|
this.canvas = this.$refs['canvas']
|
|
this.canvas.width = 1280
|
|
this.canvas.height = 720
|
|
this.ctx = this.canvas.getContext('2d')
|
|
this.$root.$on('draw1d', () => { this.draw1d() })
|
|
this.$root.$on('reset', () => { this.reset() })
|
|
},
|
|
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
|
|
})()
|
|
this.ctx.fillRect(x * d, y * d, d, d)
|
|
return cell
|
|
},
|
|
)
|
|
})
|
|
},
|
|
async draw1d() {
|
|
const initialState = initialState1d(
|
|
Math.floor(this.canvas.width / this.cellProperties.size),
|
|
getRandomInt,
|
|
[0, 2],
|
|
)
|
|
const board = createBoard(
|
|
initialState,
|
|
this.rules,
|
|
Math.floor(this.canvas.height / this.cellProperties.size)
|
|
)
|
|
this.drawCanvas(board)
|
|
},
|
|
reset() {
|
|
this.$root.$store.state.drawing = 0;
|
|
this.ctx.clearRect(0, 0, this.canvas.width, this.canvas.height)
|
|
}
|
|
}
|
|
}
|
|
</script>
|
|
|