- confirm leaving game

- initial game options. it never displays it right now since it isn't done

WebContent/cah.css

@@ -346,7 +346,7 @@ span.debug {
   padding-top: 10px;
 }
 
-.game_right_side {
+.game_right_side, .game_options {
   position: absolute;
   left: 246px;
   width: 700px;

WebContent/game.jsp

@@ -197,7 +197,9 @@ HttpSession hSession = request.getSession(true);
           </div>
           <input type="button" class="confirm_card" value="Confirm Selection" />
         </div>
-        <div class="game_right_side">
+        <div class="game_options">
+        </div>
+        <div class="game_right_side hide">
           <div class="game_right_side_box game_white_card_wrapper">
             The white cards played this round are:
             <div class="game_white_cards game_right_side_cards">
@@ -253,5 +255,44 @@ HttpSession hSession = request.getSession(true);
   </div>
 </div>
 
+<!-- Template for game options. -->
+<div class="hide">
+  <div class="game_options" id="game_options_template">
+    Only the game host can change options.
+    <br/><br/>
+    Game options:
+    <br/>
+    <label id="score_limit_template_label" for="score_limit_template">Score limit:</label>
+    <select id="score_limit_template">
+      <option value="4">4</option>
+      <option value="5">5</option>
+      <option value="6">6</option>
+      <option value="7">7</option>
+      <option value="8" selected="selected">8</option>
+      <option value="9">9</option>
+      <option value="10">10</option>
+    </select>
+    <br/>
+    <label id="player_limit_template_label" for="player_limit_template">Player limit:</label>
+    <select id="player_limit_template">
+      <option value="3">3</option>
+      <option value="4">4</option>
+      <option value="5">5</option>
+      <option value="6">6</option>
+      <option value="7">7</option>
+      <option value="8">8</option>
+      <option value="9">9</option>
+      <option value="10" selected="selected">10</option>
+    </select>
+    <br/>
+    <label id="version_template_label" for="version_template">Use cards from version:</label>
+    <select id="version_template">
+      <option value="1">first</option>
+      <option value="2">second</option>
+      <option value="both">both</option>
+    </select>
+  </div>
+</div>
+
 </body>
 </html>

WebContent/js/cah.game.js

@@ -58,6 +58,32 @@ cah.Game = function(id) {
   this.scoreboardElement_.id = "scoreboard_" + id;
   $(this.scoreboardElement_).removeClass("hide");
 
+  /**
+   * The element for the game options for this game.
+   * 
+   * @type {HTMLDivElement}
+   * @private
+   */
+  this.optionsElement_ = $("#game_options_template").clone()[0];
+  this.optionsElement_.id = "game_options_" + id;
+  $("#score_limit_template_label", this.optionsElement_).attr("for", "score_limit_" + id);
+  $("#player_limit_template_label", this.optionsElement_).attr("for", "player_limit_" + id);
+  $("#version_template_label", this.optionsElement_).attr("for", "version_" + id);
+  $("#score_limit_template", this.optionsElement_).attr("id", "score_limit_" + id);
+  $("#player_limit_template", this.optionsElement_).attr("id", "player_limit_" + id);
+  $("#version_template", this.optionsElement_).attr("id", "version_" + id);
+  $("label", this.optionsElement_).removeAttr("id");
+  $(".game_options", this.element_).replaceWith(this.optionsElement_);
+  this.hideOptions_();
+
+  /**
+   * The nickname of the host of this game.
+   * 
+   * @type {String}
+   * @private
+   */
+  this.host_ = "";
+
   /**
    * User->value mapping of scorecards in the scoreboard.
    * 
@@ -591,15 +617,24 @@ cah.Game.prototype.insertIntoDocument = function() {
  *          data Game data returned from server.
  */
 cah.Game.prototype.updateGameStatus = function(data) {
-  if (data[cah.$.AjaxResponse.GAME_INFO][cah.$.GameInfo.HOST] == cah.nickname
+  this.host_ = data[cah.$.AjaxResponse.GAME_INFO][cah.$.GameInfo.HOST];
+
+  if (this.host_ == cah.nickname
       && data[cah.$.AjaxResponse.GAME_INFO][cah.$.GameInfo.STATE] == cah.$.GameState.LOBBY) {
     $("#start_game").show();
   } else {
     $("#start_game").hide();
   }
 
+  if (data[cah.$.AjaxResponse.GAME_INFO][cah.$.GameInfo.STATE] == cah.$.GameState.LOBBY) {
+    this.showOptions_();
+  } else {
+    this.hideOptions_();
+  }
+
   if (data[cah.$.AjaxResponse.GAME_INFO][cah.$.GameInfo.STATE] == cah.$.GameState.PLAYING) {
     // TODO this is the cause of the cards blanking when someone joins or leaves
+    // store the last state somewhere too?
     $(".game_white_cards", this.element_).empty();
   }
 
@@ -818,7 +853,9 @@ cah.Game.prototype.roundCardClick_ = function(e) {
 cah.Game.prototype.leaveGameClick_ = function() {
   // TODO make sure everything cleans up right, I got an error when I tried to start a different
   // game after leaving one
-  cah.Ajax.build(cah.$.AjaxOperation.LEAVE_GAME).withGameId(this.id_).run();
+  if (confirm("Are you sure you wish to leave the game?")) {
+    cah.Ajax.build(cah.$.AjaxOperation.LEAVE_GAME).withGameId(this.id_).run();
+  }
 };
 
 /**
@@ -931,9 +968,13 @@ cah.Game.prototype.stateChange = function(data) {
       }
       this.roundCards_ = {};
       $(".game_white_cards", this.element_).empty();
+
+      this.showOptions_();
+
       break;
 
     case cah.$.GameState.PLAYING:
+      this.hideOptions_();
       this.refreshGameStatus();
       this.setBlackCard(data[cah.$.LongPollResponse.BLACK_CARD]);
       break;
@@ -949,6 +990,40 @@ cah.Game.prototype.stateChange = function(data) {
   }
 };
 
+/**
+ * Show the options panel. Enables or disables the controls based on whether we are the host.
+ * 
+ * @private
+ */
+cah.Game.prototype.showOptions_ = function() {
+  // $(".game_options", this.element_).removeClass("hide");
+  // $(".game_right_side", this.element_).addClass("hide");
+  this.updateOptionsEnabled_();
+};
+
+/**
+ * Enable or disable the option controls depending on whether we are the host.
+ * 
+ * @private
+ */
+cah.Game.prototype.updateOptionsEnabled_ = function() {
+  if (this.host_ == cah.nickname) {
+    $("select", this.optionsElement_).removeAttr("disabled");
+  } else {
+    $("select", this.optionsElement_).attr("disabled", "disabled");
+  }
+};
+
+/**
+ * Hide the options panel.
+ * 
+ * @private
+ */
+cah.Game.prototype.hideOptions_ = function() {
+  $(".game_options", this.element_).addClass("hide");
+  $(".game_right_side", this.element_).removeClass("hide");
+};
+
 // ///////////////////////////////////////////////
 
 /**