Tapit - initial working copy

.gitignore

@@ -0,0 +1 @@
+node_modules

Procfile

@@ -0,0 +1 @@
+web: node notify.js

notify.js

@@ -0,0 +1,58 @@
+var express = require('express')
+  , app = express.createServer()
+  , redis = require('redis')
+  , io = require('socket.io').listen(app);
+
+app.use(express.bodyParser());
+app.use(express.static(__dirname + '/public'));
+app.set('view engine', 'jade');
+
+app.listen(3000);
+
+const DB = redis.createClient();
+
+app.get('/', function(req, res) {
+  res.render('index');
+});
+
+app.get('/games/new', function (req, res) {
+  data = { gameid: Math.random().toString(36).substring(12) }
+
+  // Create the game in DB
+  DB.sadd('games', data['gameid']);
+  res.render('games/new', data);
+});
+
+app.get('/game/:gameid/:nick', function (req, res) {
+  if (!DB.sismember('games', req.params.gameid))
+    res.send("No such game", 404);
+  else {
+    DB.sadd(req.params.gameid, req.params.nick)
+    params = { gameid: req.params.gameid,
+               nick: req.params.nick,
+               ts: Date.now()
+    }
+    res.render('games/join', params);
+  }
+});
+
+
+io.sockets.on('connection', function(socket) {
+  console.log("connected..");
+  const subscribe = redis.createClient();
+  const publish = redis.createClient();
+
+  socket.on('publish', function(channel, data) {
+    publish.publish(channel, data);
+  });
+
+  socket.on('psubscribe', function(channel) {
+    console.log('subscribe: ' + channel);
+    subscribe.psubscribe(channel);
+  });
+
+  subscribe.on("pmessage", function(pattern, channel, message) {
+    socket.emit('message', { channel: channel, data:  message });
+  });
+
+});

package.json

@@ -0,0 +1,12 @@
+{
+  "name": "TapIt",
+  "version": "0.0.1",
+  "dependencies": {
+    "express": "2.5.8",
+    "redis": "0.7.1",
+    "hiredis": "0.1.13",
+    "formidable": "1.0.8",
+    "jade": "0.20.3",
+    "socket.io": "0.8.5"
+  }
+}

public/javascripts/socket.js

@@ -0,0 +1,18 @@
+$(document).ready(function() {
+    var socket = new io.Socket('localhost', {port: 3000, rememberTransport: false/*, transports: ['xhr-polling']*/});
+    var content = $('#content');
+
+    socket.on('connect', function() {
+    });
+
+    socket.on('message', function(message){
+        content.prepend(message + '<br />');
+    }) ;
+
+    socket.on('disconnect', function() {
+        console.log('disconnected');
+        content.html("<b>Disconnected!</b>");
+    });
+
+    socket.connect();
+});

public/stylesheets/game.css

@@ -0,0 +1,31 @@
+#dancefloor {
+  height: 500px;
+}
+
+.dancer {
+  width: 120px;
+  float: left;
+}
+
+.user {
+  background-position: 0 0;
+  background-repeat: no-repeat;
+  width: 120px;
+  height: 120px;
+}
+
+.left {
+  background-image: url('/images/left.jpg')
+}
+
+.up {
+  background-image: url('/images/up.jpg')
+}
+
+.right {
+  background-image: url('/images/right.jpg')
+}
+
+.hi {
+  background-image: url('/images/hi.jpg')
+}

views/event.jade

@@ -0,0 +1,41 @@
+script
+  $(document).ready(function() {
+      var socket = io.connect("http://192.168.1.153:3000");
+      var content = $('#content');
+
+      socket.on('connect', function() {
+          console.log('connected');
+          content.html("<b>Connected!</b>");
+      });
+
+      socket.on('message', function(message){
+          content.prepend(message + '<br />');
+      }) ;
+
+      socket.on('disconnect', function() {
+          console.log('disconnected');
+          content.html("<b>Disconnected!</b>");
+      });
+
+
+      $("#subscribe").submit(function() {
+        socket.emit('psubscribe', $('#subscribe #channel').val());
+        return false;
+      });
+
+      $("#publish").submit(function() {
+        socket.emit('publish', $('#publish #channel').val(), "I am here");
+        return false;
+      });
+
+  });
+
+#{name}
+form#subscribe(action="#")
+  input#channel(type="input")
+  input(type="submit")
+
+form#publish(action="#")
+  input#channel(type="input")
+  input(type="submit")
+#content

views/events.jade

@@ -0,0 +1,40 @@
+script
+  $(document).ready(function() {
+      var socket = io.connect("http://192.168.1.153:3000");
+      var content = $('#content');
+
+      socket.on('connect', function() {
+          console.log('connected');
+          content.html("<b>Connected!</b>");
+      });
+
+      socket.on('message', function(message){
+          content.prepend(message + '<br />');
+      }) ;
+
+      socket.on('disconnect', function() {
+          console.log('disconnected');
+          content.html("<b>Disconnected!</b>");
+      });
+
+
+      $("#subscribe").submit(function() {
+        socket.emit('psubscribe', $('#subscribe #channel').val());
+        return false;
+      });
+
+      $("#publish").submit(function() {
+        socket.emit('publish', $('#publish #channel').val(), "I am here");
+        return false;
+      });
+
+  });
+
+form#subscribe(action="#")
+  input#channel(type="input")
+  input(type="submit")
+
+form#publish(action="#")
+  input#channel(type="input")
+  input(type="submit")
+#content

views/games/join.jade

@@ -0,0 +1,42 @@
+script
+  $(document).ready(function() {
+      var socket = io.connect("http://192.168.1.153:3000");
+      var content = $('#content');
+
+      socket.on('connect', function() {
+          console.log('connected');
+          socket.emit('publish', 'game.#{gameid}.user',
+            JSON.stringify({nick: "#{nick}", ts: Date.now() })
+          );
+      });
+
+      socket.on('message', function(message, data){
+          content.prepend(message + '<br />' + data);
+      }) ;
+
+      socket.on('disconnect', function() {
+          console.log('disconnected');
+          content.html("<b>Disconnected!</b>");
+      });
+
+
+      $("#subscribe").submit(function() {
+        socket.emit('psubscribe', $('#subscribe #channel').val());
+        return false;
+      });
+
+      $(".action").click(function() {
+        socket.emit('publish', 'game.#{gameid}.action.' + $(this).data('action'), 
+           JSON.stringify({ nick: "#{nick}", ts: Date.now() })
+        );
+        return false;
+      });
+
+  });
+
+h2 Yo mama! Welcome #{nick}
+
+.action(data-action="left") Left
+.action(data-action="right") Right
+.action(data-action="up") Up
+.action(data-action="hi") Hi

views/games/new.jade

@@ -0,0 +1,48 @@
+script
+  function add_user(data) {
+    // TODO: Should use some template here!
+    $('#dancefloor').prepend("<div class='dancer'><div>" + data.nick + "</div><div class='user hi' id='" + data.nick + "'></div></div>");
+  }
+
+  function process_action(action, data) {
+    nick = $("#dancefloor #" + data.nick);
+    console.log(nick);
+
+    // action is an array ['event string', 'group1'], so we need action[1]
+    nick.attr('class', 'user').addClass(action[1]);
+  }
+
+  $(document).ready(function() {
+      var socket = io.connect("http://192.168.1.153:3000");
+      var dancefloor = $('#dancefloor');
+
+      socket.on('connect', function() {
+          console.log('connected');
+          socket.emit('psubscribe', 'game.#{gameid}.action.*');
+          socket.emit('psubscribe', 'game.#{gameid}.user');
+      });
+
+      socket.on('message', function(message) {
+          data = jQuery.parseJSON(message.data);
+          console.log(message.channel + " : " + data.nick + ' @ ' + data.ts);
+
+          if (action = message.channel.match(/game\.#{gameid}\.action\.(.*)$/) ) {
+            // "game.xyz.action.left"
+            process_action(action, data);
+          } else if (message.channel.match(/game\.#{gameid}\.user/) ) {
+            // "game.xyz.user"
+            add_user(data);
+          }
+      });
+
+      socket.on('disconnect', function() {
+          console.log('disconnected');
+      });
+  });
+
+h1 Meet me on the dance floor!
+h2 http://192.168.1.153:3000/game/#{gameid}/:nickname
+p eg. http://192.168.1.153:3000/game/#{gameid}/robert
+
+#dancefloor
+

views/index.jade

@@ -0,0 +1,7 @@
+h1 Welcome to Tapit
+
+a(href="/games/new") New Dance floor?
+
+h2 Join a dance session.
+p To join a dance session, use the url provided at the bottom of the game
+

views/layout.jade

@@ -0,0 +1,7 @@
+html
+  head
+    script(src='/javascripts/jquery-1.4.3.min.js')
+    script(src='/socket.io/socket.io.js')
+
+    link(rel='stylesheet', href='/stylesheets/game.css')
+  body!= body