From c0b21659772b213e2e97ab9cc4c370545d47ff8b Mon Sep 17 00:00:00 2001
From: Nick Heinbaugh <nick.heinbaugh@live.com>
Date: Thu, 19 Jan 2023 17:46:18 -0800
Subject: [PATCH] hall refactor

---
 .../gemp-lotr-async/src/main/web/hall.html    | 128 +-----------------
 .../src/main/web/src/Hall/GameHall.js         |  86 ++++++++++++
 .../src/main/web/src/Hall/index.css           |  15 ++
 3 files changed, 108 insertions(+), 121 deletions(-)
 create mode 100644 gemp-lotr/gemp-lotr-async/src/main/web/src/Hall/GameHall.js
 create mode 100644 gemp-lotr/gemp-lotr-async/src/main/web/src/Hall/index.css

diff --git a/gemp-lotr/gemp-lotr-async/src/main/web/hall.html b/gemp-lotr/gemp-lotr-async/src/main/web/hall.html
index 867e5535c..93a63dbd3 100644
--- a/gemp-lotr/gemp-lotr-async/src/main/web/hall.html
+++ b/gemp-lotr/gemp-lotr-async/src/main/web/hall.html
@@ -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" >
diff --git a/gemp-lotr/gemp-lotr-async/src/main/web/src/Hall/GameHall.js b/gemp-lotr/gemp-lotr-async/src/main/web/src/Hall/GameHall.js
new file mode 100644
index 000000000..1cd6763d3
--- /dev/null
+++ b/gemp-lotr/gemp-lotr-async/src/main/web/src/Hall/GameHall.js
@@ -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;
+			});
+			
+	});
\ No newline at end of file
diff --git a/gemp-lotr/gemp-lotr-async/src/main/web/src/Hall/index.css b/gemp-lotr/gemp-lotr-async/src/main/web/src/Hall/index.css
new file mode 100644
index 000000000..2301d0e0c
--- /dev/null
+++ b/gemp-lotr/gemp-lotr-async/src/main/web/src/Hall/index.css
@@ -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;
+}
\ No newline at end of file