PageRenderTime 18ms CodeModel.GetById 2ms app.highlight 12ms RepoModel.GetById 2ms app.codeStats 0ms

/public/client.js

http://github.com/cmpolis/Apples-and-Oranges
JavaScript | 215 lines | 173 code | 39 blank | 3 comment | 31 complexity | 871999c0ffb30eeaee95030b1e2c2f10 MD5 | raw file
  1$(function() {
  2
  3  function event_obj(event_name, data_obj) {
  4    return { event: event_name,
  5              data: data_obj };
  6  }
  7
  8  // Socket.IO
  9  var socket = new io.Socket(null, {port: 3009});
 10  socket.connect();
 11
 12  var user_id;
 13  var judging = false;
 14
 15  // Backbone
 16  var Noun = Backbone.Model.extend();
 17  
 18  var NounCollection = Backbone.Collection.extend({
 19    model: Noun
 20  });
 21  var userNouns = new NounCollection();
 22  
 23  var NounView = Backbone.View.extend({
 24    tagName: 'li',
 25
 26    events: {
 27      'click span.play_noun': 'play'
 28    },
 29
 30    initialize: function(){
 31      _.bindAll(this, 'render', 'unrender', 'play');
 32    
 33      this.model.bind('remove', this.unrender);
 34    },
 35    render: function(){
 36      $(this.el).html(this.model.get('word')+' <span class="play_noun">Play</span>');
 37      $(this.el).children('.play_noun').hide();
 38      return this;
 39    },
 40    unrender: function(){
 41      $(this.el).remove();
 42    },
 43    play: function(){
 44      userNounView.disablePlay();
 45      socket.send(event_obj('play_card', this.model.id));
 46    }
 47  });
 48
 49  var NounListView = Backbone.View.extend({
 50    el: $('#my_nouns'),
 51    initialize: function(){ 
 52      _.bindAll(this, 'appendNoun');
 53
 54      this.collection = userNouns;    
 55      this.collection.bind('add', this.appendNoun);
 56    },
 57    appendNoun: function(noun) {
 58      var nounView = new NounView({
 59        model: noun
 60      });
 61      this.el.append(nounView.render().el);
 62    },
 63    enablePlay: function() {
 64      $('.play_noun').show();
 65    },
 66    disablePlay: function() {
 67      $('.play_noun').hide();
 68    }
 69  });
 70  var userNounView = new NounListView();
 71 
 72  var User = Backbone.Model.extend();
 73  
 74  var UserCollection = Backbone.Collection.extend({
 75    model: User
 76  });
 77  var users = new UserCollection();
 78
 79  var UserView = Backbone.View.extend({
 80    tagName: 'li',
 81    initialize: function(){
 82      _.bindAll(this, 'render', 'unrender');
 83
 84      this.model.bind('remove', this.unrender);
 85    },
 86    render: function(){
 87      $(this.el).html(this.model.get('name'));
 88      return this;
 89    },
 90    unrender: function(){
 91      $(this.el).remove();
 92    }
 93  });
 94
 95  var UserListView = Backbone.View.extend({
 96    el: $('#user_list'),
 97    initialize: function(){
 98      _.bindAll(this, 'appendUser');
 99  
100      this.collection = users;
101      this.collection.bind('add', this.appendUser);
102    },
103    appendUser: function(user) {
104      var userView = new UserView({
105        model: user
106      });
107      this.el.append(userView.render().el);
108    },
109  });
110  var usersListView = new UserListView();
111  
112  var PlayedNoun = Backbone.Model.extend();
113  
114  var PlayedNounCollection = Backbone.Collection.extend({
115    model: PlayedNoun
116  });
117  var nounPile = new PlayedNounCollection();
118  
119  var PlayedNounView = Backbone.View.extend({
120    tagName: 'li',
121    
122    events: {
123      'click span.pick_adj': 'pick'
124    },
125
126    initialize: function(){
127      _.bindAll(this, 'render', 'unrender', 'reveal', 'pick');
128
129      this.model.view = this;
130      this.model.bind('remove', this.unrender);
131    },
132    render: function(){
133      $(this.el).html('Facedown card');
134      return this;
135    },
136    unrender: function(){
137      $(this.el).remove();
138    },
139    reveal: function(){
140      $(this.el).html(this.model.get('word')+' <span class="pick_adj">Pick</span>');
141      if(!judging) $(this.el).children('.pick_adj').hide();
142    },
143    pick: function(){
144      socket.send(event_obj('pick_card', this.model.id));
145      $(this.el).children('.pick_adj').hide();
146    }
147  });
148
149  var NounPileView = Backbone.View.extend({
150    el: $('#played_nouns'),
151    initialize: function(){ 
152      _.bindAll(this, 'appendNoun');
153
154      this.collection = nounPile;    
155      this.collection.bind('add', this.appendNoun);
156    },
157    appendNoun: function(noun) {
158      var nounView = new PlayedNounView({
159        model: noun
160      });
161      this.el.append(nounView.render().el);
162    }
163  });
164  var nounPileView = new NounPileView();
165 
166  // Handle update from server
167  socket.on('message', function(msg){
168    if(msg.event == 'new_card') {
169      var noun = new Noun({word: msg.data.word, id: msg.data.id});
170      userNouns.add(noun);
171
172    } else if(msg.event == 'add_user') {
173      var user = new User({name: msg.data.name, id: msg.data.id});
174      users.add(user);
175
176    } else if(msg.event == 'remove_user') {
177      users.remove(msg.data);
178
179    } else if(msg.event == 'remove_card') {
180      userNouns.remove(msg.data);
181
182    } else if(msg.event == 'mode_playing') {
183      nounPile.remove(nounPile.models.slice(0));
184      judging = (user_id == msg.data.judge_id);
185      if(judging) {
186        $('#judge').html('You');
187        alert('You are judging');
188      
189      } else {
190        $('#judge').html(msg.data.judge_name);
191        userNounView.enablePlay();
192      
193      }
194      $('#adj').html(msg.data.word);
195
196    } else if(msg.event == 'mode_judging') {
197      userNounView.disablePlay();
198      nounPile.each(function(noun){
199        noun.view.reveal();
200      });
201     
202    } else if(msg.event == 'add_to_pile') {
203      nounPile.add(new PlayedNoun(msg.data));
204    
205    } else if(msg.event == 'winning_word') {
206      alert('won: ' + msg.data);
207 
208    } else if(msg.event == 'init') {
209      user_id = msg.data.id;
210
211    } else { alert(msg) }
212  });
213
214  
215});