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

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

@@ -1,174 +1,175 @@
body { body {
font-size: 12px; font-size: 12px;
background-color: #000000; background-color: #000000;
} }
.eventHeader { .eventHeader {
font-size: 120%; font-size: 120%;
font-weight: bolder; font-weight: bolder;
background-color: #666666; background-color: #666666;
} cursor: pointer;
}
.serverTime {
border: 1px solid #ffffff; .serverTime {
} border: 1px solid #ffffff;
}
.leagueName, #stats .period, .tournamentName, .playerStatHeader {
font-size: 200%; .leagueName, #stats .period, .tournamentName, .playerStatHeader {
font-weight: bolder; font-size: 200%;
} font-weight: bolder;
}
.serieName {
font-size: 150%; .serieName {
font-weight: bolder; font-size: 150%;
} font-weight: bolder;
}
.borderOverlay {
border: 2px solid #000000; .borderOverlay {
} border: 2px solid #000000;
}
.foilOverlay {
opacity: 0.2; .foilOverlay {
} opacity: 0.2;
}
.cardHint {
display: inline; .cardHint {
color: #6f6fff; display: inline;
cursor: pointer; color: #6f6fff;
} cursor: pointer;
}
.prizeHint {
display: inline; .prizeHint {
color: #6f6fff; display: inline;
cursor: pointer; color: #6f6fff;
} cursor: pointer;
}
.clickableFormat {
cursor: pointer; .clickableFormat {
color: #6f6fff; cursor: pointer;
} color: #6f6fff;
}
.pocket {
background-color: #000000; .pocket {
border: 1px solid #ffffff; background-color: #000000;
color: #ffffff; border: 1px solid #ffffff;
font-size: 90%; color: #ffffff;
font-weight: bolder; font-size: 90%;
text-align: right; font-weight: bolder;
opacity: 1; text-align: right;
} opacity: 1;
}
.cardCount {
width: 20px; .cardCount {
height: 18px; width: 20px;
background-color: #000000; height: 18px;
color: #ffffff; background-color: #000000;
font-size: 120%; color: #ffffff;
font-weight: bolder; font-size: 120%;
display: table-cell; font-weight: bolder;
text-align: center; display: table-cell;
vertical-align: middle; text-align: center;
opacity: 0.7; vertical-align: middle;
} opacity: 0.7;
}
.tableFormatName {
text-align: center; .tableFormatName {
font-weight: bold; text-align: center;
font-size: 100%; font-weight: bold;
} font-size: 100%;
}
.tableStatus {
text-align: center; .tableStatus {
font-style: italic; text-align: center;
font-size: 100%; font-style: italic;
} font-size: 100%;
}
.tablePlayer {
text-align: center; .tablePlayer {
} text-align: center;
}
.winningPlayer {
font-weight: bold; .winningPlayer {
font-size: 110%; font-weight: bold;
} font-size: 110%;
}
.losingPlayer {
font-size: 80%; .losingPlayer {
} font-size: 80%;
}
.chatMessage {
color: #ffffff; .chatMessage {
} color: #ffffff;
}
.systemMessage {
color: #5f5f5f; .systemMessage {
} color: #5f5f5f;
}
.warningMessage {
color: #ff0000; .warningMessage {
} color: #ff0000;
}
.chatUser {
color: #ffffff; .chatUser {
} color: #ffffff;
}
.systemMessage > .timestamp {
display: inline; .systemMessage > .timestamp {
color: #5f5f5f; display: inline;
} color: #5f5f5f;
}
.timestamp {
display: inline; .timestamp {
color: #cfcfcf; display: inline;
} color: #cfcfcf;
}
#disclaimer {
color: #ffffff; #disclaimer {
font-size: 80%; color: #ffffff;
} font-size: 80%;
}
#latestNews {
color: #ffffff; #latestNews {
font-size: 90%; color: #ffffff;
} font-size: 90%;
}
#motd {
color: #ffffff; #motd {
font-size: 90%; color: #ffffff;
} font-size: 90%;
}
table.tables {
width: 100%; table.tables {
} width: 100%;
}
table.tables td, table.tables th {
padding: 2px; table.tables td, table.tables th {
border: 1px solid white; padding: 2px;
} border: 1px solid white;
}
.ui-tabs-nav li {
font-size: 70%; .ui-tabs-nav li {
} font-size: 70%;
}
.ui-button-text-only .ui-button-text {
font-size: 70%; .ui-button-text-only .ui-button-text {
padding: .2em .5em; font-size: 70%;
} padding: .2em .5em;
}
.standings td, .standings th {
padding: 2px; .standings td, .standings th {
border: 1px solid white; padding: 2px;
} border: 1px solid white;
}
.gameHistory td, .gameHistory th {
padding: 2px; .gameHistory td, .gameHistory th {
border: 1px solid white; padding: 2px;
} border: 1px solid white;
}
.userList {
border-left: 1px solid #FFFFFF; .userList {
} border-left: 1px solid #FFFFFF;
}
tr.played {
background-color: #990000; tr.played {
background-color: #990000;
} }

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();
} }
}, },