comparison mcserver/static/app.js~ @ 0:89a05584e39e

initial commit of mood conductor stuff

+var Application = {
+  init: function() {
+    this.canvas = document.getElementById('canvas');
+    this.marker = document.getElementById('marker');
+    this.label = document.getElementById('label');
+
+    this.canvas.addEventListener('mousedown', this.onMouseDown.bind(this));
+    this.canvas.addEventListener('mousemove', this.onMouseMove.bind(this));
+    this.canvas.addEventListener('mouseup', this.onMouseUp.bind(this));
+    
+    this.request("/moods.csv", this.loadCSV.bind(this));
+  },
+
+  loadCSV: function(text) {
+    this.moods = [];
+
+    var lines = text.split("\n");
+
+    for (var i = 1; i < lines.length; i++) {
+      var row = lines[i].split(",");
+      this.moods.push({
+        label: row[1], 
+        x: Number(row[3]), 
+        y: Number(row[5])
+      });
+    }
+  },
+  
+  request: function(url, callback) {
+    var request = new XMLHttpRequest();
+    request.onreadystatechange = function() {
+      callback(request.responseText);
+    }.bind(this);
+    request.open("GET", url);
+    request.send(null);
+  },
+
+  onMouseDown: function(event) {
+    this.mouseDown = true;
+    this.setMarker(event.pageX, event.pageY);
+  },
+
+  onMouseMove: function(event) {
+    if (this.mouseDown) {
+      this.setMarker(event.pageX, event.pageY);
+    }
+  },
+
+  onMouseUp: function(event) {
+    this.mouseDown = false;
+    this.setMarker(event.pageX, event.pageY);
+  },
+
+  setMarker: function(x, y) {
+    this.marker.style.left = x + 'px';
+    this.marker.style.top = y + 'px';
+    
+    var _x = x / 480;
+    var _y = y / 960;
+    var match = {
+      dx: 1,
+      dy: 1,
+      index: null
+    };
+    
+    for (var i = 0; i < this.moods.length; i++) {
+      var mood = this.moods[i];
+      var dx = Math.abs(mood.x - _x);
+      var dy = Math.abs(mood.y - _y);
+
+      if (dx < match.dx && dy < match.dy) {
+        match.dx = dx;
+        match.dy = dy;
+        match.index = i;
+      }
+    }
+
+    this.label.innerHTML = this.moods[match.index].label;
+  }
+};