- confirm leaving game

- initial game options. it never displays it right now since it isn't done
This commit is contained in:
Andy Janata 2012-03-15 13:50:42 -07:00
parent 5fa3bf5ece
commit a679a7a36c
3 changed files with 120 additions and 4 deletions

View File

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

View File

@ -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>

View File

@ -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
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");
};
// ///////////////////////////////////////////////
/**