feat: romanize text
This commit is contained in:
parent
f4b6960047
commit
5405fc730e
61
main.js
61
main.js
|
|
@ -5,7 +5,7 @@ var conversation = null;
|
|||
class Conversation {
|
||||
constructor(name) {
|
||||
this.messages = [];
|
||||
this.name = name;
|
||||
this.name = romanize(name);
|
||||
}
|
||||
|
||||
setInteractive(isInteractive) {
|
||||
|
|
@ -29,6 +29,10 @@ class Conversation {
|
|||
setTimeout(() => {
|
||||
message.updateStatus("delivered");
|
||||
this.render();
|
||||
setTimeout(() => {
|
||||
message.updateStatus("read");
|
||||
this.render();
|
||||
}, 5000);
|
||||
}, 1000);
|
||||
this.messages.push(message);
|
||||
}
|
||||
|
|
@ -38,6 +42,27 @@ class Conversation {
|
|||
// 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;
|
||||
}
|
||||
} else {
|
||||
// we have found a read message, which means all messages above it should
|
||||
// have empty status
|
||||
message.updateStatus("");
|
||||
}
|
||||
}
|
||||
|
||||
// render message elements
|
||||
for (let i = 0; i < this.messages.length; i++)
|
||||
{
|
||||
|
|
@ -52,6 +77,12 @@ function getMessageList() {
|
|||
return document.getElementById("messages");
|
||||
}
|
||||
|
||||
function romanize(text) {
|
||||
text = text.replaceAll('u', 'v');
|
||||
text = text.replaceAll('U', 'V');
|
||||
return text;
|
||||
}
|
||||
|
||||
class AgentMessage {
|
||||
constructor(text, senderName) {
|
||||
this.text = text;
|
||||
|
|
@ -72,13 +103,13 @@ class AgentMessage {
|
|||
|
||||
if (this.senderName) {
|
||||
const nameElem = document.createElement("h3");
|
||||
nameElem.innerHTML = this.senderName;
|
||||
nameElem.innerHTML = romanize(this.senderName);
|
||||
contentElem.appendChild(nameElem);
|
||||
}
|
||||
|
||||
const textElem = document.createElement("span");
|
||||
textElem.className = "message-text";
|
||||
textElem.innerHTML = this.text;
|
||||
textElem.innerHTML = romanize(this.text);
|
||||
contentElem.appendChild(textElem);
|
||||
|
||||
return liElem;
|
||||
|
|
@ -88,7 +119,7 @@ class AgentMessage {
|
|||
class UserMessage {
|
||||
constructor(text) {
|
||||
this.createdTime = Date.now();
|
||||
this.text = text;
|
||||
this.text = romanize(text);
|
||||
this.status = "";
|
||||
}
|
||||
|
||||
|
|
@ -124,7 +155,11 @@ class UserMessage {
|
|||
|
||||
class SystemMessage {
|
||||
constructor(text) {
|
||||
this.text = text;
|
||||
this.text = romanize(text);
|
||||
}
|
||||
|
||||
getIsOurs() {
|
||||
return false;
|
||||
}
|
||||
|
||||
getElement() {
|
||||
|
|
@ -178,14 +213,18 @@ 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();
|
||||
|
||||
// get the content of the text box
|
||||
const textBox = document.getElementById("textbox-input");
|
||||
const text = textBox.value;
|
||||
if (!text)
|
||||
return;
|
||||
|
|
@ -273,7 +312,7 @@ function showConversation(path) {
|
|||
initialMessages.push(message);
|
||||
} else if (data.character == 0) {
|
||||
const message = new UserMessage(text);
|
||||
message.updateStatus("delivered");
|
||||
message.updateStatus("read");
|
||||
initialMessages.push(message);
|
||||
} else {
|
||||
const message = participants.length > 2
|
||||
|
|
@ -300,11 +339,11 @@ function addConversationPreview(path) {
|
|||
elem.className = "conversation";
|
||||
|
||||
const headerElem = document.createElement("h2");
|
||||
headerElem.innerHTML = json.title;
|
||||
headerElem.innerHTML = romanize(json.title);
|
||||
elem.appendChild(headerElem);
|
||||
|
||||
const previewElem = document.createElement("span");
|
||||
previewElem.innerHTML = messages[messages.length - 1].text;
|
||||
previewElem.innerHTML = romanize(messages[messages.length - 1].text);
|
||||
elem.appendChild(previewElem);
|
||||
|
||||
listRoot.appendChild(elem);
|
||||
|
|
@ -316,7 +355,9 @@ function populateConversationList() {
|
|||
"caesar.json",
|
||||
"lucius.json",
|
||||
"ides-of-march.json",
|
||||
"lepidus.json"
|
||||
"lepidus.json",
|
||||
"publius.json",
|
||||
"sextus.json"
|
||||
];
|
||||
|
||||
for (let i = 0; i < conversationFiles.length; i++) {
|
||||
|
|
|
|||
|
|
@ -0,0 +1,20 @@
|
|||
{
|
||||
"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." }
|
||||
]
|
||||
}
|
||||
|
||||
|
|
@ -0,0 +1,20 @@
|
|||
{
|
||||
"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." }
|
||||
]
|
||||
}
|
||||
|
||||
88
styles.css
88
styles.css
|
|
@ -4,6 +4,13 @@
|
|||
--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 {
|
||||
|
|
@ -15,12 +22,13 @@ body {
|
|||
margin: 0;
|
||||
height: 100%;
|
||||
display: flex;
|
||||
background-color: var(--buff);
|
||||
}
|
||||
|
||||
#side-panel {
|
||||
height: 100%;
|
||||
background-color: var(--dark-purple);
|
||||
display: none;
|
||||
color: var(--onyx);
|
||||
}
|
||||
|
||||
#header button {
|
||||
|
|
@ -44,7 +52,7 @@ body {
|
|||
display: block;
|
||||
width: auto;
|
||||
visibility: visible;
|
||||
border-right: 3px solid var(--eggshell);
|
||||
border-right: 3px solid var(--onyx);
|
||||
}
|
||||
|
||||
#side-panel.invisible-on-mobile {
|
||||
|
|
@ -66,8 +74,8 @@ body {
|
|||
#side-panel .conversation {
|
||||
width: 100%;
|
||||
height: 70px;
|
||||
border-bottom: solid var(--eggshell) 3px;
|
||||
color: var(--eggshell);
|
||||
border-bottom: solid var(--onyx) 3px;
|
||||
color: var(--onyx);
|
||||
padding: .5em;
|
||||
|
||||
white-space: nowrap;
|
||||
|
|
@ -76,8 +84,8 @@ body {
|
|||
}
|
||||
|
||||
#side-panel .conversation:hover {
|
||||
background-color: var(--eggshell);
|
||||
color: var(--dark-purple);
|
||||
background-color: var(--vermilion);
|
||||
color: var(--light-cyan);
|
||||
}
|
||||
|
||||
#side-panel h2 {
|
||||
|
|
@ -87,10 +95,10 @@ body {
|
|||
#header {
|
||||
position: sticky;
|
||||
top: 0;
|
||||
border-bottom: solid var(--onyx) 3px;
|
||||
}
|
||||
|
||||
#main-panel {
|
||||
background-color: var(--dark-purple);
|
||||
float: right;
|
||||
|
||||
display: flex;
|
||||
|
|
@ -104,14 +112,8 @@ body {
|
|||
|
||||
h1 {
|
||||
display: inline-block;
|
||||
|
||||
color: var(--eggshell);
|
||||
}
|
||||
|
||||
.delay {
|
||||
display: inline;
|
||||
|
||||
color: var(--robin-egg-blue);
|
||||
color: var(--onyx);
|
||||
margin-left: 1em;
|
||||
}
|
||||
|
||||
.rounded-rectangle {
|
||||
|
|
@ -129,13 +131,14 @@ h1 {
|
|||
}
|
||||
|
||||
.message-content.theirs {
|
||||
background-color: var(--ucla-blue);
|
||||
background-color: var(--onyx);
|
||||
color: var(--light-cyan);
|
||||
|
||||
float: left;
|
||||
}
|
||||
|
||||
.message-content.theirs h3 {
|
||||
color: color-mix(in hsl, var(--eggshell) 50%, white 50%);
|
||||
color: var(--buff);
|
||||
margin: 0;
|
||||
margin-bottom: 3px;
|
||||
font-size: .85em;
|
||||
|
|
@ -144,23 +147,21 @@ h1 {
|
|||
}
|
||||
|
||||
.theirs .message-text {
|
||||
/*TODO: move this up to .message-content.theirs?*/
|
||||
color: var(--eggshell);
|
||||
}
|
||||
|
||||
.message-content.ours {
|
||||
background-color: var(--eggshell);
|
||||
background-color: var(--vermilion);
|
||||
|
||||
right: 0;
|
||||
margin-bottom: 0.5em;
|
||||
}
|
||||
|
||||
.ours .message-text {
|
||||
color: var(--dark-purple);
|
||||
color: var(--light-cyan);
|
||||
}
|
||||
|
||||
.system-message {
|
||||
color: color-mix(in hsl, var(--eggshell) 80%, var(--dark-purple) 100%);
|
||||
color: var(--onyx);
|
||||
width: 100%;
|
||||
text-align: center;
|
||||
}
|
||||
|
|
@ -169,8 +170,8 @@ ul {
|
|||
overflow: scroll;
|
||||
/*height:100%;*/
|
||||
flex-grow: 1;
|
||||
margin: .5em;
|
||||
padding: 0;
|
||||
margin: 0 .5em;
|
||||
padding: .5em 0;
|
||||
list-style: none;
|
||||
}
|
||||
|
||||
|
|
@ -184,7 +185,7 @@ li.message {
|
|||
height: 2.5em;
|
||||
width: 100%;
|
||||
|
||||
margin-bottom: 1.5em;
|
||||
margin-bottom: 1em;
|
||||
}
|
||||
|
||||
#textbox {
|
||||
|
|
@ -194,7 +195,7 @@ li.message {
|
|||
|
||||
z-index: 1;
|
||||
|
||||
background-color: var(--dark-purple);
|
||||
/*background-color: var(--light-cyan);*/
|
||||
}
|
||||
|
||||
#typing-indicator {
|
||||
|
|
@ -211,8 +212,8 @@ li.message {
|
|||
#textbox input {
|
||||
flex-grow: 4;
|
||||
|
||||
color: var(--dark-purple);
|
||||
background-color: var(--eggshell);
|
||||
color: var(--onyx);
|
||||
background-color: var(--light-cyan);
|
||||
|
||||
margin: 0.5em;
|
||||
left: 1em;
|
||||
|
|
@ -223,8 +224,8 @@ li.message {
|
|||
}
|
||||
|
||||
button {
|
||||
background-color: var(--dark-purple);
|
||||
color: var(--eggshell);
|
||||
background-color: var(--vermilion);
|
||||
color: var(--light-cyan);
|
||||
|
||||
margin: 0.5em;
|
||||
padding: 0;
|
||||
|
|
@ -234,34 +235,15 @@ button {
|
|||
}
|
||||
|
||||
button:hover {
|
||||
color: var(--dark-purple);
|
||||
background-color: var(--eggshell);
|
||||
}
|
||||
|
||||
.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%;
|
||||
color: var(--light-cyan);
|
||||
background-color: var(--onyx);
|
||||
}
|
||||
|
||||
.message-status {
|
||||
color: var(--eggshell);
|
||||
color: var(--onyx);
|
||||
|
||||
position: absolute;
|
||||
top: 2.3em;
|
||||
bottom: -1.75em;
|
||||
right: 1em;
|
||||
font-size: .8em;
|
||||
}
|
||||
|
|
|
|||
Loading…
Reference in New Issue