|
|
|
|
<!DOCTYPE html>
|
|
|
|
|
<html>
|
|
|
|
|
<head>
|
|
|
|
|
<title>Conway's Game of Life</title>
|
|
|
|
|
<link type="text/css" rel="stylesheet" href="/static/normalize.css" />
|
|
|
|
|
<script type="text/javascript" src="/static/jquery.min.js"></script>
|
|
|
|
|
<script type="text/javascript">
|
|
|
|
|
curState = {};
|
|
|
|
|
curImg = "";
|
|
|
|
|
|
|
|
|
|
function populateInitialState() {
|
|
|
|
|
$.getJSON('/state', {}, onPopulateResponse);
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
function goToNextState(state, loop) {
|
|
|
|
|
$.post(
|
|
|
|
|
'/state',
|
|
|
|
|
JSON.stringify({s: state}, null, 2),
|
|
|
|
|
function(data, textStatus, jqXHR) {
|
|
|
|
|
var state = onPopulateResponse(data, textStatus, jqXHR);
|
|
|
|
|
if (loop) {
|
|
|
|
|
setTimeout(function() { goToNextState(state, loop); }, 500);
|
|
|
|
|
}
|
|
|
|
|
},
|
|
|
|
|
'json'
|
|
|
|
|
);
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
function onPopulateResponse(data, textStatus, jqXHR) {
|
|
|
|
|
$.extend(curState, data.s);
|
|
|
|
|
curImg = data.i;
|
|
|
|
|
var $stateImg = $('#state_img');
|
|
|
|
|
if ($stateImg.length < 1) {
|
|
|
|
|
$stateImg = $('<img id="state_img" />').appendTo($('#state_container'));
|
|
|
|
|
}
|
|
|
|
|
$stateImg.attr('src', 'data:image/png;base64,' + encodeURI(data.i));
|
|
|
|
|
return data.s;
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
$(function() {
|
|
|
|
|
populateInitialState();
|
|
|
|
|
$('#step').click(function() { goToNextState(curState); });
|
|
|
|
|
$('#play').click(function() { goToNextState(curState, true); });
|
|
|
|
|
});
|
|
|
|
|
</script>
|
|
|
|
|
<style type="text/css">
|
|
|
|
|
body {
|
|
|
|
|
text-align: center;
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
#container {
|
|
|
|
|
margin: 0 auto;
|
|
|
|
|
width: 1024px;
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
#state_container {
|
|
|
|
|
margin-top: 21px;
|
|
|
|
|
padding-top: 9px;
|
|
|
|
|
border-top: 1px solid #999;
|
|
|
|
|
}
|
|
|
|
|
</style>
|
|
|
|
|
</head>
|
|
|
|
|
<body>
|
|
|
|
|
<div id="container">
|
|
|
|
|
<h1>Conway's Game of Life</h1>
|
|
|
|
|
<div id="controls">
|
|
|
|
|
<button id="play">Play</button>
|
|
|
|
|
<button id="step">Step</button>
|
|
|
|
|
</div>
|
|
|
|
|
<div id="state_container">
|
|
|
|
|
</div>
|
|
|
|
|
</div>
|
|
|
|
|
</body>
|
|
|
|
|
</html>
|
