2024-07-09 02:55:13 +02:00
|
|
|
// how to we communicate...
|
|
|
|
// * in flight
|
|
|
|
// * arrived! (probably) <- this is the tricky one. we know enough time has passed for the message
|
|
|
|
// * received to have been received, but we are only halfway to the earliest possible
|
|
|
|
// * read acknowledgement.
|
|
|
|
//
|
|
|
|
// we know the length of the roundtrip: it is 2x the light lag. progress bars show a passage of time,
|
|
|
|
// it could scroll:
|
|
|
|
// * along the bottom of the message
|
|
|
|
// * across the message
|
|
|
|
// * as it is being sent, a transluscent red bar grows from right to left (towards their messages)
|
|
|
|
// * while we are waiting for acknowledgement, a similar blue bar brows from left to right
|
|
|
|
// * next to the message
|
|
|
|
|
2024-07-08 01:00:09 +02:00
|
|
|
conversation = [
|
2024-07-09 02:55:13 +02:00
|
|
|
{ c: 1, text: "hows space"},
|
|
|
|
{ c: 0, text: "trying to work out if the coffees shit but"},
|
|
|
|
{ c: 0, text: "taste not happenin"},
|
|
|
|
{ c: 1, text: "maybe youre being spared"},
|
|
|
|
{ c: 0, text: "youre right"},
|
|
|
|
{ c: 0, text: "ship swill is a delicacy to no one"},
|
|
|
|
{ c: 0, text: "at least the caffeines doing its job"},
|
|
|
|
{ c: 1, text: "good to hear!"},
|
|
|
|
{ c: 1, text: "induction today wish me luckk"},
|
|
|
|
{ c: 0, text: "break a leg!"},
|
|
|
|
{ c: 1, text: ":)"}
|
2024-07-08 01:00:09 +02:00
|
|
|
];
|
|
|
|
|
|
|
|
let messageIdx = 1;
|
|
|
|
let title = "hester";
|
|
|
|
let pings = 0;
|
|
|
|
|
2024-07-09 02:55:13 +02:00
|
|
|
function getMessageList() {
|
|
|
|
return document.getElementById("messages");
|
|
|
|
}
|
|
|
|
|
|
|
|
function getMessageElement(messageIdx) {
|
|
|
|
let list = getMessageList();
|
|
|
|
let messageElements = list.getElementsByTagName("li");
|
|
|
|
return messageElements[messageIdx];
|
|
|
|
}
|
|
|
|
|
|
|
|
class SentMessage {
|
|
|
|
constructor(oneWayLag, idx) {
|
|
|
|
this.oneWayLag = oneWayLag;
|
|
|
|
this.idx = idx;
|
|
|
|
//this.content = conversation[idx].text;
|
|
|
|
this.createdTime = Date.now();
|
|
|
|
|
|
|
|
this.updateBarIntervalId = setInterval(() => {
|
|
|
|
let elapsed = Math.abs(Date.now() - this.createdTime) / 1000;
|
|
|
|
let progress = elapsed / this.oneWayLag;
|
|
|
|
|
|
|
|
// divide in half so we measure the round trip
|
|
|
|
progress /= 2;
|
|
|
|
|
|
|
|
this.setProgress(progress);
|
|
|
|
}, 10);
|
|
|
|
}
|
|
|
|
|
|
|
|
setProgress(amount) {
|
|
|
|
let thisMessage = getMessageElement(this.idx);
|
|
|
|
let progressBar = thisMessage.getElementsByClassName("progress")[0];
|
|
|
|
|
|
|
|
if (amount < 0.5) {
|
|
|
|
this.updateStatus("in flight");
|
|
|
|
progressBar.style.backgroundColor = "red";
|
|
|
|
amount *= 2;
|
|
|
|
}
|
|
|
|
else if (amount < 1) {
|
|
|
|
this.updateStatus("completing round trip");
|
|
|
|
progressBar.style.backgroundColor = "blue";
|
|
|
|
amount -= 0.5;
|
|
|
|
amount *= 2;
|
|
|
|
}
|
|
|
|
else {
|
|
|
|
this.updateStatus("delivered");
|
|
|
|
clearInterval(this.updateBarIntervalId);
|
|
|
|
amount = 0;
|
|
|
|
}
|
|
|
|
amount = Math.min(amount, 1);
|
|
|
|
let percentage = `${amount * 100}%`;
|
|
|
|
progressBar.style.width = percentage;
|
|
|
|
|
|
|
|
}
|
|
|
|
|
|
|
|
updateStatus(newStatus) {
|
|
|
|
let thisMessage = getMessageElement(this.idx);
|
|
|
|
let statusElement = thisMessage.getElementsByClassName("message-status")[0];
|
|
|
|
statusElement.innerHTML = newStatus;
|
|
|
|
}
|
|
|
|
}
|
|
|
|
|
2024-07-08 01:00:09 +02:00
|
|
|
function updateTextBox(message) {
|
2024-07-09 02:55:13 +02:00
|
|
|
document.getElementById("textbox-input").value = message;
|
2024-07-08 01:00:09 +02:00
|
|
|
}
|
|
|
|
|
|
|
|
// show messages up to index
|
|
|
|
function showMessages(idx) {
|
|
|
|
|
2024-07-09 02:55:13 +02:00
|
|
|
let messageList = getMessageList();
|
|
|
|
|
|
|
|
// TODO: rebuilding the DOM here clears this status of sent messages. instead of
|
|
|
|
// rebuilding it completely, append a new message onto the end of the inner html.
|
|
|
|
// TODO: is this also the juncture to clear the status of previous messages?
|
2024-07-08 01:00:09 +02:00
|
|
|
|
|
|
|
// clear current messages
|
|
|
|
messageList.innerHTML = "";
|
|
|
|
|
|
|
|
// inject messages into ul
|
|
|
|
for (let i = 0; i < idx; i++) {
|
2024-07-09 02:55:13 +02:00
|
|
|
let message = conversation[i];
|
|
|
|
messageList.innerHTML += getMessageHtml(message.text, isMessageOurs(message));
|
2024-07-08 01:00:09 +02:00
|
|
|
}
|
|
|
|
}
|
|
|
|
|
2024-07-09 02:55:13 +02:00
|
|
|
function getMessageHtml(text, isOurs) {
|
|
|
|
let owner = isOurs ? "ours" : "theirs";
|
|
|
|
|
|
|
|
// we don't want loading bars on their messages, since we have no idea if one has been sent
|
|
|
|
// until it arrives
|
|
|
|
let progressBar = isOurs
|
|
|
|
? `<div class="progress-bar"><div class="progress"></div></div>`
|
|
|
|
: "";
|
|
|
|
|
|
|
|
let statusText = isOurs
|
|
|
|
? `<p class="message-status">status</p>`
|
|
|
|
: "";
|
|
|
|
|
|
|
|
let message = `<li><div class="message">
|
|
|
|
<span class="message-content rounded-rectangle ${owner}">
|
|
|
|
${progressBar}
|
|
|
|
${text}
|
|
|
|
</span></div>${statusText}</li>`;
|
|
|
|
|
|
|
|
return message;
|
|
|
|
}
|
|
|
|
|
2024-07-08 01:00:09 +02:00
|
|
|
function isMessageOurs(message) {
|
|
|
|
if (!message)
|
|
|
|
return false;
|
|
|
|
|
|
|
|
return message.c == 0;
|
|
|
|
}
|
|
|
|
|
|
|
|
function getOurNextMessage(idx) {
|
|
|
|
for (let i = idx; i < conversation.length; i++) {
|
|
|
|
message = conversation[i];
|
|
|
|
if (isMessageOurs(message))
|
|
|
|
return message;
|
|
|
|
}
|
|
|
|
|
|
|
|
return null;
|
|
|
|
}
|
|
|
|
|
|
|
|
function getLightLag() {
|
|
|
|
lag = 3.0 + Math.sin(Date.now() / 10000);
|
2024-07-09 02:55:13 +02:00
|
|
|
return Math.round(lag * 10000) / 10000;
|
2024-07-08 01:00:09 +02:00
|
|
|
}
|
|
|
|
|
|
|
|
function updatePings() {
|
|
|
|
let newTitle = pings > 0
|
|
|
|
? `(${pings}) ${title}`
|
|
|
|
: title;
|
|
|
|
|
|
|
|
document.title = newTitle;
|
|
|
|
}
|
|
|
|
|
|
|
|
function clearPings() {
|
|
|
|
pings = 0;
|
|
|
|
updatePings();
|
|
|
|
}
|
|
|
|
|
|
|
|
function getResponses(idx) {
|
|
|
|
// get the messages that aren't ours until we find one that is
|
|
|
|
let responses = [];
|
|
|
|
|
|
|
|
for (let i = idx; i < conversation.length; i++) {
|
|
|
|
message = conversation[i];
|
|
|
|
if (isMessageOurs(message))
|
|
|
|
break;
|
|
|
|
|
|
|
|
responses.push(message);
|
|
|
|
}
|
|
|
|
|
|
|
|
return responses;
|
|
|
|
}
|
|
|
|
|
|
|
|
function updateChat(messageIdx) {
|
|
|
|
showMessages(messageIdx);
|
|
|
|
updatePreviewText(messageIdx);
|
|
|
|
updatePings();
|
|
|
|
}
|
|
|
|
|
|
|
|
function waitForIncomingMessages() {
|
|
|
|
// we don't want messages to arrive all at once if there are multiple messages,
|
|
|
|
// so we need to add a small delay to consecutive messages and wait for them one by one
|
|
|
|
let smallDelay = 2;
|
|
|
|
let responses = getResponses(messageIdx);
|
|
|
|
let lightLag = getLightLag();
|
|
|
|
|
|
|
|
for (let i = 0; i < responses.length; i++) {
|
|
|
|
let delaySeconds = lightLag + smallDelay * i;
|
|
|
|
|
|
|
|
setTimeout(() => {
|
|
|
|
messageIdx++;
|
|
|
|
pings++;
|
|
|
|
|
2024-07-09 02:55:13 +02:00
|
|
|
// update the chat with their message
|
2024-07-08 01:00:09 +02:00
|
|
|
updateChat(messageIdx);
|
|
|
|
}, delaySeconds * 1000);
|
|
|
|
}
|
|
|
|
}
|
|
|
|
|
|
|
|
function updatePreviewText(messageIdx) {
|
|
|
|
// display our next message or an empty box
|
|
|
|
let nextMessage = conversation[messageIdx];
|
|
|
|
let previewText = isMessageOurs(nextMessage)
|
2024-07-09 02:55:13 +02:00
|
|
|
? conversation[messageIdx].text
|
2024-07-08 01:00:09 +02:00
|
|
|
: "";
|
|
|
|
updateTextBox(previewText);
|
|
|
|
}
|
|
|
|
|
2024-07-09 02:55:13 +02:00
|
|
|
function sendOurMessage() {
|
|
|
|
// the message we are sending is the one currently in the text box, so we should construct it
|
|
|
|
// before advancing the conversation
|
|
|
|
let oneWayLag = getLightLag();
|
|
|
|
let currentMessage = conversation[messageIdx];
|
|
|
|
let sentMessage = new SentMessage(oneWayLag, messageIdx);
|
|
|
|
console.log(sentMessage);
|
2024-07-08 01:00:09 +02:00
|
|
|
|
2024-07-09 02:55:13 +02:00
|
|
|
// message.send()
|
|
|
|
// when we send the message, we want to start an interval that updates the progress animation
|
|
|
|
// message.setProgress() should be a private method that updates the appropriate element
|
2024-07-08 01:00:09 +02:00
|
|
|
|
2024-07-09 02:55:13 +02:00
|
|
|
// advance conversation with our next message
|
2024-07-08 01:00:09 +02:00
|
|
|
messageIdx++;
|
2024-07-09 02:55:13 +02:00
|
|
|
nextMessage = conversation[messageIdx];
|
|
|
|
|
2024-07-08 01:00:09 +02:00
|
|
|
// if the next message is not ours, we need to wait for it: set off a thread that
|
|
|
|
// will update the message index and the displayed messages in a few seconds
|
|
|
|
// we are still waiting to receive messages so pressing the button oughtn't do anything
|
2024-07-09 02:55:13 +02:00
|
|
|
if (!isMessageOurs(nextMessage)) {
|
2024-07-08 01:00:09 +02:00
|
|
|
waitForIncomingMessages();
|
|
|
|
}
|
|
|
|
|
|
|
|
updateChat(messageIdx);
|
|
|
|
}
|
|
|
|
|
2024-07-09 02:55:13 +02:00
|
|
|
function pressSendButton() {
|
|
|
|
// we have interacted with the page so remove all pings
|
|
|
|
clearPings();
|
|
|
|
|
|
|
|
// peek conversation state
|
|
|
|
let nextMessage = conversation[messageIdx];
|
|
|
|
|
|
|
|
// we are still waiting to receive messages so pressing the button oughtn't do anything
|
|
|
|
if (!isMessageOurs(nextMessage))
|
|
|
|
return;
|
|
|
|
|
|
|
|
sendOurMessage();
|
|
|
|
}
|
|
|
|
|
|
|
|
function updateLightLag() {
|
|
|
|
let text = getLightLag().toFixed(5) + " seconds";
|
|
|
|
document.getElementById("delay-text").innerHTML = text;
|
2024-07-08 01:00:09 +02:00
|
|
|
}
|
|
|
|
|
|
|
|
function startLightLagUpdateLoop() {
|
|
|
|
setInterval(() => {
|
2024-07-09 02:55:13 +02:00
|
|
|
updateLightLag();
|
2024-07-08 01:00:09 +02:00
|
|
|
}, 1000);
|
|
|
|
}
|
|
|
|
|
|
|
|
function init() {
|
|
|
|
showMessages(messageIdx);
|
|
|
|
// load the first message into the text box
|
2024-07-09 02:55:13 +02:00
|
|
|
updateTextBox(conversation[messageIdx].text);
|
2024-07-08 01:00:09 +02:00
|
|
|
pings = 1;
|
|
|
|
|
|
|
|
document.title = title;
|
|
|
|
|
|
|
|
updateLightLag(0);
|
|
|
|
startLightLagUpdateLoop();
|
|
|
|
}
|
|
|
|
|
|
|
|
init();
|
|
|
|
|