10 changed files with 323 additions and 580 deletions
--- a/caesar.json
+++ b/caesar.json
@ -1,13 +0,0 @@
 {
    "title": "Julius Caesar",
    "interactive": true,
    "characters": [
        "Mark Antony",
        "Julius Caesar"
    ],
    "messages":
    [
        { "character": 0, "text": "Sire! Forgive my informal message. We must speak."},
        { "character": 1, "text": "What is the meaning of this? What is so urgent it cannot wait for our usual meeting? Speak plainly and get to the pooint. I have more important matters to attend to than deciphering vague missives."}
    ]
 }
--- a/ides-of-march.json
+++ b/ides-of-march.json
@ -1,40 +0,0 @@
 {
    "title": "Operation Ides of March",
    "interactive": false,
    "characters": [
        "Mark Antony",
        "Cassius",
        "Brutus",
        "Casca",
        "Decimus",
        "Trebonius"
    ],
    "messages": [
        { "character": -1, "text": "Cassius created Operation Ides of March." },
        { "character": -1, "text": "Cassius added Brutus, Casca, Decimus, Trebonius and Mark Antony." },
        { "character": 1, "text": "Alright, it’s time. We need to finalize the plan. Everyone good for tomorrow?" },
        { "character": 2, "text": "Yes, it has to be tomorrow. No more delays." },
        { "character": 3, "text": "Do we know exactly where he’s going to be?" },
        { "character": 4, "text": "He’s going to the Senate tomorrow for sure. I’ve convinced him to go, even though he’s been acting paranoid lately." },
        { "character": 5, "text": "Good. We need to catch him before he even suspects anything. Are we all clear on the roles?" },
        { "character": 1, "text": "I’ll signal when we’re ready. Brutus, you’ll come in last. Your presence will make it look more… noble." },
        { "character": 2, "text": "It’s not about appearances. This is about saving the Republic." },
        { "character": 3, "text": "Yeah, yeah. But we can’t forget how people will react after this. They need to see it as necessary." },
        { "character": 1, "text": "Casca, you’ll be the first to strike, as planned. You good with that?" },
        { "character": 3, "text": "Yeah, I’ve got this. One stab, clean." },
        { "character": 4, "text": "Remember, we’re all in this together. There’s no turning back now." },
        { "character": 5, "text": "What about Mark Antony? He’s always close to Caesar." },
        { "character": 1, "text": "Trebonius, you handle him. Keep him distracted outside. Just make sure he doesn’t get involved." },
        { "character": 5, "text": "Consider it done." },
        { "character": 2, "text": "Remember, this isn’t murder. It’s justice. Rome is greater than one man." },
        { "character": 3, "text": "Right. But tomorrow… it’s gonna be chaos." },
        { "character": 4, "text": "We’ll handle the fallout after. Stick to the plan." },
        { "character": 1, "text": "Tomorrow, at the Senate. Let’s end this tyranny." },
        { "character": 2, "text": "For Rome." },
        { "character": 3, "text": "For the Republic." },
        { "character": 5, "text": "For our future." },
        { "character": 0, "text": "uh" },
        { "character": 1, "text": "shit" },
        { "character": -1, "text": "You have been removed from Operation Ides of March." }
    ]
 }
--- a/index.html
+++ b/index.html
@ -6,26 +6,20 @@
 </head>
 <body>
 <div id="side-panel"></div>
 <div id="main-panel">
 <div id="header">
-    <button id="conversation-list-button" class="rounded-rectangle" onclick="showSidePanel()"><- back</button>
+    <h1>Hester Gomez</h1>
-    <h1 id="header-title">NAME</h1>
+    <p class="delay">(Earth, <span id="delay-text"></span>)</p>
 </div>
 <ul id="messages"></ul>
-<p id="typing-indicator">NAME is typing...</p>
+<p id="typing-indicator">Hester is typing...</p>
 <div id="textbox">
-    <input id="textbox-input" class="rounded-rectangle" type="text" onkeydown="pressSendButton()"></input>
+    <input id="textbox-input" class="rounded-rectangle" type="text" disabled></input>
    <button class="rounded-rectangle" onclick="pressSendButton()">send</button>
 </div>
 </div>
 <script src="main.js"></script>
 </body>
 </html>
--- a/lepidus.json
+++ b/lepidus.json
@ -1,20 +0,0 @@
 {
    "title": "Lepidus",
    "interactive": true,
    "characters": [
        "Mark Antony",
        "Lepidus"
    ],
    "messages": [
        { "character": 0, "text": "Lepidus, how’s the Senate holding up without Caesar?" },
        { "character": 0, "text": "I’m guessing things are getting messier by the day." },
        { "character": 1, "text": "You have no idea." },
        { "character": 1, "text": "Yesterday, half of them couldn’t even agree on the order of the agenda." },
        { "character": 0, "text": "Sounds like a circus." },
        { "character": 0, "text": "Need me to step in and straighten things out?" },
        { "character": 1, "text": "Might need more than that. We’re stretched thin on allies." },
        { "character": 0, "text": "We’ll make it work. Caesar’s return should stabilize things." },
        { "character": 1, "text": "Hopefully. Until then, I’ll try not to let it all fall apart." }
    ]
 }
--- a/lorem.json
+++ b/lorem.json
@ -1,30 +0,0 @@
 [
  { "character": 0, "text": "Lorem ipsum dolor sit amet, consectetur adipiscing elit." },
  { "character": 1, "text": "Sed do eiusmod tempor incididunt ut labore et dolore magna aliqua." },
  { "character": 0, "text": "Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat." },
  { "character": 0, "text": "Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur." },
  { "character": 1, "text": "Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum." },
  { "character": 0, "text": "Curabitur pretium tincidunt lacus. Nulla gravida orci a odio." },
  { "character": 1, "text": "Suspendisse ut massa. Cras nec ante." },
  { "character": 0, "text": "Pellentesque a nulla. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus." },
  { "character": 1, "text": "Nulla posuere. Vivamus venenatis venenatis risus." },
  { "character": 1, "text": "In pede mi, aliquet sit amet, euismod in, auctor ut, ligula." },
  { "character": 0, "text": "Aliquam dapibus tincidunt metus." },
  { "character": 1, "text": "Praesent justo dolor, lobortis quis, lobortis dignissim, pulvinar ac, lorem." },
  { "character": 0, "text": "Integer vitae libero ac risus egestas placerat." },
  { "character": 0, "text": "Vestibulum commodo felis quis tortor." },
  { "character": 1, "text": "Ut aliquam sollicitudin leo." },
  { "character": 0, "text": "Cras iaculis ultricies nulla." },
  { "character": 1, "text": "Donec quis dui at dolor tempor interdum." },
  { "character": 0, "text": "Vivamus vehicula nulla ut felis." },
  { "character": 1, "text": "Integer malesuada. Vestibulum in felis." },
  { "character": 1, "text": "Mauris fermentum dictum magna." },
  { "character": 0, "text": "Sed laoreet aliquam leo." },
  { "character": 0, "text": "Ut tellus dolor, dapibus eget, elementum vel, cursus eleifend, elit." },
  { "character": 1, "text": "Aenean auctor wisi et urna." },
  { "character": 0, "text": "Aliquam erat volutpat." },
  { "character": 1, "text": "Nam dui mi, tincidunt quis, accumsan porttitor, facilisis luctus, metus." },
  { "character": 0, "text": "Phasellus vulputate condimentum orci." },
  { "character": 1, "text": "Nullam mattis magna quis ligula." }
 ]
--- a/lucius.json
+++ b/lucius.json
@ -1,20 +0,0 @@
 {
    "title": "Lucius Antony",
    "interactive": true,
    "characters": [
        "Mark Antony",
        "Lucius Antony"
    ],
    "messages":
    [
        { "character": 0, "text": "How’s everything in Rome, Lucius?" },
        { "character": 1, "text": "Same old chaos. Senate’s split on everything." },
        { "character": 0, "text": "Let them bicker. You’re holding up, right?" },
        { "character": 1, "text": "Barely. Could use more allies here." },
        { "character": 0, "text": "I’ll see what I can do. Don’t let them push you around." },
        { "character": 1, "text": "Not worried about that. Just tired of their nonsense." },
        { "character": 0, "text": "Hang in there. I’ll be back soon." },
        { "character": 1, "text": "You better. You owe me a break." },
        { "character": 0, "text": "It’s coming, trust me." }
    ]
 }
--- a/main.js
+++ b/main.js
@ -3,73 +3,167 @@ const startTime = Date.now();
 var conversation = null;
 class Conversation {
-    constructor(name) {
+    constructor(messageData, contactName, onMessageReceived, onMessageSent) {
        this.messageData = messageData;
        this.contactName = contactName;
        this.messageIdx = -1;
        // contains both sent and received messages
        this.messages = [];
-        this.name = romanize(name);
+
        // callbacks
        this.onMessageReceived = onMessageReceived;
        this.onMessageSent = onMessageSent;
    }
-    setInteractive(isInteractive) {
+    start() {
        const children = document.getElementById("textbox").children;
        for (let i = 0; i < children.length; i++) {
            children[i].disabled = !isInteractive;
        }
    }
    initialize(initialMessages) {
        document.title = this.name;
        document.getElementById("header-title").innerHTML = this.name;
        this.messages = initialMessages;
    }
    // for the user to send their own messages
    sendUserMessage(text) {
        const message = new UserMessage(text);
        message.updateStatus("sent");
        setTimeout(() => {
-            message.updateStatus("delivered");
+            this.messageIdx = 0;
-            this.render();
+            this.pings = 1;
-            setTimeout(() => {
+
-                message.updateStatus("read");
+            const data = this.messageData[this.messageIdx];
-                this.render();
+            const message = new ReceivedMessage(data);
            }, 5000);
        }, 1000);
            this.messages.push(message);
            this.onMessageReceived(message);
        }, 3623);
    }
-    // update the current HTML based on messages
+    peekNextMessageData() {
-    render() {
+        return this.messageData[this.messageIdx + 1];
        // clear stale HTML 
        getMessageList().innerHTML = "";
        // if there are multiple 'read' messages, we only want the last one to display
        // the status. the other ones must have been read, so clear their statuses.
        let foundReadMessage = false;
        for (let i = this.messages.length - 1; i >= 0; i--) {
            const message = this.messages[i];
            if (!message.getIsOurs())
                continue;
            // if we haven't found a read message yet, let's check to see if we have now
            if (!foundReadMessage) {
                if (message.status == "read") {
                    foundReadMessage = true;
                    continue;
    }
-            } else {
+
-                // we have found a read message, which means all messages above it should
+    // get the text typed into the text box, ready to be sent. this could be blank
-                // have empty status
+    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("");
            }
        }
-        // render message elements
+        this.waitForIncomingMessages();
        for (let i = 0; i < this.messages.length; i++)
        {
            const messageRoot = document.getElementById("messages");
            const newMessage = this.messages[i];
            messageRoot.appendChild(newMessage.getElement());
    }
    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;
    }
 }
@ -77,103 +171,105 @@ function getMessageList() {
    return document.getElementById("messages");
 }
-function romanize(text) {
+// TODO: messges should reference their own elements to remove the need for searching through
-    text = text.replaceAll('u', 'v');
+// the DOM
-    text = text.replaceAll('U', 'V');
+function getMessageElement(messageIdx) {
-    return text;
+    let list = getMessageList();
    let messageElements = list.getElementsByTagName("li");
    return messageElements[messageIdx];
 }
-class AgentMessage {
+class ReceivedMessage {
-    constructor(text, senderName) {
+    constructor(data) {
-        this.text = text;
+        this.text = data.text;
        this.senderName = senderName;
    }
    getIsOurs() {
        return false;
    }
-    getElement() {
+    getHtml() {
-        const liElem = document.createElement("li");
+        return `<li><div class="message">
-        liElem.className = "message";
+            <span class="message-content rounded-rectangle theirs">
-
+                <span class="message-text">${this.text}</span>
-        const contentElem = document.createElement("span");
+            </span></div></li>`;
        contentElem.className = "message-content rounded-rectangle theirs";
        liElem.appendChild(contentElem);
        if (this.senderName) {
            const nameElem = document.createElement("h3");
            nameElem.innerHTML = romanize(this.senderName);
            contentElem.appendChild(nameElem);
        }
        const textElem = document.createElement("span");
        textElem.className = "message-text";
        textElem.innerHTML = romanize(this.text);
        contentElem.appendChild(textElem);
        return liElem;
    }
 }
-class UserMessage {
+class SentMessage {
-    constructor(text) {
+    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.text = romanize(text);
+        this.onDelivered = onDelivered;
-        this.status = "";
+        this.text = data.text;
        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);
    }
    getIsOurs() {
        return true;
    }
-    getElement() {
+    getHtml() {
-        const liElem = document.createElement("li");
+        return `<li><div class="message">
-        liElem.className = "message";
+            <span class="message-content rounded-rectangle ours">
-
+                <div class="progress-bar"><div class="progress"></div></div>
-        const contentElem = document.createElement("span");
+                <span class="message-text">${this.text}</span>
-        contentElem.className = "message-content rounded-rectangle ours";
+            </span></div><p class="message-status">status</p></li>`;
        liElem.appendChild(contentElem);
        const textElem = document.createElement("span");
        textElem.className = "message-text";
        textElem.innerHTML = this.text;
        contentElem.appendChild(textElem);
        const statusElem = document.createElement("p");
        statusElem.className = "message-status";
        statusElem.innerHTML = this.status;
        liElem.appendChild(statusElem);
        return liElem;
    }
-    updateStatus(newStatus) {
+    setProgress(amount) {
-        this.status = newStatus;
+        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;
    }
-class SystemMessage {
+    updateStatus(newStatus, color) {
-    constructor(text) {
+        let thisMessage = getMessageElement(this.idx);
-        this.text = romanize(text);
+        let statusElement = thisMessage.getElementsByClassName("message-status")[0];
-    }
+        statusElement.innerHTML = newStatus;
-
+        statusElement.style.color = color;
    getIsOurs() {
        return false;
    }
    getElement() {
        const liElem = document.createElement("li");
        liElem.className = "system-message";
        liElem.innerHTML = this.text;
        return liElem;
    }
 }
 function setTypingIndicator(isTyping) {
    document.getElementById("typing-indicator").innerHTML = isTyping
-        ? `${conversation.contactName} is typing...`
+        ? "Hester is typing..."
        : "";
 }
@ -185,8 +281,18 @@ function addMessage(message) {
    window.scrollTo(0, document.body.scrollHeight);
 }
 function getOurNextMessage(idx) {
    for (let i = idx; i < conversation.length; i++) {
        message = conversation[i];
        if (isMessageOurs(message))
            return message;
    }
    return null;
 }
 function updatePings() {
-    const title = conversation.name;
+    const title = conversation.contactName;
    let newTitle = conversation.pings > 0
        ? `(${conversation.pings}) ${title}`
        : title;
@ -199,8 +305,7 @@ function clearPings() {
    updatePings();
 }
-// returns a decimal value between min and max
+function getRandomDelay(min, max) {
 function getRandomInRange(min, max) {
    const range = max - min;
    return min + Math.random() * range;
 }
@ -213,28 +318,21 @@ function updateChat(message) {
 }
 function pressSendButton() {
    const textBox = document.getElementById("textbox-input");
    if (event.type == "keydown" && event.key != "Enter")
    {
        textBox.value = romanize(textBox.value);
        return;
    }
    // we have interacted with the page so remove all pings
    clearPings();
    conversation.sendMessage();
 }
-    // get the content of the text box
+function updateLightLag() {
-    const text = textBox.value;
+    const lag = conversation.getLightLag();
-    if (!text)
+    const text = lag.toFixed(5) + " seconds";
-        return;
+    document.getElementById("delay-text").innerHTML = text;
 }
-    textBox.value = "";
+function startLightLagUpdateLoop() {
-
+    setInterval(() => {
-    conversation.sendUserMessage(text);
+        updateLightLag();
-    conversation.render();
+    }, 1000);
    // TODO: start process of receiving next message from server (or fake it for now)
 }
 function onMessageReceived(message) {
@ -246,128 +344,16 @@ function onMessageSent(message) {
    updateChat(message);
 }
-// probably a bit hacky! but this saves having to do like, state or something in CSS?
+function init(messageData) {
-// which probably is possible and probably would be the better way to do it, but that
+    conversation = new Conversation(messageData, "Hester Gomez", onMessageReceived, onMessageSent);
-// sounds like a bunch of learning i'm not SUPER in the mood for
+    conversation.start();
 function setVisibleOnMobile(element, isVisible) {
    let classes = element.className.split().filter(c => c != "");
    const invisibleClass = "invisible-on-mobile";
    const visibleClass = "visible";
-    if (isVisible && !classes.includes(visibleClass)) {
+    document.title = conversation.contactName;
-        const idx = classes.indexOf(invisibleClass);
+
-        if (idx != -1) {
+    updateLightLag(0);
-            classes.splice(idx, 1);
+    startLightLagUpdateLoop();
        }
        classes.push(visibleClass);
    } else if (!isVisible && !classes.includes(invisibleClass)) {
        const idx = classes.indexOf(visibleClass);
        if (idx != -1) {
            classes.splice(idx, 1);
        }
        classes.push(invisibleClass);
 }
-    element.className = classes.join(" ");
+fetch("hester.json")
 }
 function showSidePanel() {
    // this function can only be called on mobile. the main conversation should be
    // hidden and the side conversations panel should take up the whole screen.
    const mainPanel = document.getElementById("main-panel");
    const conversationListElem = document.getElementById("side-panel");
    setVisibleOnMobile(mainPanel, false);
    setVisibleOnMobile(conversationListElem, true);
 }
 function readConversationJson(path, callback) {
    fetch(path)
    .then(response => response.json())
-        .then(json => callback(json));
+    .then(json => init(json));
 }
 function showConversation(path) {
    const mainPanel = document.getElementById("main-panel");
    const conversationListElem = document.getElementById("side-panel");
    setVisibleOnMobile(mainPanel, true);
    setVisibleOnMobile(conversationListElem, false);
    readConversationJson(path, json => {
        conversation = new Conversation(json.title);
        const jsonMessages = json.messages;
        const participants = json.characters;
        let initialMessages = [];
        for (let i = 0; i < jsonMessages.length; i++) {
            const data = jsonMessages[i];
            const text = data.text;
            if (data.character == -1) {
                const message = new SystemMessage(text);
                initialMessages.push(message);
            } else if (data.character == 0) {
                const message = new UserMessage(text);
                message.updateStatus("read");
                initialMessages.push(message);
            } else {
                const message = participants.length > 2 
                    ? new AgentMessage(text, participants[data.character])
                    : new AgentMessage(text);
                initialMessages.push(message);
            }
        }
        conversation.initialize(initialMessages);
        conversation.setInteractive(json.interactive);
        conversation.render();
    });
 }
 function addConversationPreview(path) {
    const listRoot = document.getElementById("side-panel");
    readConversationJson(path, json => {
        const messages = json.messages;
        const elem = document.createElement("div");
        elem.onclick = () => showConversation(path);
        elem.className = "conversation";
        const headerElem = document.createElement("h2");
        headerElem.innerHTML = romanize(json.title);
        elem.appendChild(headerElem);
        const previewElem = document.createElement("span");
        previewElem.innerHTML = romanize(messages[messages.length - 1].text);
        elem.appendChild(previewElem);
        listRoot.appendChild(elem);
    });
 }
 function populateConversationList() {
    const conversationFiles = [
        "caesar.json",
        "lucius.json",
        "ides-of-march.json",
        "lepidus.json",
        "publius.json",
        "sextus.json"
    ];
    for (let i = 0; i < conversationFiles.length; i++) {
        const path = conversationFiles[i];
        addConversationPreview(path);
    }
 }
 setTypingIndicator(false);
 populateConversationList();
 showConversation("ides-of-march.json");
--- a/publius.json
+++ b/publius.json
@ -1,20 +0,0 @@
 {
    "title": "Publius Ventidius",
    "interactive": true,
    "characters": [
        "Mark Antony",
        "Publius Ventidius"
    ],
    "messages":
    [
        { "character": 0, "text": "Publius! I’ve just received word about your latest victory. Remarkable work!" },
        { "character": 1, "text": "Thank you, Antony. We struck swiftly, caught them off guard. Just doing my part." },
        { "character": 0, "text": "Humble as always. But this win, it puts us in a strong position for the next phase." },
        { "character": 0, "text": "Tell me, what do you need? More men? Supplies?" },
        { "character": 1, "text": "I could use more cavalry, if anything. Our infantry held, but the Parthians are relentless on horseback." },
        { "character": 0, "text": "Consider it done. I’ll make sure you have reinforcements by the end of the week." },
        { "character": 1, "text": "Much appreciated. We’re close, Antony. A few more pushes and we’ll have them routed." },
        { "character": 0, "text": "Good. Keep the pressure on. I’ll handle things on my end. Victory is within reach." }
    ]
 }
--- a/sextus.json
+++ b/sextus.json
@ -1,20 +0,0 @@
 {
    "title": "Sextus Pompey",
    "interactive": true,
    "characters": [
        "Mark Antony",
        "Sextus Pompey"
    ],
    "messages":
    [
        { "character": 0, "text": "Sextus, we need to talk. I’m hearing whispers about your fleet near Sicily." },
        { "character": 1, "text": "Whispers? I prefer to call it preparation. A man like me can't afford to sit idly by, Antony." },
        { "character": 0, "text": "Preparation for what, exactly? We’ve got enough chaos in Rome without another power struggle." },
        { "character": 1, "text": "Oh, don’t worry. My interests are my own, but I’m no threat to you… for now." },
        { "character": 0, "text": "For now? That's reassuring. Look, we don’t need more enemies right now, Sextus. We can work together." },
        { "character": 1, "text": "You talk of unity, but you’re quick to defend Caesar's agenda. I haven't forgotten how my father was treated." },
        { "character": 0, "text": "I’m not my father’s shadow, nor Caesar’s. Just think about it. We’re stronger together than apart." },
        { "character": 1, "text": "I’ll think about it. But remember, Antony, my loyalty isn’t given easily." }
    ]
 }
--- a/styles.css
+++ b/styles.css
@ -4,106 +4,17 @@
    --eggshell: #dfe2cf;
    --ucla-blue: #4d7298;
    --robin-egg-blue: #66ced6;
    --vermilion: #ef3e36;
    --lapis-lazuli: #235789;
    --onyx: #383d3b;
    --light-cyan: #e0fbfc;
    --buff: #edb88b;
    --eeriee-black: #1d201f;
 }
 html {
    font-family: sans-serif;
    height: 100%;
 }
 body {
-    margin: 0;
+    margin-left: 0;
-    height: 100%;
+    margin-right: 0;
    display: flex;
    background-color: var(--buff);
 }
-#side-panel {
+    background-color: var(--dark-purple);
    height: 100%;
    display: none;
    color: var(--onyx);
 }
 #header button {
    transform: translateY(-.3em);
    width: auto;
    visibility: visible;
 }
 #side-panel {
    display: block;
    width: 100%;
 }
 #side-panel.invisible-on-mobile {
    display: none;
 }
 /* on desktop only */
@media only screen and (min-width: 768px) {
    #side-panel {
        display: block;
        width: auto;
        visibility: visible;
        border-right: 3px solid var(--onyx);
    }
    #side-panel.invisible-on-mobile {
        display: block;
    }
    #header button {
        width: 0;
        margin: 0;
        padding: 0;
        visibility: hidden;
    }
    #side-panel .conversation {
        max-width: 300px;
    }
 }
 #side-panel .conversation {
    width: 100%;
    height: 70px;
    border-bottom: solid var(--onyx) 3px;
    color: var(--onyx);
    padding: .5em;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
 }
 #side-panel .conversation:hover {
    background-color: var(--vermilion);
    color: var(--light-cyan);
 }
 #side-panel h2 {
    margin: 0;
 }
 #header {
    position: sticky;
    top: 0;
    border-bottom: solid var(--onyx) 3px;
 }
 #main-panel {
    float: right;
    display: flex;
    flex-direction: column;
    justify-content: flex-end;
 }
 #page {
@ -111,9 +22,16 @@ body {
 }
 h1 {
-    display: inline-block;
+    margin-left: 0.5em;
-    color: var(--onyx);
+    display: inline;
-    margin-left: 1em;
+
    color: var(--eggshell);
 }
 .delay {
    display: inline;
    color: var(--robin-egg-blue);
 }
 .rounded-rectangle {
@ -127,75 +45,54 @@ h1 {
 .message-content {
    z-index: 1;
-    float: right;
+    position: absolute;
 }
 .message-content.theirs {
-    background-color: var(--onyx);
+    background-color: var(--ucla-blue);
    color: var(--light-cyan);
-    float: left;
+    left: 0;
 }
 .message-content.theirs h3 {
    color: var(--buff);
    margin: 0;
    margin-bottom: 3px;
    font-size: .85em;
    font-weight: bolder;
    letter-spacing: .03em;
 }
 .theirs .message-text {
    color: var(--eggshell);
 }
 .message-content.ours {
-    background-color: var(--vermilion);
+    background-color: var(--eggshell);
    right: 0;
    margin-bottom: 0.5em;
 }
 .ours .message-text {
-    color: var(--light-cyan);
+    color: var(--dark-purple);
 }
 .system-message {
    color: var(--onyx);
    width: 100%;
    text-align: center;
 }
 ul {
-    overflow: scroll;
+    margin: 1em;
-    /*height:100%;*/
+    margin-bottom: 4em;
-    flex-grow: 1;
+    padding: 0;
    margin: 0 .5em;
    padding: .5em 0;
    list-style: none;
 }
 li {
    position: relative;
    display: inline-table;
    margin-bottom: 0.5em;
 }
 li.message {
    height: 2.5em;
    width: 100%;
-    margin-bottom: 1em;
+    margin-bottom: 1.5em;
    position: relative;
 }
 #textbox {
    width: 100%;
-    display: flex;
+    position: fixed;
    bottom: 0;
-    z-index: 1;
+    margin-top: 0.5em;
-    /*background-color: var(--light-cyan);*/
+    z-index: 1;
 }
 #typing-indicator {
@ -210,40 +107,69 @@ li.message {
 }
 #textbox input {
-    flex-grow: 4;
+    color: var(--dark-purple);
-
+    background-color: var(--eggshell);
    color: var(--onyx);
    background-color: var(--light-cyan);
    margin: 0.5em;
    left: 1em;
    width: 80%;
    font-size: 1em;
    z-index: 1;
 }
 button {
-    background-color: var(--vermilion);
+    background-color: var(--dark-purple);
-    color: var(--light-cyan);
+    color: var(--eggshell);
    margin: 0.5em;
    padding: 0;
-    flex-grow: 1;
+    width: 15%;
    position: absolute;
    right: 0;
    font-size: 1em;
 }
 button:hover {
-    color: var(--light-cyan);
+    color: var(--dark-purple);
-    background-color: var(--onyx);
+    background-color: var(--eggshell);
 }
@media only screen and (min-width: 768px) {
    button {
        width: 10%;
    }
    #textbox input {
        width: 85%;
    }
 }
 .progress-bar {
    width: 100%;
    height: 100%;
    max-width: 400px;
    border-radius: 1em;
    overflow: hidden;
    position: absolute;
    z-index: -1;
    top: 0;
    left: 0;
 }
 .progress {
    opacity: 50%;
    width: 0;
    height: 100%;
 }
 .message-status {
-    color: var(--onyx);
+    color: var(--robin-egg-blue);
    position: absolute;
-    bottom: -1.75em;
+    top: 2.3em;
    right: 1em;
    font-size: .8em;
 }