Adding a graph for fleet totals.

css/style.css

@@ -101,6 +101,12 @@ h1 {
   margin-bottom: 5px;
 }
 
+#chart {
+    background:white; 
+    border-top: solid 1px #607890;
+    border-bottom: solid 1px #607890;
+}
+
 /* 
  * print styles
  */

index.php

@@ -34,14 +34,20 @@
 
     <div id="main">
         <canvas id="display" width="640" height="640"></canvas>
-        <p id="turnCounter"></p>
+        <p id="turnCounter">Loading</p>
         <p id="controls">
             <a href="#" id="start-button"><span class="small">|</span>&laquo;</a> | 
             <a href="#" id="prev-frame-button">&laquo;</a> | 
             <a href="#" id="play-button">&#9654;</a> | 
             <a href="#" id="next-frame-button">&raquo;</a> | 
             <a href="#" id="end-button">&raquo;<span class="small">|</span></a>
         </p>
+
+        <p>
+          <br>
+          <br>
+          <canvas id="chart" width="640" height="100" ></canvas>
+        </p>
     </div>
 
     <footer>

js/visualizer.js

@@ -156,6 +156,51 @@ var Visualizer = {
         $(this.canvas).trigger('drawn');
     },
 
+    drawChart: function(){
+        var canvas = document.getElementById('chart')
+        var ctx = canvas.getContext('2d');
+        ctx.scale(1,-1)
+        ctx.translate(0,-canvas.height)
+
+        // Total the ship counts
+        var mostShips = 100;
+        for(var i=0; i < this.moves.length; i++ ){
+            var turn = this.moves[i]
+            turn.shipCount=[0,0,0]
+            for(var j=0; j < turn.moving.length; j++ ){
+                var fleet = turn.moving[j]
+                turn.shipCount[fleet.owner]+=fleet.numShips
+            }
+            for(var j=0; j < turn.planets.length; j++ ){
+                var planet = turn.planets[j]
+                turn.shipCount[planet.owner]+=planet.numShips
+            }
+
+            for(var j=0; j < turn.shipCount.length; j++ ){
+                mostShips = Math.max(mostShips, turn.shipCount[j] )
+            }
+        }
+
+        var heightFactor = canvas.height / mostShips / 1.05
+        var widthFactor = canvas.width / Math.max(200, this.moves.length)
+        for(var i = 1; i <= 2; i++ ){
+            ctx.strokeStyle = this.config.teamColor[i];
+            ctx.fillStyle = this.config.teamColor[i];
+            ctx.beginPath();
+            ctx.moveTo(0,this.moves[0].shipCount[i] * heightFactor)
+            for(var j=1; j < this.moves.length; j++ ){
+                var shipCount = this.moves[j].shipCount[i]
+                ctx.lineTo(j*widthFactor, shipCount*heightFactor)
+            }
+            ctx.stroke();
+
+            ctx.beginPath();
+            ctx.arc((j-1)*widthFactor, shipCount*heightFactor, 2, 0, Math.PI*2, true);
+            ctx.fill();
+        }
+
+    },
+
     start: function() {
         this.playing = true;
         setTimeout(function() { Visualizer.run.apply(Visualizer); }, 1);
@@ -358,4 +403,5 @@ var ParserUtils = {
     $('title').text(Visualizer.players[0]+' v.s. '+Visualizer.players[1]+' - Planet Wars')
 
     Visualizer.start();
+    Visualizer.drawChart();
 })(window.jQuery);