Permalink
Browse files

multiplayer rocks!

  • Loading branch information...
1 parent 63930d4 commit 4b8b19ca4aebd1d9f1e5d53b3be9376bbbe44b59 @masylum masylum committed Sep 29, 2011
Showing with 137 additions and 40 deletions.
  1. +44 −14 app.js
  2. +17 −5 game.js
  3. +32 −12 public/css/whatajong.css
  4. +30 −4 public/js/client.js
  5. +3 −2 public/js/mouse.js
  6. +1 −1 views/layout.jade
  7. +10 −2 views/room.jade
View
58 app.js
@@ -6,24 +6,48 @@ var node_static = require('node-static')
, db = require('mongojs').connect(conf.mongodb.connection_url, ['users', 'rooms'])
, io, http;
+function parseUser(network, data) {
+ var user = {};
+ switch (network) {
+ case 'facebook':
+ user.name = data.name;
+ user.picture = 'https://graph.facebook.com/' + data.id + '/picture';
+ break;
+ case 'twitter':
+ user.name = data.name;
+ user.picture = data.profile_image_url;
+ break;
+ }
+ user.network = network;
+ return user;
+}
+
function findOrCreateUser(network) {
return function (session, access_token, access_token_extra, metadata) {
var promise = this.Promise();
+
db.users.findOne({access_token: access_token, network: network}, function (error, user) {
+ function onUser(error, user) {
+ if (Array.isArray(user)) {
+ user = user[0];
+ }
+ user.id = user._id;
+ promise.fulfill(user);
+ }
+
if (!user) {
- metadata.access_token = access_token;
- metadata.network = network;
- db.users.insert(metadata);
+ db.users.insert(parseUser(network, metadata), onUser);
+ } else {
+ onUser(null, user);
}
- promise.fulfill(user || metadata);
});
return promise;
}
}
function authorize(req, res, next) {
- if (!req.session.auth) {
+ if (!req.user) {
if (!req.param('room_id')) {
req.session.redirect = '/' + req.param('room_id');
}
@@ -33,6 +57,10 @@ function authorize(req, res, next) {
}
}
+everyauth.everymodule.findUserById(function (_id, callback) {
+ db.users.findOne({_id: require('mongojs').ObjectId(_id)}, callback);
+});
+
everyauth.facebook
.appId(conf.facebook.appId)
.appSecret(conf.facebook.appSecret)
@@ -59,14 +87,14 @@ http.configure(function () {
});
http.get('/', function (req, res, next) {
- if (req.session.auth && req.session.redirect) {
+ if (req.user && req.session.redirect) {
res.redirect(req.session.redirect);
delete req.session.redirect;
- } else if (req.session.auth) { // just redirected
- db.rooms.insert({host: req.session.auth}, function (error, rooms) {
+ } else if (req.user) { // just redirected
+ db.rooms.insert({host_id: req.user._id}, function (error, rooms) {
if (error) return next(error);
// spawn a game
- require('./game').spawn({io: io, room_id: rooms[0]._id.toString()});
+ require('./game').spawn({io: io, room_id: rooms[0]._id.toString(), db: db});
res.redirect('/' + rooms[0]._id.toString());
});
} else {
@@ -80,15 +108,17 @@ http.get('/:room_id', authorize, function (req, res, next) {
if (!room) {
res.render('inexistant_room', {room: null, room_id: req.param('room_id')});
} else {
- res.render('room', {room: room});
+ res.render('room', {room: room, user: req.user});
}
});
});
everyauth.helpExpress(http);
-db.rooms.remove({}, function () {
- io = require('socket.io').listen(http);
- io.set('log level', 1);
- http.listen(3000);
+db.users.remove({}, function () {
+ db.rooms.remove({}, function () {
+ io = require('socket.io').listen(http);
+ io.set('log level', 1);
+ http.listen(3000);
+ });
});
View
22 game.js
@@ -68,6 +68,7 @@ module.exports.spawn = function (options) {
, time: 0
, points: 250
, selected_tile: null
+ , players: {}
, started: false
}
, Tile, room;
@@ -226,12 +227,23 @@ module.exports.spawn = function (options) {
});
socket.on('disconnect', function () {
- room.emit('close', {id: socket.id});
+ room.emit('players.delete', {id: socket.id});
+ delete STATE.players[socket.id];
+
+ if (!Object.keys(STATE.players).length) {
+ console.log('cleanup!');
+ options.db.rooms.remove({_id: require('mongojs').ObjectId(options.room_id)});
+ }
});
- if (!STATE.started) {
- _initState();
- }
- socket.emit('init_state', STATE);
+ socket.on('connect', function (data) {
+ if (!STATE.started) {
+ _initState();
+ }
+ data.id = socket.id;
+ STATE.players[socket.id] = data;
+ socket.emit('init_state', STATE);
+ room.emit('players.add', data);
+ });
});
};
View
@@ -3,7 +3,7 @@ body {
padding: 0;
background: url(../images/background.jpg) repeat top left;
color: #b80;
- font-family: 'Passero One', cursive;
+ font-family: 'VT323', cursive;
text-shadow: 1px 1px 0px #fe4;
}
@@ -20,20 +20,38 @@ h1 {
width: 691px;
}
-#points {
+#score {
position: absolute;
- top: -5px;
+ top: 0px;
right: 0px;
- font-size: 32pt;
+ background: rgba(255, 255, 200, 0.4);
+ -webkit-border-radius: 3px;
+ -moz-border-radius: 3px;
+ border-radius: 3px;
+ height: 58px;
+ width: 125px;
+}
+
+#score img {
+ position: absolute;
+ top: 5px;
+ right: 5px;
+}
+
+#score #points {
+ font-size: 24pt;
opacity: 0.8;
color: #333;
+ position: absolute;
+ top: 0px;
+ right: 58px;
}
-#time {
+#score #time {
position: absolute;
- top: 40px;
- right: 0px;
- font-size: 24pt;
+ top: 30px;
+ right: 58px;
+ font-size: 18pt;
opacity: 0.8;
}
@@ -49,9 +67,9 @@ h1 {
border-left: 1px solid #b80;
border-right: 1px solid #fe4;
border-bottom: 1px solid #fe4;
- -moz-border-radius: 3px;
-webkit-border-radius: 3px;
- border-radius: 3px;
+ -moz-border-radius: 3px;
+ border-radius: 3px;
}
#danger #num_pairs {
@@ -79,11 +97,13 @@ h1 {
.mouse{
position: absolute;
- background-repeat: no-repeat;
height: 22px;
+ line-height: 22px;
min-width: 15px;
z-index: 100;
- background-image: url('../images/cursor.png');
+ padding: 0px 5px 0px 20px;
+ color: #333;
+ background: rgba(255, 255, 255, 0.3) url('../images/cursor.png') no-repeat;
}
#canvas {
View
@@ -33,9 +33,25 @@ $(function () {
return hours_s + minutes_s + ":" + seconds_s;
}
+ function numPairsChanged(num_pairs) {
+ $('#num_pairs')
+ .animate({left: num_pairs < 13 ? 100 - (num_pairs * 100 / 12) : 0}, 300)
+ .text(num_pairs);
+ }
+
+ function addPlayer(data) {
+ if (data.id !== socket.socket.sessionid) {
+ $('#players').append('<span id="player_' + data.id + '">' + data.name
+ + '<img src="' + data.img + '" width="24" height="24" /></span>');
+ }
+ }
+
function initState(STATE) {
var TILE = Tile(STATE.current_map);
+ numPairsChanged(STATE.num_pairs);
+ _.each(STATE.players, addPlayer);
+
function updateTileState(cb) {
return function (tile) {
STATE.tiles[tile.i] = tile;
@@ -363,17 +379,27 @@ $(function () {
// init
socket.on('init_state', initState);
- socket.on('num_pairs.changed', function (num_pairs) {
- $('#num_pairs')
- .animate({left: num_pairs < 13 ? 100 - (num_pairs * 100 / 12) : 0}, 300)
- .text(num_pairs);
+ socket.on('num_pairs.changed', numPairsChanged);
+
+ socket.on('players.add', addPlayer);
+
+ socket.on('players.delete', function (data) {
+ if (data.id !== socket.socket.sessionid) {
+ $('#player_' + data.id).remove();
+ }
});
socket.on('tick', function (data) {
$('#time').text(_formatTime(data.time));
$('#points').text(data.points);
});
+ socket.emit('connect', {
+ _id: $('#user_id').val()
+ , name: $('#user_name').val()
+ , img: $('#score img').attr('src')
+ });
+
$('#time').text('00:00');
$('#points').text('0');
});
View
@@ -16,7 +16,7 @@ $(function () {
function move(data) {
if (!$('#mouse_' + data.id).length) {
$('#canvas').append('<span class="mouse" id="mouse_' + data.id
- + '"><span style="display:none;" class="chat"/></span>');
+ + '">' + data.name + '</span>');
}
var style = $('#mouse_' + data.id)[0].style;
@@ -31,11 +31,12 @@ $(function () {
, y: e.pageY - $('#canvas').offset().top
, w: $('#canvas').width()
, h: $('#canvas').height()
+ , name: $('#user_name').val()
});
}, 40)
);
- socket.on('close', function (data) {
+ socket.on('players.delete', function (data) {
$('#mouse_' + data.id).remove();
});
View
@@ -1,7 +1,7 @@
!!! 5
html
head
- link(href='http://fonts.googleapis.com/css?family=Passero+One|Leckerli+One', rel='stylesheet', type='text/css')
+ link(href='http://fonts.googleapis.com/css?family=Leckerli+One|VT323', rel='stylesheet', type='text/css')
meta(charset="utf-8")
title Whatajong
link(rel="stylesheet", href="/css/whatajong.css", type="text/css", media="screen")
View
@@ -1,6 +1,14 @@
input#room_id(type='hidden', value= room._id)
+input#user_id(type='hidden', value= user._id)
+input#user_name(type='hidden', value= user.name)
#danger
#num_pairs
-#time
-#points
+
+#score
+ #time
+ #points
+ img(src= user.picture, width= 48, height= 48)
+
+#players
+
#canvas

0 comments on commit 4b8b19c

Please sign in to comment.