diff --git a/index.html b/index.html
index c0de9a3..0280b68 100644
--- a/index.html
+++ b/index.html
@@ -6,7 +6,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;