Renamed game_view_model to view

app/views/match/_move_list.html.erb

@@ -1,15 +1,15 @@
 <div id="original_board" 
 	   title="<%= match.start_pos %>" 
-	   onclick="game_view_model.set_display_board(0)">(Starting Board)</div>
+	   onclick="view.set_display_board(0)">(Starting Board)</div>
 
 <% match.moves.each_with_index do |m, i| -%>
   <%if (i%2)==0 %>
-    <div class="move_w" id="move_list_<%= i+1 %>" onclick="game_view_model.display_board(<%= i+1 %>)"
+    <div class="move_w" id="move_list_<%= i+1 %>" onclick="view.display_board(<%= i+1 %>)"
 			  title="<%= m.created_at.strftime("%a %H:%M") %>">
       <%= ( ((i+2)/2).to_s + ". " + m.notation ).ljust(10) -%>
     </div>
   <%else%>
-    <div class="move_b" id="move_list_<%= i+1 %>" onclick="game_view_model.display_board(<%= i+1 %>)"
+    <div class="move_b" id="move_list_<%= i+1 %>" onclick="view.display_board(<%= i+1 %>)"
 		  title="<%= m.created_at.strftime("%a %H:%M") %>">
       <%= "#{m.notation}\n" -%>
     </div>

app/views/match/show.html.erb

@@ -53,7 +53,7 @@
 
 
     <div id="chat_form" style="float:left;">
-			<form action="<%= match_chat_path(match) %>" method="POST" onsubmit="game_view_model.submit_chat(); return false;">
+			<form action="<%= match_chat_path(match) %>" method="POST" onsubmit="view.submit_chat(); return false;">
       <input type="text" name="chat[text]" id="chat_msg" data-bind="value: chat_msg, valueUpdate: 'keyup'"/>
 			<input type="submit" value="Send" >
 			</form>

app/views/match/update_view.js

@@ -1,23 +1,23 @@
 // Update 'current status' fields
-game_view_model.last_move_id =  <%= last_move ? last_move.id : 'null' %>;
-game_view_model.last_chat_id =  <%= last_chat ? last_chat.id : 'null' %>;
+view.last_move_id =  <%= last_move ? last_move.id : 'null' %>;
+view.last_chat_id =  <%= last_chat ? last_chat.id : 'null' %>;
 
-game_view_model.your_turn(    <%= your_turn %> );
-game_view_model.side_to_move( '<%= match.side_to_move.to_s.titleize %>' );
+view.your_turn(    <%= your_turn %> );
+view.side_to_move( '<%= match.side_to_move.to_s.titleize %>' );
 
 // update the allowed moves from the current board
-game_view_model.allowed_moves = <%= board.allowed_moves.to_json %>;
+view.allowed_moves = <%= board.allowed_moves.to_json %>;
 
 // Update any moves/boards they haven't seen;
 <% match.moves_more_recent_than( params[:last_move_id].to_i ).each do |move| -%>
-game_view_model.add_move( 
+view.add_move( 
   <%= move.to_json %>,
   <%= move.match.board.to_json %>
 );
 <% end -%>
 
 // Update any chats they haven't seen;
 <% match.chats_more_recent_than( params[:last_chat_id].to_i ).each do |chat| -%>
-game_view_model.add_chat( <%= chat.to_json %> );
+view.add_chat( <%= chat.to_json %> );
 <% end -%>
 

app/views/match/viewmodel.js

@@ -7,7 +7,7 @@ var clientConfig= {
 // Then we bind (using HTML5 data-bind attributes and knockout syntax) DOM elements
 // to the viewmodel, and updating happens automatically as the viewmodel is changed
 // whether by user-interaction, or AJAX polls.
-var game_view_model = {
+var view = {
 
   last_move_id:             <%= last_move ? last_move.id : 'null' %>,
   last_chat_id:             <%= last_chat ? last_chat.id : 'null' %>,
@@ -42,33 +42,33 @@ var game_view_model = {
 
   // Does not follow the subscriber model, since its too busy..
   add_move:                 function( mv, board ){
-    if ( game_view_model.all_moves().map( function(mv){ return mv.id } ).indexOf(mv.id) > -1 ){
+    if ( view.all_moves().map( function(mv){ return mv.id } ).indexOf(mv.id) > -1 ){
       console.log('already have move ' + mv.id + ', skipping ..')
       return;
     }
     console.log('adding move ' + mv.id)
-    game_view_model.all_moves.push( mv );
-    game_view_model.all_boards.push( board );
+    view.all_moves.push( mv );
+    view.all_boards.push( board );
 
     //if we are not caught up, we only need to update on the final move known about
-    if( mv.id == game_view_model.last_move_id){
-      my_index = game_view_model.all_boards.indexOf(board)
-      game_view_model.add_to_move_list( mv, my_index );
-      game_view_model.display_board( my_index );
+    if( mv.id == view.last_move_id){
+      my_index = view.all_boards.indexOf(board)
+      view.add_to_move_list( mv, my_index );
+      view.display_board( my_index );
     }
 
-    game_view_model.reset_poller();
+    view.reset_poller();
   },
 
   add_to_move_list:         function( mv, index ) {
     console.log('adding move ' + mv.notation + ' to move list at index ' + index);
     mv.index = index;
     if( index % 2 == 1 ){
       mv.ply_count = Math.ceil(index/2); mv.index = index
-      template = '<div class="move_w" id="move_list_${index}" onclick="game_view_model.display_board(${index})">${ply_count}. ${notation}</div>';
+      template = '<div class="move_w" id="move_list_${index}" onclick="view.display_board(${index})">${ply_count}. ${notation}</div>';
     } 
     else{
-      template = '<div class="move_b" id="move_list_${index}" onclick="game_view_model.display_board(${index})">${notation}</div>';
+      template = '<div class="move_b" id="move_list_${index}" onclick="view.display_board(${index})">${notation}</div>';
     }
     $("#move_list").append( $.tmpl( template, mv ) )
     moveDiv = document.getElementById('move_list');
@@ -80,7 +80,7 @@ var game_view_model = {
     console.log('Laying out board ' + board_idx  );
     $('td.piece_container').empty();
     $('td.piece_container').append("&nbsp;");
-    $.each( game_view_model.all_boards()[board_idx], function (pos, piece) { 
+    $.each( view.all_boards()[board_idx], function (pos, piece) { 
 
         //TODO use template
         var img = '<img id="' + piece.board_id + '" class="piece" src="/images/sets/default/' + piece.img + '.png" />';
@@ -92,13 +92,13 @@ var game_view_model = {
 
   // Lays out the board and enables/disables moves via drag/drop mediated thru CSS
   set_display_board:         function(mvidx) {
-     game_view_model.layout_board(mvidx);
+     view.layout_board(mvidx);
 
      //get rid of, then replace draggables
      $('td.piece_container img').draggable("destroy");
 
      //if this is the latest move and your turn, rebind allowed moves/draggables
-     if( mvidx == game_view_model.all_boards().length-1 && game_view_model.your_turn()){
+     if( mvidx == view.all_boards().length-1 && view.your_turn()){
         console.log('rebinding draggables')
         $('td.piece_container img').removeClass();
 
@@ -108,7 +108,7 @@ var game_view_model = {
             sq_id = $(this).attr('id')
 
             //set the piece therein to have css classes for each allowed move
-            allowed = game_view_model.allowed_moves[sq_id]
+            allowed = view.allowed_moves[sq_id]
             allowed = allowed == undefined ? '' : allowed.join(' ')
             $('img', this).addClass( "piece " + allowed );
             $('img', this).draggable( {revert: 'invalid', grid: [42, 42] } );
@@ -119,7 +119,7 @@ var game_view_model = {
      // show the move that brought this board to this state
      $('td.piece_container').removeClass('last-move-from last-move-to last-move-to-x');
      if(mvidx > 0){
-       mv = game_view_model.all_moves()[mvidx - 1];
+       mv = view.all_moves()[mvidx - 1];
        $('#' + mv.from_coord ).addClass('last-move-from')
        $('#' + mv.to_coord   ).addClass('last-move-to' + (mv.captured_piece_coord == undefined ? '' : '-x') )
      }
@@ -129,98 +129,98 @@ var game_view_model = {
      $("#move_list_" + mvidx).addClass('move_list_current');
   },
   can_play_previous:         function(){
-    return (game_view_model.display_board() > 0);
+    return (view.display_board() > 0);
   },
   can_play_next:             function(){
-    return (game_view_model.display_board() < game_view_model.all_boards().length-1);
+    return (view.display_board() < view.all_boards().length-1);
   },
   decrement_displayed_move:  function(){
-    cur_mvidx = game_view_model.display_board();
+    cur_mvidx = view.display_board();
     mvidx = cur_mvidx == 0 ? 0 : cur_mvidx - 1;
     console.log("Setting move to " + mvidx);
-    game_view_model.display_board(mvidx);
+    view.display_board(mvidx);
   },
   increment_displayed_move:  function(){
-    cur_mvidx = game_view_model.display_board();
-    mvidx = (cur_mvidx == game_view_model.all_boards().length-1) ? game_view_model.all_boards().length-1 : cur_mvidx + 1
+    cur_mvidx = view.display_board();
+    mvidx = (cur_mvidx == view.all_boards().length-1) ? view.all_boards().length-1 : cur_mvidx + 1
     console.log("Setting move to " + mvidx)
-    game_view_model.display_board(mvidx);
+    view.display_board(mvidx);
   },
   display_first_move:        function(){
-    game_view_model.display_board(0);
+    view.display_board(0);
   },
   display_last_move:         function(){
-    game_view_model.display_board(game_view_model.all_boards().length-1);
+    view.display_board(view.all_boards().length-1);
   },
   submit_chat:               function(){
     $.post( "<%= match_chat_path(match) %>",
         { 
-          'chat[text]':         game_view_model.chat_msg(),
+          'chat[text]':         view.chat_msg(),
           authenticity_token: '<%= form_authenticity_token %>' 
         },
         function(data){
-          game_view_model.chat_msg('');
-          game_view_model.reset_poller();
+          view.chat_msg('');
+          view.reset_poller();
         } 
     );   
   },
 
   add_chat:                 function( ch ){
-    if ( game_view_model.all_chats().map( function(ch){ return ch.id } ).indexOf(ch.id) > -1 ){
+    if ( view.all_chats().map( function(ch){ return ch.id } ).indexOf(ch.id) > -1 ){
       console.log('already have chat ' + ch.id + ', skipping ..')
       return;
     }
 
     console.log('adding chat ' + ch.id)
-    game_view_model.all_chats.push(ch);
+    view.all_chats.push(ch);
     var chatTemplate = '<div class="chat_line"><b title="${time}">${player}:</b> ${text} </div>';
     render  = $.tmpl( chatTemplate, ch );
 		$('#chat_window').append( render );
-    game_view_model.scroll_chat('bottom')
-    game_view_model.reset_poller();
+    view.scroll_chat('bottom')
+    view.reset_poller();
   },
   scroll_chat:              function(where){
     chatDiv = document.getElementById('chat_window');
     chatDiv.scrollTop = (where=="bottom") ? chatDiv.scrollHeight : 0;
   },
   increment_poll:           function(){
-    game_view_model.poll_count += 1;
+    view.poll_count += 1;
 
-    if ( game_view_model.poll_count <=  15 )
-      game_view_model.next_poll_in = clientConfig.initial_poll_interval;
-    else if (game_view_model.poll_count <= 30 )
-      game_view_model.next_poll_in = 5;
-    else if (game_view_model.poll_count <= 50 )
-      game_view_model.next_poll_in = 30;
-      else if (game_view_model.poll_count <= 100 )
-        game_view_model.next_poll_in = 60;
+    if ( view.poll_count <=  15 )
+      view.next_poll_in = clientConfig.initial_poll_interval;
+    else if (view.poll_count <= 30 )
+      view.next_poll_in = 5;
+    else if (view.poll_count <= 50 )
+      view.next_poll_in = 30;
+      else if (view.poll_count <= 100 )
+        view.next_poll_in = 60;
     else 
-      game_view_model.next_poll_in = 3600;
+      view.next_poll_in = 3600;
   },
 
   reset_poller:           function(){
-    game_view_model.poll_count = 0;
-    game_view_model.next_poll_in = clientConfig.initial_poll_interval;
-    window.setTimeout( game_view_model.poll,  game_view_model.next_poll_in * 1000);
+    view.poll_count = 0;
+    view.next_poll_in = clientConfig.initial_poll_interval;
+    window.setTimeout( view.poll,  view.next_poll_in * 1000);
   },
 
   // Performs a poll, evaling what comes back, and schedules the next poll.
   poll:                     function(){
-    game_view_model.increment_poll();
-    console.log('initiating poll num: ' + game_view_model.poll_count + ' - next poll in ' + game_view_model.next_poll_in + ' seconds')
+    view.increment_poll();
+    console.log('initiating poll num: ' + view.poll_count + ' - next poll in ' + view.next_poll_in + ' seconds')
 
     $.get( "<%= url_for :action => 'update_view', :format => :js %>",
         { 
-          last_move_id:       game_view_model.last_move_id, 
-          last_chat_id:       game_view_model.last_chat_id,
+          last_move_id:       view.last_move_id, 
+          last_chat_id:       view.last_chat_id,
           authenticity_token: '<%= form_authenticity_token %>' 
         },
         function(data){
           eval(data);
         }    
     ); 
 
-    window.setTimeout( game_view_model.poll,  game_view_model.next_poll_in * 1000);
+    window.setTimeout( view.poll,  view.next_poll_in * 1000);
   },
   submit_move:              function(from, to){
     $("#board_table").addClass('busy');
@@ -233,14 +233,14 @@ var game_view_model = {
         },
         function(data){
           if (data.errors){
-            game_view_model.server_messages( data.errors )
-            game_view_model.display_last_move();
+            view.server_messages( data.errors )
+            view.display_last_move();
           }else{
-            game_view_model.server_messages( '' )
+            view.server_messages( '' )
           }
 
-          game_view_model.poll();
-          game_view_model.reset_poller();
+          view.poll();
+          view.reset_poller();
           $("#board_table").removeClass('busy');
         }    
     ); 
@@ -249,9 +249,9 @@ var game_view_model = {
 
 // Add functions that are dependent upon the values of other view model fields
 // (and which will be memoized until their dependents change)
-game_view_model.has_message =     new ko.dependentObservable(
+view.has_message =     new ko.dependentObservable(
   function(){
-    return !(game_view_model.server_messages() == "")
+    return !(view.server_messages() == "")
   }
 );
 
@@ -266,7 +266,7 @@ $('td.piece_container').each(
           from = ui.draggable.parent().attr('id');
           to = $(this).attr('id');
           console.log(from  + ' dropped on ' + to );
-          game_view_model.submit_move( from, to )
+          view.submit_move( from, to )
         }
     });
   });
@@ -276,9 +276,9 @@ $('td.piece_container').each(
 $('body').keyup(function(event) {
     if ($(event.target).is(':not(:text)')) {
       if (event.keyCode == 37) // left
-        game_view_model.decrement_displayed_move();
+        view.decrement_displayed_move();
       if (event.keyCode == 39) // right
-        game_view_model.increment_displayed_move();
+        view.increment_displayed_move();
     }
 });
 $('body').keypress(function(event) {
@@ -291,23 +291,23 @@ $('body').keypress(function(event) {
 });
 
 // Start knockout's tracking of auto-updating items
-ko.applyBindings(document.body, game_view_model);
+ko.applyBindings(document.body, view);
 
 // Set up subscriptions on interesting items
-game_view_model.display_board.subscribe( game_view_model.set_display_board );
-game_view_model.all_moves.subscribe( function(){
+view.display_board.subscribe( view.set_display_board );
+view.all_moves.subscribe( function(){
   document.title = document.title.replace( clientConfig.your_turn_msg, '' );
 
-  if( game_view_model.your_turn() ){
+  if( view.your_turn() ){
     document.title = clientConfig.your_turn_msg + document.title
   }
 })
 
 // Show first move
-game_view_model.display_board( game_view_model.all_boards().length - 1 );
+view.display_board( view.all_boards().length - 1 );
 
 // Make sure latest chat is in focus
-game_view_model.scroll_chat('bottom');
+view.scroll_chat('bottom');
 
 // Kickoff polling loop
-window.setTimeout( game_view_model.poll, game_view_model.next_poll_in * 1000 )
+window.setTimeout( view.poll, view.next_poll_in * 1000 )