fixed scrolling and buffer times- oh yeah also huge backend overhual
This commit is contained in:
parent
1eeb632ff2
commit
524969370d
GPG key ID:
CF99829C92678188
3 changed files with 250 additions and 99 deletions
|
|
@ -1,11 +1,22 @@
|
|||
var buffer = "";
|
||||
var send_buffer = "";
|
||||
var recv_buffer = [];
|
||||
var send_buffer = [];
|
||||
|
||||
var content;
|
||||
var mobile_input;
|
||||
|
||||
var client;
|
||||
|
||||
var my_colour = false;
|
||||
var pre_buffer_chars = 0;
|
||||
var term_interval = 10;
|
||||
var ready = false;
|
||||
|
||||
const DATA_TYPES = {
|
||||
text: 0,
|
||||
colour: 1,
|
||||
buffer: 2,
|
||||
backspace: 3,
|
||||
backword: 4,
|
||||
arrow: 5,
|
||||
};
|
||||
|
||||
function start() {
|
||||
console.log("%chello, world!", "color: #b7fd49; font-size: 3rem; font-weight: bold");
|
||||
|
|
@ -34,74 +45,115 @@ to help you feel a little more comfortable, i've prepared some commands for you:
|
|||
content = document.getElementById("content");
|
||||
mobile_input = document.getElementById("mobile-input");
|
||||
|
||||
content.addEventListener("click", () => {
|
||||
content.addEventListener("touchend", () => {
|
||||
mobile_input.focus();
|
||||
});
|
||||
|
||||
buffer += "Connecting to the server...";
|
||||
add_system_message("Connecting to the server...");
|
||||
|
||||
setTimeout(connect, 500);
|
||||
|
||||
setInterval(() => {
|
||||
if (send_buffer.length > 0) {
|
||||
const data = JSON.stringify(send_buffer[0]);
|
||||
client.send(data);
|
||||
send_buffer = send_buffer.slice(1);
|
||||
}
|
||||
}, 1000 / 600);
|
||||
|
||||
loop();
|
||||
}
|
||||
|
||||
function loop() {
|
||||
if (buffer.length > 0) {
|
||||
const char = buffer.substring(0, 1);
|
||||
insert_text(char);
|
||||
buffer = buffer.substring(1);
|
||||
}
|
||||
|
||||
if (send_buffer.length > 0) {
|
||||
const char = send_buffer.substring(0, 1);
|
||||
client.send(char);
|
||||
send_buffer = send_buffer.substring(1);
|
||||
}
|
||||
|
||||
mobile_input.value = content.innerText;
|
||||
|
||||
setTimeout(loop, term_interval);
|
||||
setTimeout(loop, 1000 / 60);
|
||||
}
|
||||
|
||||
function connect() {
|
||||
client = new WebSocket("wss://" + window.location.host);
|
||||
|
||||
client.addEventListener('open', () => {
|
||||
// insert_text('\x00');
|
||||
buffer += "\nConnection successful.\n\n";
|
||||
buffer += "=== BEGIN SESSION ===\n\n";
|
||||
add_system_message(`\nConnection successful.\n\n`);
|
||||
add_system_message(`=== BEGIN SESSION ===\n\n`);
|
||||
new_caret();
|
||||
});
|
||||
|
||||
client.addEventListener('message', event => {
|
||||
buffer += event.data;
|
||||
if (pre_buffer_chars == 0) {
|
||||
pre_buffer_chars = content.innerText.length + buffer.length;
|
||||
}
|
||||
});
|
||||
client.addEventListener('message', event => { handle_message(JSON.parse(event.data)) });
|
||||
|
||||
client.addEventListener('close', () => {
|
||||
insert_text("\n\n[CONNECTION LOST, PLEASE REFRESH]");
|
||||
add_system_message(`\n[CONNECTION LOST, PLEASE REFRESH]\n`);
|
||||
});
|
||||
}
|
||||
|
||||
function insert_text(text) {
|
||||
const carat = content.querySelector("#carat");
|
||||
if (carat) carat.remove();
|
||||
function add_system_message(text) {
|
||||
const span = document.createElement("span");
|
||||
span.classList.add('sticky');
|
||||
span.innerText = text;
|
||||
content.appendChild(span);
|
||||
|
||||
if (text == "\x00") {
|
||||
content.innerText = "";
|
||||
pre_buffer_chars = 0;
|
||||
} else if (text == "\b") {
|
||||
if (content.innerText.length > pre_buffer_chars) {
|
||||
new_caret();
|
||||
}
|
||||
|
||||
function handle_message(data) {
|
||||
if (!data.type && data.type != 0) return;
|
||||
|
||||
const is_at_bottom = content.scrollTop == content.scrollTopMax;
|
||||
|
||||
switch (data.type) {
|
||||
case DATA_TYPES.colour:
|
||||
my_colour = data.colour;
|
||||
console.log(`%cColour has been changed to ${my_colour}`, `color: ${my_colour}`);
|
||||
break;
|
||||
case DATA_TYPES.backspace:
|
||||
content.querySelectorAll("#caret").forEach(caret => caret.remove());
|
||||
/*
|
||||
const last_child = content.lastChild;
|
||||
if (last_child.classList.contains('sticky')) break;
|
||||
last_child.remove();
|
||||
*/
|
||||
if (content.innerText.length <= pre_buffer_chars) {
|
||||
break;
|
||||
}
|
||||
content.innerText = content.innerText.slice(0, content.innerText.length - 1);
|
||||
}
|
||||
} else {
|
||||
content.innerText += text;
|
||||
}
|
||||
break;
|
||||
case DATA_TYPES.text:
|
||||
/*
|
||||
const span = document.createElement("span");
|
||||
if (data.colour) span.style.color = data.colour;
|
||||
if (data.sticky) span.classList.add('sticky');
|
||||
span.innerText = data.text;
|
||||
content.appendChild(span);
|
||||
*/
|
||||
content.innerText += data.text;
|
||||
break;
|
||||
case DATA_TYPES.buffer:
|
||||
content.innerText += data.data;
|
||||
break;
|
||||
/*
|
||||
data.data.forEach(block => {
|
||||
handle_message(block);
|
||||
});
|
||||
*/
|
||||
}
|
||||
|
||||
const new_carat = document.createElement("div");
|
||||
new_carat.id = "carat";
|
||||
content.appendChild(new_carat);
|
||||
if (pre_buffer_chars == 0) {
|
||||
pre_buffer_chars = content.innerText.length;
|
||||
}
|
||||
|
||||
new_caret();
|
||||
|
||||
if (is_at_bottom) content.scrollTop = content.scrollTopMax;
|
||||
}
|
||||
|
||||
function new_caret() {
|
||||
content.querySelectorAll("#caret").forEach(caret => caret.remove());
|
||||
const new_caret = document.createElement("div");
|
||||
new_caret.id = "caret";
|
||||
if (my_colour) {
|
||||
new_caret.style.backgroundColor = my_colour;
|
||||
}
|
||||
content.appendChild(new_caret);
|
||||
}
|
||||
|
||||
function handle_input(event) {
|
||||
|
|
@ -109,38 +161,77 @@ function handle_input(event) {
|
|||
event.preventDefault();
|
||||
}
|
||||
|
||||
if (event.key == "Backspace") {
|
||||
if (event.ctrlKey && send_buffer.length == 0) {
|
||||
const last_space = content.innerText.lastIndexOf(" ");
|
||||
const last_newline = content.innerText.lastIndexOf("\n");
|
||||
|
||||
var break_at = last_space;
|
||||
if (last_newline > last_space) {
|
||||
break_at = last_newline;
|
||||
}
|
||||
|
||||
const word_length = content.innerText.length - break_at;
|
||||
for (let i = 0; i < word_length; i++) {
|
||||
send_buffer += '\b';
|
||||
switch (event.key) {
|
||||
case "Backspace":
|
||||
if (event.ctrlKey) {
|
||||
if (send_buffer.length > 0) return;
|
||||
/*
|
||||
send_buffer.push({
|
||||
type: DATA_TYPES.backword,
|
||||
});
|
||||
*/
|
||||
var break_point = content.innerText.lastIndexOf(" ");
|
||||
const last_newline = content.innerText.lastIndexOf("\n");
|
||||
if (last_newline > break_point) break_point = last_newline;
|
||||
const count = content.innerText.length - break_point;
|
||||
for (var i = 0; i < count; i++) {
|
||||
send_buffer.push({
|
||||
type: DATA_TYPES.backspace,
|
||||
});
|
||||
}
|
||||
return;
|
||||
}
|
||||
send_buffer.push({
|
||||
type: DATA_TYPES.backspace,
|
||||
});
|
||||
return;
|
||||
case "Enter":
|
||||
send_buffer.push({
|
||||
type: DATA_TYPES.text,
|
||||
text: "\n",
|
||||
});
|
||||
return;
|
||||
case "ArrowUp":
|
||||
send_buffer.push({
|
||||
type: DATA_TYPES.arrow,
|
||||
dir: "up",
|
||||
});
|
||||
return;
|
||||
case "ArrowDown":
|
||||
send_buffer.push({
|
||||
type: DATA_TYPES.arrow,
|
||||
dir: "down",
|
||||
});
|
||||
return;
|
||||
case "ArrowLeft":
|
||||
send_buffer.push({
|
||||
type: DATA_TYPES.arrow,
|
||||
dir: "left",
|
||||
});
|
||||
return;
|
||||
case "ArrowRight":
|
||||
send_buffer.push({
|
||||
type: DATA_TYPES.arrow,
|
||||
dir: "right",
|
||||
});
|
||||
return;
|
||||
}
|
||||
send_buffer += '\b';
|
||||
return;
|
||||
}
|
||||
if (event.key == "Enter") {
|
||||
send_buffer += '\n';
|
||||
return;
|
||||
}
|
||||
|
||||
if (event.key.length > 1) {
|
||||
// server will discard text over 1 character, anyway
|
||||
return;
|
||||
}
|
||||
|
||||
if (event.ctrlKey) {
|
||||
return;
|
||||
}
|
||||
|
||||
send_buffer += event.key;
|
||||
content.scrollTop = content.scrollHeight;
|
||||
send_buffer.push({
|
||||
type: DATA_TYPES.text,
|
||||
text: event.key,
|
||||
});
|
||||
|
||||
content.scrollTop = content.scrollTopMax;
|
||||
}
|
||||
|
||||
function handle_paste(event) {
|
||||
|
|
@ -151,8 +242,11 @@ function handle_paste(event) {
|
|||
}
|
||||
|
||||
const paste = (event.clipboardData || window.clipboardData).getData("text");
|
||||
send_buffer += paste;
|
||||
content.scrollTop = content.scrollHeight;
|
||||
send_buffer.push({
|
||||
type: DATA_TYPES.text,
|
||||
text: paste,
|
||||
});
|
||||
content.scrollTop = content.scrollTopMax;
|
||||
}
|
||||
|
||||
const PALETTE = {
|
||||
|
|
|
|||
Loading…
Add table
Add a link
Reference in a new issue