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

Made the table/tournament dropdowns easier to use

Browse Source
This commit is contained in:
marcin.sciesinski
2019-09-26 12:31:18 -07:00
parent 8fd3f826ca
commit 0aaff083c6
2 changed files with 204 additions and 263 deletions
Download Patch File Download Diff File Expand all files Collapse all files

1
gemp-lotr/gemp-lotr-async/src/main/web/css/gemp-001/hall.css
View File

@@ -7,6 +7,7 @@ body {
font-size: 120%; font-size: 120%;
font-weight: bolder; font-weight: bolder;
background-color: #666666; background-color: #666666;
cursor: pointer;
} }
.serverTime { .serverTime {

120
gemp-lotr/gemp-lotr-async/src/main/web/js/gemp-022/hallUi.js
View File

@@ -120,28 +120,15 @@ var GempLotrHallUI = Class.extend({
var content = $("<div></div>"); var content = $("<div></div>");
var toggleContent = $("<div>Toggle tournament queues</div>").button({
icons: {
primary: "ui-icon-circlesmall-minus"
},
text: false
});
var that = this; var that = this;
var toggle = function() { var toggle = 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); content.toggle("blind", {}, 200);
that.updateHallSettings(); that.updateHallSettings();
}; };
toggleContent.css({width: "13px", height: "15px"});
toggleContent.click(toggle);
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>");
header.click(toggle);
var table = $("<table class='tables queues'></table>"); var table = $("<table class='tables queues'></table>");
table.append("<tr><th width='10%'>Format</th><th width='8%'>Collection</th><th width='20%'>Queue name</th><th width='16%'>Starts</th><th width='10%'>System</th><th width='6%'>Players</th><th width='8%'>Cost</th><th width='12%'>Prizes</th><th width='10%'>Actions</th></tr>"); table.append("<tr><th width='10%'>Format</th><th width='8%'>Collection</th><th width='20%'>Queue name</th><th width='16%'>Starts</th><th width='10%'>System</th><th width='6%'>Players</th><th width='8%'>Cost</th><th width='12%'>Prizes</th><th width='10%'>Actions</th></tr>");
@@ -150,9 +137,10 @@ var GempLotrHallUI = Class.extend({
this.tablesDiv.append(header); this.tablesDiv.append(header);
this.tablesDiv.append(content); this.tablesDiv.append(content);
if (!displayed) { if (displayed) {
toggleContent.button("option", "icons", {primary: "ui-icon-circlesmall-plus"}); content.show();
content.css({"display":"none"}); } else {
content.hide();
} }
}, },
@@ -161,27 +149,14 @@ var GempLotrHallUI = Class.extend({
var content = $("<div></div>"); var content = $("<div></div>");
var toggleContent = $("<div>Toggle tournaments in progress</div>").button({
icons: {
primary: "ui-icon-circlesmall-minus"
},
text: false
});
var that = this; var that = this;
var toggle = function() { var toggle = 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); content.toggle("blind", {}, 200);
that.updateHallSettings(); that.updateHallSettings();
}; };
toggleContent.css({width: "13px", height: "15px"}); header.append("Tournaments in progress");
toggleContent.click(toggle);
header.append(toggleContent);
header.append(" Tournaments in progress");
header.append(" <span class='count'>(0)</span>"); header.append(" <span class='count'>(0)</span>");
header.click(toggle);
var table = $("<table class='tables tournaments'></table>"); var table = $("<table class='tables tournaments'></table>");
table.append("<tr><th width='10%'>Format</th><th width='10%'>Collection</th><th width='25%'>Tournament name</th><th width='15%'>System</th><th width='10%'>Stage</th><th width='10%'>Round</th><th width='10%'>Players</th><th width='10%'>Actions</th></tr>"); table.append("<tr><th width='10%'>Format</th><th width='10%'>Collection</th><th width='25%'>Tournament name</th><th width='15%'>System</th><th width='10%'>Stage</th><th width='10%'>Round</th><th width='10%'>Players</th><th width='10%'>Actions</th></tr>");
@@ -190,9 +165,10 @@ var GempLotrHallUI = Class.extend({
this.tablesDiv.append(header); this.tablesDiv.append(header);
this.tablesDiv.append(content); this.tablesDiv.append(content);
if (!displayed) { if (displayed) {
toggleContent.button("option", "icons", {primary: "ui-icon-circlesmall-plus"}); content.show();
content.css({"display":"none"}); } else {
content.hide();
} }
}, },
@@ -201,27 +177,14 @@ var GempLotrHallUI = Class.extend({
var content = $("<div></div>"); var content = $("<div></div>");
var toggleContent = $("<div>Toggle waiting tables</div>").button({
icons: {
primary: "ui-icon-circlesmall-minus"
},
text: false
});
var that = this; var that = this;
var toggle = function() { var toggle = 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); content.toggle("blind", {}, 200);
that.updateHallSettings(); that.updateHallSettings();
}; };
toggleContent.css({width: "13px", height: "15px"}); header.append("Waiting tables");
toggleContent.click(toggle);
header.append(toggleContent);
header.append(" Waiting tables");
header.append(" <span class='count'>(0)</span>"); header.append(" <span class='count'>(0)</span>");
header.click(toggle);
var table = $("<table class='tables waitingTables'></table>"); var table = $("<table class='tables waitingTables'></table>");
table.append("<tr><th width='20%'>Format</th><th width='40%'>Tournament</th><th width='10%'>Status</th><th width='20%'>Players</th><th width='10%'>Actions</th></tr>"); table.append("<tr><th width='20%'>Format</th><th width='40%'>Tournament</th><th width='10%'>Status</th><th width='20%'>Players</th><th width='10%'>Actions</th></tr>");
@@ -230,9 +193,10 @@ var GempLotrHallUI = Class.extend({
this.tablesDiv.append(header); this.tablesDiv.append(header);
this.tablesDiv.append(content); this.tablesDiv.append(content);
if (!displayed) { if (displayed) {
toggleContent.button("option", "icons", {primary: "ui-icon-circlesmall-plus"}); content.show();
content.css({"display":"none"}); } else {
content.hide();
} }
}, },
@@ -241,27 +205,14 @@ var GempLotrHallUI = Class.extend({
var content = $("<div></div>"); var content = $("<div></div>");
var toggleContent = $("<div>Toggle playing tables</div>").button({
icons: {
primary: "ui-icon-circlesmall-minus"
},
text: false
});
var that = this; var that = this;
var toggle = function() { var toggle = 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); content.toggle("blind", {}, 200);
that.updateHallSettings(); that.updateHallSettings();
}; };
toggleContent.css({width: "13px", height: "15px"}); header.append("Playing tables");
toggleContent.click(toggle);
header.append(toggleContent);
header.append(" Playing tables");
header.append(" <span class='count'>(0)</span>"); header.append(" <span class='count'>(0)</span>");
header.click(toggle);
var table = $("<table class='tables playingTables'></table>"); var table = $("<table class='tables playingTables'></table>");
table.append("<tr><th width='20%'>Format</th><th width='40%'>Tournament</th><th width='10%'>Status</th><th width='20%'>Players</th><th width='10%'>Actions</th></tr>"); table.append("<tr><th width='20%'>Format</th><th width='40%'>Tournament</th><th width='10%'>Status</th><th width='20%'>Players</th><th width='10%'>Actions</th></tr>");
@@ -270,9 +221,10 @@ var GempLotrHallUI = Class.extend({
this.tablesDiv.append(header); this.tablesDiv.append(header);
this.tablesDiv.append(content); this.tablesDiv.append(content);
if (!displayed) { if (displayed) {
toggleContent.button("option", "icons", {primary: "ui-icon-circlesmall-plus"}); content.show();
content.css({"display":"none"}); } else {
content.hide();
} }
}, },
@@ -281,27 +233,14 @@ var GempLotrHallUI = Class.extend({
var content = $("<div></div>"); var content = $("<div></div>");
var toggleContent = $("<div>Toggle finished tables</div>").button({
icons: {
primary: "ui-icon-circlesmall-minus"
},
text: false
});
var that = this; var that = this;
var toggle = function() { var toggle = 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); content.toggle("blind", {}, 200);
that.updateHallSettings(); that.updateHallSettings();
}; };
toggleContent.css({width: "13px", height: "15px"}); header.append("Finished tables");
toggleContent.click(toggle);
header.append(toggleContent);
header.append(" Finished tables");
header.append(" <span class='count'>(0)</span>"); header.append(" <span class='count'>(0)</span>");
header.click(toggle);
var table = $("<table class='tables finishedTables'></table>"); var table = $("<table class='tables finishedTables'></table>");
table.append("<tr><th width='20%'>Format</th><th width='40%'>Tournament</th><th width='10%'>Status</th><th width='20%'>Players</th><th width='10%'>Winner</th></tr>"); table.append("<tr><th width='20%'>Format</th><th width='40%'>Tournament</th><th width='10%'>Status</th><th width='20%'>Players</th><th width='10%'>Winner</th></tr>");
@@ -310,9 +249,10 @@ var GempLotrHallUI = Class.extend({
this.tablesDiv.append(header); this.tablesDiv.append(header);
this.tablesDiv.append(content); this.tablesDiv.append(content);
if (!displayed) { if (displayed) {
toggleContent.button("option", "icons", {primary: "ui-icon-circlesmall-plus"}); content.show();
content.css({"display":"none"}); } else {
content.hide();
} }
}, },