make loading look a little better

2 files changed, 9 insertions, 2 deletions

diff --git a/webAO/client.css b/webAO/client.css
index a88816b..bccc2ee 100644
--- a/webAO/client.css
+++ b/webAO/client.css
@@ -59,6 +59,8 @@ img {
 
 #client_loading {
 	position: absolute;
+	display: flex;
+	flex-direction: column;
 	width: 90vw;
 	height: 40vh;
 	top: 50%;
@@ -66,14 +68,17 @@ img {
 	margin-right: -50%;
 	transform: translate(-50%, -50%);
 	justify-content: center;
-	display: flex;
 	align-items: center;
 	background: black;
 	color: lightgreen;
-	font-size: 3em;
+	font-size: 2em;
 	z-index: 100;
 }
 
+#client_loadingtext {
+	margin: 0;
+}
+
 #client_gamewindow {
 	position: relative;
 	padding-bottom: 75%;
diff --git a/webAO/client.js b/webAO/client.js
index a653ef3..3a501bf 100644
--- a/webAO/client.js
+++ b/webAO/client.js
@@ -401,6 +401,7 @@ class Client extends EventEmitter {
 		console.error(`The connection was closed: ${e.reason} (${e.code})`);
 		if (e.code !== 1001) {
 			document.getElementById("client_error").style.display = "block";
+			document.getElementById("client_loading").style.display = "none";
 			document.getElementById("error_id").textContent = e.code;
 			this.cleanup();
 		}
@@ -430,6 +431,7 @@ class Client extends EventEmitter {
 	onError(e) {
 		console.error(`A network error occurred: ${e.reason} (${e.code})`);
 		document.getElementById("client_error").style.display = "block";
+		document.getElementById("client_loading").style.display = "none";
 		document.getElementById("error_id").textContent = e.code;
 		this.cleanup();
 	}