make charselect depend on the display width

3 files changed, 23 insertions, 29 deletions

diff --git a/webAO/client.html b/webAO/client.html
index dfe1826..3d89ad6 100644
--- a/webAO/client.html
+++ b/webAO/client.html
@@ -25,10 +25,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>
+		<h1 class="text_rainbow" style="text-align: center;">Choose your character</h1>
+		<br>
+		<div id="client_chartable"></div>
+		<br>
+		<button onclick="pickChar(1001)">Spectate</button>
 	</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 0c03c12..f5511c1 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;
 
 /**
@@ -868,7 +868,7 @@ class Client extends EventEmitter {
 		if (mode === "watch") {		// Spectators don't need to pick a character
 			document.getElementById("client_charselect").style.display = "none";
 		} else {
-			document.getElementById("client_charselect").style.display = "block";
+			document.getElementById("client_charselect").style.display = "grid";
 		}
 	}
 
@@ -1042,19 +1042,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
@@ -1898,7 +1896,7 @@ window.iniedit = iniedit;
  */
 export function changeCharacter(_event) {
 	client.sendLeaveRoom();
-	document.getElementById("client_charselect").style.display = "block";
+	document.getElementById("client_charselect").style.display = "grid";
 	document.getElementById("client_emo").innerHTML = "";
 }
 window.changeCharacter = changeCharacter;
diff --git a/webAO/styles/client.css b/webAO/styles/client.css
index 9ecd8cb..ec16b1c 100644
--- a/webAO/styles/client.css
+++ b/webAO/styles/client.css
@@ -106,17 +106,18 @@
 }
 
 #client_charselect {
+	display: grid;
 	position: fixed;
-	top: 0;
-	left: 0;
-	width: 98vw;
-	height: 100%;
+  	top: 50%;
+  	left: 50%;
+	transform: translate(-50%, -50%);
+	width: 75vw;
 	overflow-y: auto;
 	justify-content: center;
 	align-items: center;
 	vertical-align: middle;
 	margin: 0 auto;
-	background: rgba(70, 70, 70, 0.5);
+	background: #444;
 	z-index: 50;
 }
 
@@ -124,14 +125,8 @@
 	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;