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

Compare commits

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

4 Commits
6589d76d5f ... de69867942

Author SHA1 Message Date
Cat Flynn
de69867942 feat: opening message 2025-05-01 00:56:11 +01:00
Cat Flynn
ff7b933cfc feat: sncf theme 2025-05-01 00:56:10 +01:00
Cat Flynn
a79838f37a feat: merde alors 2025-05-01 00:51:08 +01:00
Cat Flynn
e525120a15 feat: update input style 2025-05-01 00:44:46 +01:00
4 changed files with 120 additions and 31 deletions
Show Stats Expand all files Collapse all files

9
index.html
View File

@ -3,6 +3,7 @@
<head> <head>
<link rel="stylesheet" href="styles.css"/> <link rel="stylesheet" href="styles.css"/>
<meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
</head> </head>
<body> <body>
@ -19,9 +20,11 @@
<p id="typing-indicator">NAME is typing...</p> <p id="typing-indicator">NAME is typing...</p>
<div id="textbox"> <div id="input-panel-container">
<input id="textbox-input" class="rounded-rectangle" type="text" onkeydown="pressSendButton()"></input> <div id="input-panel" class="rounded-rectangle">
<button class="rounded-rectangle" onclick="pressSendButton()">envoyer</button> <input id="textbox-input" type="text" onkeydown="pressSendButton()"></input>
<button onclick="pressSendButton()"><i class="fa fa-arrow-right" style="font-size:2em"></i></button>
</div>
</div> </div>
</div> </div>

67
main.js
View File

@ -10,7 +10,7 @@ class Conversation {
} }
setInteractive(isInteractive) { setInteractive(isInteractive) {
const children = document.getElementById("textbox").children; const children = document.getElementById("input-panel").children;
for (let i = 0; i < children.length; i++) { for (let i = 0; i < children.length; i++) {
children[i].disabled = !isInteractive; children[i].disabled = !isInteractive;
} }
@ -64,7 +64,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;
} }
@ -252,6 +252,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 +299,8 @@ 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);
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 +316,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,6 +332,29 @@ 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);
});
}
setTypingIndicator(false); setTypingIndicator(false);
showConversation("sncf.json"); showConversation("sncf.json");

1
sncf.json
View File

@ -8,5 +8,6 @@
], ],
"messages": "messages":
[ [
{ "character": 1, "text": "Bonjour, moi je m'appelle SNCF Conrad et je vais vous aider aujourd'hui. Veuillez envoyer-moi vos questions." }
] ]
} }

74
styles.css
View File

@ -3,6 +3,7 @@
--gris: #666; --gris: #666;
--noir: #000; --noir: #000;
--clear: #00000000;
--bleu: #0055a4; --bleu: #0055a4;
--rouge: #e1000f; --rouge: #e1000f;
@ -162,11 +163,11 @@ h1 {
} }
ul { ul {
margin: 0;
padding-top: 1em;
padding-right: 2em;
height: 100%;
overflow: scroll; overflow: scroll;
/*height:100%;*/
flex-grow: 1;
margin: 0 .5em;
padding: .5em 0;
list-style: none; list-style: none;
} }
@ -183,14 +184,53 @@ li.message {
margin-bottom: 1em; margin-bottom: 1em;
} }
#textbox { #input-panel-container {
width: 100%; padding: 0 1em 1em 1em;
}
#input-panel {
display: flex; display: flex;
bottom: 0; justify-content: space-between;
padding: 0;
z-index: 1; z-index: 1;
/*background-color: var(--light-cyan);*/ border-radius: 100vw;
color: var(--bluewhite);
background-color: var(--bluegrey);
border-color: var(--bluegrey);
}
#input-panel input {
width: 100%;
color: var(--onyx);
background-color: rgba(0,0,0,0);
border-style: none;
padding: 0 2em;
z-index: 1;
font-size: 1em;
}
#input-panel input:focus {
outline: none;
}
button {
color: var(--vermilion);
background-color: #00000000;
border-style: none;
border-radius: 100% !important;
padding: 1em !important;
float: right;
}
button:hover {
color: var(--light-cyan);
background-color: var(--onyx);
} }
#typing-indicator { #typing-indicator {
@ -202,23 +242,7 @@ li.message {
position: fixed; position: fixed;
bottom: 3em; bottom: 3em;
} visibility: hidden;
#textbox input {
flex-grow: 4;
color: var(--bluewhite);
background-color: var(--bluegrey);
border-color: var(--bluegrey);
border-width: 3px;
border-style: solid;
margin: 0.5em;
left: 1em;
font-size: 1em;
z-index: 1;
} }
button { button {