Refactor preferences code out to its own file. Add game list filters, allowing users to ban and require card sets for a game to be in their game list.

This commit is contained in:
Andy Janata 2014-01-26 23:22:37 -08:00
parent ed3e619883
commit be7768e03b
8 changed files with 354 additions and 57 deletions

View File

@ -203,6 +203,24 @@ h2,h3,h4 {
font-size: 14px !important; font-size: 14px !important;
} }
.cardset_filter_list {
display: inline-block;
width: 33%;
}
.cardset_filter_list select {
height: 150px;
width: 100%;
}
.cardset_filter_list span {
font-weight: bold;
}
.cardset_filter_list .buttons {
text-align: center;
}
.log { .log {
width: 100%; width: 100%;
height: 198px; height: 198px;

View File

@ -55,6 +55,7 @@ HttpSession hSession = request.getSession(true);
<script type="text/javascript" src="js/cah.card.js"></script> <script type="text/javascript" src="js/cah.card.js"></script>
<script type="text/javascript" src="js/cah.cardset.js"></script> <script type="text/javascript" src="js/cah.cardset.js"></script>
<script type="text/javascript" src="js/cah.game.js"></script> <script type="text/javascript" src="js/cah.game.js"></script>
<script type="text/javascript" src="js/cah.preferences.js"></script>
<script type="text/javascript" src="js/cah.longpoll.js"></script> <script type="text/javascript" src="js/cah.longpoll.js"></script>
<script type="text/javascript" src="js/cah.longpoll.handlers.js"></script> <script type="text/javascript" src="js/cah.longpoll.handlers.js"></script>
<script type="text/javascript" src="js/cah.ajax.js"></script> <script type="text/javascript" src="js/cah.ajax.js"></script>
@ -67,18 +68,6 @@ HttpSession hSession = request.getSession(true);
</head> </head>
<body> <body>
<%--
<div id="browser" class="hide">
<div id="browser_inner">
<p>Pretend You're Xyzzy is known to have graphical glitches in
<span id="browser_name">$BROWSER_NAME</span>. The game should work,
but it looks much better in <a href="http://google.com/chrome/">Google Chrome.</a></p>
<p>We will not bug you about this again after you dismiss this dialog.</p>
<input type="button" id="browser_ok" value="Okay, I Understand" />
</div>
</div>
--%>
<div id="welcome"> <div id="welcome">
<h1 tabindex="0"> <h1 tabindex="0">
Pretend You're <dfn style="border-bottom: 1px dotted black" Pretend You're <dfn style="border-bottom: 1px dotted black"
@ -104,6 +93,10 @@ HttpSession hSession = request.getSession(true);
</ul></li> </ul></li>
<li>The game host has a "stop game" button. If this is abused, it may be changed to only work <li>The game host has a "stop game" button. If this is abused, it may be changed to only work
in the first few rounds of a game.</li> in the first few rounds of a game.</li>
<li>You can filter which games to display based on what card sets they are using. Under the
Game List Filters tab, you can assign each card set to one of three statuses: Banned, Neutral,
and Required. If a game uses <strong>any</strong> of your banned sets, it will not be shown. If
a game does not use <strong>all</strong> of your required sets, it also will not be shown.</li>
<li><strong>No further custom card sets will be accepted.</strong> Minor updates to existing <li><strong>No further custom card sets will be accepted.</strong> Minor updates to existing
ones may still be submitted, but I do not guarantee I will get to it in a timely manner. It is ones may still be submitted, but I do not guarantee I will get to it in a timely manner. It is
taking too much of my time to administer the custom cards sets; I'd rather focus the time on taking too much of my time to administer the custom cards sets; I'd rather focus the time on
@ -159,11 +152,12 @@ HttpSession hSession = request.getSession(true);
<div id="tabs"> <div id="tabs">
<ul> <ul>
<li><a href="#tab-preferences" class="tab-button">User Preferences</a></li> <li><a href="#tab-preferences" class="tab-button">User Preferences</a></li>
<li><a href="#tab-gamelist-filters" class="tab-button">Game List Filters</a></li>
<li><a href="#tab-global" class="tab-button" id="button-global">Global Chat</a></li> <li><a href="#tab-global" class="tab-button" id="button-global">Global Chat</a></li>
</ul> </ul>
<div id="tab-preferences"> <div id="tab-preferences">
<input type="button" value="Save" onclick="save_preferences();" /> <input type="button" value="Save" onclick="cah.Preferences.save();" />
<input type="button" value="Revert" onclick="load_preferences();" /> <input type="button" value="Revert" onclick="cah.Preferences.load();" />
<label for="hide_connect_quit">Hide connect and quit events: </label> <label for="hide_connect_quit">Hide connect and quit events: </label>
<input type="checkbox" id="hide_connect_quit" /> <input type="checkbox" id="hide_connect_quit" />
<br /> <br />
@ -171,6 +165,46 @@ HttpSession hSession = request.getSession(true);
<br/> <br/>
<textarea id="ignore_list" style="width: 200px; height: 150px"></textarea> <textarea id="ignore_list" style="width: 200px; height: 150px"></textarea>
</div> </div>
<div id="tab-gamelist-filters">
You will have to click Refresh Games after saving any changes here.
<div style="text-align: right; width:100%">
<input type="button" value="Save" onclick="cah.Preferences.save();" />
<input type="button" value="Revert" onclick="cah.Preferences.load();" />
</div>
<fieldset>
<legend>Card set filters</legend>
<div class="cardset_filter_list">
<span title="Any game which uses at least one of these card sets will not be shown in the game list.">
Do not show any games with these card sets:
</span>
<select id="cardsets_banned" multiple="multiple"></select>
<div class="buttons">
<input type="button" id="banned_remove" value="Remove --&gt;"
onclick="cah.Preferences.transferCardSets('banned', 'neutral')" />
</div>
</div>
<div class="cardset_filter_list">
<span>Do not require or ban these card sets:</span>
<select id="cardsets_neutral" multiple="multiple"></select>
<div class="buttons">
<input type="button" id="banned_add" value="&lt;-- Ban"
onclick="cah.Preferences.transferCardSets('neutral', 'banned')" />
<input type="button" id="required_add" value="Require --&gt;"
onclick="cah.Preferences.transferCardSets('neutral', 'required')" />
</div>
</div>
<div class="cardset_filter_list">
<span title="Any game that does not use all of these card sets will not be shown in the game list.">
Only show games with these card sets:
</span>
<select id="cardsets_required" multiple="multiple"></select>
<div class="buttons">
<input type="button" id="required_remove" value="&lt;-- Remove"
onclick="cah.Preferences.transferCardSets('required', 'neutral')" />
</div>
</div>
</fieldset>
</div>
<div id="tab-global"> <div id="tab-global">
<div class="log"></div> <div class="log"></div>
<input type="text" class="chat" maxlength="200" aria-label="Type here to chat." /> <input type="text" class="chat" maxlength="200" aria-label="Type here to chat." />

View File

@ -62,6 +62,10 @@ to, for instance, display the number of connected players.
</ul></li> </ul></li>
<li>The game host has a "stop game" button. If this is abused, it may be changed to only work <li>The game host has a "stop game" button. If this is abused, it may be changed to only work
in the first few rounds of a game.</li> in the first few rounds of a game.</li>
<li>You can filter which games to display based on what card sets they are using. Under the
Game List Filters tab, you can assign each card set to one of three statuses: Banned, Neutral,
and Required. If a game uses <strong>any</strong> of your banned sets, it will not be shown. If
a game does not use <strong>all</strong> of your required sets, it also will not be shown.</li>
</ul></li> </ul></li>
<li>22 December 2013:<ul> <li>22 December 2013:<ul>
<li>What I have received so far of the Holiday Bullshit has been added. I will continue to add <li>What I have received so far of the Holiday Bullshit has been added. I will continue to add

View File

@ -51,7 +51,7 @@ $(document).ready(function() {
// $(window).bind("beforeunload", window_beforeunload); // $(window).bind("beforeunload", window_beforeunload);
$("#logout").click(logout_click); $("#logout").click(logout_click);
load_preferences(); cah.Preferences.load();
$("#tabs").tabs(); $("#tabs").tabs();
$("#button-global").click(); $("#button-global").click();
@ -232,48 +232,109 @@ function preferences_click() {
} }
function load_preferences() { function load_preferences() {
if ($.cookie("hide_connect_quit")) { // FIXME remove these after making sure everything calls the new way.
$("#hide_connect_quit").attr('checked', 'checked'); debugger;
} else { cah.Preferences.load();
$("#hide_connect_quit").removeAttr('checked');
}
if ($.cookie("ignore_list")) {
$("#ignore_list").val($.cookie("ignore_list"));
} else {
$("#ignore_list").val("");
}
apply_preferences();
} }
function save_preferences() { function save_preferences() {
if ($("#hide_connect_quit").attr("checked")) { // FIXME remove these after making sure everything calls the new way.
$.cookie("hide_connect_quit", true, { debugger;
domain : cah.COOKIE_DOMAIN, cah.Preferences.save();
expires : 365
});
} else {
$.removeCookie("hide_connect_quit");
}
$.cookie("ignore_list", $("#ignore_list").val(), {
domain : cah.COOKIE_DOMAIN,
expires : 365
});
apply_preferences();
} }
function apply_preferences() { function apply_preferences() {
cah.hideConnectQuit = !!$("#hide_connect_quit").attr("checked"); // FIXME remove these after making sure everything calls the new way.
debugger;
cah.ignoreList = {}; cah.Preferences.apply();
$($('#ignore_list').val().split('\n')).each(function() {
cah.ignoreList[this] = true;
});
} }
/**
* Add selected items from sourceList to destList, ignoring duplicates.
*/
cah.transferItems = function(sourceListId, destListId, idPrefix) {
cah.transferItems(sourceListId, destListId, idPrefix, function(a, b) {
return Number(a.value) - Number(b.value);
});
};
cah.transferItems = function(sourceListId, destListId, idPrefix, sortFunc) {
$('#' + sourceListId + ' option').filter(':selected').each(function() {
var existing = $('#' + idPrefix + '_' + this.value);
if (existing.length == 0) {
cah.addItem(destListId, this.value, this.text, idPrefix);
}
});
$('#' + destListId + ' option').sort(sortFunc).appendTo('#' + destListId);
cah.removeItems(sourceListId);
};
/**
* Add an item to a list.
*
* @param listId
* {String} Id of the select element.
* @param value
* {String} Value attribute of the item to insert into the list.
* @param text
* {String} The display text to insert into the list.
* @param idPrefix
* {String} The prefix for the id of the item to insert into the list.
*/
cah.addItem = function(listId, value, text, idPrefix) {
$('#' + listId).append(
'<option value="' + value + '" id="' + idPrefix + '_' + value + '">' + text + '</option>');
};
/**
* Remove selected items from list.
*
* @param listId
* {String} Id of the list from which to remove selected items.
*/
cah.removeItems = function(listId) {
$('#' + listId + ' option').filter(':selected').each(function() {
this.parentElement.removeChild(this);
});
};
/**
* Set a cookie.
*
* @param {String}
* name The name of the cookie.
* @param {Any}
* value The value of the cookie.
*/
cah.setCookie = function(name, value) {
return $.cookie(name, value, {
// domain : cah.COOKIE_DOMAIN,
expires : 365
});
};
/**
* Remove a cookie.
*
* @param {String}
* name The name of the cookie.
*/
cah.removeCookie = function(name) {
$.removeCookie(name);
};
/**
* Get a cookie.
*
* @param {String}
* name The name of the cookie.
* @returns The value of the cookie, or {@code undefined} if the cookie is not set.
*/
cah.getCookie = function(name) {
return $.cookie(name);
};
/** /**
* Handle a window resize event. Resize the chat and info areas to fit vertically and horizontally. * Handle a window resize event. Resize the chat and info areas to fit vertically and horizontally.
* This was tested extensively in Chrome. It may not be pixel-perfect in other browsers. * This was tested extensively in Chrome. It may not be pixel-perfect in other browsers.

View File

@ -56,10 +56,12 @@ cah.CardSet.byWeight = {};
* blackCardCount The number of black cards in this CardSet * blackCardCount The number of black cards in this CardSet
* @param {Number} * @param {Number}
* whiteCardCount The number of white cards in this CardSet. * whiteCardCount The number of white cards in this CardSet.
* @param {Number}
* weight The sort weight of this CardSet.
* @constructor * @constructor
* @private * @private
*/ */
cah.CardSet = function(id, name, description, baseDeck, blackCardCount, whiteCardCount) { cah.CardSet = function(id, name, description, baseDeck, blackCardCount, whiteCardCount, weight) {
/** /**
* CardSet's database/wire ID. * CardSet's database/wire ID.
* *
@ -107,6 +109,14 @@ cah.CardSet = function(id, name, description, baseDeck, blackCardCount, whiteCar
* @private * @private
*/ */
this.whiteCardCount_ = whiteCardCount; this.whiteCardCount_ = whiteCardCount;
/**
* The sort weight of this CardSet.
*
* @type {Number}
* @private
*/
this.weight_ = weight;
}; };
/** /**
@ -151,6 +161,13 @@ cah.CardSet.prototype.getWhiteCardCount = function() {
return this.whiteCardCount_; return this.whiteCardCount_;
}; };
/**
* @returns {Number} The sort weight of this CardSet.
*/
cah.CardSet.prototype.getWeight = function() {
return this.weight_;
};
/** /**
* Populate the internal list of CardSets from data provided by the server. * Populate the internal list of CardSets from data provided by the server.
* *
@ -167,8 +184,11 @@ cah.CardSet.populateCardSets = function(cardSets) {
cardSetData[cah.$.CardSetData.CARD_SET_DESCRIPTION], cardSetData[cah.$.CardSetData.CARD_SET_DESCRIPTION],
cardSetData[cah.$.CardSetData.BASE_DECK], cardSetData[cah.$.CardSetData.BASE_DECK],
cardSetData[cah.$.CardSetData.BLACK_CARDS_IN_DECK], cardSetData[cah.$.CardSetData.BLACK_CARDS_IN_DECK],
cardSetData[cah.$.CardSetData.WHITE_CARDS_IN_DECK]); cardSetData[cah.$.CardSetData.WHITE_CARDS_IN_DECK], cardSetData[cah.$.CardSetData.WEIGHT]);
cah.CardSet.list[cardSet.getId()] = cardSet; cah.CardSet.list[cardSet.getId()] = cardSet;
cah.CardSet.byWeight[cardSetData[cah.$.CardSetData.WEIGHT]] = cardSet; cah.CardSet.byWeight[cardSetData[cah.$.CardSetData.WEIGHT]] = cardSet;
} }
// not sure if there's a better way to call this...
cah.Preferences.updateCardSetFilters();
}; };

View File

@ -153,9 +153,9 @@ cah.$.ErrorCode_msg['nitg'] = "You are not in that game.";
cah.$.ErrorCode_msg['nep'] = "There are not enough players to start the game."; cah.$.ErrorCode_msg['nep'] = "There are not enough players to start the game.";
cah.$.ErrorCode_msg['tf'] = "You are chatting too fast. Wait a few seconds and try again."; cah.$.ErrorCode_msg['tf'] = "You are chatting too fast. Wait a few seconds and try again.";
cah.$.ErrorCode_msg['nyt'] = "It is not your turn to play a card."; cah.$.ErrorCode_msg['nyt'] = "It is not your turn to play a card.";
cah.$.ErrorCode_msg['gf'] = "That game is full. Join another.";
cah.$.ErrorCode_msg['aS'] = "The game has already stopped."; cah.$.ErrorCode_msg['aS'] = "The game has already stopped.";
cah.$.ErrorCode_msg['mtl'] = "Messages cannot be longer than 200 characters."; cah.$.ErrorCode_msg['mtl'] = "Messages cannot be longer than 200 characters.";
cah.$.ErrorCode_msg['gf'] = "That game is full. Join another.";
cah.$.ErrorCode_msg['br'] = "Bad request."; cah.$.ErrorCode_msg['br'] = "Bad request.";
cah.$.ErrorCode_msg['ngs'] = "No game specified."; cah.$.ErrorCode_msg['ngs'] = "No game specified.";
cah.$.ErrorCode_msg['ic'] = "Invalid card specified."; cah.$.ErrorCode_msg['ic'] = "Invalid card specified.";

View File

@ -115,8 +115,32 @@ cah.GameList.prototype.processUpdate = function(gameData) {
var games = notPassworded.concat(passworded); var games = notPassworded.concat(passworded);
var bannedSets = cah.Preferences.getBannedCardSetIds();
var requiredSets = cah.Preferences.getRequiredCardSetIds();
for ( var i = 0; i < games.length; i++) { for ( var i = 0; i < games.length; i++) {
var game = games[i]; var game = games[i];
var hasBanned = false;
$(bannedSets).each(function(index, value) {
if (-1 !== $.inArray(value, game[cah.$.GameInfo.CARD_SETS])) {
hasBanned = true;
return false;
}
});
var missingRequired = false;
$(requiredSets).each(function(index, value) {
if (-1 === $.inArray(value, game[cah.$.GameInfo.CARD_SETS])) {
missingRequired = true;
return false;
}
});
if (hasBanned || missingRequired) {
continue;
}
var lobby = new cah.GameListLobby(this.element_, game); var lobby = new cah.GameListLobby(this.element_, game);
this.games_[game[cah.$.GameInfo.ID]] = lobby; this.games_[game[cah.$.GameInfo.ID]] = lobby;
} }
@ -236,10 +260,11 @@ cah.GameListLobby = function(parentElem, data) {
$(this.element_).attr( $(this.element_).attr(
"aria-label", "aria-label",
data[cah.$.GameInfo.HOST] + "'s game, with " + data[cah.$.GameInfo.PLAYERS].length + " of " data[cah.$.GameInfo.HOST] + "'s game, with " + data[cah.$.GameInfo.PLAYERS].length + " of "
+ data[cah.$.GameInfo.PLAYER_LIMIT] + " players, and " + data[cah.$.GameInfo.SPECTATORS].length + data[cah.$.GameInfo.PLAYER_LIMIT] + " players, and "
+ " of " + data[cah.$.GameInfo.SPECTATOR_LIMIT] + "spectators. " + statusMessage + ". Goal is " + data[cah.$.GameInfo.SPECTATORS].length + " of " + data[cah.$.GameInfo.SPECTATOR_LIMIT]
+ data[cah.$.GameInfo.SCORE_LIMIT] + " Awesome Points. Using " + cardSetNames.length + "spectators. " + statusMessage + ". Goal is " + data[cah.$.GameInfo.SCORE_LIMIT]
+ " card set" + (cardSetNames.length == 1 ? "" : "s") + ". " + " Awesome Points. Using " + cardSetNames.length + " card set"
+ (cardSetNames.length == 1 ? "" : "s") + ". "
+ (data[cah.$.GameInfo.HAS_PASSWORD] ? "Has" : "Does not have") + " a password."); + (data[cah.$.GameInfo.HAS_PASSWORD] ? "Has" : "Does not have") + " a password.");
}; };
@ -275,7 +300,8 @@ cah.GameListLobby.prototype.spectateClick = function() {
password = ""; password = "";
} }
} }
cah.Ajax.build(cah.$.AjaxOperation.SPECTATE_GAME).withGameId(this.id_).withPassword(password).run(); cah.Ajax.build(cah.$.AjaxOperation.SPECTATE_GAME).withGameId(this.id_).withPassword(password)
.run();
}; };
/** /**

View File

@ -0,0 +1,134 @@
/*
* Copyright (c) 2014, Andy Janata
* All rights reserved.
*
* Redistribution and use in source and binary forms, with or without modification, are permitted
* provided that the following conditions are met:
*
* * Redistributions of source code must retain the above copyright notice, this list of conditions
* and the following disclaimer.
* * Redistributions in binary form must reproduce the above copyright notice, this list of
* conditions and the following disclaimer in the documentation and/or other materials provided
* with the distribution.
*
* THIS SOFTWARE IS PROVIDED BY THE COPYRIGHT HOLDERS AND CONTRIBUTORS "AS IS" AND ANY EXPRESS OR
* IMPLIED WARRANTIES, INCLUDING, BUT NOT LIMITED TO, THE IMPLIED WARRANTIES OF MERCHANTABILITY AND
* FITNESS FOR A PARTICULAR PURPOSE ARE DISCLAIMED. IN NO EVENT SHALL THE COPYRIGHT HOLDER OR
* CONTRIBUTORS BE LIABLE FOR ANY DIRECT, INDIRECT, INCIDENTAL, SPECIAL, EXEMPLARY, OR CONSEQUENTIAL
* DAMAGES (INCLUDING, BUT NOT LIMITED TO, PROCUREMENT OF SUBSTITUTE GOODS OR SERVICES; LOSS OF USE,
* DATA, OR PROFITS; OR BUSINESS INTERRUPTION) HOWEVER CAUSED AND ON ANY THEORY OF LIABILITY,
* WHETHER IN CONTRACT, STRICT LIABILITY, OR TORT (INCLUDING NEGLIGENCE OR OTHERWISE) ARISING IN ANY
* WAY OUT OF THE USE OF THIS SOFTWARE, EVEN IF ADVISED OF THE POSSIBILITY OF SUCH DAMAGE.
*/
/**
* Preferences manager.
*
* @author Andy Janata (ajanata@socialgamer.net)
*/
cah.Preferences = {};
cah.Preferences.apply = function() {
cah.hideConnectQuit = !!$("#hide_connect_quit").attr("checked");
cah.ignoreList = {};
$($('#ignore_list').val().split('\n')).each(function() {
cah.ignoreList[this] = true;
});
// TODO card set filters
};
cah.Preferences.load = function() {
if ($.cookie("hide_connect_quit")) {
$("#hide_connect_quit").attr('checked', 'checked');
} else {
$("#hide_connect_quit").removeAttr('checked');
}
if ($.cookie("ignore_list")) {
$("#ignore_list").val($.cookie("ignore_list"));
} else {
$("#ignore_list").val("");
}
// If we haven't gotten the list of card sets from the server yet, this should fail silently.
cah.Preferences.updateCardSetFilters();
cah.Preferences.apply();
};
cah.Preferences.save = function() {
if ($("#hide_connect_quit").attr("checked")) {
cah.setCookie("hide_connect_quit", true);
} else {
cah.removeCookie("hide_connect_quit");
}
cah.setCookie("ignore_list", $("#ignore_list").val());
// card set filters
var bannedSets = [];
var requiredSets = [];
var func = function(whichList, setArray) {
$("#cardsets_" + whichList + " option").each(function() {
setArray.push(this.value);
});
};
func("banned", bannedSets);
func("required", requiredSets);
cah.setCookie("cardsets_banned", bannedSets.join(","));
cah.setCookie("cardsets_required", requiredSets.join(","));
cah.Preferences.apply();
};
cah.Preferences.getBannedCardSetIds = function() {
var banned = [];
if (cah.getCookie("cardsets_banned")) {
banned = cah.getCookie("cardsets_banned").split(",");
}
for ( var index in banned) {
banned[index] = Number(banned[index]);
}
return banned;
};
cah.Preferences.getRequiredCardSetIds = function() {
var required = [];
if (cah.getCookie("cardsets_required")) {
required = cah.getCookie("cardsets_required").split(",");
}
for ( var index in required) {
required[index] = Number(required[index]);
}
return required;
};
cah.Preferences.updateCardSetFilters = function() {
$("#cardsets_banned").find("option").remove();
$("#cardsets_neutral").find("option").remove();
$("#cardsets_required").find("option").remove();
var banned = cah.Preferences.getBannedCardSetIds();
var required = cah.Preferences.getRequiredCardSetIds();
for ( var weight in cah.CardSet.byWeight) {
var cardSet = cah.CardSet.byWeight[weight];
var whichList = "neutral";
if (-1 !== $.inArray(cardSet.getId(), banned)) {
whichList = "banned";
} else if (-1 !== $.inArray(cardSet.getId(), required)) {
whichList = "required";
}
cah.addItem("cardsets_" + whichList, cardSet.getId(), cardSet.getName(), whichList);
}
};
cah.Preferences.transferCardSets = function(sourceList, destList) {
cah.transferItems("cardsets_" + sourceList, "cardsets_" + destList, destList, function(a, b) {
return cah.CardSet.list[a.value].getWeight() - cah.CardSet.list[b.value].getWeight();
});
};