diff --git a/gemp-lotr/gemp-lotr-web/src/main/webapp/js/gemp-015/hallUi.js b/gemp-lotr/gemp-lotr-web/src/main/webapp/js/gemp-015/hallUi.js index 3f2d86a0f..d169aae1c 100644 --- a/gemp-lotr/gemp-lotr-web/src/main/webapp/js/gemp-015/hallUi.js +++ b/gemp-lotr/gemp-lotr-web/src/main/webapp/js/gemp-015/hallUi.js @@ -68,17 +68,17 @@ var GempLotrHallUI = Class.extend({ this.createTableButton = $(""); $(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 = $(""); @@ -90,10 +90,10 @@ var GempLotrHallUI = Class.extend({ this.leaveTableButton = $(""); $(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(" (0)"); @@ -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(" (0)"); @@ -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(" (0)"); @@ -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(" (0)"); @@ -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(" (0)"); @@ -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 = $("
").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 = $(""); $(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 = $(""); $(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 = $("" + queue.getAttribute("format") + "" + - "" + queue.getAttribute("collection") + "" + - "" + queue.getAttribute("queue") + "" + - "" + queue.getAttribute("start") + "" + - "" + queue.getAttribute("system") + "" + - "" + queue.getAttribute("playerCount") + "" + - "" + formatPrice(queue.getAttribute("cost")) + "" + - "" + queue.getAttribute("prizes") + "" + - ""); + "" + queue.getAttribute("collection") + "" + + "" + queue.getAttribute("queue") + "" + + "" + queue.getAttribute("start") + "" + + "" + queue.getAttribute("system") + "" + + "" + queue.getAttribute("playerCount") + "" + + "" + formatPrice(queue.getAttribute("cost")) + "" + + "" + queue.getAttribute("prizes") + "" + + ""); 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 = $(""); $(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 = $("" + tournament.getAttribute("format") + "" + - "" + tournament.getAttribute("collection") + "" + - "" + tournament.getAttribute("name") + "" + - "" + tournament.getAttribute("system") + "" + - "" + tournament.getAttribute("stage") + "" + - "" + tournament.getAttribute("round") + "" + - "" + tournament.getAttribute("playerCount") + "" + - ""); + "" + tournament.getAttribute("collection") + "" + + "" + tournament.getAttribute("name") + "" + + "" + tournament.getAttribute("system") + "" + + "" + tournament.getAttribute("stage") + "" + + "" + tournament.getAttribute("round") + "" + + "" + tournament.getAttribute("playerCount") + "" + + ""); 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 = $(""); $(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();