ambidextrous/gemp-lotr
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Hall UI table row update animation.

Browse Source
This commit is contained in:
marcins78
2013-01-08 17:45:54 +00:00
parent dbc44ac3be
commit 41fbb652d7
1 changed files with 131 additions and 119 deletions
Download Patch File Download Diff File Expand all files Collapse all files

250
gemp-lotr/gemp-lotr-web/src/main/webapp/js/gemp-015/hallUi.js
View File

@@ -68,17 +68,17 @@ var GempLotrHallUI = Class.extend({
this.createTableButton = $("<button>Create table</button>"); this.createTableButton = $("<button>Create table</button>");
$(this.createTableButton).button().click( $(this.createTableButton).button().click(
function () { function () {
that.supportedFormatsSelect.hide(); that.supportedFormatsSelect.hide();
that.decksSelect.hide(); that.decksSelect.hide();
that.createTableButton.hide(); that.createTableButton.hide();
var format = that.supportedFormatsSelect.val(); var format = that.supportedFormatsSelect.val();
var deck = that.decksSelect.val(); var deck = that.decksSelect.val();
if (deck != null) if (deck != null)
that.comm.createTable(format, deck, function (xml) { that.comm.createTable(format, deck, function (xml) {
that.processResponse(xml); that.processResponse(xml);
}); });
}); });
this.createTableButton.hide(); this.createTableButton.hide();
this.decksSelect = $("<select style='width: 220px'></select>"); this.decksSelect = $("<select style='width: 220px'></select>");
@@ -90,10 +90,10 @@ var GempLotrHallUI = Class.extend({
this.leaveTableButton = $("<button>Leave table</button>"); this.leaveTableButton = $("<button>Leave table</button>");
$(this.leaveTableButton).button().click( $(this.leaveTableButton).button().click(
function () { function () {
that.leaveTableButton.hide(); that.leaveTableButton.hide();
that.comm.leaveTable(); that.comm.leaveTable();
}); });
this.leaveTableButton.hide(); this.leaveTableButton.hide();
this.buttonsDiv.append(this.leaveTableButton); this.buttonsDiv.append(this.leaveTableButton);
@@ -117,13 +117,13 @@ var GempLotrHallUI = Class.extend({
}); });
toggleContent.css({width: "13px", height: "15px"}); toggleContent.css({width: "13px", height: "15px"});
toggleContent.click( toggleContent.click(
function() { function() {
if (toggleContent.button("option", "icons")["primary"] == "ui-icon-circlesmall-minus") if (toggleContent.button("option", "icons")["primary"] == "ui-icon-circlesmall-minus")
toggleContent.button("option", "icons", {primary: "ui-icon-circlesmall-plus"}); toggleContent.button("option", "icons", {primary: "ui-icon-circlesmall-plus"});
else else
toggleContent.button("option", "icons", {primary: "ui-icon-circlesmall-minus"}); toggleContent.button("option", "icons", {primary: "ui-icon-circlesmall-minus"});
content.toggle("blind", {}, 200); content.toggle("blind", {}, 200);
}); });
header.append(toggleContent); header.append(toggleContent);
header.append(" Tournament queues"); header.append(" Tournament queues");
header.append(" <span class='count'>(0)</span>"); header.append(" <span class='count'>(0)</span>");
@@ -149,13 +149,13 @@ var GempLotrHallUI = Class.extend({
}); });
toggleContent.css({width: "13px", height: "15px"}); toggleContent.css({width: "13px", height: "15px"});
toggleContent.click( toggleContent.click(
function() { function() {
if (toggleContent.button("option", "icons")["primary"] == "ui-icon-circlesmall-minus") if (toggleContent.button("option", "icons")["primary"] == "ui-icon-circlesmall-minus")
toggleContent.button("option", "icons", {primary: "ui-icon-circlesmall-plus"}); toggleContent.button("option", "icons", {primary: "ui-icon-circlesmall-plus"});
else else
toggleContent.button("option", "icons", {primary: "ui-icon-circlesmall-minus"}); toggleContent.button("option", "icons", {primary: "ui-icon-circlesmall-minus"});
content.toggle("blind", {}, 200); content.toggle("blind", {}, 200);
}); });
header.append(toggleContent); header.append(toggleContent);
header.append(" Tournaments in progress"); header.append(" Tournaments in progress");
header.append(" <span class='count'>(0)</span>"); header.append(" <span class='count'>(0)</span>");
@@ -181,13 +181,13 @@ var GempLotrHallUI = Class.extend({
}); });
toggleContent.css({width: "13px", height: "15px"}); toggleContent.css({width: "13px", height: "15px"});
toggleContent.click( toggleContent.click(
function() { function() {
if (toggleContent.button("option", "icons")["primary"] == "ui-icon-circlesmall-minus") if (toggleContent.button("option", "icons")["primary"] == "ui-icon-circlesmall-minus")
toggleContent.button("option", "icons", {primary: "ui-icon-circlesmall-plus"}); toggleContent.button("option", "icons", {primary: "ui-icon-circlesmall-plus"});
else else
toggleContent.button("option", "icons", {primary: "ui-icon-circlesmall-minus"}); toggleContent.button("option", "icons", {primary: "ui-icon-circlesmall-minus"});
content.toggle("blind", {}, 200); content.toggle("blind", {}, 200);
}); });
header.append(toggleContent); header.append(toggleContent);
header.append(" Waiting tables"); header.append(" Waiting tables");
header.append(" <span class='count'>(0)</span>"); header.append(" <span class='count'>(0)</span>");
@@ -213,13 +213,13 @@ var GempLotrHallUI = Class.extend({
}); });
toggleContent.css({width: "13px", height: "15px"}); toggleContent.css({width: "13px", height: "15px"});
toggleContent.click( toggleContent.click(
function() { function() {
if (toggleContent.button("option", "icons")["primary"] == "ui-icon-circlesmall-minus") if (toggleContent.button("option", "icons")["primary"] == "ui-icon-circlesmall-minus")
toggleContent.button("option", "icons", {primary: "ui-icon-circlesmall-plus"}); toggleContent.button("option", "icons", {primary: "ui-icon-circlesmall-plus"});
else else
toggleContent.button("option", "icons", {primary: "ui-icon-circlesmall-minus"}); toggleContent.button("option", "icons", {primary: "ui-icon-circlesmall-minus"});
content.toggle("blind", {}, 200); content.toggle("blind", {}, 200);
}); });
header.append(toggleContent); header.append(toggleContent);
header.append(" Playing tables"); header.append(" Playing tables");
header.append(" <span class='count'>(0)</span>"); header.append(" <span class='count'>(0)</span>");
@@ -245,13 +245,13 @@ var GempLotrHallUI = Class.extend({
}); });
toggleContent.css({width: "13px", height: "15px"}); toggleContent.css({width: "13px", height: "15px"});
toggleContent.click( toggleContent.click(
function() { function() {
if (toggleContent.button("option", "icons")["primary"] == "ui-icon-circlesmall-minus") if (toggleContent.button("option", "icons")["primary"] == "ui-icon-circlesmall-minus")
toggleContent.button("option", "icons", {primary: "ui-icon-circlesmall-plus"}); toggleContent.button("option", "icons", {primary: "ui-icon-circlesmall-plus"});
else else
toggleContent.button("option", "icons", {primary: "ui-icon-circlesmall-minus"}); toggleContent.button("option", "icons", {primary: "ui-icon-circlesmall-minus"});
content.toggle("blind", {}, 200); content.toggle("blind", {}, 200);
}); });
header.append(toggleContent); header.append(toggleContent);
header.append(" Finished tables"); header.append(" Finished tables");
header.append(" <span class='count'>(0)</span>"); header.append(" <span class='count'>(0)</span>");
@@ -273,18 +273,18 @@ var GempLotrHallUI = Class.extend({
var that = this; var that = this;
this.comm.getHall( this.comm.getHall(
function(xml) { function(xml) {
that.processHall(xml); that.processHall(xml);
}, this.hallErrorMap()); }, this.hallErrorMap());
}, },
updateHall:function () { updateHall:function () {
var that = this; var that = this;
this.comm.updateHall( this.comm.updateHall(
function (xml) { function (xml) {
that.processHall(xml); that.processHall(xml);
}, this.hallChannelId, this.hallErrorMap()); }, this.hallChannelId, this.hallErrorMap());
}, },
hallErrorMap:function() { hallErrorMap:function() {
@@ -309,15 +309,15 @@ var GempLotrHallUI = Class.extend({
var buttons = {}; var buttons = {};
if (reloadButton) { if (reloadButton) {
buttons["Refresh page"] = buttons["Refresh page"] =
function () { function () {
location.reload(true); location.reload(true);
}; };
} }
if (mainPageButton) { if (mainPageButton) {
buttons["Go to main page"] = buttons["Go to main page"] =
function() { function() {
location.href = "/gemp-lotr/"; location.href = "/gemp-lotr/";
}; };
} }
var dialog = $("<div></div>").dialog({ var dialog = $("<div></div>").dialog({
@@ -363,6 +363,12 @@ var GempLotrHallUI = Class.extend({
} }
}, },
animateRowUpdate: function(rowSelector) {
$(rowSelector, this.tablesDiv)
.css({borderTopColor:"#000000", borderLeftColor:"#000000", borderBottomColor:"#000000", borderRightColor:"#000000"})
.animate({borderTopColor:"#ffffff", borderLeftColor:"#ffffff", borderBottomColor:"#ffffff", borderRightColor:"#ffffff"}, "fast");
},
processHall:function (xml) { processHall:function (xml) {
var that = this; var that = this;
@@ -395,48 +401,50 @@ var GempLotrHallUI = Class.extend({
if (joined != "true" && queue.getAttribute("joinable") == "true") { if (joined != "true" && queue.getAttribute("joinable") == "true") {
var but = $("<button>Join queue</button>"); var but = $("<button>Join queue</button>");
$(but).button().click(( $(but).button().click((
function(queueId) { function(queueId) {
return function () { return function () {
var deck = that.decksSelect.val(); var deck = that.decksSelect.val();
if (deck != null) if (deck != null)
that.comm.joinQueue(queueId, deck, function (xml) { that.comm.joinQueue(queueId, deck, function (xml) {
that.processResponse(xml); that.processResponse(xml);
}); });
}; };
} }
)(id)); )(id));
actionsField.append(but); actionsField.append(but);
} else if (joined == "true") { } else if (joined == "true") {
var but = $("<button>Leave queue</button>"); var but = $("<button>Leave queue</button>");
$(but).button().click(( $(but).button().click((
function(queueId) { function(queueId) {
return function() { return function() {
that.comm.leaveQueue(queueId, function (xml) { that.comm.leaveQueue(queueId, function (xml) {
that.processResponse(xml); that.processResponse(xml);
}); });
} }
})(id)); })(id));
actionsField.append(but); actionsField.append(but);
} }
var row = $("<tr class='queue" + id + "'><td>" + queue.getAttribute("format") + "</td>" + var row = $("<tr class='queue" + id + "'><td>" + queue.getAttribute("format") + "</td>" +
"<td>" + queue.getAttribute("collection") + "</td>" + "<td>" + queue.getAttribute("collection") + "</td>" +
"<td>" + queue.getAttribute("queue") + "</td>" + "<td>" + queue.getAttribute("queue") + "</td>" +
"<td>" + queue.getAttribute("start") + "</td>" + "<td>" + queue.getAttribute("start") + "</td>" +
"<td>" + queue.getAttribute("system") + "</td>" + "<td>" + queue.getAttribute("system") + "</td>" +
"<td>" + queue.getAttribute("playerCount") + "</td>" + "<td>" + queue.getAttribute("playerCount") + "</td>" +
"<td align='right'>" + formatPrice(queue.getAttribute("cost")) + "</td>" + "<td align='right'>" + formatPrice(queue.getAttribute("cost")) + "</td>" +
"<td>" + queue.getAttribute("prizes") + "</td>" + "<td>" + queue.getAttribute("prizes") + "</td>" +
"</tr>"); "</tr>");
row.append(actionsField); row.append(actionsField);
if (action == "add") { if (action == "add") {
$("table.queues", this.tablesDiv) $("table.queues", this.tablesDiv)
.append(row); .append(row);
} else if (action == "update") { } else if (action == "update") {
$(".queue" + id, this.tablesDiv).replaceWith(row); $(".queue" + id, this.tablesDiv).replaceWith(row);
} }
this.animateRowUpdate(".queue" + id);
} else if (action == "remove") { } else if (action == "remove") {
$(".queue" + id, this.tablesDiv).remove(); $(".queue" + id, this.tablesDiv).remove();
} }
@@ -454,34 +462,36 @@ var GempLotrHallUI = Class.extend({
if (joined == "true") { if (joined == "true") {
var but = $("<button>Drop from tournament</button>"); var but = $("<button>Drop from tournament</button>");
$(but).button().click(( $(but).button().click((
function(tournamentId) { function(tournamentId) {
return function () { return function () {
that.comm.dropFromTournament(tournamentId, function (xml) { that.comm.dropFromTournament(tournamentId, function (xml) {
that.processResponse(xml); that.processResponse(xml);
}); });
}; };
} }
)(id)); )(id));
actionsField.append(but); actionsField.append(but);
} }
var row = $("<tr class='tournament" + id + "'><td>" + tournament.getAttribute("format") + "</td>" + var row = $("<tr class='tournament" + id + "'><td>" + tournament.getAttribute("format") + "</td>" +
"<td>" + tournament.getAttribute("collection") + "</td>" + "<td>" + tournament.getAttribute("collection") + "</td>" +
"<td>" + tournament.getAttribute("name") + "</td>" + "<td>" + tournament.getAttribute("name") + "</td>" +
"<td>" + tournament.getAttribute("system") + "</td>" + "<td>" + tournament.getAttribute("system") + "</td>" +
"<td>" + tournament.getAttribute("stage") + "</td>" + "<td>" + tournament.getAttribute("stage") + "</td>" +
"<td>" + tournament.getAttribute("round") + "</td>" + "<td>" + tournament.getAttribute("round") + "</td>" +
"<td>" + tournament.getAttribute("playerCount") + "</td>" + "<td>" + tournament.getAttribute("playerCount") + "</td>" +
"</tr>"); "</tr>");
row.append(actionsField); row.append(actionsField);
if (action == "add") { if (action == "add") {
$("table.tournaments", this.tablesDiv) $("table.tournaments", this.tablesDiv)
.append(row); .append(row);
} else if (action == "update") { } else if (action == "update") {
$(".tournament" + id, this.tablesDiv).replaceWith(row); $(".tournament" + id, this.tablesDiv).replaceWith(row);
} }
this.animateRowUpdate(".tournament" + id);
} else if (action == "remove") { } else if (action == "remove") {
$(".tournament" + id, this.tablesDiv).remove(); $(".tournament" + id, this.tablesDiv).remove();
} }
@@ -526,15 +536,15 @@ var GempLotrHallUI = Class.extend({
var but = $("<button>Join table</button>"); var but = $("<button>Join table</button>");
$(but).button().click(( $(but).button().click((
function(tableId) { function(tableId) {
return function() { return function() {
var deck = that.decksSelect.val(); var deck = that.decksSelect.val();
if (deck != null) if (deck != null)
that.comm.joinTable(tableId, deck, function (xml) { that.comm.joinTable(tableId, deck, function (xml) {
that.processResponse(xml); that.processResponse(xml);
}); });
}; };
})(id)); })(id));
lastField.append(but); lastField.append(but);
} }
@@ -556,13 +566,13 @@ var GempLotrHallUI = Class.extend({
if (action == "add") { if (action == "add") {
if (status == "WAITING") { if (status == "WAITING") {
$("table.waitingTables", this.tablesDiv) $("table.waitingTables", this.tablesDiv)
.append(row); .append(row);
} else if (status == "PLAYING") { } else if (status == "PLAYING") {
$("table.playingTables", this.tablesDiv) $("table.playingTables", this.tablesDiv)
.append(row); .append(row);
} else if (status == "FINISHED") { } else if (status == "FINISHED") {
$("table.finishedTables", this.tablesDiv) $("table.finishedTables", this.tablesDiv)
.append(row); .append(row);
} }
} else if (action == "update") { } else if (action == "update") {
if (status == "WAITING") { if (status == "WAITING") {
@@ -571,7 +581,7 @@ var GempLotrHallUI = Class.extend({
} else { } else {
$(".table" + id, this.tablesDiv).remove(); $(".table" + id, this.tablesDiv).remove();
$("table.waitingTables", this.tablesDiv) $("table.waitingTables", this.tablesDiv)
.append(row); .append(row);
} }
} else if (status == "PLAYING") { } else if (status == "PLAYING") {
if ($(".table" + id, $("table.playingTables")).length > 0) { if ($(".table" + id, $("table.playingTables")).length > 0) {
@@ -579,7 +589,7 @@ var GempLotrHallUI = Class.extend({
} else { } else {
$(".table" + id, this.tablesDiv).remove(); $(".table" + id, this.tablesDiv).remove();
$("table.playingTables", this.tablesDiv) $("table.playingTables", this.tablesDiv)
.append(row); .append(row);
} }
} else if (status == "FINISHED") { } else if (status == "FINISHED") {
if ($(".table" + id, $("table.finishedTables")).length > 0) { if ($(".table" + id, $("table.finishedTables")).length > 0) {
@@ -587,9 +597,11 @@ var GempLotrHallUI = Class.extend({
} else { } else {
$(".table" + id, this.tablesDiv).remove(); $(".table" + id, this.tablesDiv).remove();
$("table.finishedTables", this.tablesDiv) $("table.finishedTables", this.tablesDiv)
.append(row); .append(row);
} }
} }
this.animateRowUpdate(".table" + id);
} }
} else if (action == "remove") { } else if (action == "remove") {
$(".table" + id, this.tablesDiv).remove(); $(".table" + id, this.tablesDiv).remove();