define(['jquery', 'backbone', 'collections/UserCollection', 'models/UserModel'], function($, Backbone, UserCollection, UserModel){ var View = Backbone.View.extend({ el: '#dashboard', initialize: function(options){ var me = this; me.options = options; me.userlist = me.$el.find('.list-group'); me.chatarea = me.$el.find('#chat-area'); me.historyarea = me.$el.find('#history-area'); me.countdownDom = $('#countdown-placeholder'); me.timeout = {}; me.bindEvents(); me.channel = new UserCollection(); options.eventPubSub.bind('initTableView', function(params){ if(!params || !params.tid) Backbone.history.navigate('#/tables'); $('.app-view').hide(); me.$el.show('fast'); me.$el.find('textarea').val(''); me.gameSession = undefined; me.resetCountDown(); me.historyarea.html(''); me.actionIndex = 0; me.joinTable(params.tid, function(){ me.renderGame(); }); }); }, events: { 'click #login-btn': 'login', 'click .list-group-item': 'showMemberProfile', 'keypress #chat-container textarea': 'submitMessage', 'click #join-game-btn': 'joinGame', 'click #start-game-btn': 'startGame', 'click .game-action': 'doAction', 'click #create-new-game-btn': 'resetGame', 'click #leave-table-btn': 'leaveTable', 'click #remove-bots-btn': 'removeBots' }, showMemberProfile: function(e){ e.preventDefault(); var dom = $(e.currentTarget); if(dom.attr('data-original-title')){ return; } pomelo.request('game.userHandler.getUsers', { name : 'id', val : dom.attr('did') }, function(res){ if(res.code != 200){ console.log('error', res.error); }else{ console.log('userHandler.getUsers', res); dom.popover({ html : true, trigger : 'click', content : function(){ return _.template($('#UserStatsTmpl').html(), { user : res.matches[0] || {} }); } }); dom.popover('toggle'); } }); }, goBack: function(e){ e.preventDefault(); window.history.back(); }, buildUserList: function(){ this.userlist.html(_.template($('#UserListItem').html(), { items : this.channel.models, userId : this.options.game.session.user.id })); }, bindEvents: function(){ var me = this; pomelo.on('onUpdateUsers', function(data){ console.log('onUpdateUsers', data.members); me.channel = new UserCollection(data.members); me.buildUserList(); }); pomelo.on('onChat', function(data){ console.log('onChat', data); me.addMessage(data.username, data.msg); }); pomelo.on('onAdd', function(data){ console.log('onAdd', data); me.channel.add(data.user); me.buildUserList(); me.updateHistory(''+data.user.username+' joined table'); }); pomelo.on('onLeave', function(data){ console.log('onLeave', data); me.channel.remove(data.user.id); me.removePlayerFromGame(data.user.id); me.buildUserList(); me.renderGame(); me.updateHistory(''+data.user.username+' left table'); }); pomelo.on('disconnect', function(reason){ console.log('disconnect', reason); }); pomelo.on('onTableJoin', function(data){ console.log('onTableJoin', data); me.gameSession.playersToAdd.push(data.msg); me.renderGame(); me.updateHistory(''+data.msg.playerName+' sat down'); }); pomelo.on('onTableEvent', function(data){ console.log('onTableEvent', data); me.gameSession = data.msg; me.handleTimeout(); me.renderGame(); if(me.gameSession.actions.length == 0) me.actionIndex = 0; while(me.actionIndex < me.gameSession.actions.length){ var action = me.gameSession.actions[me.actionIndex]; me.updateHistory(''+action.playerName+' performed '+action.action +''+(action.amount ? (' for '+action.amount+' chips') : '')); ++me.actionIndex; } if(me.gameSession.gameWinners.length){ for(var i=0;i'+winner.playerName+' wins '+winner.amount+' chips'); } } }); }, handleTimeout: function(){ var me = this; if(me.gameSession.state == 'JOIN') me.resetCountDown(); if(me.gameSession.state == 'IN_PROGRESS' && (me.timeout.gid !== me.gameSession.id || me.timeout.tid !== me.gameSession.tid || me.timeout.player !== me.gameSession.currentPlayer)){ me.resetCountDown(); me.timeout = { player : me.gameSession.currentPlayer, gid : me.gameSession.id, tid : me.gameSession.tid, count : me.gameSession.gameMode == 'normal' ? 30 : 15, ref : me.initCountdown() }; } }, initCountdown: function(){ var me = this; me.resetCountDown(); return setInterval(function(){ if(typeof me.gameSession.currentPlayer == 'number'){ me.countdownDom.html(--me.timeout.count+' seconds left for '+me.gameSession.players[me.gameSession.currentPlayer].playerName+''); } if(me.timeout.count <= 0 || typeof me.gameSession.currentPlayer != 'number') me.resetCountDown(); }, 1000); }, resetCountDown: function(){ this.countdownDom.html(''); clearInterval(this.timeout.ref); }, removePlayerFromGame: function(uid){ var i; if(this.gameSession){ for(i in this.gameSession.players) if(this.gameSession.players[i].id === uid) this.gameSession.playersToRemove.push(i); for(i in this.gameSession.playersToAdd) if(this.gameSession.playersToAdd[i].id === uid) this.gameSession.playersToAdd.splice(i, 1); } }, submitMessage: function(e){ var me = this; if(e.keyCode != 13) return; var msg = $(e.currentTarget); if($.trim(msg.val()).length > 0){ this.options.game.sendMessage(msg.val(), 'table', function(e){ if(e){ me.addMessage('System', (e == 'user-not-online' ? 'user is not online.' : e), null, 'error'); } msg.scrollTop(msg[0].scrollHeight); msg.val(''); }); } }, addMessage: function(username, text, time){ if(time == null){ time = new Date(); }else if((time instanceof Date) === false){ time = new Date(time); } this.chatarea.append(_.template($('#ChatMessageItem').html(), { date : utils.timeString(time), user : username, msg : utils.toStaticHTML(text) })); this.chatarea.scrollTop(this.chatarea[0].scrollHeight); }, renderGame: function(){ $('#poker-container .panel-body').html(_.template($('#CurrentGameView').html(), { gameSession : this.gameSession, user : this.options.game.session.user, convertCard : this.convertCard, timeout : this.timeout })); }, joinTable: function(tid){ var me = this; pomelo.request('game.tableHandler.joinTable', { tid : tid }, function(res){ if(res.code != 200){ console.log('error', res.error); }else{ console.log('joinTable', res); me.options.game.session.tid = res.tid; } }); }, leaveTable: function(e){ e.preventDefault(); var me = this; pomelo.request('game.tableHandler.leaveTable', '', function(res){ if(res.code != 200){ console.log('error', res.error); }else{ console.log('leaveTable', res); delete me.options.game.session.tid; me.channel.reset(); Backbone.history.navigate('#/tables'); } }); }, resetGame: function(){ delete this.gameSession; this.renderGame(); }, joinGame: function(e){ e.preventDefault(); pomelo.request('game.tableHandler.joinGame', { buyIn : this.$el.find('input[name="user-buyin-input"]').val() }, function(res){ if(res.code != 200){ console.log('error', res.error); }else{ console.log('joinGame', res); } }); }, startGame: function(e){ e.preventDefault(); pomelo.request('game.tableHandler.startGame', '', function(res){ if(res.code != 200){ console.log('error', res.error); }else{ console.log('startGame', res); } }); }, doAction: function(e){ var me = this; var params = { action : $(e.currentTarget).attr('did') }; if(params.action == 'bet') params.amt = me.$el.find('input[name="betAmount"]').val(); pomelo.request('game.tableHandler.execute', params, function(res){ if(res.code != 200){ console.log('error', res.error); }else{ console.log('execute', res); if(params.action == 'bet') me.$el.find('input[name="betAmount"]').val(''); } }); }, convertCard: function(card){ var str = ''; switch(card[0]){ case 'J': str += 'jack'; break; case 'Q': str += 'queen'; break; case 'K': str += 'king'; break; case 'A': str += 'ace'; break; case 'T': str += '10'; break; default : str += card[0]; break; } str += '_of_'; switch(card[1]){ case 'D': str += 'diamonds'; break; case 'S': str += 'spades'; break; case 'C': str += 'clubs'; break; case 'H': str += 'hearts'; break; } return str += '.png'; }, updateHistory: function(msg){ this.historyarea.append('
'+msg+'
'); this.historyarea.scrollTop(this.historyarea[0].scrollHeight); }, removeBots: function(){ pomelo.request('game.tableHandler.removeBots', '', function(res){ if(res.code != 200){ console.log('error', res.error); }else{ console.log('removed'); } }); } }); return View; });