From e8189a4c5e50cfae4dec1f7fcefd5b10e7361e45 Mon Sep 17 00:00:00 2001
From: Jaime Bunzli <jpbunzli@gmail.com>
Date: Wed, 7 Dec 2011 23:18:41 -0300
Subject: [PATCH] hola

---
 src/public/javascript/joystick.js | 89 ++++++++++++++++++++++++++++---
 src/views/layout.jade             |  1 +
 2 files changed, 84 insertions(+), 6 deletions(-)

diff --git a/src/public/javascript/joystick.js b/src/public/javascript/joystick.js
index 0d04f1e..095d3eb 100644
--- a/src/public/javascript/joystick.js
+++ b/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!');
+		});
+	});
diff --git a/src/views/layout.jade b/src/views/layout.jade
index d150ef9..4a082d1 100644
--- a/src/views/layout.jade
+++ b/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