feat: extract conversation data to json

chore: add doctype
refactor: extract Conversation class
2024-07-17 00:22:20 +01:00 · 2024-07-17 00:21:57 +01:00 · 2024-07-16 00:20:18 +01:00 · 2024-07-12 00:49:36 +01:00 · 2024-07-12 00:39:41 +01:00 · 2024-07-12 00:39:01 +01:00
5 changed files with 368 additions and 225 deletions
--- a/feedback.md
+++ b/feedback.md
@ -0,0 +1,47 @@
+0.1 feedback
+
+* didn't know we were in space and hester was on earth
+* not obvious that needed to click the send button (clicking message bar does nothing)
+* start messages just about the message bar
+* messages look a bit uggy
+* out-of-order messages would be cool
+* this could synergise extremely well with ai
+* very tiny mobile interface
+
+(internal)
+* refactor messages, message index - shit is way confusing. we should instead start from a list of message objects and generate the conversation DOM from that, instead of searching through it all the time.
+
+0.2
+
+personal notes
+
+a new conversation, this time with someone on the ship.
+they want you to come and do something - you complain, but eventually concede, where the conversation ends
+
+
+* tutorialisation
+    * add a 'help' or 'information' thing to explain how light lag works
+        * in simple terms - not everyone is a physicist!
+
+* styling and layout
+    * add ballad branding
+    * refine the message styling to be less uggy
+    * redesign progress bar - different lengths for different messages is confusing
+    * header should remain fixed to top of screen
+    * [bug] messages appear on top of typing indicator
+    * multiline message should stay the same distance apart from one another instead of having a constant difference between <li> elements
+
+* conversations 
+    * add more
+        * selection sidebar
+        * update page title with name of current conversation
+        * notifications should count all conversations
+        * multiple light lags
+    * add replies!
+    * behaviour
+        * messages could be read without the other person replying
+        * the other person could start typing a message and stop at any time
+        * clicking/tapping on the input field should send the message, if there is one to send
+        * pressing enter should send the message, if there is one to send
+        * [debugging] waiting for stuff takes ages, it should be easy to set all delays to zero and be able to rapidly spam through a conversation
+        * start conversations several messages in
--- a/hester.json
+++ b/hester.json
@ -0,0 +1,20 @@
+[
+    { "character": 1, "text": "hows space"},
+    { "character": 0, "text": "trying to work out if the coffees shit but"},
+    { "character": 0, "text": "my sense of taste is just not happening :/"},
+    { "character": 1, "text": "maybe you're being spared"},
+    { "character": 0, "text": "ur right"},
+    { "character": 0, "text": "ship swill is a delicacy to exactly no one"},
+    { "character": 0, "text": "at least the caffeine still works"},
+    { "character": 1, "text": "lol"},
+    { "character": 1, "text": "you probably got your own stash for later though, right?"},
+    { "character": 1, "text": "knowing you"},
+    { "character": 0, "text": "oh yea i got some on nimbus"},
+    { "character": 0, "text": "donchuu worry"},
+    { "character": 0, "text": "how about you?"},
+    { "character": 0, "text": "new job soon, right?"},
+    { "character": 1, "text": "induction tomorrow wish me luckk"},
+    { "character": 0, "text": "break a leg!"},
+    { "character": 1, "text": ":)"}
+]
+
--- a/index.html
+++ b/index.html
@ -1,6 +1,8 @@
+<!doctype html>
 <html>
 <head>
    <link rel="stylesheet" href="styles.css"/>
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
 </head>
 <body>

--- a/main.js
+++ b/main.js
@ -1,59 +1,210 @@
-// 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();

+var conversation = null;
+
+class Conversation {
+    constructor(messageData, contactName, onMessageReceived, onMessageSent) {
+        this.messageData = messageData;
+        this.contactName = contactName;
+
+        this.messageIdx = -1;
+        // contains both sent and received messages
+        this.messages = [];
+
+        // callbacks
+        this.onMessageReceived = onMessageReceived;
+        this.onMessageSent = onMessageSent;
+    }
+
+    start() {
+        setTimeout(() => {
+            this.messageIdx = 0;
+            this.pings = 1;
+
+            const data = this.messageData[this.messageIdx];
+            const message = new ReceivedMessage(data);
+            this.messages.push(message);
+            this.onMessageReceived(message);
+        }, 3623);
+    }
+
+    peekNextMessageData() {
+        return this.messageData[this.messageIdx + 1];
+    }
+
+    // get the text typed into the text box, ready to be sent. this could be blank
+    getTypedMessageText() {
+        const messageData = this.peekNextMessageData();
+        return this.isMessageDataOurs(messageData) ? messageData.text : "";
+    }
+
+    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;
+    }
+
+    sendMessage() {
+        // bail out if the next message isn't ours
+        const sentMessageData = this.messageData[this.messageIdx + 1];
+        if (!this.isMessageDataOurs(sentMessageData))
+            return;
+
+        // TODO: error checking? what if we can't send our next message?
+
+        // the message we are sending is the one currently in the text box, so we should construct it
+        // before advancing the conversation
+        let oneWayLag = this.getLightLag();
+        let currentMessage = this.messageData[this.messageIdx];
+        let nextMessage = this.messageData[this.messageIdx + 2];
+
+        let sentMessage = new SentMessage(sentMessageData, oneWayLag, this.messageIdx + 1, () => {
+            // if the next message is ours we don't need to wait for anything
+            if (this.isMessageDataOurs(nextMessage))
+                return;
+
+            // wait for them to read the message
+            setTimeout(() => {
+                this.onMessageRead(sentMessage);
+            }, getRandomDelay(1, 20) * 1000);
+        });
+
+        this.messages.push(sentMessage);
+
+        // advance conversation with our next message
+        this.messageIdx++;
+
+        this.onMessageSent(sentMessage);
+    }
+
+    onMessageRead(sentMessage) {
+        // set the message status to read
+        sentMessage.updateStatus("read");
+
+        // we only want to count our messages
+        const sentMessages = this.messages.filter(m => m.getIsOurs());
+        // 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++) {
+            const message = sentMessages[i];
+            if (message != sentMessage) {
+                message.updateStatus("");
+            }
+        }
+
+        this.waitForIncomingMessages();
+    }
+
+    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 = this.getResponses(this.messageIdx + 1);
+        let lightLag = this.getLightLag();
+        
+        setTimeout(() => {
+            setTypingIndicator(true);
+    
+            if (responses.length == 0) {
+                console.error("got no responses?");
+            }
+
+            for (let i = 0; i < responses.length; i++) {
+                let delaySeconds = lightLag + smallDelay * i;
+    
+                const stopTyping = i == responses.length - 1;
+    
+                setTimeout(() => {
+                    this.messageIdx++;
+                    this.pings++;
+    
+                    // update the chat with their message
+                    const data = this.messageData[this.messageIdx];
+                    const message = new ReceivedMessage(data);
+                    updateChat(message);
+    
+                    if (stopTyping) {
+                        setTypingIndicator(false);
+                    }
+    
+                }, delaySeconds * 1000);
+            }
+        },getRandomDelay(1, 3));
+    }
+
+    getResponses(idx) {
+        // get the messages that aren't ours until we find one that is
+        let responses = [];
+
+        for (let i = idx; i < this.messageData.length; i++) {
+            const message = this.messageData[i];
+            if (this.isMessageDataOurs(message))
+                break;
+
+            responses.push(message);
+        }
+
+        return responses;
+    }
+
+    // TODO: messages could be instantiated when the conversation is started to remove the isMessageOurs
+    // query on the raw data?
+    // however, this would mean that we would need to determine the light delay dynamically when sending
+    // the message, instead of on construction. this might not be a bad thing? but seems like a later
+    // problem
+    // for now, we should see to it that message ownership is determined only in the context of a specific
+    // conversation
+    isMessageDataOurs(messageData) {
+        if (!messageData)
+            return false;
+
+        return messageData.character == 0;
+    }
+}
+
 function getMessageList() {
    return document.getElementById("messages");
 }

+// TODO: messges should reference their own elements to remove the need for searching through
+// the DOM
 function getMessageElement(messageIdx) {
    let list = getMessageList();
    let messageElements = list.getElementsByTagName("li");
    return messageElements[messageIdx];
 }

+class ReceivedMessage {
+    constructor(data) {
+        this.text = data.text;
+    }
+
+    getIsOurs() {
+        return false;
+    }
+
+    getHtml() {
+        return `<li><div class="message">
+            <span class="message-content rounded-rectangle theirs">
+                <span class="message-text">${this.text}</span>
+            </span></div></li>`;
+    }
+}
+
 class SentMessage {
-    constructor(oneWayLag, idx, onDelivered) {
+    constructor(data, oneWayLag, idx, onDelivered) {
        this.oneWayLag = oneWayLag;
+        // TODO: remove idx reference - why should a message know where it sits in a conversation?
+        // indexing should be the responsibility of the conversation
        this.idx = idx;
        this.createdTime = Date.now();
        this.onDelivered = onDelivered;
+        this.text = data.text;

        this.updateBarIntervalId = setInterval(() => {
            let elapsed = Math.abs(Date.now() - this.createdTime) / 1000;
@ -66,23 +217,39 @@ class SentMessage {
        }, 10);
    }

+    getIsOurs() {
+        return true;
+    }
+
+    getHtml() {
+        return `<li><div class="message">
+            <span class="message-content rounded-rectangle ours">
+                <div class="progress-bar"><div class="progress"></div></div>
+                <span class="message-text">${this.text}</span>
+            </span></div><p class="message-status">status</p></li>`;
+    }
+
    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";
+            const color = "var(--light-red)";
+            this.updateStatus("in flight", color);
+            progressBar.style.backgroundColor = color;
            amount *= 2;
        }
        else if (amount < 1) {
-            this.updateStatus("completing round trip");
-            progressBar.style.backgroundColor = "blue";
+            const color = "var(--robin-egg-blue)";
+            this.updateStatus("completing round trip", color);
+            progressBar.style.backgroundColor = color;
            amount -= 0.5;
            amount *= 2;
        }
        else {
-            this.updateStatus("delivered");
+            const color = "var(--eggshell)";
+            this.updateStatus("delivered", color);
+            progressBar.style.backgroundColor = color;
            clearInterval(this.updateBarIntervalId);
            amount = 0;
            this.onDelivered();
@ -92,17 +259,14 @@ class SentMessage {
        progressBar.style.width = percentage;
    }

-    updateStatus(newStatus) {
+    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..."
@ -110,44 +274,13 @@ function setTypingIndicator(isTyping) {
 }

 // 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;
+function addMessage(message) {
+    getMessageList().innerHTML += message.getHtml();
    
    // 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}
-                ${text}
-            </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];
@ -158,151 +291,41 @@ function getOurNextMessage(idx) {
    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}`
+    const title = conversation.contactName;
+    let newTitle = conversation.pings > 0
+        ? `(${conversation.pings}) ${title}`
        : title;
    
    document.title = newTitle;
 }

 function clearPings() {
-    pings = 0;
+    conversation.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);
+function updateChat(message) {
+    addMessage(message);
+    const previewText = conversation.getTypedMessageText();
+    document.getElementById("textbox-input").value = previewText;
    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();
+    conversation.sendMessage();
 }

 function updateLightLag() {
-    let text = getLightLag().toFixed(5) + " seconds";
+    const lag = conversation.getLightLag();
+    const text = lag.toFixed(5) + " seconds";
    document.getElementById("delay-text").innerHTML = text;
 }

@ -312,19 +335,25 @@ function startLightLagUpdateLoop() {
    }, 1000);
 }

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

-    document.title = title;
+function onMessageSent(message) {
+    updateChat(message);
+}
+
+function init(messageData) {
+    conversation = new Conversation(messageData, "Hester Gomez", onMessageReceived, onMessageSent);
+    conversation.start();
+
+    document.title = conversation.contactName;

    updateLightLag(0);
    startLightLagUpdateLoop();
 }

-init();
-
+fetch("hester.json")
+    .then(response => response.json())
+    .then(json => init(json));
--- a/styles.css
+++ b/styles.css
@ -1,3 +1,11 @@
+:root {
+    --dark-purple: #271f30;
+    --light-red: #ff686b;
+    --eggshell: #dfe2cf;
+    --ucla-blue: #4d7298;
+    --robin-egg-blue: #66ced6;
+}
+
 html {
    font-family: sans-serif;
 }
@ -5,6 +13,8 @@ html {
 body {
    margin-left: 0;
    margin-right: 0;
+
+    background-color: var(--dark-purple);
 }

 #page {
@ -14,19 +24,23 @@ body {
 h1 {
    margin-left: 0.5em;
    display: inline;
+
+    color: var(--eggshell);
 }

 .delay {
    display: inline;
+
+    color: var(--robin-egg-blue);
 }

 .rounded-rectangle {
    border-width: 2px;
    border: black;
-    border-style: solid;
+    border-style: none;
    border-radius: 1em;

-    padding: 7px;
+    padding: .6em .8em;
 }

 .message-content {
@ -35,16 +49,26 @@ h1 {
 }

 .message-content.theirs {
-    background-color: yellow;
+    background-color: var(--ucla-blue);
+
    left: 0;
 }

+.theirs .message-text {
+    color: var(--eggshell);
+}
+
 .message-content.ours {
-    background-color: pink;
+    background-color: var(--eggshell);
+
    right: 0;
    margin-bottom: 0.5em;
 }

+.ours .message-text {
+    color: var(--dark-purple);
+}
+
 ul {
    margin: 1em;
    margin-bottom: 4em;
@ -72,6 +96,8 @@ li {
 }

 #typing-indicator {
+    color: var(--eggshell);
+
    margin: 0;
    margin-left: 1em;
    margin-bottom: 0.5em;
@ -81,31 +107,50 @@ li {
 }

 #textbox input {
+    color: var(--dark-purple);
+    background-color: var(--eggshell);
+
    margin: 0.5em;
    left: 1em;

-    width: 85%;
+    width: 80%;
    font-size: 1em;

    z-index: 1;
 }

 button {
+    background-color: var(--dark-purple);
+    color: var(--eggshell);
+
    margin: 0.5em;
    padding: 0;
-    width: 10%;
+    width: 15%;
    position: absolute;
    right: 0;
    font-size: 1em;
 }

+button:hover {
+    color: var(--dark-purple);
+    background-color: var(--eggshell);
+}
+
+@media only screen and (min-width: 768px) {
+    button {
+        width: 10%;
+    }
+
+    #textbox input {
+        width: 85%;
+    }
+}
+
 .progress-bar {
    width: 100%;
    height: 100%;
-    opacity: 80%;
    max-width: 400px;
-    background-color: #e0e0e0;
-    border-radius: 10px;
+    border-radius: 1em;
    overflow: hidden;
    position: absolute;

@ -115,14 +160,14 @@ button {
 }

 .progress {
-    opacity: 80%;
+    opacity: 50%;
    width: 0;
    height: 100%;
-    background-color: #ff5c35;
 }

 .message-status {
-    margin-top: 1em;
+    color: var(--robin-egg-blue);
+
    position: absolute;
    top: 2.3em;
    right: 1em;
Author	SHA1	Message	Date
ktyl	f19d1f37d7	feat: extract conversation data to json	2024-07-17 00:22:20 +01:00
ktyl	350fd00533	chore: add doctype	2024-07-17 00:21:57 +01:00
ktyl	dfd799d102	refactor: extract Conversation class	2024-07-16 00:20:18 +01:00
ktyl	7cfa109702	chore: update feedback	2024-07-12 00:49:36 +01:00
ktyl	b4475813dc	feat: add colour scheme	2024-07-12 00:39:41 +01:00
ktyl	3e95c716df	fix: mobile scaling	2024-07-12 00:39:01 +01:00
ktyl	3363d3452c	chore: compile feedback	2024-07-10 17:14:19 +01:00