﻿<!DOCTYPE html>
<html lang="en">
	<head>
		<meta http-equiv="X-UA-Compatible" content="IE=edge" />
		<meta name="viewport" content="width=device-width, minimum-scale=1, maximum-scale=1, initial-scale=1" />
		<meta name="author" content="Alex Hribsek" />
		<meta name="title" content="Game of life" />

		<link rel="stylesheet" type="text/css" href="index.css" />

		<script src="index.js"></script>

		<title>Game of life</title>
	</head>
	<body>
		<h1>Game of life</h1>
		<canvas id="world"></canvas>
		<div id="toolbar">
			<button id="restart">Restart</button>
		</div>

		<script type="text/javascript">
			var gameOfLife;

			document.addEventListener('DOMContentLoaded', function() {
				gameOfLife = new GameOfLife();

				document
					.getElementById('restart')
					.addEventListener('click', function() {
						gameOfLife.restart();
					});
			});
		</script>
	</body>
</html>
<!DOCTYPE html>
<html lang="en">
	<head>
		<meta http-equiv="X-UA-Compatible" content="IE=edge" />
		<meta name="viewport" content="width=device-width, minimum-scale=1, maximum-scale=1, initial-scale=1" />
		<meta name="author" content="Alex Hribsek" />
		<meta name="title" content="Game of life" />

		<link rel="stylesheet" type="text/css" href="index.css" />

		<script src="index.js"></script>

		<title>Game of life</title>
	</head>
	<body>
		<h1>Game of life</h1>
		<canvas id="world"></canvas>
		<div id="toolbar">
			<button id="toggle_play">Toggle play</button>
			<button id="next_generation" disabled>Next generation</button>
			<button id="restart">Restart</button>
		</div>

		<script type="text/javascript">
			document.addEventListener('DOMContentLoaded', function() {
				var togglePlayElement = document.getElementById('toggle_play'),
					nextGenerationElement = document.getElementById('next_generation'),
					restartElement = document.getElementById('restart');

				var gameOfLife = new GameOfLife();

				togglePlayElement.addEventListener('click', function() {
					if (gameOfLife.togglePlay())
						nextGenerationElement.setAttribute('disabled', 'disabled');
					else
						nextGenerationElement.removeAttribute('disabled');
				});

				nextGenerationElement.addEventListener('click', function() {
					gameOfLife.nextGeneration();
				});

				restartElement.addEventListener('click', function() {
					gameOfLife.restart();
					nextGenerationElement.setAttribute('disabled', 'disabled');
				});
			});
		</script>
	</body>
</html>

Add new options: toggle play and next generation.
Add new options: toggle play and next generation.