shift/main.js

// 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

conversation = [
    { c: 1, text: "hows space"},
    { c: 0, text: "trying to work out if the coffees shit but"},
    { c: 0, text: "my sense of taste is just not happening :/"},
    { c: 1, text: "maybe you're being spared"},
    { c: 0, text: "ur right"},
    { c: 0, text: "ship swill is a delicacy to exactly no one"},
    { c: 0, text: "at least the caffeine still works"},
    { c: 1, text: "lol"},
    { c: 1, text: "you probably got your own stash for later though, right?"},
    { c: 1, text: "knowing you"},
    { c: 0, text: "oh yea i got some on nimbus"},
    { c: 0, text: "donchuu worry"},
    { c: 0, text: "how about you?"},
    { c: 0, text: "new job soon, right?"},
    { c: 1, text: "induction tomorrow wish me luckk"},
    { c: 0, text: "break a leg!"},
    { c: 1, text: ":)"}
];

sentMessages = []
let messageIdx = -1;
let title = "Hester Gomez";
let pings = 0;
const startTime = Date.now();

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, onDelivered) {
        this.oneWayLag = oneWayLag;
        this.idx = idx;
        this.createdTime = Date.now();
        this.onDelivered = onDelivered;

        this.updateBarIntervalId = setInterval(() => {
            let elapsed = Math.abs(Date.now() - this.createdTime) / 1000;
            let progress = elapsed / this.oneWayLag;

            // divide in half to 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) {
            const color = "var(--light-red)";
            this.updateStatus("in flight", color);
            progressBar.style.backgroundColor = color;
            amount *= 2;
        }
        else if (amount < 1) {
            const color = "var(--robin-egg-blue)";
            this.updateStatus("completing round trip", color);
            progressBar.style.backgroundColor = color;
            amount -= 0.5;
            amount *= 2;
        }
        else {
            const color = "var(--eggshell)";
            this.updateStatus("delivered", color);
            progressBar.style.backgroundColor = color;
            clearInterval(this.updateBarIntervalId);
            amount = 0;
            this.onDelivered();
        }
        amount = Math.min(amount, 1);
        let percentage = `${amount * 100}%`;
        progressBar.style.width = percentage;
    }

    updateStatus(newStatus, color) {
        let thisMessage = getMessageElement(this.idx);
        let statusElement = thisMessage.getElementsByClassName("message-status")[0];
        statusElement.innerHTML = newStatus;
        statusElement.style.color = color;
    }
}

function updateTextBox(message) {
    document.getElementById("textbox-input").value = message;
}

function setTypingIndicator(isTyping) {
    document.getElementById("typing-indicator").innerHTML = isTyping
        ? "Hester is typing..."
        : "";
}

// add the message at the index to the displayed messages
function addMessage(idx) {
    let message = conversation[idx];
    let messageHtml = getMessageHtml(message.text, isMessageOurs(message));
    getMessageList().innerHTML += messageHtml;
    
    // scroll as far as we can so that messages aren't hidden
    window.scrollTo(0, document.body.scrollHeight);
}

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}
                <span class="message-text">${text}</span>
            </span></div>${statusText}</li>`;

    return message;
}

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() {
    const baseLag = 9.23582;

    // second since opening the page
    const elapsed = (Date.now() - startTime) / 1000.5;

    // lag should shift on the order of 10,000ths of seconds per second
    const lag = baseLag + elapsed / 8439.123;
    return Math.round(lag * 100000) / 100000;
}

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 getRandomDelay(min, max) {
    const range = max - min;
    return min + Math.random() * range;
}

function updateChat(messageIdx) {
    addMessage(messageIdx);
    const nextMessage = conversation[messageIdx+1];
    updatePreviewText(nextMessage);
    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 = getRandomDelay(2, 10);
    let responses = getResponses(messageIdx + 1);
    let lightLag = getLightLag();
    
    setTimeout(() => {
        setTypingIndicator(true);

        for (let i = 0; i < responses.length; i++) {
            let delaySeconds = lightLag + smallDelay * i;

            const stopTyping = i == responses.length - 1;

            setTimeout(() => {
                messageIdx++;
                pings++;

                // update the chat with their message
                updateChat(messageIdx);

                if (stopTyping) {
                    setTypingIndicator(false);
                }

            }, delaySeconds * 1000);
        }
    },getRandomDelay(1, 3));
}

function updatePreviewText(message) {
    // display our next message or an empty box
    let previewText = isMessageOurs(message)
        ? message.text
        : "";
    updateTextBox(previewText);
}

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 nextMessage = conversation[messageIdx + 2];

    let sentMessage = new SentMessage(oneWayLag, messageIdx + 1, () => {

        // if the next message is ours we don't need to wait for anything
        if (isMessageOurs(nextMessage))
            return;

        // wait for them to read the message
        setTimeout(() => {
            // set the message status to read
            sentMessage.updateStatus("read");

            // hide the status of previous messages we first need to have references to all of them
            // when creating messages we need to add these too an array
            for (let i = 0; i < sentMessages.length; i++) {
                let message = sentMessages[i];
                if (message != sentMessage) {
                    message.updateStatus("");
                }
            }

            waitForIncomingMessages();
        }, getRandomDelay(1, 20) * 1000);
    });
    sentMessages.push(sentMessage);

    // advance conversation with our next message
    messageIdx++;

    // update displayed messages
    updateChat(messageIdx);
}

function pressSendButton() {
    // we have interacted with the page so remove all pings
    clearPings();

    // peek conversation state
    let nextMessage = conversation[messageIdx + 1];

    // 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;
}

function startLightLagUpdateLoop() {
    setInterval(() => {
        updateLightLag();
    }, 1000);
}

function init() {
    setTimeout(() => {
        messageIdx = 0;
        pings = 1;
        updateChat(messageIdx);
        setTypingIndicator(false);
    }, 3623);

    document.title = title;

    updateLightLag(0);
    startLightLagUpdateLoop();
}

init();