From 430968e5d5fdf627ce7e1563bbee22bf2f9256b2 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?P=C5=99emysl=20Eric=20Janouch?= <p@janouch.name>
Date: Fri, 16 Sep 2022 03:18:53 +0200
Subject: [PATCH] xP: make non-connected states more apparent

---
 xP/public/xP.css | 10 ++++++++++
 xP/public/xP.js  | 14 +++++++++-----
 2 files changed, 19 insertions(+), 5 deletions(-)

diff --git a/xP/public/xP.css b/xP/public/xP.css
index 71422a1..c231620 100644
--- a/xP/public/xP.css
+++ b/xP/public/xP.css
@@ -13,6 +13,16 @@ body {
 	height: 100dvh;
 }
 
+.overlay {
+	padding: .6em .9em;
+	background: #eee;
+	border: 1px outset #eee;
+	position: absolute;
+	left: 50%;
+	top: 50%;
+	transform: translate(-50%, -50%);
+	text-align: center;
+}
 .title, .status {
 	padding: .05em .3em;
 	background: #eee;
diff --git a/xP/public/xP.js b/xP/public/xP.js
index a5f1218..30491d3 100644
--- a/xP/public/xP.js
+++ b/xP/public/xP.js
@@ -41,7 +41,7 @@ class RelayRpc extends EventTarget {
 		}
 		this.ws.onclose = event => {
 			let message = "Connection closed: " +
-				event.code + " (" + event.reason + ")"
+				event.reason + " (" + event.code + ")"
 			for (const seq in this.promised)
 				this.promised[seq].reject(message)
 
@@ -811,14 +811,18 @@ let Input = {
 
 let Main = {
 	view: vnode => {
-		let state = "Connected"
+		let overlay = undefined
 		if (connecting)
-			state = "Connecting..."
+			overlay = m('.overlay', {}, "Connecting...")
 		else if (rpc.ws === undefined)
-			state = "Disconnected"
+			overlay = m('.overlay', {}, [
+				m('', {}, "Disconnected"),
+				m('', {}, m('small', {}, "Reload page to reconnect.")),
+			])
 
 		return m('.xP', {}, [
-			m('.title', {}, [`xP (${state})`, m(Toolbar)]),
+			overlay,
+			m('.title', {}, [`xP`, m(Toolbar)]),
 			m('.middle', {}, [m(BufferList), m(BufferContainer)]),
 			m(Status),
 			m(Input),