feat: extend conversation, layout improvement

index.html

@@ -6,7 +6,7 @@
 
 <div id="header">
     <h1>Hester Gomez</h1>
-    <p class="delay">(Luna, <span id="delay-text"></span>)</p>
+    <p class="delay">(Earth, <span id="delay-text"></span>)</p>
 </div>
 
 <ul id="messages"></ul>

main.js

@@ -15,21 +15,28 @@
 conversation = [
     { 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: "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 messageIdx = -1;
 let title = "Hester Gomez";
 let pings = 0;
+const startTime = Date.now();
 
 function getMessageList() {
     return document.getElementById("messages");
@@ -149,8 +156,14 @@ function getOurNextMessage(idx) {
 }
 
 function getLightLag() {
-    lag = 3.0 + Math.sin(Date.now() / 10000);
-    return Math.round(lag * 10000) / 10000;
+    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() {
@@ -181,22 +194,23 @@ function getResponses(idx) {
     return responses;
 }
 
-function updateChat(messageIdx) {
-    addMessage(messageIdx-1);
-    updatePreviewText(messageIdx);
-    updatePings();
-}
-
 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);
+    let responses = getResponses(messageIdx + 1);
     let lightLag = getLightLag();
     
     setTimeout(() => {
@@ -223,11 +237,10 @@ function waitForIncomingMessages() {
     },getRandomDelay(1, 3));
 }
 
-function updatePreviewText(messageIdx) {
+function updatePreviewText(message) {
     // display our next message or an empty box
-    let nextMessage = conversation[messageIdx];
-    let previewText = isMessageOurs(nextMessage)
-        ? conversation[messageIdx].text
+    let previewText = isMessageOurs(message)
+        ? message.text
         : "";
     updateTextBox(previewText);
 }
@@ -237,9 +250,9 @@ function sendOurMessage() {
     // before advancing the conversation
     let oneWayLag = getLightLag();
     let currentMessage = conversation[messageIdx];
-    let nextMessage = conversation[messageIdx + 1];
+    let nextMessage = conversation[messageIdx + 2];
 
-    let sentMessage = new SentMessage(oneWayLag, messageIdx, () => {
+    let sentMessage = new SentMessage(oneWayLag, messageIdx + 1, () => {
 
         // if the next message is ours we don't need to wait for anything
         if (isMessageOurs(nextMessage))
@@ -260,7 +273,7 @@ function sendOurMessage() {
             }
 
             waitForIncomingMessages();
-        }, getRandomDelay(5, 30) * 1000);
+        }, getRandomDelay(1, 20) * 1000);
     });
     sentMessages.push(sentMessage);
 
@@ -276,7 +289,7 @@ function pressSendButton() {
     clearPings();
 
     // peek conversation state
-    let nextMessage = conversation[messageIdx];
+    let nextMessage = conversation[messageIdx + 1];
 
     // we are still waiting to receive messages so pressing the button oughtn't do anything
     if (!isMessageOurs(nextMessage))
@@ -298,14 +311,11 @@ function startLightLagUpdateLoop() {
 
 function init() {
     setTimeout(() => {
-        addMessage(0);
-        updatePings();
+        messageIdx = 0;
+        pings = 1;
+        updateChat(messageIdx);
         setTypingIndicator(false);
-    }, 400);
-
-    // load the first message into the text box
-    updateTextBox(conversation[messageIdx].text);
-    pings = 1;
+    }, 3623);
 
     document.title = title;
 

styles.css

@@ -47,6 +47,7 @@ h1 {
 
 ul {
     margin: 1em;
+    margin-bottom: 4em;
     padding: 0;
     list-style: none;
 }
@@ -62,10 +63,12 @@ li {
 
 #textbox {
     width: 100%;
-    position: absolute;
+    position: fixed;
     bottom: 0;
 
     margin-top: 0.5em;
+
+    z-index: 1;
 }
 
 #typing-indicator {
@@ -73,7 +76,7 @@ li {
     margin-left: 1em;
     margin-bottom: 0.5em;
 
-    position: absolute;
+    position: fixed;
     bottom: 3em;
 }
 
@@ -83,6 +86,8 @@ li {
 
     width: 85%;
     font-size: 1em;
+
+    z-index: 1;
 }
 
 button {