Improve connection error dialog

3 files changed, 21 insertions, 11 deletions

diff --git a/webAO/client.css b/webAO/client.css
index 0dc1999..3b770e9 100644
--- a/webAO/client.css
+++ b/webAO/client.css
@@ -11,8 +11,9 @@ img {
 }
 
 @keyframes error_blink {  
-    0% { color: red; }
-    100% { color: white; }
+	0% { color: white; }
+	50% { color: red; }
+	100% { color: white; }
 }
 
 .error {
@@ -23,15 +24,17 @@ img {
     left: 50%;
     margin-right: -50%;
     transform: translate(-50%, -50%);
-	justify-content: center;
 	display: flex;
-	align-content: center;
 	margin: 0 auto;
+	justify-content: center;
+	align-content: center;
 	align-items: center;
-	background: red;
+	text-align: center;
+	background: #4e0e00;
 	color: white;
-	font-size: 4em;
-	animation: error_blink 0.5s linear infinite;
+	font-size: x-large;
+	animation: error_blink 0.5s ease-in-out infinite;
+	z-index: 3;
 }
 
 #client_loading {
diff --git a/webAO/client.html b/webAO/client.html
index fa373e2..54d0fd4 100644
--- a/webAO/client.html
+++ b/webAO/client.html
@@ -102,8 +102,9 @@
         <table id="client_chartable"></table>
     </div>
     <div id="client_error" class="error" style="display: none">
-            <p>CONNECTION ERROR</p><br>
-            <button onclick="ReconnectButton()">RECONNECT</button>
+            <p>A network error occurred.</p>
+            <p id="error_id">(unknown error id)</p>
+            <button onclick="ReconnectButton()">Reconnect</button>
     </div>
 </body>
 </html>
\ No newline at end of file
diff --git a/webAO/client.js b/webAO/client.js
index f75970d..89baeff 100644
--- a/webAO/client.js
+++ b/webAO/client.js
@@ -187,8 +187,11 @@ class Client {
 	 */
 	onClose(e) {
 		console.error(`The connection was closed: ${e.reason} (${e.code})`);
-		document.getElementById("client_error").style.display = "block";
-		this.cleanup();
+		if (e.code !== 1001) {
+			document.getElementById("client_error").style.display = "block";
+			document.getElementById("error_id").textContent = e.code;
+			this.cleanup();
+		}
 	}
 
 	/**
@@ -216,10 +219,12 @@ class Client {
 	onError(e) {
 		console.error(`A network error occurred: ${e.reason} (${e.code})`);
 		document.getElementById("client_error").style.display = "block";
+		document.getElementById("error_id").textContent = e.code;
 		this.cleanup();
 	}
 
 	cleanup() {
+		this.serv.close(1001);
 		clearInterval(this.checkUpdater);
 	}
 
@@ -906,6 +911,7 @@ function changeBackground(position) {
  * Triggered when the reconnect button is pushed.
  */
 export function ReconnectButton() {
+	client.cleanup();
 	client = new Client(serverIP);
 	if (client) {
 		mode = "join"; // HACK: see client.onOpen