nicolas-t/jdlv.html

## jdlv.html
<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title>jeu de la vie</title>
</head>
<style type="text/css">
    #app {
        font-size: 0;
    }
    .cell {
        display: inline-block;
        width: 15px;
        height: 15px;
        outline: 1px solid silver;
    }

    .cell:hover{
        background: silver;
    }

    .cell.alive {
        background: #000;
    }
</style>
<body>
    <div id="app">
        <div
          class="line"
          v-for="(line, lineIndex) in cells"
          :key="'line'+lineIndex">
            <div
              :class="{cell: true, alive: isAlive}"
              v-for="(isAlive, colIndex) in line"
              :key="'col'+colIndex"
              :ref="lineIndex + '-' + colIndex"
              @click="handleCellClick(lineIndex, colIndex)"></div>
        </div>
        <button v-if="timer" @click="handleGoClick">Stop</button>
        <button v-else @click="handleGoClick">Go</button>
    </div>
    <script src="https://cdn.jsdelivr.net/npm/vue"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/lodash.js/4.17.4/lodash.js"></script>
    <script type="text/javascript">
        const maxLines = 60
        const maxCols = 100
        var app = new Vue({
            el: '#app',
            data: {
                timer: null,
                cells: _.merge([], _.fill(Array(maxLines), _.fill(Array(maxCols), false)))
            },

            methods: {
                run() {
                    const newCells = this.cells.map((line, lineIndex) => {
                        return line.map((isAlive, colIndex) => {
                            const aliveAround = this.aliveAround({line: lineIndex, col: colIndex})

                            if (isAlive) {
                                if (aliveAround.length === 2 || aliveAround.length === 3) {
                                    return true
                                } else {
                                    return false
                                }
                            } else {
                                if (aliveAround.length === 3) {
                                    return true
                                } else {
                                    return false
                                }
                            }
                        })
                    })

                    this.cells = _.merge([], newCells)
                },

                aliveAround(center) {
                    const aliveAround = []

                    const lines = [
                        center.line - 1,
                        center.line,
                        center.line + 1
                    ]

                    const cols = [
                        center.col - 1,
                        center.col,
                        center.col + 1
                    ]

                    lines.forEach((lineIndex) => {
                        if (lineIndex >= 0 && lineIndex < maxLines) {
                            cols.forEach((colIndex) => {
                                if (lineIndex === center.line && colIndex === center.col) {
                                    return
                                }
                                if (this.cells[lineIndex] && this.cells[lineIndex][colIndex]) {
                                    aliveAround.push(true)
                                }
                            })
                        }
                    })

                    return aliveAround
                },

                handleCellClick(line, col){
                    this.cells[line][col] = !this.cells[line][col]
                    Vue.set(this.cells, line, this.cells[line])
                },

                handleGoClick(){
                    if (!this.timer) {
                        this.timer = setInterval(this.run, 200)
                    } else {
                        clearInterval(this.timer)
                        this.timer = null
                    }
                }
            }
        })
    </script>
</body>
</html>
	<!DOCTYPE html>
	<html>
	<head>
	<meta charset="utf-8">
	<title>jeu de la vie</title>
	</head>
	<style type="text/css">
	#app {
	font-size: 0;
	}
	.cell {
	display: inline-block;
	width: 15px;
	height: 15px;
	outline: 1px solid silver;
	}

	.cell:hover{
	background: silver;
	}

	.cell.alive {
	background: #000;
	}
	</style>
	<body>
	<div id="app">
	<div
	class="line"
	v-for="(line, lineIndex) in cells"
	:key="'line'+lineIndex">
	<div
	:class="{cell: true, alive: isAlive}"
	v-for="(isAlive, colIndex) in line"
	:key="'col'+colIndex"
	:ref="lineIndex + '-' + colIndex"
	@click="handleCellClick(lineIndex, colIndex)"></div>
	</div>
	<button v-if="timer" @click="handleGoClick">Stop</button>
	<button v-else @click="handleGoClick">Go</button>
	</div>
	<script src="https://cdn.jsdelivr.net/npm/vue"></script>
	<script src="https://cdnjs.cloudflare.com/ajax/libs/lodash.js/4.17.4/lodash.js"></script>
	<script type="text/javascript">
	const maxLines = 60
	const maxCols = 100
	var app = new Vue({
	el: '#app',
	data: {
	timer: null,
	cells: _.merge([], _.fill(Array(maxLines), _.fill(Array(maxCols), false)))
	},

	methods: {
	run() {
	const newCells = this.cells.map((line, lineIndex) => {
	return line.map((isAlive, colIndex) => {
	const aliveAround = this.aliveAround({line: lineIndex, col: colIndex})

	if (isAlive) {
	if (aliveAround.length === 2 \|\| aliveAround.length === 3) {
	return true
	} else {
	return false
	}
	} else {
	if (aliveAround.length === 3) {
	return true
	} else {
	return false
	}
	}
	})
	})

	this.cells = _.merge([], newCells)
	},

	aliveAround(center) {
	const aliveAround = []

	const lines = [
	center.line - 1,
	center.line,
	center.line + 1
	]

	const cols = [
	center.col - 1,
	center.col,
	center.col + 1
	]

	lines.forEach((lineIndex) => {
	if (lineIndex >= 0 && lineIndex < maxLines) {
	cols.forEach((colIndex) => {
	if (lineIndex === center.line && colIndex === center.col) {
	return
	}
	if (this.cells[lineIndex] && this.cells[lineIndex][colIndex]) {
	aliveAround.push(true)
	}
	})
	}
	})

	return aliveAround
	},

	handleCellClick(line, col){
	this.cells[line][col] = !this.cells[line][col]
	Vue.set(this.cells, line, this.cells[line])
	},

	handleGoClick(){
	if (!this.timer) {
	this.timer = setInterval(this.run, 200)
	} else {
	clearInterval(this.timer)
	this.timer = null
	}
	}
	}
	})
	</script>
	</body>
	</html>