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 {
-
-}