From 08a15b9c958e916472491d3ebb74b7b58c5ad301 Mon Sep 17 00:00:00 2001 From: ktyl Date: Sat, 5 Oct 2024 18:35:24 +0100 Subject: [PATCH] feat: conversation switcher --- index.html | 19 ++------ lucius.json | 12 +++++ main.js | 126 +++++++++++++++++++++++++++++++++++++++++++--------- styles.css | 72 ++++++++++++++++++++---------- 4 files changed, 168 insertions(+), 61 deletions(-) create mode 100644 lucius.json diff --git a/index.html b/index.html index 519f2a5..c0de9a3 100644 --- a/index.html +++ b/index.html @@ -6,26 +6,12 @@ -
+
-
-

Lorem

- Lorem ipsum blah-de-fuck -
-
-

Caesar

- Heyy Markus-chan uwu xoxo. i heard u was in town maybe stop by -
- - - -
@@ -37,6 +23,7 @@ TODO: other conversations to fill out the panel! filler stuff!
+ diff --git a/lucius.json b/lucius.json new file mode 100644 index 0000000..ab1997c --- /dev/null +++ b/lucius.json @@ -0,0 +1,12 @@ +[ + { "character": 0, "text": "How’s everything in Rome, Lucius?" }, + { "character": 1, "text": "Same old chaos. Senate’s split on everything." }, + { "character": 0, "text": "Let them bicker. You’re holding up, right?" }, + { "character": 1, "text": "Barely. Could use more allies here." }, + { "character": 0, "text": "I’ll see what I can do. Don’t let them push you around." }, + { "character": 1, "text": "Not worried about that. Just tired of their nonsense." }, + { "character": 0, "text": "Hang in there. I’ll be back soon." }, + { "character": 1, "text": "You better. You owe me a break." }, + { "character": 0, "text": "It’s coming, trust me." } +] + diff --git a/main.js b/main.js index a4d060b..fabdb7f 100644 --- a/main.js +++ b/main.js @@ -177,31 +177,115 @@ function onMessageSent(message) { updateChat(message); } -function init(messagesData) { - conversation = new Conversation("Caesar"); +// 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"; - let initialMessages = []; - - for (let i = 0; i < messagesData.length; i++) { - const data = messagesData[i]; - const text = data.text; - if (data.character == 0) { - const message = new UserMessage(text); - message.updateStatus("delivered"); - initialMessages.push(message); - } else { - const message = new AgentMessage(text); - initialMessages.push(message); + if (isVisible && !classes.includes(visibleClass)) { + const idx = classes.indexOf(invisibleClass); + if (idx != -1) { + classes.splice(idx, 1); } + classes.push(visibleClass); + } else if (!classes.includes(invisibleClass)) { + const idx = classes.indexOf(visibleClass); + if (idx != -1) { + classes.splice(idx, 1); + } + classes.push(invisibleClass); } - conversation.initialize(initialMessages); - conversation.render(); - - setTypingIndicator(false); + element.className = classes.join(" "); } -fetch("lorem.json") - .then(response => response.json()) - .then(json => init(json)); +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 showConversation(path) { + + const mainPanel = document.getElementById("main-panel"); + const conversationListElem = document.getElementById("side-panel"); + + setVisibleOnMobile(mainPanel, true); + setVisibleOnMobile(conversationListElem, false); + + const title = path.split(".")[0]; + + fetch(path) + .then(response => response.json()) + .then(json => { + conversation = new Conversation(title); + + let initialMessages = []; + + for (let i = 0; i < json.length; i++) { + const data = json[i]; + const text = data.text; + if (data.character == 0) { + const message = new UserMessage(text); + message.updateStatus("delivered"); + initialMessages.push(message); + } else { + const message = new AgentMessage(text); + initialMessages.push(message); + } + } + + conversation.initialize(initialMessages); + conversation.render(); + }); +} + +function addConversationPreview(path) { + const title = path.split(".")[0]; + const listRoot = document.getElementById("side-panel"); + + fetch(path) + .then(response => response.json()) + .then(json => { + const elem = document.createElement("div"); + elem.onclick = () => showConversation(path); + elem.className = "conversation"; + + const headerElem = document.createElement("h2"); + headerElem.innerHTML = title; + elem.appendChild(headerElem); + + const previewElem = document.createElement("span"); + previewElem.innerHTML = json[json.length - 1].text; + elem.appendChild(previewElem); + + listRoot.appendChild(elem); + }); +} + +function populateConversationList() { + const conversationFiles = [ + "caesar.json", + "lucius.json", + "ides-of-march.json" + ]; + + for (let i = 0; i < conversationFiles.length; i++) { + const path = conversationFiles[i]; + addConversationPreview(path); + } +} + +setTypingIndicator(false); +populateConversationList(); + +showConversation("lucius.json"); diff --git a/styles.css b/styles.css index fa280cb..eb91c67 100644 --- a/styles.css +++ b/styles.css @@ -19,16 +19,56 @@ body { #side-panel { height: 100%; - background-color: red; + background-color: var(--dark-purple); + display: none; +} - width: 0; - visibility: hidden; +#header button { + transform: translateY(-.3em); + width: auto; + visibility: visible; +} + +#side-panel { + display: block; + width: 100%; +} + +#side-panel.invisible-on-mobile { + display: none; +} + +/* on desktop only */ +@media only screen and (min-width: 768px) { + #side-panel { + display: block; + width: auto; + visibility: visible; + border-right: 3px solid var(--eggshell); + } + + #side-panel.invisible-on-mobile { + display: block; + } + + #header button { + width: 0; + margin: 0; + padding: 0; + visibility: hidden; + } + + #side-panel .conversation { + max-width: 300px; + } } #side-panel .conversation { - width: 300px; + width: 100%; height: 70px; - border: solid black 3px; + border-bottom: solid var(--eggshell) 3px; + color: var(--eggshell); + padding: .5em; white-space: nowrap; overflow: hidden; @@ -36,7 +76,8 @@ body { } #side-panel .conversation:hover { - background-color: pink; + background-color: var(--eggshell); + color: var(--dark-purple); } #side-panel h2 { @@ -46,7 +87,6 @@ body { #header { position: sticky; top: 0; - background-color: red; } #main-panel { @@ -63,9 +103,6 @@ body { } h1 { - transform: translateY(.3rem); - height: 100%; - margin: 0; display: inline-block; color: var(--eggshell); @@ -114,6 +151,7 @@ h1 { ul { overflow: scroll; + /*height:100%;*/ flex-grow: 1; margin: .5em; padding: 0; @@ -185,16 +223,6 @@ button:hover { background-color: var(--eggshell); } -@media only screen and (min-width: 768px) { - button { - width: 10%; - } - - #textbox input { - width: 85%; - } -} - .progress-bar { width: 100%; height: 100%; @@ -222,7 +250,3 @@ button:hover { right: 1em; font-size: .8em; } - -.conversations { - -}