Merge pull request #47 from AttorneyOnline/charselect

Charselect

3 files changed, 32 insertions, 55 deletions

diff --git a/webAO/client.html b/webAO/client.html
index 2152ddc..dd6531a 100644
--- a/webAO/client.html
+++ b/webAO/client.html
@@ -23,10 +23,11 @@
 		<button class="client_reconnect" onclick="ReconnectButton()">Reconnect</button>
 	</div>
 	<div id="client_charselect">
-		<div id="client_chartable_container">
-			<table id="client_chartable"></table>
-			<button onclick="pickChar(1001)">Spectate</button>
-		</div>
+		<p>Choose your character</p>
+		<button onclick="pickChar(1001)">Or spectate</button>
+		<br>
+		<br>
+		<div id="client_chartable"></div>
 	</div>
 	<div id="client_error" class="error" style="display: none">
 		<h1 id="client_errortext">You were disconnected from the server.</h1>
diff --git a/webAO/client.js b/webAO/client.js
index dda1c63..04797da 100644
--- a/webAO/client.js
+++ b/webAO/client.js
@@ -30,7 +30,7 @@ let mode = queryDict.mode;
 const AO_HOST = queryDict.asset || "http://s3.wasabisys.com/webao/base/";
 const THEME = queryDict.theme || "default";
 const MUSIC_HOST = AO_HOST + "sounds/music/";
-const CHAR_SELECT_WIDTH = 8;
+
 const UPDATE_INTERVAL = 60;
 
 /**
@@ -1041,19 +1041,17 @@ class Client extends EventEmitter {
 
 		// create the charselect grid, to be filled by the character loader
 		document.getElementById("client_chartable").innerHTML = "";
-		let tr;
+
 		for (let i = 0; i < this.char_list_length; i++) {
-			if (i % CHAR_SELECT_WIDTH === 0) {
-				tr = document.createElement("TR");
-			}
-			const td = document.createElement("TD");
+			const demothing = document.createElement("img");
 
-			td.innerHTML = `<img class='demothing' id='demo_${i}' onclick='pickChar(${i})' >`;
+			demothing.className = "demothing";
+			demothing.id = `demo_${i}`;
+			const demoonclick = document.createAttribute("onclick");
+			demoonclick.value = `pickChar(${i})`;
+			demothing.setAttributeNode(demoonclick);
 
-			tr.appendChild(td);
-			if (i % CHAR_SELECT_WIDTH === 0) {
-				document.getElementById("client_chartable").appendChild(tr);
-			}
+			document.getElementById("client_chartable").appendChild(demothing);
 		}
 
 		// this is determined at the top of this file
@@ -1071,18 +1069,12 @@ class Client extends EventEmitter {
 	handleCharsCheck(args) {
 		for (let i = 0; i < this.char_list_length; i++) {
 			let img = document.getElementById(`demo_${i}`);
-			let icon_chosen = "demothing";
-
-			if (img.classList.contains("noini"))
-				icon_chosen += " noini";
 
 			if (args[i + 1] === "-1")
-				icon_chosen += " dark";
-
-			img.classList = icon_chosen;
+				img.style = "opacity: 0.25";
+			else if (args[i + 1] === "0")
+				img.style = "";			
 		}
-
-		//changeBackground("def");
 	}
 
 	/**
diff --git a/webAO/styles/client.css b/webAO/styles/client.css
index 58d9087..4c3f80f 100644
--- a/webAO/styles/client.css
+++ b/webAO/styles/client.css
@@ -45,15 +45,14 @@
 }
 
 #client_loading {
-	position: absolute;
-	display: flex;
+	display: block;
 	flex-direction: column;
-	padding: 10px;
-	top: 50%;
-	left: 50%;
-	margin-right: -50%;
-	transform: translate(-50%, -50%);
+	position: fixed;
+  	top: 30vh;
+  	left: 30vw;
+	width: 40vw;
 	justify-content: center;
+	text-align: center;
 	align-items: center;
 	background: black;
 	color: lightgreen;
@@ -106,32 +105,21 @@
 }
 
 #client_charselect {
+	display: block;
 	position: fixed;
-	top: 0;
-	left: 0;
-	width: 98vw;
-	height: 100%;
-	overflow-y: auto;
-	justify-content: center;
-	align-items: center;
-	vertical-align: middle;
+  	top: 5vh;
+  	left: 10vw;
+	width: 80vw;
+	max-height: 90vh;
+	overflow-y: scroll;
+	text-align: center;
 	margin: 0 auto;
-	background: rgba(70, 70, 70, 0.5);
+	background: #444;
 	z-index: 50;
 }
 
-#client_chartable {
-	background: #eee;
-}
-
-#client_chartable_container {
-	display: flex;
-	flex-direction: column;
-	align-items: center;
-}
-
 .demothing {
-	display: block;
+	display: inline-block;
 	height: 60px;
 	width: 60px;
 	max-width: 60px;
@@ -428,10 +416,6 @@
 	border-color: #FFD081;
 }
 
-.dark {
-	filter: brightness(50%);
-}
-
 .noini {
 	transform: rotate(180deg);
 }