From 5405fc730edd2ef07d196e204808437b1133a1f7 Mon Sep 17 00:00:00 2001
From: Cat Flynn <me@ktyl.dev>
Date: Mon, 7 Oct 2024 01:44:26 +0100
Subject: [PATCH] feat: romanize text

---
 main.js      | 61 ++++++++++++++++++++++++++++++------
 publius.json | 20 ++++++++++++
 sextus.json  | 20 ++++++++++++
 styles.css   | 88 +++++++++++++++++++++-------------------------------
 4 files changed, 126 insertions(+), 63 deletions(-)
 create mode 100644 publius.json
 create mode 100644 sextus.json

diff --git a/main.js b/main.js
index e0dce0b..b0e9a1e 100644
--- a/main.js
+++ b/main.js
@@ -5,7 +5,7 @@ var conversation = null;
 class Conversation {
     constructor(name) {
         this.messages = [];
-        this.name = name;
+        this.name = romanize(name);
     }
 
     setInteractive(isInteractive) {
@@ -29,6 +29,10 @@ class Conversation {
         setTimeout(() => {
             message.updateStatus("delivered");
             this.render();
+            setTimeout(() => {
+                message.updateStatus("read");
+                this.render();
+            }, 5000);
         }, 1000);
         this.messages.push(message);
     }
@@ -38,6 +42,27 @@ class Conversation {
         // 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
+                // have empty status
+                message.updateStatus("");
+            }
+        }
+
         // render message elements
         for (let i = 0; i < this.messages.length; i++)
         {
@@ -52,6 +77,12 @@ function getMessageList() {
     return document.getElementById("messages");
 }
 
+function romanize(text) {
+    text = text.replaceAll('u', 'v');
+    text = text.replaceAll('U', 'V');
+    return text;
+}
+
 class AgentMessage {
     constructor(text, senderName) {
         this.text = text;
@@ -72,13 +103,13 @@ class AgentMessage {
 
         if (this.senderName) {
             const nameElem = document.createElement("h3");
-            nameElem.innerHTML = this.senderName;
+            nameElem.innerHTML = romanize(this.senderName);
             contentElem.appendChild(nameElem);
         }
 
         const textElem = document.createElement("span");
         textElem.className = "message-text";
-        textElem.innerHTML = this.text;
+        textElem.innerHTML = romanize(this.text);
         contentElem.appendChild(textElem);
 
         return liElem;
@@ -88,7 +119,7 @@ class AgentMessage {
 class UserMessage {
     constructor(text) {
         this.createdTime = Date.now();
-        this.text = text;
+        this.text = romanize(text);
         this.status = "";
     }
 
@@ -124,7 +155,11 @@ class UserMessage {
 
 class SystemMessage {
     constructor(text) {
-        this.text = text;
+        this.text = romanize(text);
+    }
+
+    getIsOurs() {
+        return false;
     }
 
     getElement() {
@@ -178,14 +213,18 @@ 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();
 
     // get the content of the text box
-    const textBox = document.getElementById("textbox-input");
     const text = textBox.value;
     if (!text)
         return;
@@ -273,7 +312,7 @@ function showConversation(path) {
                 initialMessages.push(message);
             } else if (data.character == 0) {
                 const message = new UserMessage(text);
-                message.updateStatus("delivered");
+                message.updateStatus("read");
                 initialMessages.push(message);
             } else {
                 const message = participants.length > 2 
@@ -300,11 +339,11 @@ function addConversationPreview(path) {
         elem.className = "conversation";
 
         const headerElem = document.createElement("h2");
-        headerElem.innerHTML = json.title;
+        headerElem.innerHTML = romanize(json.title);
         elem.appendChild(headerElem);
 
         const previewElem = document.createElement("span");
-        previewElem.innerHTML = messages[messages.length - 1].text;
+        previewElem.innerHTML = romanize(messages[messages.length - 1].text);
         elem.appendChild(previewElem);
 
         listRoot.appendChild(elem);
@@ -316,7 +355,9 @@ function populateConversationList() {
         "caesar.json",
         "lucius.json",
         "ides-of-march.json",
-        "lepidus.json"
+        "lepidus.json",
+        "publius.json",
+        "sextus.json"
     ];
 
     for (let i = 0; i < conversationFiles.length; i++) {
diff --git a/publius.json b/publius.json
new file mode 100644
index 0000000..0432b72
--- /dev/null
+++ b/publius.json
@@ -0,0 +1,20 @@
+{
+    "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." }
+    ]
+}
+
diff --git a/sextus.json b/sextus.json
new file mode 100644
index 0000000..4985c09
--- /dev/null
+++ b/sextus.json
@@ -0,0 +1,20 @@
+{
+    "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." }
+    ]
+}
+
diff --git a/styles.css b/styles.css
index 0860e71..145f86c 100644
--- a/styles.css
+++ b/styles.css
@@ -4,6 +4,13 @@
     --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 {
@@ -15,12 +22,13 @@ body {
     margin: 0;
     height: 100%;
     display: flex;
+    background-color: var(--buff);
 }
 
 #side-panel {
     height: 100%;
-    background-color: var(--dark-purple);
     display: none;
+    color: var(--onyx);
 }
 
 #header button {
@@ -44,7 +52,7 @@ body {
         display: block;
         width: auto;
         visibility: visible;
-        border-right: 3px solid var(--eggshell);
+        border-right: 3px solid var(--onyx);
     }
 
     #side-panel.invisible-on-mobile {
@@ -66,8 +74,8 @@ body {
 #side-panel .conversation {
     width: 100%;
     height: 70px;
-    border-bottom: solid var(--eggshell) 3px;
-    color: var(--eggshell);
+    border-bottom: solid var(--onyx) 3px;
+    color: var(--onyx);
     padding: .5em;
 
     white-space: nowrap;
@@ -76,8 +84,8 @@ body {
 }
 
 #side-panel .conversation:hover {
-    background-color: var(--eggshell);
-    color: var(--dark-purple);
+    background-color: var(--vermilion);
+    color: var(--light-cyan);
 }
 
 #side-panel h2 {
@@ -87,10 +95,10 @@ body {
 #header {
     position: sticky;
     top: 0;
+    border-bottom: solid var(--onyx) 3px;
 }
 
 #main-panel {
-    background-color: var(--dark-purple);
     float: right;
 
     display: flex;
@@ -104,14 +112,8 @@ body {
 
 h1 {
     display: inline-block;
-
-    color: var(--eggshell);
-}
-
-.delay {
-    display: inline;
-
-    color: var(--robin-egg-blue);
+    color: var(--onyx);
+    margin-left: 1em;
 }
 
 .rounded-rectangle {
@@ -129,13 +131,14 @@ h1 {
 }
 
 .message-content.theirs {
-    background-color: var(--ucla-blue);
+    background-color: var(--onyx);
+    color: var(--light-cyan);
 
     float: left;
 }
 
 .message-content.theirs h3 {
-    color: color-mix(in hsl, var(--eggshell) 50%, white 50%);
+    color: var(--buff);
     margin: 0;
     margin-bottom: 3px;
     font-size: .85em;
@@ -144,23 +147,21 @@ h1 {
 }
 
 .theirs .message-text {
-    /*TODO: move this up to .message-content.theirs?*/
-    color: var(--eggshell);
 }
 
 .message-content.ours {
-    background-color: var(--eggshell);
+    background-color: var(--vermilion);
 
     right: 0;
     margin-bottom: 0.5em;
 }
 
 .ours .message-text {
-    color: var(--dark-purple);
+    color: var(--light-cyan);
 }
 
 .system-message {
-    color: color-mix(in hsl, var(--eggshell) 80%, var(--dark-purple) 100%);
+    color: var(--onyx);
     width: 100%;
     text-align: center;
 }
@@ -169,8 +170,8 @@ ul {
     overflow: scroll;
     /*height:100%;*/
     flex-grow: 1;
-    margin: .5em;
-    padding: 0;
+    margin: 0 .5em;
+    padding: .5em 0;
     list-style: none;
 }
 
@@ -184,7 +185,7 @@ li.message {
     height: 2.5em;
     width: 100%;
 
-    margin-bottom: 1.5em;
+    margin-bottom: 1em;
 }
 
 #textbox {
@@ -194,7 +195,7 @@ li.message {
 
     z-index: 1;
 
-    background-color: var(--dark-purple);
+    /*background-color: var(--light-cyan);*/
 }
 
 #typing-indicator {
@@ -211,8 +212,8 @@ 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;
@@ -223,8 +224,8 @@ li.message {
 }
 
 button {
-    background-color: var(--dark-purple);
-    color: var(--eggshell);
+    background-color: var(--vermilion);
+    color: var(--light-cyan);
 
     margin: 0.5em;
     padding: 0;
@@ -234,34 +235,15 @@ button {
 }
 
 button:hover {
-    color: var(--dark-purple);
-    background-color: var(--eggshell);
-}
-
-.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%;
+    color: var(--light-cyan);
+    background-color: var(--onyx);
 }
 
 .message-status {
-    color: var(--eggshell);
+    color: var(--onyx);
 
     position: absolute;
-    top: 2.3em;
+    bottom: -1.75em;
     right: 1em;
     font-size: .8em;
 }