From 28759d75ddb4a1a7baf310e973cdca55fca07e8e Mon Sep 17 00:00:00 2001 From: Cat Flynn Date: Sat, 26 Apr 2025 21:38:17 +0100 Subject: [PATCH] feat: sncf theme --- main.js | 111 +++++++++-------------------------------------------- sncf.json | 4 +- styles.css | 47 +++++++++++++---------- 3 files changed, 47 insertions(+), 115 deletions(-) diff --git a/main.js b/main.js index dcc180e..2835240 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; } @@ -36,71 +36,22 @@ class Conversation { sendUserMessage(text) { const message = new UserMessage(text); - message.updateStatus("sent"); - - const url = 'http://192.168.1.115:5000/chat'; - const data = text; - - fetch(url, { - method: 'POST', // Corresponds to -X POST - headers: { - 'Content-Type': 'text/plain' // Corresponds to -H "Content-Type: text/plain" - }, - body: data // Corresponds to -d "..." - }) - .then(response => { - // Check if the request was successful (status code 2xx) - if (!response.ok) { - // If not successful, throw an error to be caught by .catch() - throw new Error(`HTTP error! status: ${response.status}`); - } - // Get the response body as text - return response.text(); - }) - .then(response => { - // TODO: check JSON - const json = JSON.parse(response); - - // Success! - var messageText = json.message; - - console.log(json); - var score = parseFloat(json.score); - this.score += score; - console.log(this.score); - if (this.score > 2.0) - { - messageText = "shit they're here D:"; - this.setInteractive(false); - } - else if (this.score < 0.0) - { - messageText = "shit u won :D"; - this.setInteractive(false); - } - else - { - messageText = json.message; - } - - this.addMessage(new AgentMessage(messageText)); - this.render(); - }) - .catch(error => { - // Handle any errors that occurred during the fetch - console.error('Error during fetch:', error); - alert(`Error fetching data: ${error.message}`); - }); + message.updateStatus("envoyé"); + this.addMessage(message); setTimeout(() => { - message.updateStatus("delivered"); + message.updateStatus("livré"); this.render(); - //setTimeout(() => { - // message.updateStatus("read"); - // this.render(); - //}, 5000); + setTimeout(() => { + message.updateStatus("lu"); + this.render(); + setTimeout(()=> { + setTimeout(() => { + this.addMessage(new AgentMessage("merde alors")); + }, 2000); + }, 500); + }, 3000); }, 1000); - this.addMessage(message); } // update the current HTML based on messages @@ -143,12 +94,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; @@ -169,13 +114,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; @@ -185,7 +130,7 @@ class AgentMessage { class UserMessage { constructor(text) { this.createdTime = Date.now(); - this.text = romanize(text); + this.text = text; this.status = ""; } @@ -221,7 +166,7 @@ class UserMessage { class SystemMessage { constructor(text) { - this.text = romanize(text); + this.text = text; } getIsOurs() { @@ -288,7 +233,7 @@ function pressSendButton() { if (event.type == "keydown" && event.key != "Enter") { - textBox.value = romanize(text); + textBox.value = text; return; } @@ -360,8 +305,6 @@ function showConversation(path) { const conversationListElem = document.getElementById("side-panel"); setVisibleOnMobile(mainPanel, true); - setVisibleOnMobile(conversationListElem, false); - readConversationJson(path, json => { conversation = new Conversation(json.title); @@ -416,24 +359,8 @@ function addConversationPreview(path) { }); } -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"); +showConversation("sncf.json"); 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 a5d3880..4194d92 100644 --- a/styles.css +++ b/styles.css @@ -7,7 +7,12 @@ --bleu: #0055a4; --rouge: #e1000f; - --rose-de-l-erreur: #f0f + --rose-de-l-erreur: #f0f; + + --navy: #0b131f; + --bluegrey: #232b35; + --sky: #7bbffd; + --bluewhite: #ebebec; } html { @@ -19,7 +24,7 @@ body { margin: 0; height: 100%; display: flex; - background-color: var(--blanc); + background-color: var(--navy); } #side-panel { @@ -91,7 +96,7 @@ body { #header { position: sticky; top: 0; - border-bottom: solid var(--blanc) 3px; + border-bottom: none var(--navy) 3px; } #main-panel { @@ -107,7 +112,7 @@ body { h1 { display: inline-block; - color: var(--noir); + color: var(--bluewhite); margin-left: 1em; } @@ -115,9 +120,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 { @@ -126,8 +131,8 @@ h1 { } .message-content.theirs { - background-color: var(--bleu); - color: var(--blanc); + background-color: var(--bluegrey); + color: var(--bluewhite); float: left; @@ -147,7 +152,7 @@ h1 { } .message-content.ours { - background-color: var(--rouge); + background-color: var(--sky); right: 0; margin-bottom: 0.5em; @@ -155,7 +160,7 @@ border-bottom-right-radius: 0; } .ours .message-text { - color: var(--blanc); + color: var(--bluegrey); } .system-message { @@ -199,9 +204,9 @@ li.message { border-radius: 100vw; - color: var(--noir); - background-color: var(--blanc); - border-color: var(--gris); + color: var(--bluewhite); + background-color: var(--bluegrey); + border-color: var(--bluegrey); } #input-panel input { @@ -236,7 +241,7 @@ button:hover { } #typing-indicator { - color: var(--gris); + color: var(--bluewhite); margin: 0; margin-left: 1em; @@ -244,12 +249,12 @@ button:hover { position: fixed; bottom: 3em; + visibility: hidden; } - button { - background-color: var(--rouge); - color: var(--blanc); + background-color: var(--sky); + color: var(--bluegrey); margin: 0.5em; padding: 0; @@ -261,16 +266,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;