diff options
| -rw-r--r-- | public/css/chat.css | 10 | ||||
| -rw-r--r-- | public/index.html | 22 | ||||
| -rw-r--r-- | public/js/auth.js | 2 | ||||
| -rw-r--r-- | public/js/chat.js | 4 | ||||
| -rw-r--r-- | public/js/game.js | 43 | ||||
| -rw-r--r-- | public/js/roster.js | 11 | ||||
| -rw-r--r-- | server.js | 18 |
7 files changed, 86 insertions, 24 deletions
diff --git a/public/css/chat.css b/public/css/chat.css index dea2dc1..38b1419 100644 --- a/public/css/chat.css +++ b/public/css/chat.css @@ -1,6 +1,8 @@ -#chat_container { +#chat-container { position: absolute; +/* background: #fffdf8; +*/ } #chat { overflow-y: scroll; @@ -13,8 +15,8 @@ padding-bottom: 5px; width: 250px; } -#chat #chat_shim { - height: 310px; +#chat #chat-shim { + height: 320px; } #chat p { margin: 0; @@ -33,7 +35,7 @@ word-wrap: break-word; max-width: 200px; } -#chat_container #chat img { +#chat-container #chat img { max-width: 200px; max-height: 200px; } diff --git a/public/index.html b/public/index.html index 1a47a20..2cd95d4 100644 --- a/public/index.html +++ b/public/index.html @@ -11,13 +11,18 @@ <script type="text/javascript" src="/js/color.js"></script> <script type="text/javascript" src="/js/draw.js"></script> <script type="text/javascript" src="/js/chat.js"></script> +<script type="text/javascript" src="/js/roster.js"></script> <script type="text/javascript" src="/js/game.js"></script> </head> <body> <h1>Cocoapaint</h1> - <div id="chat_container"> - <div id="chat"><div id="chat_shim"></div></div> + <div id="roster-container"> + <ul id="roster"></ul> + </div> + + <div id="chat-container"> + <div id="chat"><div id="chat-shim"></div></div> <div id="form"> <input type="text" id="chat-message" maxlength="200"/> <!-- @@ -42,12 +47,21 @@ <div id="drawing"> <canvas id="workspace" width="400" height="200"></canvas> - <div id="palette"> - </div> + <div id="palette"></div> <button id="save-drawing">SAVE</button> <img id="image"> </div> + <div id="voting"> + </div> + + <div id="winning"> + </div> + + <div id="state"> + <div id="current-state">IDLE</div> + </div> + </body> </html> diff --git a/public/js/auth.js b/public/js/auth.js index 4e301e8..e2ad58d 100644 --- a/public/js/auth.js +++ b/public/js/auth.js @@ -3,6 +3,7 @@ var Auth = { Auth.bind(); if (Auth.loggedIn()) { $("#login").hide(); + Chat.join(); } else { $("#login").show(); @@ -32,6 +33,7 @@ var Auth = { localStorage['nick'] = Game.nick; $("#username").val(""); $("#login").hide(); + Chat.join(); }, logout: function(){ $("#login").show(); diff --git a/public/js/chat.js b/public/js/chat.js index 752ed67..e652f91 100644 --- a/public/js/chat.js +++ b/public/js/chat.js @@ -25,6 +25,10 @@ var Chat = { } }, + join: function () { + Events.send.join({ nick: Game.nick }); + }, + send: function () { var body = $("#chat-message").val(); $("#chat-message").val(""); diff --git a/public/js/game.js b/public/js/game.js index 8aed496..78a4728 100644 --- a/public/js/game.js +++ b/public/js/game.js @@ -34,25 +34,28 @@ var Events = { // Player connects to the game welcome: function(data){ for (var i in data.messages) { - Chat.add(data.messages[i]); + Chat.add( data.messages[i] ); + } + for (var i in data.players) { + Roster.add( data.players[i] ); } }, // Another player joins the room join: function(data){ - Events.receive.state(data); + Roster.add( data ); }, // Another player leaves the room part: function(data){ - Events.receive.state(data); + Roster.remove( data ); }, // Game state changes state: function(data){ if (Game.state == data.state) return; UI[ States.current ].unload(); - UI[ data.state ].load(); + UI[ data.state ].load(data); Game.state = data.state; }, @@ -65,7 +68,9 @@ var Events = { image: function(data) { console.log(data); if (data.nick == Game.nick) return; - $("#image").attr("src", data.url).show(); + // preload the image + var img = new Image(); + img.src = data.url; }, // Another player votes on an image @@ -76,6 +81,11 @@ var Events = { send: { + // Joining the game + join: function(data) { + socket.emit('event-join', data); + }, + // Sending a message message: function(msg) { socket.emit('event-message', msg); @@ -94,35 +104,48 @@ var Events = { // Anything a load method does should be undone by the unload method.. for now. var UI = {}; UI[ State.WAITING ] = { - load: function(){ + load: function(data){ + $("#current-state").html("Waiting"); + $("#drawing").show(); }, unload: function(){ + $("#drawing").hide(); } } UI[ State.DRAWING ] = { - load: function(){ + load: function(data){ + $("#current-state").html("Draw!"); + $("#drawing").show(); }, unload: function(){ + $("#drawing").hide(); } } UI[ State.VOTING ] = { - load: function(){ + load: function(data){ + $("#current-state").html("Vote!"); + $("#voting").show(); }, unload: function(){ + $("#voting").hide(); } } UI[ State.WINNING ] = { - load: function(){ + load: function(data){ + $("#current-state").html("Win!"); + $("#winning").show(); }, unload: function(){ + $("#winning").hide(); } } UI[ State.RESET ] = { - load: function(){ + load: function(data){ + $("#current-state").html("whoahao RESET!"); }, unload: function(){ } diff --git a/public/js/roster.js b/public/js/roster.js new file mode 100644 index 0000000..c4cb690 --- /dev/null +++ b/public/js/roster.js @@ -0,0 +1,11 @@ +var Roster = { + add: function(user) { + var $li = $("<li>"); + $li.attr("id", user.id); + $li.html(user.nick); + $("#roster").append( $li ); + }, + remove: function(user) { + $("#" + user.id).remove(); + } +}; @@ -88,9 +88,11 @@ function Channel() { // CHATROOM STUFF Channel.prototype.join = function(user, socket){ + this.players[ socket.id ] = user; this.playerCount++; } -Channel.prototype.part = function(){ +Channel.prototype.part = function(socket){ + delete this.players[ socket.id ]; this.playerCount = Math.max( 0, this.playerCount - 1 ); } Channel.prototype.pushMessage = function(message){ @@ -165,27 +167,31 @@ Channel.prototype.startWinning = function(){ this.setTimeout( this.startDrawing, Delay.WINNING ); } Channel.prototype.startWaiting = function(){ + this.images = {}; + this.imageCount = 0; this.state = State.WAITING; io.sockets.emit( 'event-state', this.getState() ); } - var game = new Channel (); io.sockets.on( 'connection', function(socket){ socket.emit( 'event-welcome', game.report() ); socket.on( 'event-join', function(data){ + data.id = socket.id; + socket.user = data; game.join(data, socket); game.checkState(); - socket.broadcast.emit('event-join', data); + io.sockets.emit('event-join', data); } ); socket.on( 'event-message', function(data){ game.pushMessage(data); socket.broadcast.emit('event-message', data); } ); - socket.on( 'disconnect', function(data){ - game.part(data, socket); + socket.on( 'disconnect', function(){ + var user = socket.user; + game.part(socket); game.checkState(); - socket.broadcast.emit('event-part', data); + socket.broadcast.emit('event-part', user); } ); }); |