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

Compare commits

base: ktyl:sncf
Branches Tags
ktyl:main
ktyl:ceasar
ktyl:sncf
ktyl:armand
ktyl:v0.1.2
ktyl:v0.1.1
ktyl:v0.1.0
..
compare: ktyl:main
Branches Tags
ktyl:ceasar
ktyl:sncf
ktyl:main
ktyl:armand
ktyl:v0.1.2
ktyl:v0.1.1
ktyl:v0.1.0

No commits in common. "sncf" and "main" have entirely different histories.
sncf ... main

4 changed files with 205 additions and 87 deletions
Show Stats Expand all files Collapse all files

4
index.html
View File

@ -6,7 +6,7 @@
</head> </head>
<body> <body>
<!--<div id="side-panel"></div>--> <div id="side-panel"></div>
<div id="main-panel"> <div id="main-panel">
@ -21,7 +21,7 @@
<div id="textbox"> <div id="textbox">
<input id="textbox-input" class="rounded-rectangle" type="text" onkeydown="pressSendButton()"></input> <input id="textbox-input" class="rounded-rectangle" type="text" onkeydown="pressSendButton()"></input>
<button class="rounded-rectangle" onclick="pressSendButton()">envoyer</button> <button class="rounded-rectangle" onclick="pressSendButton()">send</button>
</div> </div>
</div> </div>

178
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 = name; this.name = romanize(name);
this.score = 1.0; this.score = 1.0;
} }
@ -27,26 +27,71 @@ class Conversation {
sendUserMessage(text) { sendUserMessage(text) {
const message = new UserMessage(text); const message = new UserMessage(text);
message.updateStatus("envoy&eacute"); 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}`);
});
setTimeout(() => { setTimeout(() => {
message.updateStatus("livr&eacute"); message.updateStatus("delivered");
this.render(); this.render();
setTimeout(() => { //setTimeout(() => {
message.updateStatus("lu"); // message.updateStatus("read");
this.render(); // this.render();
setTimeout(()=> { //}, 5000);
setTimeout(() => {
this.messages.push(new AgentMessage("merde alors"));
this.render();
}, 2000);
}, 500);
}, 3000);
}, 1000); }, 1000);
//this.messages.push(message);
this.messages.push(message); this.messages.push(message);
//this.messages.push(new AgentMessage(messageText));
this.render();
} }
// update the current HTML based on messages // update the current HTML based on messages
@ -64,7 +109,7 @@ class Conversation {
// if we haven't found a read message yet, let's check to see if we have now // if we haven't found a read message yet, let's check to see if we have now
if (!foundReadMessage) { if (!foundReadMessage) {
if (message.status == "lu") { if (message.status == "read") {
foundReadMessage = true; foundReadMessage = true;
continue; continue;
} }
@ -89,6 +134,12 @@ 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;
@ -109,13 +160,13 @@ class AgentMessage {
if (this.senderName) { if (this.senderName) {
const nameElem = document.createElement("h3"); const nameElem = document.createElement("h3");
nameElem.innerHTML = this.senderName; nameElem.innerHTML = romanize(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 = this.text; textElem.innerHTML = romanize(this.text);
contentElem.appendChild(textElem); contentElem.appendChild(textElem);
return liElem; return liElem;
@ -125,7 +176,7 @@ class AgentMessage {
class UserMessage { class UserMessage {
constructor(text) { constructor(text) {
this.createdTime = Date.now(); this.createdTime = Date.now();
this.text = text; this.text = romanize(text);
this.status = ""; this.status = "";
} }
@ -161,7 +212,7 @@ class UserMessage {
class SystemMessage { class SystemMessage {
constructor(text) { constructor(text) {
this.text = text; this.text = romanize(text);
} }
getIsOurs() { getIsOurs() {
@ -228,7 +279,7 @@ function pressSendButton() {
if (event.type == "keydown" && event.key != "Enter") if (event.type == "keydown" && event.key != "Enter")
{ {
textBox.value = text; textBox.value = romanize(text);
return; return;
} }
@ -252,6 +303,42 @@ function onMessageSent(message) {
updateChat(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) { function readConversationJson(path, callback) {
fetch(path) fetch(path)
.then(response => response.json()) .then(response => response.json())
@ -263,6 +350,10 @@ function showConversation(path) {
const mainPanel = document.getElementById("main-panel"); const mainPanel = document.getElementById("main-panel");
const conversationListElem = document.getElementById("side-panel"); const conversationListElem = document.getElementById("side-panel");
setVisibleOnMobile(mainPanel, true);
setVisibleOnMobile(conversationListElem, false);
readConversationJson(path, json => { readConversationJson(path, json => {
conversation = new Conversation(json.title); conversation = new Conversation(json.title);
const jsonMessages = json.messages; const jsonMessages = json.messages;
@ -278,7 +369,7 @@ function showConversation(path) {
initialMessages.push(message); initialMessages.push(message);
} else if (data.character == 0) { } else if (data.character == 0) {
const message = new UserMessage(text); const message = new UserMessage(text);
message.updateStatus("lu"); message.updateStatus("read");
initialMessages.push(message); initialMessages.push(message);
} else { } else {
const message = participants.length > 2 const message = participants.length > 2
@ -294,7 +385,46 @@ 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); setTypingIndicator(false);
populateConversationList();
showConversation("sncf.json"); showConversation("ides-of-march.json");

12
sncf.json
View File

@ -1,12 +0,0 @@
{
"title": "SNCF Conrad",
"interactive": true,
"characters": [
"you",
"SNCF Conrad"
],
"messages":
[
]
}

98
styles.css
View File

@ -1,17 +1,16 @@
:root { :root {
--blanc: #fff; --dark-purple: #271f30;
--gris: #666; --light-red: #ff686b;
--noir: #000; --eggshell: #dfe2cf;
--ucla-blue: #4d7298;
--robin-egg-blue: #66ced6;
--bleu: #0055a4; --vermilion: #ef3e36;
--rouge: #e1000f; --lapis-lazuli: #235789;
--onyx: #383d3b;
--rose-de-l-erreur: #f0f; --light-cyan: #e0fbfc;
--buff: #edb88b;
--navy: #0b131f; --eeriee-black: #1d201f;
--bluegrey: #232b35;
--sky: #7bbffd;
--bluewhite: #ebebec;
} }
html { html {
@ -23,14 +22,13 @@ body {
margin: 0; margin: 0;
height: 100%; height: 100%;
display: flex; display: flex;
background-color: var(--navy); background-color: var(--buff);
} }
#side-panel { #side-panel {
height: 100%; height: 100%;
color: var(--noir); display: none;
display: block; color: var(--onyx);
width: 100%;
} }
#header button { #header button {
@ -39,6 +37,11 @@ body {
visibility: visible; visibility: visible;
} }
#side-panel {
display: block;
width: 100%;
}
#side-panel.invisible-on-mobile { #side-panel.invisible-on-mobile {
display: none; display: none;
} }
@ -46,10 +49,10 @@ body {
/* on desktop only */ /* on desktop only */
@media only screen and (min-width: 768px) { @media only screen and (min-width: 768px) {
#side-panel { #side-panel {
min-width: 300px; display: block;
width: auto; width: auto;
visibility: visible; visibility: visible;
border-right: 3px solid var(--noir); border-right: 3px solid var(--onyx);
} }
#side-panel.invisible-on-mobile { #side-panel.invisible-on-mobile {
@ -62,13 +65,19 @@ body {
padding: 0; padding: 0;
visibility: hidden; visibility: hidden;
} }
#side-panel .conversation {
max-width: 300px;
}
} }
#side-panel .conversation { #side-panel .conversation {
width: 100%; width: 100%;
height: 70px; height: 70px;
border-bottom: solid var(--noir) 3px; border-bottom: solid var(--onyx) 3px;
color: var(--onyx); color: var(--onyx);
padding: .5em;
white-space: nowrap; white-space: nowrap;
overflow: hidden; overflow: hidden;
@ -76,8 +85,8 @@ body {
} }
#side-panel .conversation:hover { #side-panel .conversation:hover {
background-color: var(--bleu); background-color: var(--vermilion);
color: var(--blanc); color: var(--light-cyan);
} }
#side-panel h2 { #side-panel h2 {
@ -87,14 +96,14 @@ body {
#header { #header {
position: sticky; position: sticky;
top: 0; top: 0;
border-bottom: none var(--navy) 3px; border-bottom: solid var(--onyx) 3px;
} }
#main-panel { #main-panel {
display: flex; display: flex;
flex-direction: column; flex-direction: column;
justify-content: flex-end; justify-content: flex-end;
width: 100%; width: calc(100% - 300px);
} }
#page { #page {
@ -103,7 +112,7 @@ body {
h1 { h1 {
display: inline-block; display: inline-block;
color: var(--bluewhite); color: var(--onyx);
margin-left: 1em; margin-left: 1em;
} }
@ -111,9 +120,9 @@ h1 {
border-width: 2px; border-width: 2px;
border: black; border: black;
border-style: none; border-style: none;
border-radius: 1.5em; border-radius: 1em;
padding: 1em 1.5em; padding: .6em .8em;
} }
.message-content { .message-content {
@ -122,8 +131,8 @@ h1 {
} }
.message-content.theirs { .message-content.theirs {
background-color: var(--bluegrey); background-color: var(--onyx);
color: var(--bluewhite); color: var(--light-cyan);
float: left; float: left;
@ -131,7 +140,7 @@ h1 {
} }
.message-content.theirs h3 { .message-content.theirs h3 {
color: var(--blanc); color: var(--buff);
margin: 0; margin: 0;
margin-bottom: 3px; margin-bottom: 3px;
font-size: .85em; font-size: .85em;
@ -143,7 +152,7 @@ h1 {
} }
.message-content.ours { .message-content.ours {
background-color: var(--sky); background-color: var(--vermilion);
right: 0; right: 0;
margin-bottom: 0.5em; margin-bottom: 0.5em;
@ -152,11 +161,11 @@ h1 {
} }
.ours .message-text { .ours .message-text {
color: var(--bluegrey); color: var(--light-cyan);
} }
.system-message { .system-message {
color: var(--gris); color: var(--onyx);
width: 100%; width: 100%;
text-align: center; text-align: center;
} }
@ -194,7 +203,7 @@ li.message {
} }
#typing-indicator { #typing-indicator {
color: var(--bluewhite); color: var(--eggshell);
margin: 0; margin: 0;
margin-left: 1em; margin-left: 1em;
@ -207,11 +216,8 @@ li.message {
#textbox input { #textbox input {
flex-grow: 4; flex-grow: 4;
color: var(--bluewhite); color: var(--onyx);
background-color: var(--bluegrey); background-color: var(--light-cyan);
border-color: var(--bluegrey);
border-width: 3px;
border-style: solid;
margin: 0.5em; margin: 0.5em;
left: 1em; left: 1em;
@ -222,29 +228,23 @@ li.message {
} }
button { button {
background-color: var(--sky); background-color: var(--vermilion);
color: var(--bluegrey); color: var(--light-cyan);
margin: 0.5em; margin: 0.5em;
padding: 0; padding: 0;
flex-grow: 1; flex-grow: 1;
right: 0; right: 0;
font-size: 1em; font-size: 1em;
border-width: 3px;
border-style: none;
} }
button:hover { button:hover {
color: var(--bluewhite); color: var(--light-cyan);
background-color: var(--bluegrey); background-color: var(--onyx);
border-color: var(--bluegrey);
border-width: 3px;
padding: 0;
border-style: solid;
} }
.message-status { .message-status {
color: var(--bluewhite); color: var(--onyx);
position: absolute; position: absolute;
bottom: -1.75em; bottom: -1.75em;