From 7765d258359230b7c66b91c8d5c11af7c078bff1 Mon Sep 17 00:00:00 2001 From: Cat Flynn Date: Fri, 25 Apr 2025 01:03:58 +0100 Subject: [PATCH] feat: merde alors --- index.html | 4 +- main.js | 157 +++++------------------------------------------------ sncf.json | 12 ++++ styles.css | 89 ++++++++++++++---------------- 4 files changed, 70 insertions(+), 192 deletions(-) create mode 100644 sncf.json diff --git a/index.html b/index.html index c0de9a3..0280b68 100644 --- a/index.html +++ b/index.html @@ -6,7 +6,7 @@ -
+
@@ -21,7 +21,7 @@
- +
diff --git a/main.js b/main.js index 3c022c5..1e011ca 100644 --- a/main.js +++ b/main.js @@ -27,71 +27,20 @@ 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.messages.push(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é"); setTimeout(() => { - message.updateStatus("delivered"); + message.updateStatus("livré"); this.render(); - //setTimeout(() => { - // message.updateStatus("read"); - // this.render(); - //}, 5000); - }, 1000); + setTimeout(() => { + message.updateStatus("lu"); + this.render(); + }, 5000); + }, 5000); this.messages.push(message); + this.messages.push(new AgentMessage(messageText)); + //this.messages.push(new AgentMessage(messageText)); + this.render(); } // update the current HTML based on messages @@ -109,7 +58,7 @@ class Conversation { // if we haven't found a read message yet, let's check to see if we have now if (!foundReadMessage) { - if (message.status == "read") { + if (message.status == "lu") { foundReadMessage = true; continue; } @@ -135,6 +84,7 @@ function getMessageList() { } function romanize(text) { + text = text.replaceAll('u', 'v'); text = text.replaceAll('U', 'V'); return text; @@ -303,42 +253,6 @@ function onMessageSent(message) { updateChat(message); } -// probably a bit hacky! but this saves having to do like, state or something in CSS? -// which probably is possible and probably would be the better way to do it, but that -// sounds like a bunch of learning i'm not SUPER in the mood for -function setVisibleOnMobile(element, isVisible) { - let classes = element.className.split().filter(c => c != ""); - const invisibleClass = "invisible-on-mobile"; - const visibleClass = "visible"; - - if (isVisible && !classes.includes(visibleClass)) { - const idx = classes.indexOf(invisibleClass); - if (idx != -1) { - classes.splice(idx, 1); - } - classes.push(visibleClass); - } else if (!isVisible && !classes.includes(invisibleClass)) { - const idx = classes.indexOf(visibleClass); - if (idx != -1) { - classes.splice(idx, 1); - } - classes.push(invisibleClass); - } - - element.className = classes.join(" "); -} - -function showSidePanel() { - // this function can only be called on mobile. the main conversation should be - // hidden and the side conversations panel should take up the whole screen. - - const mainPanel = document.getElementById("main-panel"); - const conversationListElem = document.getElementById("side-panel"); - - setVisibleOnMobile(mainPanel, false); - setVisibleOnMobile(conversationListElem, true); -} - function readConversationJson(path, callback) { fetch(path) .then(response => response.json()) @@ -350,10 +264,6 @@ function showConversation(path) { const mainPanel = document.getElementById("main-panel"); const conversationListElem = document.getElementById("side-panel"); - setVisibleOnMobile(mainPanel, true); - setVisibleOnMobile(conversationListElem, false); - - readConversationJson(path, json => { conversation = new Conversation(json.title); const jsonMessages = json.messages; @@ -369,7 +279,7 @@ function showConversation(path) { initialMessages.push(message); } else if (data.character == 0) { const message = new UserMessage(text); - message.updateStatus("read"); + message.updateStatus("lu"); initialMessages.push(message); } else { const message = participants.length > 2 @@ -385,46 +295,7 @@ function showConversation(path) { }); } -function addConversationPreview(path) { - const listRoot = document.getElementById("side-panel"); - - readConversationJson(path, json => { - const messages = json.messages; - - const elem = document.createElement("div"); - elem.onclick = () => showConversation(path); - elem.className = "conversation"; - - const headerElem = document.createElement("h2"); - headerElem.innerHTML = romanize(json.title); - elem.appendChild(headerElem); - - const previewElem = document.createElement("span"); - previewElem.innerHTML = messages.length > 0 ? romanize(messages[messages.length - 1].text) : ""; - elem.appendChild(previewElem); - - listRoot.appendChild(elem); - }); -} - -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 new file mode 100644 index 0000000..76a0f76 --- /dev/null +++ b/sncf.json @@ -0,0 +1,12 @@ + +{ + "title": "SNCF billetier", + "interactive": true, + "characters": [ + "you", + "SNCF billetier" + ], + "messages": + [ + ] +} diff --git a/styles.css b/styles.css index d7eda23..3465f44 100644 --- a/styles.css +++ b/styles.css @@ -1,16 +1,12 @@ :root { - --dark-purple: #271f30; - --light-red: #ff686b; - --eggshell: #dfe2cf; - --ucla-blue: #4d7298; - --robin-egg-blue: #66ced6; + --blanc: #fff; + --gris: #666; + --noir: #000; - --vermilion: #ef3e36; - --lapis-lazuli: #235789; - --onyx: #383d3b; - --light-cyan: #e0fbfc; - --buff: #edb88b; - --eeriee-black: #1d201f; + --bleu: #0055a4; + --rouge: #e1000f; + + --rose-de-l-erreur: #f0f } html { @@ -22,13 +18,14 @@ body { margin: 0; height: 100%; display: flex; - background-color: var(--buff); + background-color: var(--blanc); } #side-panel { height: 100%; - display: none; - color: var(--onyx); + color: var(--noir); + display: block; + width: 100%; } #header button { @@ -37,11 +34,6 @@ body { visibility: visible; } -#side-panel { - display: block; - width: 100%; -} - #side-panel.invisible-on-mobile { display: none; } @@ -49,10 +41,10 @@ body { /* on desktop only */ @media only screen and (min-width: 768px) { #side-panel { - display: block; + min-width: 300px; width: auto; visibility: visible; - border-right: 3px solid var(--onyx); + border-right: 3px solid var(--noir); } #side-panel.invisible-on-mobile { @@ -65,19 +57,13 @@ body { padding: 0; visibility: hidden; } - - #side-panel .conversation { - max-width: 300px; - } - } #side-panel .conversation { width: 100%; height: 70px; - border-bottom: solid var(--onyx) 3px; + border-bottom: solid var(--noir) 3px; color: var(--onyx); - padding: .5em; white-space: nowrap; overflow: hidden; @@ -85,8 +71,8 @@ body { } #side-panel .conversation:hover { - background-color: var(--vermilion); - color: var(--light-cyan); + background-color: var(--bleu); + color: var(--blanc); } #side-panel h2 { @@ -96,14 +82,14 @@ body { #header { position: sticky; top: 0; - border-bottom: solid var(--onyx) 3px; + border-bottom: solid var(--blanc) 3px; } #main-panel { display: flex; flex-direction: column; justify-content: flex-end; - width: calc(100% - 300px); + width: 100%; } #page { @@ -112,7 +98,7 @@ body { h1 { display: inline-block; - color: var(--onyx); + color: var(--noir); margin-left: 1em; } @@ -131,8 +117,8 @@ h1 { } .message-content.theirs { - background-color: var(--onyx); - color: var(--light-cyan); + background-color: var(--bleu); + color: var(--blanc); float: left; @@ -140,7 +126,7 @@ h1 { } .message-content.theirs h3 { - color: var(--buff); + color: var(--blanc); margin: 0; margin-bottom: 3px; font-size: .85em; @@ -152,7 +138,7 @@ h1 { } .message-content.ours { - background-color: var(--vermilion); + background-color: var(--rouge); right: 0; margin-bottom: 0.5em; @@ -161,11 +147,11 @@ h1 { } .ours .message-text { - color: var(--light-cyan); + color: var(--blanc); } .system-message { - color: var(--onyx); + color: var(--gris); width: 100%; text-align: center; } @@ -203,7 +189,7 @@ li.message { } #typing-indicator { - color: var(--eggshell); + color: var(--gris); margin: 0; margin-left: 1em; @@ -216,8 +202,11 @@ li.message { #textbox input { flex-grow: 4; - color: var(--onyx); - background-color: var(--light-cyan); + color: var(--noir); + background-color: var(--blanc); + border-color: var(--gris); + border-width: 3px; + border-style: solid; margin: 0.5em; left: 1em; @@ -228,23 +217,29 @@ li.message { } button { - background-color: var(--vermilion); - color: var(--light-cyan); + background-color: var(--rouge); + color: var(--blanc); margin: 0.5em; padding: 0; flex-grow: 1; right: 0; font-size: 1em; + border-width: 3px; + border-style: none; } button:hover { - color: var(--light-cyan); - background-color: var(--onyx); + color: var(--rouge); + background-color: var(--blanc); + border-color: var(--rouge); + border-width: 3px; + padding: 0; + border-style: solid; } .message-status { - color: var(--onyx); + color: var(--gris); position: absolute; bottom: -1.75em;