ari/OpenTerminal
ari/OpenTerminal
1
0
Fork 0
Code Issues Pull requests Packages Projects Releases 1 Wiki Activity

added server indicator and connect button to header

Browse source
This commit is contained in:
mellodoot 2023-10-02 13:56:26 +01:00
parent f8aabee1cc
commit 221e5b9147
4 changed files with 60 additions and 20 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

6
public/index.html
View file

@ -24,6 +24,12 @@
</head> </head>
<body> <body>
<header>
<ul>
<li id="server-url">not connected</li>
<li><a id="connect">connect</a></li>
</ul>
</header>
<main> <main>
<pre id="content"></pre> <pre id="content"></pre>
<input type="text" id="mobile-input"> <input type="text" id="mobile-input">

6
public/scripts/main.js
View file

@ -4,5 +4,11 @@ import * as Visual from "./visual.js";
document.addEventListener("DOMContentLoaded", () => { document.addEventListener("DOMContentLoaded", () => {
Visual.bind(); Visual.bind();
Terminal.start(); 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);
});
}); });

48
public/scripts/terminal.js
View file

@ -2,6 +2,7 @@ var recv_buffer = [];
var send_buffer = []; var send_buffer = [];
var content; var content;
var server_indicator;
var mobile_input; var mobile_input;
var client; 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"); content = document.getElementById("content");
server_indicator = document.getElementById("server-url");
mobile_input = document.getElementById("mobile-input"); mobile_input = document.getElementById("mobile-input");
document.addEventListener("keydown", handle_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(); mobile_input.focus();
}); });
add_system_message("Connecting to the server...");
setTimeout(connect, 500);
setInterval(() => { setInterval(() => {
if (!client || !client.readyState == 1) return;
if (send_buffer.length > 0) { if (send_buffer.length > 0) {
const data = JSON.stringify(send_buffer[0]); const data = JSON.stringify(send_buffer[0]);
client.send(data); client.send(data);
@ -75,20 +74,37 @@ to help you feel a little more comfortable, i've prepared some commands for you:
} }
}, 1000 / 600); }, 1000 / 600);
loop(); setInterval(() => {
}
function loop() {
mobile_input.value = content.innerText; mobile_input.value = content.innerText;
}, 1000 / 60);
setTimeout(loop, 1000 / 60); connect(new URL(window.location).searchParams.get("server") || window.location.host);
} }
function connect() { export async function connect(server_url) {
client = new WebSocket("wss://" + server_url); if (client && client.readyState == 1) { // OPEN
client.close();
await new Promise((resolve) => {
setInterval(() => {
if (client.readyState == 3) {
resolve();
}
}, 100);
});
}
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', () => { 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`); add_system_message(`=== BEGIN SESSION ===\n\n`);
new_caret(); new_caret();
}); });
@ -96,7 +112,13 @@ function connect() {
client.addEventListener('message', event => { handle_message(JSON.parse(event.data)) }); client.addEventListener('message', event => { handle_message(JSON.parse(event.data)) });
client.addEventListener('close', () => { 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");
}); });
} }

20
public/styles/main.css
View file

@ -13,12 +13,12 @@ body {
} }
main { main {
margin: 1rem 1rem 0 1rem; margin: 0 1rem;
border: 1px solid var(--colour); border: 1px solid var(--colour);
} }
pre#content { pre#content {
height: calc(100vh - 5rem); height: calc(100vh - 6rem);
margin: 0; margin: 0;
padding: 1rem; padding: 1rem;
overflow-x: hidden; overflow-x: hidden;
@ -46,7 +46,8 @@ div#caret {
} }
} }
footer { footer,
header {
height: 18px; height: 18px;
padding: .5em 2em; padding: .5em 2em;
display: flex; display: flex;
@ -55,26 +56,31 @@ footer {
justify-content: space-between; justify-content: space-between;
} }
footer ul { footer ul,
header ul {
margin: 0; margin: 0;
padding: 0; padding: 0;
display: flex; display: flex;
gap: 1em; gap: 1em;
} }
footer li { footer li,
header li {
list-style: none; list-style: none;
opacity: .5; opacity: .5;
} }
footer li:hover { footer li:has(a):hover,
header li:has(a):hover {
text-shadow: 0 0 1em, 0 0 3em; text-shadow: 0 0 1em, 0 0 3em;
opacity: 1; opacity: 1;
} }
footer a { footer a,
header a {
color: var(--colour); color: var(--colour);
text-decoration: none; text-decoration: none;
cursor: pointer;
} }
div#overlay { div#overlay {