Externalizing web assets

mostly to ease editing, but also for practice with file manipulation, gzipping, base64'ing, etc.
2012-12-18 21:56:37 -05:00
parent 4c44252a49
commit f86855d22d
8 changed files with 230 additions and 1871 deletions
--- a/conway/web_assets/index.html
+++ b/conway/web_assets/index.html
@@ -0,0 +1,51 @@
+<!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) {
+        $.post('/state', JSON.stringify({s: state}, null, 2), onPopulateResponse, 'json');
+      }
+
+      function playGame() {
+        goToNextState(curState);
+        setTimeout(playGame, 500);
+      }
+
+      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));
+      }
+
+      $(function() {
+        populateInitialState();
+        $('#step').click(function() { goToNextState(curState); });
+        $('#play').click(playGame);
+      });
+    </script>
+  </head>
+  <body>
+    <h1>Conway's Game of Life</h1>
+    <div id="controls">
+      <button id="step">Step</button>
+      <button id="play">Play</button>
+    </div>
+    <hr />
+    <div id="state_container">
+    </div>
+  </body>
+</html>