From 221e5b9147f08e9c24fcf30f750493b8258183de Mon Sep 17 00:00:00 2001 From: mellodoot Date: Mon, 2 Oct 2023 13:56:26 +0100 Subject: [PATCH] added server indicator and connect button to header --- public/index.html | 6 +++++ public/scripts/main.js | 6 +++++ public/scripts/terminal.js | 48 +++++++++++++++++++++++++++----------- public/styles/main.css | 20 ++++++++++------ 4 files changed, 60 insertions(+), 20 deletions(-) diff --git a/public/index.html b/public/index.html index 6f1f8b7..9c5fe2e 100644 --- a/public/index.html +++ b/public/index.html @@ -24,6 +24,12 @@ +
+ + 

 			
diff --git a/public/scripts/main.js b/public/scripts/main.js
index b818382..8f38d14 100644
--- a/public/scripts/main.js
+++ b/public/scripts/main.js
@@ -4,5 +4,11 @@ import * as Visual from "./visual.js";
 document.addEventListener("DOMContentLoaded", () => {
 	Visual.bind();
 	Terminal.start();
+
+	document.getElementById("connect").addEventListener("click", () => {
+		var new_server = prompt("Enter the address of the server you would like to connect to:");
+		if (!new_server) return;
+		Terminal.connect(new_server);
+	});
 });
 
diff --git a/public/scripts/terminal.js b/public/scripts/terminal.js
index 9c4fe13..cd638d7 100644
--- a/public/scripts/terminal.js
+++ b/public/scripts/terminal.js
@@ -2,6 +2,7 @@ var recv_buffer = [];
 var send_buffer = [];
 
 var content;
+var server_indicator;
 var mobile_input;
 
 var client;
@@ -54,6 +55,7 @@ to help you feel a little more comfortable, i've prepared some commands for you:
 	}
 
 	content = document.getElementById("content");
+	server_indicator = document.getElementById("server-url");
 	mobile_input = document.getElementById("mobile-input");
 
 	document.addEventListener("keydown", handle_input);
@@ -63,11 +65,8 @@ to help you feel a little more comfortable, i've prepared some commands for you:
 		mobile_input.focus();
 	});
 
-	add_system_message("Connecting to the server...");
-	
-	setTimeout(connect, 500);
-
 	setInterval(() => {
+		if (!client || !client.readyState == 1) return;
 		if (send_buffer.length > 0) {
 			const data = JSON.stringify(send_buffer[0]);
 			client.send(data);
@@ -75,20 +74,37 @@ to help you feel a little more comfortable, i've prepared some commands for you:
 		}
 	}, 1000 / 600);
 
-	loop();
+	setInterval(() => {
+		mobile_input.value = content.innerText;
+	}, 1000 / 60);
+
+	connect(new URL(window.location).searchParams.get("server") || window.location.host);
 }
 
-function loop() {
-	mobile_input.value = content.innerText;
+export async function connect(server_url) {
+	if (client && client.readyState == 1) { // OPEN
+		client.close();
 
-	setTimeout(loop, 1000 / 60);
-}
+		await new Promise((resolve) => {
+			setInterval(() => {
+				if (client.readyState == 3) {
+					resolve();
+				}
+			}, 100);
+		});
+	}
 
-function connect() {
-	client = new WebSocket("wss://" + server_url);
+	content.innerHTML = "";
+	server_indicator.innerText = "connecting...";
+
+	add_system_message("Connecting to the server...\n");
+
+	if (!server_url.startsWith("wss://")) server_url = "wss://" + server_url;
+	client = new WebSocket(server_url);
 
 	client.addEventListener('open', () => {
-		add_system_message(`\nConnection successful.\n\n`);
+		server_indicator.innerText = server_url.slice(6);
+		add_system_message(`Connection successful.\n\n`);
 		add_system_message(`=== BEGIN SESSION ===\n\n`);
 		new_caret();
 	});
@@ -96,7 +112,13 @@ function connect() {
 	client.addEventListener('message', event => { handle_message(JSON.parse(event.data)) });
 
 	client.addEventListener('close', () => {
-		add_system_message(`\n[CONNECTION LOST, PLEASE REFRESH]\n`);
+		server_indicator.innerText = "not connected";
+		add_system_message(`\n[CONNECTION CLOSED]\n`);
+	});
+
+	client.addEventListener('error', () => {
+		add_system_message(`\nConnection failed!\n`);
+		add_system_message("Ensure you entered the correct server URL, or check the console for more details.\n");
 	});
 }
 
diff --git a/public/styles/main.css b/public/styles/main.css
index 88b8908..269f914 100644
--- a/public/styles/main.css
+++ b/public/styles/main.css
@@ -13,12 +13,12 @@ body {
 }
 
 main {
-	margin: 1rem 1rem 0 1rem;
+	margin: 0 1rem;
 	border: 1px solid var(--colour);
 }
 
 pre#content {
-	height: calc(100vh - 5rem);
+	height: calc(100vh - 6rem);
 	margin: 0;
 	padding: 1rem;
 	overflow-x: hidden;
@@ -46,7 +46,8 @@ div#caret {
 	}
 }
 
-footer {
+footer,
+header {
 	height: 18px;
 	padding: .5em 2em;
 	display: flex;
@@ -55,26 +56,31 @@ footer {
 	justify-content: space-between;
 }
 
-footer ul {
+footer ul,
+header ul {
 	margin: 0;
 	padding: 0;
 	display: flex;
 	gap: 1em;
 }
 
-footer li {
+footer li,
+header li {
 	list-style: none;
 	opacity: .5;
 }
 
-footer li:hover {
+footer li:has(a):hover,
+header li:has(a):hover {
 	text-shadow: 0 0 1em, 0 0 3em;
 	opacity: 1;
 }
 
-footer a {
+footer a,
+header a {
 	color: var(--colour);
 	text-decoration: none;
+	cursor: pointer;
 }
 
 div#overlay {