various minor tweaks

This commit is contained in:
Christian 'ketura' McCarty
2022-08-25 00:54:48 -05:00
parent 22882ebc69
commit e78ef6f363
4 changed files with 217 additions and 127 deletions

View File

@@ -1,7 +1,7 @@
html, body {
font-size: 12px;
background-color: #000000;
height: 98%;
height: calc(100% - 15px);
}
.flex-horiz {
@@ -20,6 +20,10 @@ a:visited {
color: #A63F03;
}
.custom-icon {
display:inline-block;
}
/* For Firefox*/
div {
scrollbar-color: #66666666 #222222AA;
@@ -115,8 +119,12 @@ textarea, input {
min-height: 100%;
max-height: 100%;
width: 100%;
max-width: 1400px;
display: flex;
flex-direction: column;
margin: auto;
/* overflow-x: hidden;*/
border: none;
}
#tabs{
@@ -125,14 +133,41 @@ textarea, input {
#gameHall {
/*background-image: radial-gradient(circle at bottom, #BF6B04, #590902, #0D0D0D); */
background: linear-gradient(to top, #300902, #000000);
background-size: cover;
background-repeat:no-repeat;
background-position: center center;
background: linear-gradient(to top, #300902, #111111 80%);
/*background: url(../../images/cultures/sauron.svg);*/
/*filter: brightness(50%) contrast(150%);*/
/*background: radial-gradient(circle at center, red 0, blue, green 100%);*/
/*overflow-x: hidden;*/
}
#hall-content {
position: relative;
z-index: 2;
}
#serverInfo {
align-items:stretch;
}
/*#culture-icon {
position: relative;
display: block;
width: 80%;
height: 80%;
top: 60%;
left: 50%;
transform: translate(-50%, -50%);
pointer-events: none;
z-index: 1;
filter: invert(10%) sepia(12%) saturate(5075%) hue-rotate(332deg) brightness(120%) contrast(108%)
drop-shadow(0 -10px 0 #FFFFFF88) drop-shadow(0 10px 0 #00000088);
opacity: 0.3;
}*/
.hall-tab {
display: flex;
flex-direction: column;
@@ -170,38 +205,61 @@ textarea, input {
}
.serverTime {
border: 1px solid #ffffff;
/*border: 1px solid #aaaaaa;*/
text-align: right;
padding: 5px;
color: #FFFF00;
}
#tablesDiv {
overflow: auto;
overflow-y: auto;
overflow-x: hidden;
border-style: none;
}
table.tables {
width: 100%;
width: calc(100% - 20px);
border-collapse: collapse;
margin-left: 10px;
margin-right: 10px;
background-color: #121212;
}
table.tables td, table.tables th {
table.tables td {
padding: 2px;
border: 1px solid white;
border: 2px solid #444444;
}
table.tables th {
padding: 4px;
background-color: #333333;
margin: 2px;
}
td button {
width: calc(100% - 6px);
margin: 3px;
}
.ui-tabs-nav li {
}
tr.played {
table.tables tr.played {
background-color: #590902;
}
tr.privateForPlayer {
table.tables tr.privateForPlayer {
background-color: #A63F03;
}
.eventHeader {
font-size: 120%;
font-weight: bolder;
background-color: #666666;
background-color: #555555;
cursor: pointer;
padding: 4px;
margin: 2px;
border-radius: 3px;
}
.tableFormatName {
@@ -416,6 +474,11 @@ tr.privateForPlayer {
padding: 5px;
}
#toggleChatButt {
padding: 4px;
margin: 3px;
}
.userList {
}

View File

@@ -146,146 +146,150 @@
<div id="tabs">
<ul>
<li><a href="#gameHall">
<span class="custom-icon icon-hall" style="display:inline-block"></span>
<span class="custom-icon icon-hall"></span>
<span>Game Hall</span>
</a>
</li>
<li><a href="includes/help.html">
<span class="custom-icon icon-help" style="display:inline-block"></span>
<span class="custom-icon icon-help"></span>
<span>Help</span>
</a>
</li>
<li><a href="includes/events.html">
<span class="custom-icon icon-events" style="display:inline-block"></span>
<span class="custom-icon icon-events"></span>
<span>Events</span>
</a>
</li>
<li><a href="includes/stats.html">
<span class="custom-icon icon-stats" style="display:inline-block"></span>
<span class="custom-icon icon-stats"></span>
<span>Server Info</span>
</a>
</li>
<li><a href="includes/user.html">
<span class="custom-icon icon-users" style="display:inline-block"></span>
<span class="custom-icon icon-users"></span>
<span>Users</span>
</a>
</li>
<li><a href="includes/help.html">
<span class="custom-icon icon-account" style="display:inline-block"></span>
<span class="custom-icon icon-account"></span>
<span>My Account</span>
</a>
</li>
</ul>
</div>
<div id="gameHall" class="flex-horiz hall-tab">
<div id="serverInfo" class="flex-horiz" style="align-items:stretch">
<div id="news" class="flex-vert">
<div id="infoButtons" class="flex-horiz">
<a href="deckBuild.html" target="_blank"><button id="deckbuilder-button" class="ui-button ui-widget ui-state-default ui-corner-all ui-button-text-only" role="button" aria-disabled="false" style="padding:4px;display:flex;">
<span class="custom-icon icon-deckbuilder" style="display:inline-block"></span><span>Deck Builder</span>
</button></a>
<a href="https://lotrtcgwiki.com/forums/index.php?topic=7592.2610#new" target="_blank"><button id="bug-button" class="ui-button ui-widget ui-state-default ui-corner-all ui-button-text-only" role="button" aria-disabled="false" style="padding:4px;display:flex;">
<span class="custom-icon icon-bug" style="display:inline-block"></span><span>Report a Bug</span>
</button></a>
<a href="https://lotrtcgwiki.com/forums/index.php?topic=8267.585#new" target="_blank"><button id="report-button" class="ui-button ui-widget ui-state-default ui-corner-all ui-button-text-only" role="button" aria-disabled="false" style="padding:4px;display:flex;">
<span class="custom-icon icon-report" style="display:inline-block"></span><span>Report a Player</span>
</button></a>
<a href="https://lotrtcgpc.net/discord" target="_blank"><button id="discord-button" class="ui-button ui-widget ui-state-default ui-corner-all ui-button-text-only" role="button" aria-disabled="false" style="padding:4px;display:flex;">
<span class="custom-icon icon-discord" style="display:inline-block"></span><span>Join the PC Discord</span>
</button></a>
<a href="https://wiki.lotrtcgpc.net" target="_blank"><button id="wiki-button" class="ui-button ui-widget ui-state-default ui-corner-all ui-button-text-only" role="button" aria-disabled="false" style="padding:4px;display:flex;">
<span class="custom-icon icon-wiki" style="display:inline-block"></span><span>Browse the LOTR-TCG Wiki</span>
</button></a>
<a href="https://wiki.lotrtcgpc.net" target="_blank"><button id="merchant-button" class="ui-button ui-widget ui-state-default ui-corner-all ui-button-text-only" role="button" aria-disabled="false" style="padding:4px;display:flex;">
<span class="custom-icon icon-merchant" style="display:inline-block"></span><span style="text-decoration: line-through;">Merchant</span>
</button></a>
<!-- If you find any problems with specific card or rules in general, please report it on <a target='_blank' href='http://lotrtcgwiki.com/forums/index.php/topic,7592.0.html'>TLHH forum thread here</a> or on the <a href='https://lotrtcgpc.net/discord'>PC Discord here</a>, in the #gemp-dev channel. Please include a game replay link. -->
<div id="gameHall" class="hall-tab">
<div id="hall-content" class="hall-tab">
<div id="serverInfo" class="flex-horiz">
<div id="news" class="flex-vert">
<div id="infoButtons" class="flex-horiz">
<a href="deckBuild.html" target="_blank"><button id="deckbuilder-button" class="ui-button ui-widget ui-state-default ui-corner-all ui-button-text-only" role="button" aria-disabled="false" style="padding:4px;display:flex;">
<span class="custom-icon icon-deckbuilder"></span><span>Deck Builder</span>
</button></a>
<a href="https://lotrtcgwiki.com/forums/index.php?topic=7592.2610#new" target="_blank"><button id="bug-button" class="ui-button ui-widget ui-state-default ui-corner-all ui-button-text-only" role="button" aria-disabled="false" style="padding:4px;display:flex;">
<span class="custom-icon icon-bug"></span><span>Report a Bug</span>
</button></a>
<a href="https://lotrtcgwiki.com/forums/index.php?topic=8267.585#new" target="_blank"><button id="report-button" class="ui-button ui-widget ui-state-default ui-corner-all ui-button-text-only" role="button" aria-disabled="false" style="padding:4px;display:flex;">
<span class="custom-icon icon-report"></span><span>Report a Player</span>
</button></a>
<a href="https://lotrtcgpc.net/discord" target="_blank"><button id="discord-button" class="ui-button ui-widget ui-state-default ui-corner-all ui-button-text-only" role="button" aria-disabled="false" style="padding:4px;display:flex;">
<span class="custom-icon icon-discord"></span><span>Join the PC Discord</span>
</button></a>
<a href="https://wiki.lotrtcgpc.net" target="_blank"><button id="wiki-button" class="ui-button ui-widget ui-state-default ui-corner-all ui-button-text-only" role="button" aria-disabled="false" style="padding:4px;display:flex;">
<span class="custom-icon icon-wiki"></span><span>Browse the LOTR-TCG Wiki</span>
</button></a>
<a href="merchant.html" target="_blank"><button id="merchant-button" class="ui-button ui-widget ui-state-default ui-corner-all ui-button-text-only" role="button" aria-disabled="false" style="padding:4px;display:flex;">
<span class="custom-icon icon-merchant"></span><span style="text-decoration: line-through;">Merchant</span>
</button></a>
<!-- If you find any problems with specific card or rules in general, please report it on <a target='_blank' href='http://lotrtcgwiki.com/forums/index.php/topic,7592.0.html'>TLHH forum thread here</a> or on the <a href='https://lotrtcgpc.net/discord'>PC Discord here</a>, in the #gemp-dev channel. Please include a game replay link. -->
</div>
<div id="motd"></div>
<div class='serverTime' ></div>
</div>
<div id="motd"></div>
</div>
<div class='serverTime' ></div>
</div>
<div id="hall" class="ui-widget-content">
<div id="tablesDiv" style="overflow:auto; left:0px; top:0px;">
<div id="waitingTablesHeader" class='eventHeader waitingTables'>Waiting Tables<span class='count'>(0)</span></div>
<div id="waitingTablesContent" class='visibilityToggle'>
<table class='tables waitingTables'>
<tr>
<th width='20%'>Format</th>
<th width='40%'>Table Info</th>
<th width='10%'>Status</th>
<th width='20%'>Players</th>
<th width='10%'>Actions</th>
</tr>
</table>
<div id="hall" class="">
<div id="tablesDiv">
<div id="waitingTablesHeader" class='eventHeader waitingTables'>Waiting Tables<span class='count'>(0)</span></div>
<div id="waitingTablesContent" class='visibilityToggle'>
<table class='tables waitingTables'>
<tr>
<th width='20%'>Format</th>
<th width='40%'>Table Info</th>
<th width='10%'>Status</th>
<th width='20%'>Players</th>
<th width='10%'>Actions</th>
</tr>
</table>
</div>
<div id="playingTablesHeader" class='eventHeader playingTables'>Playing Tables<span class='count'>(0)</span></div>
<div id="playingTablesContent" class='visibilityToggle'>
<table class='tables playingTables'>
<tr>
<th width='20%'>Format</th>
<th width='40%'>Table Info</th>
<th width='10%'>Status</th>
<th width='20%'>Players</th>
<th width='10%'>Actions</th>
</tr>
</table>
</div>
<div id="finishedTablesHeader" class='eventHeader finishedTables'>Finished Tables<span class='count'>(0)</span></div>
<div id="finishedTablesContent" class='visibilityToggle'>
<table class='tables finishedTables'>
<tr>
<th width='20%'>Format</th>
<th width='40%'>Table Info</th>
<th width='10%'>Status</th>
<th width='20%'>Players</th>
<th width='10%'>Winner</th>
</tr>
</table>
</div>
<div id="tournamentQueuesHeader" class='eventHeader queues'>Tournament Queues<span class='count'>(0)</span></div>
<div id="tournamentQueuesContent" class='visibilityToggle'>
<table class='tables queues'>
<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>
</div>
<div id="activeTournamentsHeader" class='eventHeader tournaments'>Active Tournaments<span class='count'>(0)</span></div>
<div id="activeTournamentsContent" class='visibilityToggle'>
<table class='tables tournaments'>
<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>
</div>
</div>
<div id="playingTablesHeader" class='eventHeader playingTables'>Playing Tables<span class='count'>(0)</span></div>
<div id="playingTablesContent" class='visibilityToggle'>
<table class='tables playingTables'>
<tr>
<th width='20%'>Format</th>
<th width='40%'>Table Info</th>
<th width='10%'>Status</th>
<th width='20%'>Players</th>
<th width='10%'>Actions</th>
</tr>
</table>
</div>
<div id="finishedTablesHeader" class='eventHeader finishedTables'>Finished Tables<span class='count'>(0)</span></div>
<div id="finishedTablesContent" class='visibilityToggle'>
<table class='tables finishedTables'>
<tr>
<th width='20%'>Format</th>
<th width='40%'>Table Info</th>
<th width='10%'>Status</th>
<th width='20%'>Players</th>
<th width='10%'>Winner</th>
</tr>
</table>
</div>
<div id="tournamentQueuesHeader" class='eventHeader queues'>Tournament Queues<span class='count'>(0)</span></div>
<div id="tournamentQueuesContent" class='visibilityToggle'>
<table class='tables queues'>
<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>
</div>
<div id="activeTournamentsHeader" class='eventHeader tournaments'>Active Tournaments<span class='count'>(0)</span></div>
<div id="activeTournamentsContent" class='visibilityToggle'>
<table class='tables tournaments'>
<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>
</div>
</div>
</div>
<!-- <div id="culture-icon"><img src="images/cultures/sauron.svg"/></div> -->
</div>
<div id="buttonsDiv" class="flex-horiz">
<select id="supportedFormatsSelect" ></select>

View File

@@ -0,0 +1,15 @@
<?xml version="1.0" standalone="no"?>
<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd" >
<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" version="1.1" viewBox="0 -205 1933 1024">
<g transform="matrix(1 0 0 -1 0 819)">
<path fill="currentColor"
d="M908 402l35 13q-43 0 -78.5 -4t-49.5 -8l-13 -4q-40 -12 -81 -35t-57 -41q-2 -2 6.5 -14.5t23.5 -27.5t27 -23q2 -1 15.5 -10t20 -13.5t21.5 -12.5t26.5 -12.5t27 -9t29.5 -5.5q59 -8 93 -9zM1147 374q-4 6 -11.5 10t-12.5 5h-5q-19 1 -118 -25l-25 -179q48 2 92.5 13
t65.5 20l19 9q46 24 90.5 57t52.5 45l9 10l-68 49l70 -20q44 -15 250 -128l13 13q-39 24 -86.5 48.5t-75.5 36.5l-28 13q-66 34 -141 59t-112 31q-10 1 -48.5 8t-57 9t-51 5t-60.5 2.5t-56 -3.5q-7 -1 -39 -4.5t-42.5 -5.5t-39.5 -7t-47 -10.5t-47 -14t-58.5 -20.5
t-63.5 -27q-73 -34 -129.5 -69.5t-78 -54t-24.5 -25.5q-8 -24 6 -29t27 -11q-19 2 -35.5 6.5t-23.5 6.5l-7 3q-48 23 -94 58q-17 15 -66 50l-17 -3q2 4 2 9t-2 10l-1 3q-6 13 -10 23l51 -23l126 98q20 16 53 36.5t39 22.5q5 3 61 -5q-6 -8 -8 -16.5t-1 -13.5l1 -5
q6 -16 14 -33q-11 0 -19 1.5t-11 3.5l-2 1q-9 7 -25 29q-49 -32 -77.5 -52t-33.5 -25l-3 -4q-2 -8 19.5 -25.5t34.5 -18.5q8 -1 39.5 15t73.5 39.5t56 30.5q117 58 173 74q43 14 119.5 31.5t124.5 16.5q165 0 296 -31q95 -24 150.5 -39.5t163.5 -56t221 -95.5l43 24
q-18 23 -33.5 38.5l-20.5 20.5l-7 4q-5 3 -11 8q-6 4 -10 2l-1 -1q-9 -4 -36 -25l-2 22q13 15 26 26.5t20 14.5l6 4q17 8 24 9.5t17 -3.5q5 -2 56 -46.5t58 -45.5q17 -4 26 0q10 3 21 6l16 -16l-7 -8q0 3 -3 4t-5 0h-3q-7 -1 -65.5 -28t-87.5 -42q-77 -38 -110 -62l-68 -50
l-37 6l-1 8l29 20q9 13 9 18q0 15 -82 60q-44 24 -76 32q-27 8 -44 -6q-3 -2 -42.5 -37.5t-51.5 -46.5q-19 -17 -69.5 -50t-83.5 -45q-134 -52 -237 -30q-120 26 -183 61q-40 23 -93 72q-14 15 -44 60l-56 16q15 13 31.5 25t25.5 17l9 5q57 31 150 59q129 36 185 38
q119 5 161 -4q82 -19 94 -33q11 -16 11 -33z" />
</g>
</svg>

After

Width:  |  Height:  |  Size: 1.8 KiB

View File

@@ -293,7 +293,7 @@ var GempLotrHallUI = Class.extend({
var joined = queue.getAttribute("signedUp");
if (joined != "true" && queue.getAttribute("joinable") == "true") {
var but = $("<button>Join queue</button>");
var but = $("<button>Join Queue</button>");
$(but).button().click((
function(queueId) {
return function () {
@@ -307,7 +307,7 @@ var GempLotrHallUI = Class.extend({
)(id));
actionsField.append(but);
} else if (joined == "true") {
var but = $("<button>Leave queue</button>");
var but = $("<button>Leave Queue</button>");
$(but).button().click((
function(queueId) {
return function() {
@@ -478,14 +478,22 @@ var GempLotrHallUI = Class.extend({
if (participantId != null)
participantIdAppend = "&participantId=" + participantId;
lastField.append("<a href='game.html?gameId=" + gameId + participantIdAppend + "'>Play the game</a>");
var but = $("<button>Play Match</button>");
var link = $("<a href='game.html?gameId=" + gameId + participantIdAppend + "'></a>");
link.append(but);
but.button();
lastField.append(link);
} else if (watchable == "true") {
var participantId = getUrlParam("participantId");
var participantIdAppend = "";
if (participantId != null)
participantIdAppend = "&participantId=" + participantId;
lastField.append("<a href='game.html?gameId=" + gameId + participantIdAppend + "'>Watch game</a>");
var but = $("<button>Spectate</button>");
var link = $("<a href='game.html?gameId=" + gameId + participantIdAppend + "'></a>");
link.append(but);
but.button();
lastField.append(link);
}
} else if (status == "FINISHED") {
if (winner != null) {