hall refactor

This commit is contained in:
Nick Heinbaugh
2023-01-19 17:46:18 -08:00
parent 70ceb2525d
commit c0b2165977
3 changed files with 108 additions and 121 deletions

View File

@@ -22,16 +22,10 @@
<link rel="stylesheet" type="text/css" href="css/gemp-001/hall.css">
<link rel="stylesheet" type="text/css" href="css/gemp-001/icons.css">
<!-- <script type="text/javascript" src="js/jquery/jquery-1.6.2.js"></script> -->
<script type="text/javascript" src="js/jquery/jquery-3.6.0.min.js"></script>
<script type="text/javascript" src="js/jquery/jquery-migrate-1.4.1.js"></script>
<script type="text/javascript" src="js/jquery/jquery-ui-1.13.2.custom/jquery-ui.min.js"></script>
<!-- <script type="text/javascript" src="js/jquery/jquery-ui-1.8.16.custom.min.js"></script> -->
<!-- <script type="text/javascript" src="js/jquery/jquery-ui-1.8.16.custom.min.js"></script> -->
<script type="text/javascript" src="js/jquery/jquery.cookie.js"></script>
<!--<script type="text/javascript" src="js/jquery/jquery.spinnercontrol.js"></script> -->
<!-- <script type="text/javascript" src="js/jquery/jquery.layout.js"></script> -->
<!-- <script type="text/javascript" src="js/jquery/jquery.touchSwipe.js"></script> -->
<script type="text/javascript" src="js/gemp-022/inheritance.js"></script>
<script type="text/javascript" src="js/gemp-022/common.js"></script>
@@ -60,122 +54,14 @@
<script type="text/javascript" src="js/gemp-022/merchantUi.js"></script>
<script type="text/javascript" src="js/lib/json2html/json2html.js"></script>
<!-- <script type="text/javascript" src="js/lib/fingerprintJS/fingerprintjspro.mini.js"></script> -->
<audio id="gamestart" src="/gemp-lotr/fanfare_x.mp3" type="audio/mpeg" preload="metadata"></audio>
<style type="text/css">
</style>
<script type="text/javascript">
var chat;
var hall;
$(document).ready(function () {
$("#main").tabs();
//Hiding the Users tab until that feature is ready
$("#tabs > ul :nth-child(5)").hide();
chat = new ChatBoxUI("Game Hall", $("#chat"), "/gemp-lotr-server", true, null, false, null, true);
chat.showTimestamps = true;
hall = new GempLotrHallUI("/gemp-lotr-server", chat);
var infoDialog = $("<div></div>")
.dialog({
autoOpen:false,
closeOnEscape:true,
resizable:false,
title:"Card information",
closeText: ""
});
$("body").click(
function (event) {
var tar = $(event.target);
if (tar.hasClass("cardHint")) {
var ids = tar.attr("value").split(",");
infoDialog.html("");
infoDialog.html("<div style='scroll: auto'></div>");
var floatCardDiv = $("<div style='float: left; display:flex; gap: 5px;'></div>");
var horiz = false;
for(var i = 0; i < ids.length; i++) {
var bpid = ids[i];
var card = new Card(bpid, "SPECIAL", "hint", "");
horiz = horiz || card.horizontal;
floatCardDiv.append(createFullCardDiv(card.imageUrl, card.foil, card.horizontal));
}
infoDialog.append(floatCardDiv);
var windowWidth = $(window).width();
var windowHeight = $(window).height();
var horSpace = 30;
var vertSpace = 45;
var height = 505;
var width = 340;
infoDialog.dialog({
title:"Card information",
});
if (horiz) {
// 500x360
infoDialog.dialog({width:Math.min((height + 10) * ids.length, windowWidth),
height:Math.min((width + 90), windowHeight)});
} else {
// 360x500
infoDialog.dialog({width:Math.min((width + 30) * ids.length, windowWidth),
height:Math.min((height + 45), windowHeight)});
}
infoDialog.dialog("open");
event.stopPropagation();
return false;
} else if (tar.hasClass("prizeHint")) {
var prizeDescription = tar.attr("value");
infoDialog.text(prizeDescription);
infoDialog.dialog({title:"Prizes details", width:300, height: 150});
infoDialog.dialog("open");
event.stopPropagation();
return false;
}
return true;
});
});
</script>
<!-- <script >
// Initialize the agent at application startup.
const fpPromise = import('./js/lib/fingerprintJS/fingerprintjspro.mini.js')
.then(FingerprintJS => FingerprintJS.load())
// Get the visitor identifier when you need it.
fpPromise
.then(fp => fp.get())
.then(result => {
// This is the visitor identifier:
const visitorId = result.visitorId
console.log(visitorId)
})
</script> -->
<link rel="stylesheet" type="text/css" href="src/Hall/index.css">
<script type="" src="src/Hall/GameHall.js"></script>
</head>
<body><script>0</script>
<body>
<div id="main" >
<div id="tabs">
<ul>
@@ -238,12 +124,12 @@
<a href="merchant.html" target="_blank">
<button id="merchant-button" class="toolbar-button">
<span class="custom-icon icon-merchant"></span><span style="text-decoration: line-through;">Merchant</span>
<span class="custom-icon icon-merchant"></span><span class="strikethrough">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 class="flex-horiz" style="justify-content: space-between; align-items:flex-end">
<div class="flex-horiz" id="messageArea">
<div id="motd"></div>
<div class="serverTime"></div>
</div>
@@ -330,14 +216,14 @@
<div id="buttonsDiv" class="flex-horiz">
<select id="supportedFormatsSelect" ></select>
<select id="decksSelect" ></select>
<select id="timerSelect" style="width: 135px;">
<select id="timerSelect">
<option value="default">Default (80m/5m)</option>
<option value="blitz">Blitz! (30m/3m)</option>
<option value="slow">Slow (2h/10m)</option>
<option value="glacial">Glacial (3d/1d)</option>
</select>
<input id='tableDescInput' type='text' maxlength='100' placeHolder='Description (or player to invite)'>
<label style="min-width: fit-content;"><input type='checkbox' id='isPrivateCheckbox'>Invite Only</input></label>
<label id="inviteCheckbox"><input type='checkbox' id='isPrivateCheckbox'>Invite Only</input></label>
<button id="createTableBut">Create table</button>
</div>
<div id="chat" class="flex-horiz" >

View File

@@ -0,0 +1,86 @@
var chat;
var hall;
$(document).ready(function () {
$("#main").tabs();
//Hiding the Users tab until that feature is ready
$("#tabs > ul :nth-child(5)").hide();
chat = new ChatBoxUI("Game Hall", $("#chat"), "/gemp-lotr-server", true, null, false, null, true);
chat.showTimestamps = true;
hall = new GempLotrHallUI("/gemp-lotr-server", chat);
var infoDialog = $("<div></div>")
.dialog({
autoOpen:false,
closeOnEscape:true,
resizable:false,
title:"Card information",
closeText: ""
});
$("body").click(
function (event) {
var tar = $(event.target);
if (tar.hasClass("cardHint")) {
var ids = tar.attr("value").split(",");
infoDialog.html("");
infoDialog.html("<div style='scroll: auto'></div>");
var floatCardDiv = $("<div style='float: left; display:flex; gap: 5px;'></div>");
var horiz = false;
for(var i = 0; i < ids.length; i++) {
var bpid = ids[i];
var card = new Card(bpid, "SPECIAL", "hint", "");
horiz = horiz || card.horizontal;
floatCardDiv.append(createFullCardDiv(card.imageUrl, card.foil, card.horizontal));
}
infoDialog.append(floatCardDiv);
var windowWidth = $(window).width();
var windowHeight = $(window).height();
var horSpace = 30;
var vertSpace = 45;
var height = 505;
var width = 340;
infoDialog.dialog({
title:"Card information",
});
if (horiz) {
// 500x360
infoDialog.dialog({width:Math.min((height + 10) * ids.length, windowWidth),
height:Math.min((width + 90), windowHeight)});
} else {
// 360x500
infoDialog.dialog({width:Math.min((width + 30) * ids.length, windowWidth),
height:Math.min((height + 45), windowHeight)});
}
infoDialog.dialog("open");
event.stopPropagation();
return false;
} else if (tar.hasClass("prizeHint")) {
var prizeDescription = tar.attr("value");
infoDialog.text(prizeDescription);
infoDialog.dialog({title:"Prizes details", width:300, height: 150});
infoDialog.dialog("open");
event.stopPropagation();
return false;
}
return true;
});
});

View File

@@ -0,0 +1,15 @@
#timerSelect {
width: 135px;
}
#inviteCheckbox {
min-width: fit-content;
}
#messageArea {
justify-content: space-between; align-items:flex-end
}
.strikethrough {
text-decoration: line-through;
}