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 {