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

Compare commits

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

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

10 changed files with 323 additions and 580 deletions
Show Stats Expand all files Collapse all files

13
caesar.json
View File

@ -1,13 +0,0 @@
{
"title": "Julius Caesar",
"interactive": true,
"characters": [
"Mark Antony",
"Julius Caesar"
],
"messages":
[
{ "character": 0, "text": "Sire! Forgive my informal message. We must speak."},
{ "character": 1, "text": "What is the meaning of this? What is so urgent it cannot wait for our usual meeting? Speak plainly and get to the pooint. I have more important matters to attend to than deciphering vague missives."}
]
}

40
ides-of-march.json
View File

@ -1,40 +0,0 @@
{
"title": "Operation Ides of March",
"interactive": false,
"characters": [
"Mark Antony",
"Cassius",
"Brutus",
"Casca",
"Decimus",
"Trebonius"
],
"messages": [
{ "character": -1, "text": "Cassius created Operation Ides of March." },
{ "character": -1, "text": "Cassius added Brutus, Casca, Decimus, Trebonius and Mark Antony." },
{ "character": 1, "text": "Alright, it’s time. We need to finalize the plan. Everyone good for tomorrow?" },
{ "character": 2, "text": "Yes, it has to be tomorrow. No more delays." },
{ "character": 3, "text": "Do we know exactly where he’s going to be?" },
{ "character": 4, "text": "He’s going to the Senate tomorrow for sure. I’ve convinced him to go, even though he’s been acting paranoid lately." },
{ "character": 5, "text": "Good. We need to catch him before he even suspects anything. Are we all clear on the roles?" },
{ "character": 1, "text": "I’ll signal when we’re ready. Brutus, you’ll come in last. Your presence will make it look more… noble." },
{ "character": 2, "text": "It’s not about appearances. This is about saving the Republic." },
{ "character": 3, "text": "Yeah, yeah. But we can’t forget how people will react after this. They need to see it as necessary." },
{ "character": 1, "text": "Casca, you’ll be the first to strike, as planned. You good with that?" },
{ "character": 3, "text": "Yeah, I’ve got this. One stab, clean." },
{ "character": 4, "text": "Remember, we’re all in this together. There’s no turning back now." },
{ "character": 5, "text": "What about Mark Antony? He’s always close to Caesar." },
{ "character": 1, "text": "Trebonius, you handle him. Keep him distracted outside. Just make sure he doesn’t get involved." },
{ "character": 5, "text": "Consider it done." },
{ "character": 2, "text": "Remember, this isn’t murder. It’s justice. Rome is greater than one man." },
{ "character": 3, "text": "Right. But tomorrow… it’s gonna be chaos." },
{ "character": 4, "text": "We’ll handle the fallout after. Stick to the plan." },
{ "character": 1, "text": "Tomorrow, at the Senate. Let’s end this tyranny." },
{ "character": 2, "text": "For Rome." },
{ "character": 3, "text": "For the Republic." },
{ "character": 5, "text": "For our future." },
{ "character": 0, "text": "uh" },
{ "character": 1, "text": "shit" },
{ "character": -1, "text": "You have been removed from Operation Ides of March." }
]
}

14
index.html
View File

@ -6,26 +6,20 @@
</head>
<body>
<div id="side-panel"></div>
<div id="main-panel">
<div id="header">
<button id="conversation-list-button" class="rounded-rectangle" onclick="showSidePanel()"><- back</button>
<h1 id="header-title">NAME</h1>
<h1>Hester Gomez</h1>
<p class="delay">(Earth, <span id="delay-text"></span>)</p>
</div>
<ul id="messages"></ul>
<p id="typing-indicator">NAME is typing...</p>
<p id="typing-indicator">Hester is typing...</p>
<div id="textbox">
<input id="textbox-input" class="rounded-rectangle" type="text" onkeydown="pressSendButton()"></input>
<input id="textbox-input" class="rounded-rectangle" type="text" disabled></input>
<button class="rounded-rectangle" onclick="pressSendButton()">send</button>
</div>
</div>
<script src="main.js"></script>
</body>
</html>

20
lepidus.json
View File

@ -1,20 +0,0 @@
{
"title": "Lepidus",
"interactive": true,
"characters": [
"Mark Antony",
"Lepidus"
],
"messages": [
{ "character": 0, "text": "Lepidus, how’s the Senate holding up without Caesar?" },
{ "character": 0, "text": "I’m guessing things are getting messier by the day." },
{ "character": 1, "text": "You have no idea." },
{ "character": 1, "text": "Yesterday, half of them couldn’t even agree on the order of the agenda." },
{ "character": 0, "text": "Sounds like a circus." },
{ "character": 0, "text": "Need me to step in and straighten things out?" },
{ "character": 1, "text": "Might need more than that. We’re stretched thin on allies." },
{ "character": 0, "text": "We’ll make it work. Caesar’s return should stabilize things." },
{ "character": 1, "text": "Hopefully. Until then, I’ll try not to let it all fall apart." }
]
}

30
lorem.json
View File

@ -1,30 +0,0 @@
[
{ "character": 0, "text": "Lorem ipsum dolor sit amet, consectetur adipiscing elit." },
{ "character": 1, "text": "Sed do eiusmod tempor incididunt ut labore et dolore magna aliqua." },
{ "character": 0, "text": "Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat." },
{ "character": 0, "text": "Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur." },
{ "character": 1, "text": "Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum." },
{ "character": 0, "text": "Curabitur pretium tincidunt lacus. Nulla gravida orci a odio." },
{ "character": 1, "text": "Suspendisse ut massa. Cras nec ante." },
{ "character": 0, "text": "Pellentesque a nulla. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus." },
{ "character": 1, "text": "Nulla posuere. Vivamus venenatis venenatis risus." },
{ "character": 1, "text": "In pede mi, aliquet sit amet, euismod in, auctor ut, ligula." },
{ "character": 0, "text": "Aliquam dapibus tincidunt metus." },
{ "character": 1, "text": "Praesent justo dolor, lobortis quis, lobortis dignissim, pulvinar ac, lorem." },
{ "character": 0, "text": "Integer vitae libero ac risus egestas placerat." },
{ "character": 0, "text": "Vestibulum commodo felis quis tortor." },
{ "character": 1, "text": "Ut aliquam sollicitudin leo." },
{ "character": 0, "text": "Cras iaculis ultricies nulla." },
{ "character": 1, "text": "Donec quis dui at dolor tempor interdum." },
{ "character": 0, "text": "Vivamus vehicula nulla ut felis." },
{ "character": 1, "text": "Integer malesuada. Vestibulum in felis." },
{ "character": 1, "text": "Mauris fermentum dictum magna." },
{ "character": 0, "text": "Sed laoreet aliquam leo." },
{ "character": 0, "text": "Ut tellus dolor, dapibus eget, elementum vel, cursus eleifend, elit." },
{ "character": 1, "text": "Aenean auctor wisi et urna." },
{ "character": 0, "text": "Aliquam erat volutpat." },
{ "character": 1, "text": "Nam dui mi, tincidunt quis, accumsan porttitor, facilisis luctus, metus." },
{ "character": 0, "text": "Phasellus vulputate condimentum orci." },
{ "character": 1, "text": "Nullam mattis magna quis ligula." }
]

20
lucius.json
View File

@ -1,20 +0,0 @@
{
"title": "Lucius Antony",
"interactive": true,
"characters": [
"Mark Antony",
"Lucius Antony"
],
"messages":
[
{ "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." }
]
}

514
main.js
View File

@ -3,73 +3,167 @@ const startTime = Date.now();
var conversation = null;
class Conversation {
constructor(name) {
constructor(messageData, contactName, onMessageReceived, onMessageSent) {
this.messageData = messageData;
this.contactName = contactName;
this.messageIdx = -1;
// contains both sent and received messages
this.messages = [];
this.name = romanize(name);
// callbacks
this.onMessageReceived = onMessageReceived;
this.onMessageSent = onMessageSent;
}
setInteractive(isInteractive) {
const children = document.getElementById("textbox").children;
for (let i = 0; i < children.length; i++) {
children[i].disabled = !isInteractive;
}
}
initialize(initialMessages) {
document.title = this.name;
document.getElementById("header-title").innerHTML = this.name;
this.messages = initialMessages;
}
// for the user to send their own messages
sendUserMessage(text) {
const message = new UserMessage(text);
message.updateStatus("sent");
start() {
setTimeout(() => {
message.updateStatus("delivered");
this.render();
setTimeout(() => {
message.updateStatus("read");
this.render();
}, 5000);
}, 1000);
this.messageIdx = 0;
this.pings = 1;
const data = this.messageData[this.messageIdx];
const message = new ReceivedMessage(data);
this.messages.push(message);
this.onMessageReceived(message);
}, 3623);
}
// update the current HTML based on messages
render() {
// clear stale HTML
getMessageList().innerHTML = "";
// if there are multiple 'read' messages, we only want the last one to display
// the status. the other ones must have been read, so clear their statuses.
let foundReadMessage = false;
for (let i = this.messages.length - 1; i >= 0; i--) {
const message = this.messages[i];
if (!message.getIsOurs())
continue;
// if we haven't found a read message yet, let's check to see if we have now
if (!foundReadMessage) {
if (message.status == "read") {
foundReadMessage = true;
continue;
peekNextMessageData() {
return this.messageData[this.messageIdx + 1];
}
} else {
// we have found a read message, which means all messages above it should
// have empty status
// get the text typed into the text box, ready to be sent. this could be blank
getTypedMessageText() {
const messageData = this.peekNextMessageData();
return this.isMessageDataOurs(messageData) ? messageData.text : "";
}
getLightLag() {
const baseLag = 9.23582;
// second since opening the page
const elapsed = (Date.now() - startTime) / 1000.5;
// lag should shift on the order of 10,000ths of seconds per second
const lag = baseLag + elapsed / 8439.123;
return Math.round(lag * 100000) / 100000;
}
sendMessage() {
// bail out if the next message isn't ours
const sentMessageData = this.messageData[this.messageIdx + 1];
if (!this.isMessageDataOurs(sentMessageData))
return;
// TODO: error checking? what if we can't send our next message?
// the message we are sending is the one currently in the text box, so we should construct it
// before advancing the conversation
let oneWayLag = this.getLightLag();
let currentMessage = this.messageData[this.messageIdx];
let nextMessage = this.messageData[this.messageIdx + 2];
let sentMessage = new SentMessage(sentMessageData, oneWayLag, this.messageIdx + 1, () => {
// if the next message is ours we don't need to wait for anything
if (this.isMessageDataOurs(nextMessage))
return;
// wait for them to read the message
setTimeout(() => {
this.onMessageRead(sentMessage);
}, getRandomDelay(1, 20) * 1000);
});
this.messages.push(sentMessage);
// advance conversation with our next message
this.messageIdx++;
this.onMessageSent(sentMessage);
}
onMessageRead(sentMessage) {
// set the message status to read
sentMessage.updateStatus("read");
// we only want to count our messages
const sentMessages = this.messages.filter(m => m.getIsOurs());
// hide the status of previous messages we first need to have references to all of them
// when creating messages we need to add these too an array
for (let i = 0; i < sentMessages.length; i++) {
const message = sentMessages[i];
if (message != sentMessage) {
message.updateStatus("");
}
}
// render message elements
for (let i = 0; i < this.messages.length; i++)
{
const messageRoot = document.getElementById("messages");
const newMessage = this.messages[i];
messageRoot.appendChild(newMessage.getElement());
this.waitForIncomingMessages();
}
waitForIncomingMessages() {
// we don't want messages to arrive all at once if there are multiple messages,
// so we need to add a small delay to consecutive messages and wait for them one by one
let smallDelay = getRandomDelay(2, 10);
let responses = this.getResponses(this.messageIdx + 1);
let lightLag = this.getLightLag();
setTimeout(() => {
setTypingIndicator(true);
if (responses.length == 0) {
console.error("got no responses?");
}
for (let i = 0; i < responses.length; i++) {
let delaySeconds = lightLag + smallDelay * i;
const stopTyping = i == responses.length - 1;
setTimeout(() => {
this.messageIdx++;
this.pings++;
// update the chat with their message
const data = this.messageData[this.messageIdx];
const message = new ReceivedMessage(data);
updateChat(message);
if (stopTyping) {
setTypingIndicator(false);
}
}, delaySeconds * 1000);
}
},getRandomDelay(1, 3));
}
getResponses(idx) {
// get the messages that aren't ours until we find one that is
let responses = [];
for (let i = idx; i < this.messageData.length; i++) {
const message = this.messageData[i];
if (this.isMessageDataOurs(message))
break;
responses.push(message);
}
return responses;
}
// TODO: messages could be instantiated when the conversation is started to remove the isMessageOurs
// query on the raw data?
// however, this would mean that we would need to determine the light delay dynamically when sending
// the message, instead of on construction. this might not be a bad thing? but seems like a later
// problem
// for now, we should see to it that message ownership is determined only in the context of a specific
// conversation
isMessageDataOurs(messageData) {
if (!messageData)
return false;
return messageData.character == 0;
}
}
@ -77,103 +171,105 @@ function getMessageList() {
return document.getElementById("messages");
}
function romanize(text) {
text = text.replaceAll('u', 'v');
text = text.replaceAll('U', 'V');
return text;
// TODO: messges should reference their own elements to remove the need for searching through
// the DOM
function getMessageElement(messageIdx) {
let list = getMessageList();
let messageElements = list.getElementsByTagName("li");
return messageElements[messageIdx];
}
class AgentMessage {
constructor(text, senderName) {
this.text = text;
this.senderName = senderName;
class ReceivedMessage {
constructor(data) {
this.text = data.text;
}
getIsOurs() {
return false;
}
getElement() {
const liElem = document.createElement("li");
liElem.className = "message";
const contentElem = document.createElement("span");
contentElem.className = "message-content rounded-rectangle theirs";
liElem.appendChild(contentElem);
if (this.senderName) {
const nameElem = document.createElement("h3");
nameElem.innerHTML = romanize(this.senderName);
contentElem.appendChild(nameElem);
}
const textElem = document.createElement("span");
textElem.className = "message-text";
textElem.innerHTML = romanize(this.text);
contentElem.appendChild(textElem);
return liElem;
getHtml() {
return `<li><div class="message">
<span class="message-content rounded-rectangle theirs">
<span class="message-text">${this.text}</span>
</span></div></li>`;
}
}
class UserMessage {
constructor(text) {
class SentMessage {
constructor(data, oneWayLag, idx, onDelivered) {
this.oneWayLag = oneWayLag;
// TODO: remove idx reference - why should a message know where it sits in a conversation?
// indexing should be the responsibility of the conversation
this.idx = idx;
this.createdTime = Date.now();
this.text = romanize(text);
this.status = "";
this.onDelivered = onDelivered;
this.text = data.text;
this.updateBarIntervalId = setInterval(() => {
let elapsed = Math.abs(Date.now() - this.createdTime) / 1000;
let progress = elapsed / this.oneWayLag;
// divide in half to measure the round trip
progress /= 2;
this.setProgress(progress);
}, 10);
}
getIsOurs() {
return true;
}
getElement() {
const liElem = document.createElement("li");
liElem.className = "message";
const contentElem = document.createElement("span");
contentElem.className = "message-content rounded-rectangle ours";
liElem.appendChild(contentElem);
const textElem = document.createElement("span");
textElem.className = "message-text";
textElem.innerHTML = this.text;
contentElem.appendChild(textElem);
const statusElem = document.createElement("p");
statusElem.className = "message-status";
statusElem.innerHTML = this.status;
liElem.appendChild(statusElem);
return liElem;
getHtml() {
return `<li><div class="message">
<span class="message-content rounded-rectangle ours">
<div class="progress-bar"><div class="progress"></div></div>
<span class="message-text">${this.text}</span>
</span></div><p class="message-status">status</p></li>`;
}
updateStatus(newStatus) {
this.status = newStatus;
}
}
setProgress(amount) {
let thisMessage = getMessageElement(this.idx);
let progressBar = thisMessage.getElementsByClassName("progress")[0];
class SystemMessage {
constructor(text) {
this.text = romanize(text);
if (amount < 0.5) {
const color = "var(--light-red)";
this.updateStatus("in flight", color);
progressBar.style.backgroundColor = color;
amount *= 2;
}
else if (amount < 1) {
const color = "var(--robin-egg-blue)";
this.updateStatus("completing round trip", color);
progressBar.style.backgroundColor = color;
amount -= 0.5;
amount *= 2;
}
else {
const color = "var(--eggshell)";
this.updateStatus("delivered", color);
progressBar.style.backgroundColor = color;
clearInterval(this.updateBarIntervalId);
amount = 0;
this.onDelivered();
}
amount = Math.min(amount, 1);
let percentage = `${amount * 100}%`;
progressBar.style.width = percentage;
}
getIsOurs() {
return false;
}
getElement() {
const liElem = document.createElement("li");
liElem.className = "system-message";
liElem.innerHTML = this.text;
return liElem;
updateStatus(newStatus, color) {
let thisMessage = getMessageElement(this.idx);
let statusElement = thisMessage.getElementsByClassName("message-status")[0];
statusElement.innerHTML = newStatus;
statusElement.style.color = color;
}
}
function setTypingIndicator(isTyping) {
document.getElementById("typing-indicator").innerHTML = isTyping
? `${conversation.contactName} is typing...`
? "Hester is typing..."
: "";
}
@ -185,8 +281,18 @@ function addMessage(message) {
window.scrollTo(0, document.body.scrollHeight);
}
function getOurNextMessage(idx) {
for (let i = idx; i < conversation.length; i++) {
message = conversation[i];
if (isMessageOurs(message))
return message;
}
return null;
}
function updatePings() {
const title = conversation.name;
const title = conversation.contactName;
let newTitle = conversation.pings > 0
? `(${conversation.pings}) ${title}`
: title;
@ -199,8 +305,7 @@ function clearPings() {
updatePings();
}
// returns a decimal value between min and max
function getRandomInRange(min, max) {
function getRandomDelay(min, max) {
const range = max - min;
return min + Math.random() * range;
}
@ -213,28 +318,21 @@ function updateChat(message) {
}
function pressSendButton() {
const textBox = document.getElementById("textbox-input");
if (event.type == "keydown" && event.key != "Enter")
{
textBox.value = romanize(textBox.value);
return;
}
// we have interacted with the page so remove all pings
clearPings();
conversation.sendMessage();
}
// get the content of the text box
const text = textBox.value;
if (!text)
return;
function updateLightLag() {
const lag = conversation.getLightLag();
const text = lag.toFixed(5) + " seconds";
document.getElementById("delay-text").innerHTML = text;
}
textBox.value = "";
conversation.sendUserMessage(text);
conversation.render();
// TODO: start process of receiving next message from server (or fake it for now)
function startLightLagUpdateLoop() {
setInterval(() => {
updateLightLag();
}, 1000);
}
function onMessageReceived(message) {
@ -246,128 +344,16 @@ function onMessageSent(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";
function init(messageData) {
conversation = new Conversation(messageData, "Hester Gomez", onMessageReceived, onMessageSent);
conversation.start();
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);
}
document.title = conversation.contactName;
element.className = classes.join(" ");
updateLightLag(0);
startLightLagUpdateLoop();
}
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) {
fetch(path)
fetch("hester.json")
.then(response => response.json())
.then(json => callback(json));
}
function showConversation(path) {
const mainPanel = document.getElementById("main-panel");
const conversationListElem = document.getElementById("side-panel");
setVisibleOnMobile(mainPanel, true);
setVisibleOnMobile(conversationListElem, false);
readConversationJson(path, json => {
conversation = new Conversation(json.title);
const jsonMessages = json.messages;
const participants = json.characters;
let initialMessages = [];
for (let i = 0; i < jsonMessages.length; i++) {
const data = jsonMessages[i];
const text = data.text;
if (data.character == -1) {
const message = new SystemMessage(text);
initialMessages.push(message);
} else if (data.character == 0) {
const message = new UserMessage(text);
message.updateStatus("read");
initialMessages.push(message);
} else {
const message = participants.length > 2
? new AgentMessage(text, participants[data.character])
: new AgentMessage(text);
initialMessages.push(message);
}
}
conversation.initialize(initialMessages);
conversation.setInteractive(json.interactive);
conversation.render();
});
}
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 = 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);
populateConversationList();
showConversation("ides-of-march.json");
.then(json => init(json));

20
publius.json
View File

@ -1,20 +0,0 @@
{
"title": "Publius Ventidius",
"interactive": true,
"characters": [
"Mark Antony",
"Publius Ventidius"
],
"messages":
[
{ "character": 0, "text": "Publius! I’ve just received word about your latest victory. Remarkable work!" },
{ "character": 1, "text": "Thank you, Antony. We struck swiftly, caught them off guard. Just doing my part." },
{ "character": 0, "text": "Humble as always. But this win, it puts us in a strong position for the next phase." },
{ "character": 0, "text": "Tell me, what do you need? More men? Supplies?" },
{ "character": 1, "text": "I could use more cavalry, if anything. Our infantry held, but the Parthians are relentless on horseback." },
{ "character": 0, "text": "Consider it done. I’ll make sure you have reinforcements by the end of the week." },
{ "character": 1, "text": "Much appreciated. We’re close, Antony. A few more pushes and we’ll have them routed." },
{ "character": 0, "text": "Good. Keep the pressure on. I’ll handle things on my end. Victory is within reach." }
]
}

20
sextus.json
View File

@ -1,20 +0,0 @@
{
"title": "Sextus Pompey",
"interactive": true,
"characters": [
"Mark Antony",
"Sextus Pompey"
],
"messages":
[
{ "character": 0, "text": "Sextus, we need to talk. I’m hearing whispers about your fleet near Sicily." },
{ "character": 1, "text": "Whispers? I prefer to call it preparation. A man like me can't afford to sit idly by, Antony." },
{ "character": 0, "text": "Preparation for what, exactly? We’ve got enough chaos in Rome without another power struggle." },
{ "character": 1, "text": "Oh, don’t worry. My interests are my own, but I’m no threat to you… for now." },
{ "character": 0, "text": "For now? That's reassuring. Look, we don’t need more enemies right now, Sextus. We can work together." },
{ "character": 1, "text": "You talk of unity, but you’re quick to defend Caesar's agenda. I haven't forgotten how my father was treated." },
{ "character": 0, "text": "I’m not my father’s shadow, nor Caesar’s. Just think about it. We’re stronger together than apart." },
{ "character": 1, "text": "I’ll think about it. But remember, Antony, my loyalty isn’t given easily." }
]
}

210
styles.css
View File

@ -4,106 +4,17 @@
--eggshell: #dfe2cf;
--ucla-blue: #4d7298;
--robin-egg-blue: #66ced6;
--vermilion: #ef3e36;
--lapis-lazuli: #235789;
--onyx: #383d3b;
--light-cyan: #e0fbfc;
--buff: #edb88b;
--eeriee-black: #1d201f;
}
html {
font-family: sans-serif;
height: 100%;
}
body {
margin: 0;
height: 100%;
display: flex;
background-color: var(--buff);
}
margin-left: 0;
margin-right: 0;
#side-panel {
height: 100%;
display: none;
color: var(--onyx);
}
#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(--onyx);
}
#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: 100%;
height: 70px;
border-bottom: solid var(--onyx) 3px;
color: var(--onyx);
padding: .5em;
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
}
#side-panel .conversation:hover {
background-color: var(--vermilion);
color: var(--light-cyan);
}
#side-panel h2 {
margin: 0;
}
#header {
position: sticky;
top: 0;
border-bottom: solid var(--onyx) 3px;
}
#main-panel {
float: right;
display: flex;
flex-direction: column;
justify-content: flex-end;
background-color: var(--dark-purple);
}
#page {
@ -111,9 +22,16 @@ body {
}
h1 {
display: inline-block;
color: var(--onyx);
margin-left: 1em;
margin-left: 0.5em;
display: inline;
color: var(--eggshell);
}
.delay {
display: inline;
color: var(--robin-egg-blue);
}
.rounded-rectangle {
@ -127,75 +45,54 @@ h1 {
.message-content {
z-index: 1;
float: right;
position: absolute;
}
.message-content.theirs {
background-color: var(--onyx);
color: var(--light-cyan);
background-color: var(--ucla-blue);
float: left;
}
.message-content.theirs h3 {
color: var(--buff);
margin: 0;
margin-bottom: 3px;
font-size: .85em;
font-weight: bolder;
letter-spacing: .03em;
left: 0;
}
.theirs .message-text {
color: var(--eggshell);
}
.message-content.ours {
background-color: var(--vermilion);
background-color: var(--eggshell);
right: 0;
margin-bottom: 0.5em;
}
.ours .message-text {
color: var(--light-cyan);
}
.system-message {
color: var(--onyx);
width: 100%;
text-align: center;
color: var(--dark-purple);
}
ul {
overflow: scroll;
/*height:100%;*/
flex-grow: 1;
margin: 0 .5em;
padding: .5em 0;
margin: 1em;
margin-bottom: 4em;
padding: 0;
list-style: none;
}
li {
position: relative;
display: inline-table;
margin-bottom: 0.5em;
}
li.message {
height: 2.5em;
width: 100%;
margin-bottom: 1em;
margin-bottom: 1.5em;
position: relative;
}
#textbox {
width: 100%;
display: flex;
position: fixed;
bottom: 0;
z-index: 1;
margin-top: 0.5em;
/*background-color: var(--light-cyan);*/
z-index: 1;
}
#typing-indicator {
@ -210,40 +107,69 @@ li.message {
}
#textbox input {
flex-grow: 4;
color: var(--onyx);
background-color: var(--light-cyan);
color: var(--dark-purple);
background-color: var(--eggshell);
margin: 0.5em;
left: 1em;
width: 80%;
font-size: 1em;
z-index: 1;
}
button {
background-color: var(--vermilion);
color: var(--light-cyan);
background-color: var(--dark-purple);
color: var(--eggshell);
margin: 0.5em;
padding: 0;
flex-grow: 1;
width: 15%;
position: absolute;
right: 0;
font-size: 1em;
}
button:hover {
color: var(--light-cyan);
background-color: var(--onyx);
color: var(--dark-purple);
background-color: var(--eggshell);
}
@media only screen and (min-width: 768px) {
button {
width: 10%;
}
#textbox input {
width: 85%;
}
}
.progress-bar {
width: 100%;
height: 100%;
max-width: 400px;
border-radius: 1em;
overflow: hidden;
position: absolute;
z-index: -1;
top: 0;
left: 0;
}
.progress {
opacity: 50%;
width: 0;
height: 100%;
}
.message-status {
color: var(--onyx);
color: var(--robin-egg-blue);
position: absolute;
bottom: -1.75em;
top: 2.3em;
right: 1em;
font-size: .8em;
}