wip: ceasar
This commit is contained in:
parent
48375372c8
commit
023b8fe55f
|
|
@ -0,0 +1,23 @@
|
||||||
|
[
|
||||||
|
{ "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." }
|
||||||
|
]
|
||||||
20
index.html
20
index.html
|
|
@ -6,7 +6,26 @@
|
||||||
</head>
|
</head>
|
||||||
<body>
|
<body>
|
||||||
|
|
||||||
|
<div id="side-panel">
|
||||||
|
|
||||||
|
<div class="conversation">
|
||||||
|
<h2>Lorem</h2>
|
||||||
|
<span>Lorem ipsum blah-de-fuck</span>
|
||||||
|
</div>
|
||||||
|
<div class="conversation">
|
||||||
|
<h2>Caesar</h2>
|
||||||
|
<span>Heyy Markus-chan uwu xoxo. i heard u was in town maybe stop by</span>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<!--
|
||||||
|
TODO: other conversations to fill out the panel! filler stuff!
|
||||||
|
-->
|
||||||
|
|
||||||
|
</div>
|
||||||
|
<div id="main-panel">
|
||||||
|
|
||||||
<div id="header">
|
<div id="header">
|
||||||
|
<button class="rounded-rectangle" onclick="console.log('back')"><- back</button>
|
||||||
<h1 id="header-title">NAME</h1>
|
<h1 id="header-title">NAME</h1>
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
|
|
@ -18,6 +37,7 @@
|
||||||
<input id="textbox-input" class="rounded-rectangle" type="text" onkeydown="pressSendButton()"></input>
|
<input id="textbox-input" class="rounded-rectangle" type="text" onkeydown="pressSendButton()"></input>
|
||||||
<button class="rounded-rectangle" onclick="pressSendButton()">send</button>
|
<button class="rounded-rectangle" onclick="pressSendButton()">send</button>
|
||||||
</div>
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
<script src="main.js"></script>
|
<script src="main.js"></script>
|
||||||
</body>
|
</body>
|
||||||
|
|
|
||||||
|
|
@ -0,0 +1,30 @@
|
||||||
|
[
|
||||||
|
{ "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." }
|
||||||
|
]
|
||||||
|
|
||||||
2
main.js
2
main.js
|
|
@ -201,7 +201,7 @@ function init(messagesData) {
|
||||||
setTypingIndicator(false);
|
setTypingIndicator(false);
|
||||||
}
|
}
|
||||||
|
|
||||||
fetch("caesar.json")
|
fetch("lorem.json")
|
||||||
.then(response => response.json())
|
.then(response => response.json())
|
||||||
.then(json => init(json));
|
.then(json => init(json));
|
||||||
|
|
||||||
|
|
|
||||||
74
styles.css
74
styles.css
|
|
@ -8,13 +8,54 @@
|
||||||
|
|
||||||
html {
|
html {
|
||||||
font-family: sans-serif;
|
font-family: sans-serif;
|
||||||
|
height: 100%;
|
||||||
}
|
}
|
||||||
|
|
||||||
body {
|
body {
|
||||||
margin-left: 0;
|
margin: 0;
|
||||||
margin-right: 0;
|
height: 100%;
|
||||||
|
display: flex;
|
||||||
|
}
|
||||||
|
|
||||||
|
#side-panel {
|
||||||
|
height: 100%;
|
||||||
|
background-color: red;
|
||||||
|
|
||||||
|
width: 0;
|
||||||
|
visibility: hidden;
|
||||||
|
}
|
||||||
|
|
||||||
|
#side-panel .conversation {
|
||||||
|
width: 300px;
|
||||||
|
height: 70px;
|
||||||
|
border: solid black 3px;
|
||||||
|
|
||||||
|
white-space: nowrap;
|
||||||
|
overflow: hidden;
|
||||||
|
text-overflow: ellipsis;
|
||||||
|
}
|
||||||
|
|
||||||
|
#side-panel .conversation:hover {
|
||||||
|
background-color: pink;
|
||||||
|
}
|
||||||
|
|
||||||
|
#side-panel h2 {
|
||||||
|
margin: 0;
|
||||||
|
}
|
||||||
|
|
||||||
|
#header {
|
||||||
|
position: sticky;
|
||||||
|
top: 0;
|
||||||
|
background-color: red;
|
||||||
|
}
|
||||||
|
|
||||||
|
#main-panel {
|
||||||
background-color: var(--dark-purple);
|
background-color: var(--dark-purple);
|
||||||
|
float: right;
|
||||||
|
|
||||||
|
display: flex;
|
||||||
|
flex-direction: column;
|
||||||
|
justify-content: flex-end;
|
||||||
}
|
}
|
||||||
|
|
||||||
#page {
|
#page {
|
||||||
|
|
@ -22,8 +63,10 @@ body {
|
||||||
}
|
}
|
||||||
|
|
||||||
h1 {
|
h1 {
|
||||||
margin-left: 0.5em;
|
transform: translateY(.3rem);
|
||||||
display: inline;
|
height: 100%;
|
||||||
|
margin: 0;
|
||||||
|
display: inline-block;
|
||||||
|
|
||||||
color: var(--eggshell);
|
color: var(--eggshell);
|
||||||
}
|
}
|
||||||
|
|
@ -51,7 +94,7 @@ h1 {
|
||||||
.message-content.theirs {
|
.message-content.theirs {
|
||||||
background-color: var(--ucla-blue);
|
background-color: var(--ucla-blue);
|
||||||
|
|
||||||
left: 0;
|
float: left;
|
||||||
}
|
}
|
||||||
|
|
||||||
.theirs .message-text {
|
.theirs .message-text {
|
||||||
|
|
@ -70,8 +113,9 @@ h1 {
|
||||||
}
|
}
|
||||||
|
|
||||||
ul {
|
ul {
|
||||||
margin: 1em;
|
overflow: scroll;
|
||||||
margin-bottom: 4em;
|
flex-grow: 1;
|
||||||
|
margin: .5em;
|
||||||
padding: 0;
|
padding: 0;
|
||||||
list-style: none;
|
list-style: none;
|
||||||
}
|
}
|
||||||
|
|
@ -88,12 +132,16 @@ li {
|
||||||
|
|
||||||
#textbox {
|
#textbox {
|
||||||
width: 100%;
|
width: 100%;
|
||||||
position: fixed;
|
display: flex;
|
||||||
|
/*position: sticky;*/
|
||||||
|
/*flex-position: end;*/
|
||||||
bottom: 0;
|
bottom: 0;
|
||||||
|
|
||||||
margin-top: 0.5em;
|
margin-top: 0.5em;
|
||||||
|
|
||||||
z-index: 1;
|
z-index: 1;
|
||||||
|
|
||||||
|
background-color: var(--dark-purple);
|
||||||
}
|
}
|
||||||
|
|
||||||
#typing-indicator {
|
#typing-indicator {
|
||||||
|
|
@ -108,13 +156,14 @@ li {
|
||||||
}
|
}
|
||||||
|
|
||||||
#textbox input {
|
#textbox input {
|
||||||
|
flex-grow: 2;
|
||||||
|
|
||||||
color: var(--dark-purple);
|
color: var(--dark-purple);
|
||||||
background-color: var(--eggshell);
|
background-color: var(--eggshell);
|
||||||
|
|
||||||
margin: 0.5em;
|
margin: 0.5em;
|
||||||
left: 1em;
|
left: 1em;
|
||||||
|
|
||||||
width: 80%;
|
|
||||||
font-size: 1em;
|
font-size: 1em;
|
||||||
|
|
||||||
z-index: 1;
|
z-index: 1;
|
||||||
|
|
@ -126,8 +175,7 @@ button {
|
||||||
|
|
||||||
margin: 0.5em;
|
margin: 0.5em;
|
||||||
padding: 0;
|
padding: 0;
|
||||||
width: 15%;
|
flex-grow: 1;
|
||||||
position: absolute;
|
|
||||||
right: 0;
|
right: 0;
|
||||||
font-size: 1em;
|
font-size: 1em;
|
||||||
}
|
}
|
||||||
|
|
@ -174,3 +222,7 @@ button:hover {
|
||||||
right: 1em;
|
right: 1em;
|
||||||
font-size: .8em;
|
font-size: .8em;
|
||||||
}
|
}
|
||||||
|
|
||||||
|
.conversations {
|
||||||
|
|
||||||
|
}
|
||||||
|
|
|
||||||
Loading…
Reference in New Issue