hola

src/public/javascript/joystick.js

@@ -1,14 +1,45 @@
+
+
 var left = document.getElementById('left');
 var right = document.getElementById('right');
+var up = document.getElementById('up');
+var down = document.getElementById('down');
+
+var action_a = document.getElementById('action-a');
+
+action_a.addEventListener('touchstart', function(event) {
+  // If there's exactly one finger inside this element
+  if (event.targetTouches.length == 1) {
+    var touch = event.targetTouches[0];
+    // Place element where the finger is
+    socket.emit('action', 'button_A', 1);
+  }
+}, false);
+
+left.addEventListener('touchstart', function(event) {
+  // If there's exactly one finger inside this element
+  if (event.targetTouches.length == 1) {
+    var touch = event.targetTouches[0];
+    // Place element where the finger is
+    socket.emit('action', 'move_left', 1);
+  }
+}, false);
 
 left.addEventListener('touchmove', function(event) {
   // If there's exactly one finger inside this element
   if (event.targetTouches.length == 1) {
     var touch = event.targetTouches[0];
     // Place element where the finger is
-    //obj.style.left = touch.pageX + 'px';
-    //obj.style.top = touch.pageY + 'px';
-    $("#text").html(touch.pageX);
+    socket.emit('action', 'move_left', 1);
+  }
+}, false);
+
+right.addEventListener('touchstart', function(event) {
+  // If there's exactly one finger inside this element
+  if (event.targetTouches.length == 1) {
+    var touch = event.targetTouches[0];
+    // Place element where the finger is
+    socket.emit('action', 'move_right', 1);
   }
 }, false);
 
@@ -17,10 +48,56 @@ right.addEventListener('touchmove', function(event) {
   if (event.targetTouches.length == 1) {
     var touch = event.targetTouches[0];
     // Place element where the finger is
-    //obj.style.left = touch.pageX + 'px';
-    //obj.style.top = touch.pageY + 'px';
-    $("#text_2").html(touch.pageX);
+    socket.emit('action', 'move_right', 1);
+  }
+}, false);
+
+up.addEventListener('touchstart', function(event) {
+  // If there's exactly one finger inside this element
+  if (event.targetTouches.length == 1) {
+    var touch = event.targetTouches[0];
+    // Place element where the finger is
+    socket.emit('action', 'move_up', 1);
+  }
+}, false);
+
+up.addEventListener('touchmove', function(event) {
+  // If there's exactly one finger inside this element
+  if (event.targetTouches.length == 1) {
+    var touch = event.targetTouches[0];
+    // Place element where the finger is
+    socket.emit('action', 'move_up', 1);
   }
 }, false);
 
+down.addEventListener('touchstart', function(event) {
+  // If there's exactly one finger inside this element
+  if (event.targetTouches.length == 1) {
+    var touch = event.targetTouches[0];
+    // Place element where the finger is
+    socket.emit('action', 'move_down', 1);
+  }
+}, false);
+
+down.addEventListener('touchmove', function(event) {
+  // If there's exactly one finger inside this element
+  if (event.targetTouches.length == 1) {
+    var touch = event.targetTouches[0];
+    // Place element where the finger is
+    socket.emit('action', 'move_down', 1);
+  }
+}, false);
+
+
 document.addEventListener('touchstart', function(e){ e.preventDefault(); });
+
+var socket = io.connect('/api/control');
+	socket.on('connect', function () {
+		socket.emit('join', document.location.hash.substr(1));
+		socket.on('join ok', function (player_id) {
+
+		});
+		socket.on('join failed', function () {
+			alert('cuek!');
+		});
+	});

src/views/layout.jade

@@ -5,6 +5,7 @@ html
     meta(name="viewport", content="width=device-width; initial-scale=1.0; maximum-scale=1.0; user-scalable=no;")
     title= title
     link(rel='stylesheet', href='/stylesheets/style.css')
+    script(src="/socket.io/socket.io.js")
     script(src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js")
 
   body!= body