feat: merde alors

main.js

@@ -5,7 +5,7 @@ var conversation = null;
 class Conversation {
     constructor(name) {
         this.messages = [];
-        this.name = name;
+        this.name = romanize(name);
         this.score = 1.0;
     }
 
@@ -27,26 +27,20 @@ class Conversation {
     sendUserMessage(text) {
 
         const message = new UserMessage(text);
-        message.updateStatus("envoy&eacute");
+        message.updateStatus("envoyé");
 
         setTimeout(() => {
-            message.updateStatus("livr&eacute");
+            message.updateStatus("livré");
             this.render();
             setTimeout(() => {
                 message.updateStatus("lu");
                 this.render();
-                setTimeout(()=> {
-                    setTimeout(() => {
-                        this.messages.push(new AgentMessage("merde alors"));
-                        this.render();
-                    }, 2000);
-                }, 500);
-            }, 3000);
-        }, 1000);
-        //this.messages.push(message);
+            }, 5000);
+        }, 5000);
         this.messages.push(message);
-        //this.messages.push(new AgentMessage(messageText));
-        this.render();
+            this.messages.push(new AgentMessage(messageText));
+            //this.messages.push(new AgentMessage(messageText));
+            this.render();
     }
 
     // update the current HTML based on messages
@@ -89,6 +83,13 @@ 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;
@@ -109,13 +110,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;
@@ -125,7 +126,7 @@ class AgentMessage {
 class UserMessage {
     constructor(text) {
         this.createdTime = Date.now();
-        this.text = text;
+        this.text = romanize(text);
         this.status = "";
     }
 
@@ -161,7 +162,7 @@ class UserMessage {
 
 class SystemMessage {
     constructor(text) {
-        this.text = text;
+        this.text = romanize(text);
     }
 
     getIsOurs() {
@@ -228,7 +229,7 @@ function pressSendButton() {
 
     if (event.type == "keydown" && event.key != "Enter")
     {
-        textBox.value = text;
+        textBox.value = romanize(text);
         return;
     }
 

sncf.json

@@ -1,10 +1,10 @@
 
 {
-    "title": "SNCF Conrad",
+    "title": "SNCF billetier",
     "interactive": true,
     "characters": [
         "you",
-        "SNCF Conrad"
+        "SNCF billetier"
     ],
     "messages":
     [

styles.css

@@ -6,12 +6,7 @@
     --bleu: #0055a4;
     --rouge: #e1000f;
 
-    --rose-de-l-erreur: #f0f;
-
-    --navy: #0b131f;
-    --bluegrey: #232b35;
-    --sky: #7bbffd;
-    --bluewhite: #ebebec;
+    --rose-de-l-erreur: #f0f
 }
 
 html {
@@ -23,7 +18,7 @@ body {
     margin: 0;
     height: 100%;
     display: flex;
-    background-color: var(--navy);
+    background-color: var(--blanc);
 }
 
 #side-panel {
@@ -87,7 +82,7 @@ body {
 #header {
     position: sticky;
     top: 0;
-    border-bottom: none var(--navy) 3px;
+    border-bottom: solid var(--blanc) 3px;
 }
 
 #main-panel {
@@ -103,7 +98,7 @@ body {
 
 h1 {
     display: inline-block;
-    color: var(--bluewhite);
+    color: var(--noir);
     margin-left: 1em;
 }
 
@@ -111,9 +106,9 @@ h1 {
     border-width: 2px;
     border: black;
     border-style: none;
-    border-radius: 1.5em;
+    border-radius: 1em;
 
-    padding: 1em 1.5em;
+    padding: .6em .8em;
 }
 
 .message-content {
@@ -122,12 +117,10 @@ h1 {
 }
 
 .message-content.theirs {
-    background-color: var(--bluegrey);
-    color: var(--bluewhite);
+    background-color: var(--bleu);
+    color: var(--blanc);
 
     float: left;
-
-    border-bottom-left-radius: 0;
 }
 
 .message-content.theirs h3 {
@@ -143,16 +136,14 @@ h1 {
 }
 
 .message-content.ours {
-    background-color: var(--sky);
+    background-color: var(--rouge);
 
     right: 0;
     margin-bottom: 0.5em;
-
-    border-bottom-right-radius: 0;
 }
 
 .ours .message-text {
-    color: var(--bluegrey);
+    color: var(--blanc);
 }
 
 .system-message {
@@ -194,7 +185,7 @@ li.message {
 }
 
 #typing-indicator {
-    color: var(--bluewhite);
+    color: var(--gris);
 
     margin: 0;
     margin-left: 1em;
@@ -207,9 +198,9 @@ li.message {
 #textbox input {
     flex-grow: 4;
 
-    color: var(--bluewhite);
-    background-color: var(--bluegrey);
-    border-color: var(--bluegrey);
+    color: var(--noir);
+    background-color: var(--blanc);
+    border-color: var(--gris);
     border-width: 3px;
     border-style: solid;
 
@@ -222,8 +213,8 @@ li.message {
 }
 
 button {
-    background-color: var(--sky);
-    color: var(--bluegrey);
+    background-color: var(--rouge);
+    color: var(--blanc);
 
     margin: 0.5em;
     padding: 0;
@@ -235,16 +226,16 @@ button {
 }
 
 button:hover {
-    color: var(--bluewhite);
-    background-color: var(--bluegrey);
-    border-color: var(--bluegrey);
+    color: var(--rouge);
+    background-color: var(--blanc);
+    border-color: var(--rouge);
     border-width: 3px;
     padding: 0;
     border-style: solid;
 }
 
 .message-status {
-    color: var(--bluewhite);
+    color: var(--gris);
 
     position: absolute;
     bottom: -1.75em;