From 7955d3edd473e64d431d5b4ee9985d93f2b82a0d Mon Sep 17 00:00:00 2001
From: sD <stoned@derpymail.org>
Date: Sat, 15 Feb 2020 13:28:31 +0100
Subject: make charselect depend on the display width

---
 webAO/client.html       |  9 +++++----
 webAO/client.js         | 24 +++++++++++-------------
 webAO/styles/client.css | 19 +++++++------------
 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;
-- 
cgit 


From ab57e11f91c9d08167a811dd801ff8fb57215d5c Mon Sep 17 00:00:00 2001
From: sD <stoned@derpymail.org>
Date: Sat, 15 Feb 2020 13:42:11 +0100
Subject: add scrollbar

---
 webAO/styles/client.css | 3 ++-
 1 file changed, 2 insertions(+), 1 deletion(-)

diff --git a/webAO/styles/client.css b/webAO/styles/client.css
index ec16b1c..03458d6 100644
--- a/webAO/styles/client.css
+++ b/webAO/styles/client.css
@@ -112,7 +112,8 @@
   	left: 50%;
 	transform: translate(-50%, -50%);
 	width: 75vw;
-	overflow-y: auto;
+	max-height: 90vh;
+	overflow-y: scroll;
 	justify-content: center;
 	align-items: center;
 	vertical-align: middle;
-- 
cgit 


From 254e6c2f2d7966b2817a6d162c1543ef45a82c30 Mon Sep 17 00:00:00 2001
From: sD <stoned@derpymail.org>
Date: Sat, 15 Feb 2020 17:09:47 +0100
Subject: the rainbow text was not very popular

---
 webAO/client.html | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/webAO/client.html b/webAO/client.html
index 3d89ad6..c5a2f34 100644
--- a/webAO/client.html
+++ b/webAO/client.html
@@ -25,7 +25,7 @@
 		<button class="client_reconnect" onclick="ReconnectButton()">Reconnect</button>
 	</div>
 	<div id="client_charselect">
-		<h1 class="text_rainbow" style="text-align: center;">Choose your character</h1>
+		<h1 style="text-align: center;">Choose your character</h1>
 		<br>
 		<div id="client_chartable"></div>
 		<br>
-- 
cgit 


From b45ada9c735d6df1129a271b4de6b7592880922a Mon Sep 17 00:00:00 2001
From: sD <stoned@derpymail.org>
Date: Sat, 15 Feb 2020 18:56:17 +0100
Subject: transform is not widely supported

---
 webAO/styles/client.css | 7 +++----
 1 file changed, 3 insertions(+), 4 deletions(-)

diff --git a/webAO/styles/client.css b/webAO/styles/client.css
index 03458d6..241a66e 100644
--- a/webAO/styles/client.css
+++ b/webAO/styles/client.css
@@ -108,10 +108,9 @@
 #client_charselect {
 	display: grid;
 	position: fixed;
-  	top: 50%;
-  	left: 50%;
-	transform: translate(-50%, -50%);
-	width: 75vw;
+  	top: 5vh;
+  	left: 10vw;
+	width: 80vw;
 	max-height: 90vh;
 	overflow-y: scroll;
 	justify-content: center;
-- 
cgit 


From 97d81ab021b9021838e84c9adc833ee3c13854a2 Mon Sep 17 00:00:00 2001
From: sD <stoned@derpymail.org>
Date: Sat, 15 Feb 2020 22:13:20 +0100
Subject: change darkening

---
 webAO/client.js         | 12 +++---------
 webAO/styles/client.css |  8 --------
 2 files changed, 3 insertions(+), 17 deletions(-)

diff --git a/webAO/client.js b/webAO/client.js
index f5511c1..6cf8569 100644
--- a/webAO/client.js
+++ b/webAO/client.js
@@ -1070,18 +1070,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 241a66e..011d692 100644
--- a/webAO/styles/client.css
+++ b/webAO/styles/client.css
@@ -121,10 +121,6 @@
 	z-index: 50;
 }
 
-#client_chartable {
-	background: #eee;
-}
-
 .demothing {
 	display: inline-block;
 	height: 60px;
@@ -431,10 +427,6 @@
 	border-color: #FFD081;
 }
 
-.dark {
-	filter: brightness(50%);
-}
-
 .noini {
 	transform: rotate(180deg);
 }
-- 
cgit 


From f6027422107d5a9d584fa25533b2c25655ff6ecb Mon Sep 17 00:00:00 2001
From: sD <stoned@derpymail.org>
Date: Sat, 15 Feb 2020 22:21:36 +0100
Subject: grid is too new for some browsers

---
 webAO/client.js | 4 ++--
 1 file changed, 2 insertions(+), 2 deletions(-)

diff --git a/webAO/client.js b/webAO/client.js
index 6cf8569..7af47a2 100644
--- a/webAO/client.js
+++ b/webAO/client.js
@@ -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 = "grid";
+			document.getElementById("client_charselect").style.display = "";
 		}
 	}
 
@@ -1890,7 +1890,7 @@ window.iniedit = iniedit;
  */
 export function changeCharacter(_event) {
 	client.sendLeaveRoom();
-	document.getElementById("client_charselect").style.display = "grid";
+	document.getElementById("client_charselect").style.display = "";
 	document.getElementById("client_emo").innerHTML = "";
 }
 window.changeCharacter = changeCharacter;
-- 
cgit 


From 471cce5bcb7c41c34849a608e541b7d84dc512c9 Mon Sep 17 00:00:00 2001
From: sD <stoned@derpymail.org>
Date: Sat, 15 Feb 2020 22:25:09 +0100
Subject: change it back to block

---
 webAO/client.js         | 4 ++--
 webAO/styles/client.css | 2 +-
 2 files changed, 3 insertions(+), 3 deletions(-)

diff --git a/webAO/client.js b/webAO/client.js
index 7af47a2..807ba46 100644
--- a/webAO/client.js
+++ b/webAO/client.js
@@ -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 = "";
+			document.getElementById("client_charselect").style.display = "block";
 		}
 	}
 
@@ -1890,7 +1890,7 @@ window.iniedit = iniedit;
  */
 export function changeCharacter(_event) {
 	client.sendLeaveRoom();
-	document.getElementById("client_charselect").style.display = "";
+	document.getElementById("client_charselect").style.display = "block";
 	document.getElementById("client_emo").innerHTML = "";
 }
 window.changeCharacter = changeCharacter;
diff --git a/webAO/styles/client.css b/webAO/styles/client.css
index 011d692..0c4d388 100644
--- a/webAO/styles/client.css
+++ b/webAO/styles/client.css
@@ -106,7 +106,7 @@
 }
 
 #client_charselect {
-	display: grid;
+	display: block;
 	position: fixed;
   	top: 5vh;
   	left: 10vw;
-- 
cgit 


From f2577419f6552f6f92ae6d4ee4501c198ba32fb5 Mon Sep 17 00:00:00 2001
From: sD <stoned@derpymail.org>
Date: Sat, 15 Feb 2020 22:38:02 +0100
Subject: center the loading box the same way i did it with the charselect

---
 webAO/styles/client.css | 14 +++++++-------
 1 file changed, 7 insertions(+), 7 deletions(-)

diff --git a/webAO/styles/client.css b/webAO/styles/client.css
index 0c4d388..e76fb79 100644
--- a/webAO/styles/client.css
+++ b/webAO/styles/client.css
@@ -45,15 +45,15 @@
 }
 
 #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;
+	height: 15vh;
 	justify-content: center;
+	text-align: center;
 	align-items: center;
 	background: black;
 	color: lightgreen;
-- 
cgit 


From d3b7e5b7c06eec03cb5d51c51e10f6df3e5c446e Mon Sep 17 00:00:00 2001
From: sD <stoned@derpymail.org>
Date: Sat, 15 Feb 2020 22:39:09 +0100
Subject: wow things are actually centered now

---
 webAO/styles/client.css | 4 +---
 1 file changed, 1 insertion(+), 3 deletions(-)

diff --git a/webAO/styles/client.css b/webAO/styles/client.css
index e76fb79..ecc2089 100644
--- a/webAO/styles/client.css
+++ b/webAO/styles/client.css
@@ -113,9 +113,7 @@
 	width: 80vw;
 	max-height: 90vh;
 	overflow-y: scroll;
-	justify-content: center;
-	align-items: center;
-	vertical-align: middle;
+	text-align: center;
 	margin: 0 auto;
 	background: #444;
 	z-index: 50;
-- 
cgit 


From 4011d22ec96b36b77724831e996de2458afe4d3a Mon Sep 17 00:00:00 2001
From: sD <stoned@derpymail.org>
Date: Sat, 15 Feb 2020 22:40:20 +0100
Subject: stop the reconnect button from floating mid page

---
 webAO/styles/client.css | 1 -
 1 file changed, 1 deletion(-)

diff --git a/webAO/styles/client.css b/webAO/styles/client.css
index ecc2089..841ec83 100644
--- a/webAO/styles/client.css
+++ b/webAO/styles/client.css
@@ -51,7 +51,6 @@
   	top: 30vh;
   	left: 30vw;
 	width: 40vw;
-	height: 15vh;
 	justify-content: center;
 	text-align: center;
 	align-items: center;
-- 
cgit 


From 72505010cb02aad17b16642459b7ed915070d206 Mon Sep 17 00:00:00 2001
From: sD <stoned@derpymail.org>
Date: Sat, 15 Feb 2020 22:44:40 +0100
Subject: move the spectate button to the top and change its text

---
 webAO/client.html | 6 +++---
 1 file changed, 3 insertions(+), 3 deletions(-)

diff --git a/webAO/client.html b/webAO/client.html
index c5a2f34..bda32ff 100644
--- a/webAO/client.html
+++ b/webAO/client.html
@@ -25,11 +25,11 @@
 		<button class="client_reconnect" onclick="ReconnectButton()">Reconnect</button>
 	</div>
 	<div id="client_charselect">
-		<h1 style="text-align: center;">Choose your character</h1>
+		<p>Choose your character</p>
+		<button onclick="pickChar(1001)">Or spectate</button>
 		<br>
-		<div id="client_chartable"></div>
 		<br>
-		<button onclick="pickChar(1001)">Spectate</button>
+		<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>
-- 
cgit