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