ktyl/shift
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

feat: sncf theme

Browse Source
This commit is contained in:
Cat Flynn 2025-04-26 21:38:17 +01:00
parent 927837c0a4
commit 28759d75dd
3 changed files with 47 additions and 115 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

111
main.js
View File

@ -5,7 +5,7 @@ var conversation = null;
class Conversation { class Conversation {
constructor(name) { constructor(name) {
this.messages = []; this.messages = [];
this.name = romanize(name); this.name = name;
this.score = 1.0; this.score = 1.0;
} }
@ -36,71 +36,22 @@ class Conversation {
sendUserMessage(text) { sendUserMessage(text) {
const message = new UserMessage(text); const message = new UserMessage(text);
message.updateStatus("sent"); message.updateStatus("envoy&eacute");
this.addMessage(message);
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}`);
});
setTimeout(() => { setTimeout(() => {
message.updateStatus("delivered"); message.updateStatus("livr&eacute");
this.render(); this.render();
//setTimeout(() => { setTimeout(() => {
// message.updateStatus("read"); message.updateStatus("lu");
// this.render(); this.render();
//}, 5000); setTimeout(()=> {
setTimeout(() => {
this.addMessage(new AgentMessage("merde alors"));
}, 2000);
}, 500);
}, 3000);
}, 1000); }, 1000);
this.addMessage(message);
} }
// update the current HTML based on messages // update the current HTML based on messages
@ -143,12 +94,6 @@ function getMessageList() {
return document.getElementById("messages"); return document.getElementById("messages");
} }
function romanize(text) {
text = text.replaceAll('u', 'v');
text = text.replaceAll('U', 'V');
return text;
}
class AgentMessage { class AgentMessage {
constructor(text, senderName) { constructor(text, senderName) {
this.text = text; this.text = text;
@ -169,13 +114,13 @@ class AgentMessage {
if (this.senderName) { if (this.senderName) {
const nameElem = document.createElement("h3"); const nameElem = document.createElement("h3");
nameElem.innerHTML = romanize(this.senderName); nameElem.innerHTML = this.senderName;
contentElem.appendChild(nameElem); contentElem.appendChild(nameElem);
} }
const textElem = document.createElement("span"); const textElem = document.createElement("span");
textElem.className = "message-text"; textElem.className = "message-text";
textElem.innerHTML = romanize(this.text); textElem.innerHTML = this.text;
contentElem.appendChild(textElem); contentElem.appendChild(textElem);
return liElem; return liElem;
@ -185,7 +130,7 @@ class AgentMessage {
class UserMessage { class UserMessage {
constructor(text) { constructor(text) {
this.createdTime = Date.now(); this.createdTime = Date.now();
this.text = romanize(text); this.text = text;
this.status = ""; this.status = "";
} }
@ -221,7 +166,7 @@ class UserMessage {
class SystemMessage { class SystemMessage {
constructor(text) { constructor(text) {
this.text = romanize(text); this.text = text;
} }
getIsOurs() { getIsOurs() {
@ -288,7 +233,7 @@ function pressSendButton() {
if (event.type == "keydown" && event.key != "Enter") if (event.type == "keydown" && event.key != "Enter")
{ {
textBox.value = romanize(text); textBox.value = text;
return; return;
} }
@ -360,8 +305,6 @@ function showConversation(path) {
const conversationListElem = document.getElementById("side-panel"); const conversationListElem = document.getElementById("side-panel");
setVisibleOnMobile(mainPanel, true); setVisibleOnMobile(mainPanel, true);
setVisibleOnMobile(conversationListElem, false);
readConversationJson(path, json => { readConversationJson(path, json => {
conversation = new Conversation(json.title); 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); setTypingIndicator(false);
populateConversationList();
showConversation("ides-of-march.json"); showConversation("sncf.json");

4
sncf.json
View File

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

47
styles.css
View File

@ -7,7 +7,12 @@
--bleu: #0055a4; --bleu: #0055a4;
--rouge: #e1000f; --rouge: #e1000f;
--rose-de-l-erreur: #f0f --rose-de-l-erreur: #f0f;
--navy: #0b131f;
--bluegrey: #232b35;
--sky: #7bbffd;
--bluewhite: #ebebec;
} }
html { html {
@ -19,7 +24,7 @@ body {
margin: 0; margin: 0;
height: 100%; height: 100%;
display: flex; display: flex;
background-color: var(--blanc); background-color: var(--navy);
} }
#side-panel { #side-panel {
@ -91,7 +96,7 @@ body {
#header { #header {
position: sticky; position: sticky;
top: 0; top: 0;
border-bottom: solid var(--blanc) 3px; border-bottom: none var(--navy) 3px;
} }
#main-panel { #main-panel {
@ -107,7 +112,7 @@ body {
h1 { h1 {
display: inline-block; display: inline-block;
color: var(--noir); color: var(--bluewhite);
margin-left: 1em; margin-left: 1em;
} }
@ -115,9 +120,9 @@ h1 {
border-width: 2px; border-width: 2px;
border: black; border: black;
border-style: none; border-style: none;
border-radius: 1em; border-radius: 1.5em;
padding: .6em .8em; padding: 1em 1.5em;
} }
.message-content { .message-content {
@ -126,8 +131,8 @@ h1 {
} }
.message-content.theirs { .message-content.theirs {
background-color: var(--bleu); background-color: var(--bluegrey);
color: var(--blanc); color: var(--bluewhite);
float: left; float: left;
@ -147,7 +152,7 @@ h1 {
} }
.message-content.ours { .message-content.ours {
background-color: var(--rouge); background-color: var(--sky);
right: 0; right: 0;
margin-bottom: 0.5em; margin-bottom: 0.5em;
@ -155,7 +160,7 @@ border-bottom-right-radius: 0;
} }
.ours .message-text { .ours .message-text {
color: var(--blanc); color: var(--bluegrey);
} }
.system-message { .system-message {
@ -199,9 +204,9 @@ li.message {
border-radius: 100vw; border-radius: 100vw;
color: var(--noir); color: var(--bluewhite);
background-color: var(--blanc); background-color: var(--bluegrey);
border-color: var(--gris); border-color: var(--bluegrey);
} }
#input-panel input { #input-panel input {
@ -236,7 +241,7 @@ button:hover {
} }
#typing-indicator { #typing-indicator {
color: var(--gris); color: var(--bluewhite);
margin: 0; margin: 0;
margin-left: 1em; margin-left: 1em;
@ -244,12 +249,12 @@ button:hover {
position: fixed; position: fixed;
bottom: 3em; bottom: 3em;
visibility: hidden;
} }
button { button {
background-color: var(--rouge); background-color: var(--sky);
color: var(--blanc); color: var(--bluegrey);
margin: 0.5em; margin: 0.5em;
padding: 0; padding: 0;
@ -261,16 +266,16 @@ button {
} }
button:hover { button:hover {
color: var(--rouge); color: var(--bluewhite);
background-color: var(--blanc); background-color: var(--bluegrey);
border-color: var(--rouge); border-color: var(--bluegrey);
border-width: 3px; border-width: 3px;
padding: 0; padding: 0;
border-style: solid; border-style: solid;
} }
.message-status { .message-status {
color: var(--gris); color: var(--bluewhite);
position: absolute; position: absolute;
bottom: -1.75em; bottom: -1.75em;