refactored

public/source/index.html.haml

@@ -2,9 +2,10 @@
   %title Hobbit v. Giant
 
 #player.panel
+  #name
   #health
-    %script
-      $(function(){RealtimeLine.chart([0, 39], "linear", RealtimeLine.tick, hobbit.healthPercentage);})
+    .text
+
 #panel
   %button#connector Connect!
   %br/

public/source/javascripts/app.coffee

@@ -1,31 +1,5 @@
-gameSocket = undefined
-
-class Hobbit
-  currentHealth: "1"
-  maxHealth: "1"
-  name: "blah"
-  healthPercentage: () =>
-    parseFloat(this.currentHealth) / parseFloat(this.maxHealth)
-
-hobbit = new Hobbit
-
-$ ->
-  $("#connector").click ->
-    unless gameSocket
-      gameSocket = new WebSocket("ws://localhost:12345/game")
-      gameSocket.onopen = (event) ->
-        console.log "Opened!"
-
-      gameSocket.onmessage = (event) ->
-        console.log event.data
-        hobbitData = JSON.parse(event.data)
-        hobbit.currentHealth = hobbitData.currentHealth
-        hobbit.maxHealth = hobbitData.maxHealth
-        $("#name").text hobbit.name
-        $("#id").text hobbit.id
-        $("#health").text parseFloat(hobbit.currentHealth) / parseFloat(hobbit.maxHealth)
-
-  $("#new-health").change ->
-    gameSocket.send $(this).val()
-
-window.hobbit = hobbit
+#= require "globals"
+#= require "player"
+#= require "charts"
+#= require "charts/realtime-line"
+#= require "initialize"

public/source/javascripts/charts.coffee

@@ -0,0 +1,4 @@
+window.Charts =
+  randomFunction: (variation) ->
+    () ->
+      d3.random.normal(0, variation)

public/source/javascripts/charts/realtime-line.coffee

@@ -0,0 +1,82 @@
+class RealtimeLine
+  constructor: (options) ->
+    {
+      @range,
+      @yscale,
+      @interpolation,
+      @valueFunction,
+      @selector,
+      view
+    } = options
+    @domain = [0, @range - 1]
+    @setView view
+
+  setMargin: (margin) ->
+    @view.margin = margin ? {}
+    @view.margin.top ?= 0
+    @view.margin.right ?= 0
+    @view.margin.bottom ?= 0
+    @view.margin.left ?= 0
+
+  setView: (view) ->
+    @view = {}
+    @view.width = view.width ? 0
+    @view.height = view.height ? 0
+    @setMargin(view.margin)
+
+
+  draw: () ->
+    data = d3.range(@range).map(@valueFunction)
+
+    width = @view.width - @view.margin.right
+    height = @view.height - @view.margin.top - @view.margin.bottom
+
+    x = d3.scale.linear().domain(@domain).range([ 0, width ])
+    y = d3.scale.linear().domain(@yscale).range([ height, 0 ])
+
+    line = d3.svg.line().interpolate(@interpolation).x((d, i) ->
+      x i
+    ).y((d, i) ->
+      y d
+    )
+
+    svg = d3.select(@selector)
+      .append("p")
+      .append("svg")
+      .attr("width", width + @view.margin.left + @view.margin.right)
+      .attr("height", height + @view.margin.top + @view.margin.bottom)
+      .append("g")
+      .attr("transform", "translate(" + @view.margin.left + "," + @view.margin.top + ")")
+
+    svg.append("defs")
+      .append("clipPath")
+      .attr("id", "clip")
+      .append("rect")
+      .attr("width", width)
+      .attr("height", height)
+
+    svg.append("g")
+      .attr("class", "y axis")
+      .call(d3.svg.axis().scale(y).ticks(5).orient("left"))
+
+    path = svg.append("g")
+      .attr("clip-path", "url(#clip)")
+      .append("path")
+      .data([ data ])
+      .attr("class", "line")
+      .attr("d", line)
+
+    @tick path, line, data, x
+
+  tick: (path, line, data, x) ->
+    data.push @valueFunction()
+    path.attr("d", line)
+      .attr("transform", null)
+      .transition()
+      .duration(300)
+      .ease("linear")
+      .attr("transform", "translate(" + x(-1) + ")")
+      .each("end", () => @tick(path, line, data, x))
+    data.shift()
+
+window.RealtimeLine = RealtimeLine

public/source/javascripts/globals.coffee

@@ -0,0 +1,3 @@
+window.App = Ember.Application.create()
+App.models =
+  player: null

public/source/javascripts/initialize.coffee

@@ -0,0 +1,18 @@
+$ () ->
+  console.log "initializing"
+  healthGraph = new RealtimeLine
+    range: 40
+    yscale: [0, 100]
+    interpolation: "basis"
+    valueFunction: App.models.player.healthPercentage
+    selector: "#health"
+    view:
+      width: 400
+      height: 120
+      margin:
+        top: 10
+        right: 0
+        bottom: 10
+        left: 40
+
+  healthGraph.draw()