From 6589d76d5fa2912ed93bd96bdbb27188f079b43b Mon Sep 17 00:00:00 2001
From: Cat Flynn <me@ktyl.dev>
Date: Sat, 26 Apr 2025 21:38:17 +0100
Subject: [PATCH] feat: sncf theme

---
 main.js    | 39 +++++++++++++++++++--------------------
 sncf.json  |  4 ++--
 styles.css | 45 +++++++++++++++++++++++++--------------------
 3 files changed, 46 insertions(+), 42 deletions(-)

diff --git a/main.js b/main.js
index 1e011ca..33ac916 100644
--- a/main.js
+++ b/main.js
@@ -5,7 +5,7 @@ var conversation = null;
 class Conversation {
     constructor(name) {
         this.messages = [];
-        this.name = romanize(name);
+        this.name = name;
         this.score = 1.0;
     }
 
@@ -27,20 +27,26 @@ class Conversation {
     sendUserMessage(text) {
 
         const message = new UserMessage(text);
-        message.updateStatus("envoyé");
+        message.updateStatus("envoy&eacute");
 
         setTimeout(() => {
-            message.updateStatus("livré");
+            message.updateStatus("livr&eacute");
             this.render();
             setTimeout(() => {
                 message.updateStatus("lu");
                 this.render();
-            }, 5000);
-        }, 5000);
+                setTimeout(()=> {
+                    setTimeout(() => {
+                        this.messages.push(new AgentMessage("merde alors"));
+                        this.render();
+                    }, 2000);
+                }, 500);
+            }, 3000);
+        }, 1000);
+        //this.messages.push(message);
         this.messages.push(message);
-            this.messages.push(new AgentMessage(messageText));
-            //this.messages.push(new AgentMessage(messageText));
-            this.render();
+        //this.messages.push(new AgentMessage(messageText));
+        this.render();
     }
 
     // update the current HTML based on messages
@@ -83,13 +89,6 @@ 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;
@@ -110,13 +109,13 @@ class AgentMessage {
 
         if (this.senderName) {
             const nameElem = document.createElement("h3");
-            nameElem.innerHTML = romanize(this.senderName);
+            nameElem.innerHTML = this.senderName;
             contentElem.appendChild(nameElem);
         }
 
         const textElem = document.createElement("span");
         textElem.className = "message-text";
-        textElem.innerHTML = romanize(this.text);
+        textElem.innerHTML = this.text;
         contentElem.appendChild(textElem);
 
         return liElem;
@@ -126,7 +125,7 @@ class AgentMessage {
 class UserMessage {
     constructor(text) {
         this.createdTime = Date.now();
-        this.text = romanize(text);
+        this.text = text;
         this.status = "";
     }
 
@@ -162,7 +161,7 @@ class UserMessage {
 
 class SystemMessage {
     constructor(text) {
-        this.text = romanize(text);
+        this.text = text;
     }
 
     getIsOurs() {
@@ -229,7 +228,7 @@ function pressSendButton() {
 
     if (event.type == "keydown" && event.key != "Enter")
     {
-        textBox.value = romanize(text);
+        textBox.value = text;
         return;
     }
 
diff --git a/sncf.json b/sncf.json
index 76a0f76..6433bc1 100644
--- a/sncf.json
+++ b/sncf.json
@@ -1,10 +1,10 @@
 
 {
-    "title": "SNCF billetier",
+    "title": "SNCF Conrad",
     "interactive": true,
     "characters": [
         "you",
-        "SNCF billetier"
+        "SNCF Conrad"
     ],
     "messages":
     [
diff --git a/styles.css b/styles.css
index 3465f44..775cfec 100644
--- a/styles.css
+++ b/styles.css
@@ -6,7 +6,12 @@
     --bleu: #0055a4;
     --rouge: #e1000f;
 
-    --rose-de-l-erreur: #f0f
+    --rose-de-l-erreur: #f0f;
+
+    --navy: #0b131f;
+    --bluegrey: #232b35;
+    --sky: #7bbffd;
+    --bluewhite: #ebebec;
 }
 
 html {
@@ -18,7 +23,7 @@ body {
     margin: 0;
     height: 100%;
     display: flex;
-    background-color: var(--blanc);
+    background-color: var(--navy);
 }
 
 #side-panel {
@@ -82,7 +87,7 @@ body {
 #header {
     position: sticky;
     top: 0;
-    border-bottom: solid var(--blanc) 3px;
+    border-bottom: none var(--navy) 3px;
 }
 
 #main-panel {
@@ -98,7 +103,7 @@ body {
 
 h1 {
     display: inline-block;
-    color: var(--noir);
+    color: var(--bluewhite);
     margin-left: 1em;
 }
 
@@ -106,9 +111,9 @@ h1 {
     border-width: 2px;
     border: black;
     border-style: none;
-    border-radius: 1em;
+    border-radius: 1.5em;
 
-    padding: .6em .8em;
+    padding: 1em 1.5em;
 }
 
 .message-content {
@@ -117,8 +122,8 @@ h1 {
 }
 
 .message-content.theirs {
-    background-color: var(--bleu);
-    color: var(--blanc);
+    background-color: var(--bluegrey);
+    color: var(--bluewhite);
 
     float: left;
 
@@ -138,7 +143,7 @@ h1 {
 }
 
 .message-content.ours {
-    background-color: var(--rouge);
+    background-color: var(--sky);
 
     right: 0;
     margin-bottom: 0.5em;
@@ -147,7 +152,7 @@ h1 {
 }
 
 .ours .message-text {
-    color: var(--blanc);
+    color: var(--bluegrey);
 }
 
 .system-message {
@@ -189,7 +194,7 @@ li.message {
 }
 
 #typing-indicator {
-    color: var(--gris);
+    color: var(--bluewhite);
 
     margin: 0;
     margin-left: 1em;
@@ -202,9 +207,9 @@ li.message {
 #textbox input {
     flex-grow: 4;
 
-    color: var(--noir);
-    background-color: var(--blanc);
-    border-color: var(--gris);
+    color: var(--bluewhite);
+    background-color: var(--bluegrey);
+    border-color: var(--bluegrey);
     border-width: 3px;
     border-style: solid;
 
@@ -217,8 +222,8 @@ li.message {
 }
 
 button {
-    background-color: var(--rouge);
-    color: var(--blanc);
+    background-color: var(--sky);
+    color: var(--bluegrey);
 
     margin: 0.5em;
     padding: 0;
@@ -230,16 +235,16 @@ button {
 }
 
 button:hover {
-    color: var(--rouge);
-    background-color: var(--blanc);
-    border-color: var(--rouge);
+    color: var(--bluewhite);
+    background-color: var(--bluegrey);
+    border-color: var(--bluegrey);
     border-width: 3px;
     padding: 0;
     border-style: solid;
 }
 
 .message-status {
-    color: var(--gris);
+    color: var(--bluewhite);
 
     position: absolute;
     bottom: -1.75em;