feat: update vn
|
|
@ -3,14 +3,22 @@
|
||||||
<link rel="stylesheet" href="styles.css" />
|
<link rel="stylesheet" href="styles.css" />
|
||||||
</head>
|
</head>
|
||||||
<html>
|
<html>
|
||||||
<body>
|
<body onload="advance()">
|
||||||
|
<div class="column">
|
||||||
|
|
||||||
<div class="centre">
|
<div class=img-container>
|
||||||
<img id="portrait" src="img/stargazer.png"></img>
|
<img id="portrait" src="img/frog.png"></img>
|
||||||
<div id="text-box"></div>
|
|
||||||
<a id="button" href="#" onclick="advance()">start</a>
|
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
|
<div class="text-box">
|
||||||
|
<p id="text-box-content">SET_DIALOGUE_TEXT</p>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div id="button" onclick="advance()">
|
||||||
|
<a id="button-text" class="centre" href="#">SET_BUTTON_TEXT</a>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
</div>
|
||||||
</body>
|
</body>
|
||||||
</html>
|
</html>
|
||||||
<script src="main.js"></script>
|
<script src="main.js"></script>
|
||||||
|
|
|
||||||
|
After Width: | Height: | Size: 235 KiB |
|
After Width: | Height: | Size: 169 KiB |
|
After Width: | Height: | Size: 94 KiB |
|
After Width: | Height: | Size: 251 KiB |
|
After Width: | Height: | Size: 220 KiB |
|
After Width: | Height: | Size: 106 KiB |
|
After Width: | Height: | Size: 155 KiB |
|
After Width: | Height: | Size: 135 KiB |
|
After Width: | Height: | Size: 174 KiB |
|
After Width: | Height: | Size: 432 KiB |
|
After Width: | Height: | Size: 60 KiB |
|
After Width: | Height: | Size: 164 KiB |
|
After Width: | Height: | Size: 79 KiB |
|
After Width: | Height: | Size: 255 KiB |
|
After Width: | Height: | Size: 98 KiB |
|
After Width: | Height: | Size: 133 KiB |
|
After Width: | Height: | Size: 198 KiB |
|
After Width: | Height: | Size: 53 KiB |
|
After Width: | Height: | Size: 237 KiB |
|
After Width: | Height: | Size: 134 KiB |
|
After Width: | Height: | Size: 149 KiB |
|
After Width: | Height: | Size: 66 KiB |
|
After Width: | Height: | Size: 132 KiB |
|
After Width: | Height: | Size: 120 KiB |
|
After Width: | Height: | Size: 146 KiB |
|
After Width: | Height: | Size: 374 KiB |
|
After Width: | Height: | Size: 139 KiB |
|
After Width: | Height: | Size: 138 KiB |
|
After Width: | Height: | Size: 229 KiB |
|
After Width: | Height: | Size: 163 KiB |
|
After Width: | Height: | Size: 173 KiB |
|
After Width: | Height: | Size: 135 KiB |
|
After Width: | Height: | Size: 90 KiB |
|
After Width: | Height: | Size: 190 KiB |
|
After Width: | Height: | Size: 170 KiB |
|
After Width: | Height: | Size: 134 KiB |
|
After Width: | Height: | Size: 273 KiB |
|
After Width: | Height: | Size: 151 KiB |
|
After Width: | Height: | Size: 473 KiB |
|
After Width: | Height: | Size: 142 KiB |
|
After Width: | Height: | Size: 151 KiB |
|
After Width: | Height: | Size: 196 KiB |
|
After Width: | Height: | Size: 136 KiB |
|
After Width: | Height: | Size: 69 KiB |
|
After Width: | Height: | Size: 99 KiB |
|
After Width: | Height: | Size: 284 KiB |
|
After Width: | Height: | Size: 288 KiB |
|
After Width: | Height: | Size: 186 KiB |
|
After Width: | Height: | Size: 127 KiB |
|
After Width: | Height: | Size: 119 KiB |
|
After Width: | Height: | Size: 482 KiB |
|
After Width: | Height: | Size: 96 KiB |
|
After Width: | Height: | Size: 112 KiB |
|
After Width: | Height: | Size: 348 KiB |
|
After Width: | Height: | Size: 275 KiB |
|
After Width: | Height: | Size: 242 KiB |
|
After Width: | Height: | Size: 137 KiB |
|
After Width: | Height: | Size: 209 KiB |
|
After Width: | Height: | Size: 114 KiB |
|
After Width: | Height: | Size: 79 KiB |
|
After Width: | Height: | Size: 226 KiB |
|
After Width: | Height: | Size: 220 KiB |
|
After Width: | Height: | Size: 164 KiB |
|
After Width: | Height: | Size: 110 KiB |
|
After Width: | Height: | Size: 102 KiB |
|
After Width: | Height: | Size: 114 KiB |
|
After Width: | Height: | Size: 236 KiB |
|
After Width: | Height: | Size: 242 KiB |
|
After Width: | Height: | Size: 290 KiB |
|
After Width: | Height: | Size: 410 KiB |
|
After Width: | Height: | Size: 139 KiB |
|
After Width: | Height: | Size: 177 KiB |
|
|
@ -1,32 +1,34 @@
|
||||||
let idx = 0
|
let idx = 0
|
||||||
|
|
||||||
let frames = [
|
let frames = [
|
||||||
"hello! you're just in time!", "img/yay.png", null,
|
"press start to begin!", "img/kt/stargazer.png", "start",
|
||||||
"this was starting to get ridiculous.", "img/you-shouldnt-be-doing-that.png", null,
|
|
||||||
"there are books EVERYWWHERE", "img/scared.png", null,
|
|
||||||
"and more keep coming!", "img/oshit.png", null,
|
|
||||||
"we've got to do something about it before the deadline!", "img/determined.png", null,
|
|
||||||
|
|
||||||
"hey, could you sort the books for me?", "img/books-messy.png", "stack books by size",
|
"hello! you're just in time!", "img/kt/yay.png", null,
|
||||||
|
"this was starting to get ridiculous.", "img/kt/you-shouldnt-be-doing-that.png", null,
|
||||||
|
"there are books EVERYWWHERE", "img/kt/scared.png", null,
|
||||||
|
"and more keep coming!", "img/kt/oshit.png", null,
|
||||||
|
"we've got to do something about them at some point, why not now?", "img/kt/determined.png", null,
|
||||||
|
|
||||||
"yes, i can you've finished STACKING them,", "img/books-size.png", null,
|
"hey, could you sort the books for me?", "img/books-messy.png", "stack by size",
|
||||||
"but that's hardly FINISHED, is it?", "img/books-size.png", null,
|
|
||||||
"i mean sure, if you want to be a pedant about it they're sort of ordered by size,", "img/nonplussed.png", null,
|
|
||||||
"but they're still just piled up in the same place, what's that supposed to change?", "img/coffee.png", null,
|
|
||||||
|
|
||||||
"why don't you try again?", "img/books-size.png", "push stack over",
|
"yes, i can you've finished STACKING them,", "img/books-size.png", null,
|
||||||
"", "img/books-messy.png", "order books by colour",
|
"but that's hardly FINISHED, is it?", "img/books-size.png", null,
|
||||||
"", "img/books-colour.png", null,
|
"i mean sure, if you want to be a pedant about it they're sort of ordered by size,", "img/kt/nonplussed.png", null,
|
||||||
|
"but they're still just piled up in the same place, what's that supposed to change?", "img/kt/coffee.png", null,
|
||||||
|
|
||||||
"no, colours won't work either.", "img/dreamer0.png", null,
|
"why don't you try again?", "img/books-size.png", "push stack over",
|
||||||
"why?", "img/blast.png", null,
|
"", "img/books-messy.png", "order books by colour",
|
||||||
"simple, i don't do colours.", "img/grin.png", null,
|
"", "img/books-colour.png", null,
|
||||||
"it's nothing personal, they're just not for me, you know?", "img/glad-you-asked.png", "restart"
|
|
||||||
|
"no, colours won't work either.", "img/kt/dreamer0.png", null,
|
||||||
|
"why?", "img/kt/blast.png", null,
|
||||||
|
"simple, i don't do colours.", "img/kt/grin.png", null,
|
||||||
|
"it's nothing personal, they're just not for me, you know?", "img/kt/glad-you-asked.png", "restart"
|
||||||
];
|
];
|
||||||
|
|
||||||
|
|
||||||
function setText(text) {
|
function setText(text) {
|
||||||
document.getElementById('text-box').innerHTML = text;
|
document.getElementById('text-box-content').innerHTML = text;
|
||||||
}
|
}
|
||||||
|
|
||||||
function setImage(path) {
|
function setImage(path) {
|
||||||
|
|
@ -35,12 +37,11 @@ function setImage(path) {
|
||||||
|
|
||||||
function setButtonText(text) {
|
function setButtonText(text) {
|
||||||
console.log(text);
|
console.log(text);
|
||||||
if (text == null)
|
if (text == null) {
|
||||||
{
|
|
||||||
text = "next";
|
text = "next";
|
||||||
}
|
}
|
||||||
|
|
||||||
document.getElementById('button').innerHTML = text;
|
document.getElementById('button-text').innerHTML = text;
|
||||||
}
|
}
|
||||||
|
|
||||||
function advance() {
|
function advance() {
|
||||||
|
|
|
||||||
|
|
@ -1,20 +1,87 @@
|
||||||
img {
|
body
|
||||||
max-height: 70vh;
|
{
|
||||||
width: auto;
|
padding: 0;
|
||||||
|
margin: 0;
|
||||||
|
|
||||||
|
width: 100%;
|
||||||
|
height: 100%;
|
||||||
|
font-family: sans-serif;
|
||||||
|
|
||||||
|
color: white;
|
||||||
|
background-color: black;
|
||||||
}
|
}
|
||||||
|
|
||||||
.centre {
|
.column {
|
||||||
margin: auto;
|
margin: 0 auto;
|
||||||
padding: 0;
|
left: 50%;
|
||||||
width: 50%;
|
width: 80%;
|
||||||
|
/*transform: translateX(50%);*/
|
||||||
|
height: 100%;
|
||||||
|
}
|
||||||
|
|
||||||
|
/* make column full-width for small viewports */
|
||||||
|
@media only screen and (max-width: 600px) {
|
||||||
|
.column {
|
||||||
|
left: 0;
|
||||||
|
width: 100%;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
.img-container {
|
||||||
|
position: relative;
|
||||||
|
height: 60%;
|
||||||
|
width: 100%;
|
||||||
|
}
|
||||||
|
|
||||||
|
img {
|
||||||
|
object-fit: contain;
|
||||||
|
width: 100%;
|
||||||
|
height: 100%;
|
||||||
}
|
}
|
||||||
|
|
||||||
#button {
|
#button {
|
||||||
|
position: relative;
|
||||||
|
margin: 0;
|
||||||
|
width: 100%;
|
||||||
|
height: 15%;
|
||||||
|
}
|
||||||
|
|
||||||
|
a {
|
||||||
|
color: white;
|
||||||
|
}
|
||||||
|
|
||||||
|
#button a {
|
||||||
|
position: absolute;
|
||||||
|
left: 50%;
|
||||||
|
top: 50%;
|
||||||
|
transform: translate(-50%, -50%);
|
||||||
|
|
||||||
|
font-size: 4em;
|
||||||
|
text-align: center;
|
||||||
|
|
||||||
|
text-decoration: none;
|
||||||
|
}
|
||||||
|
|
||||||
|
#button:hover a {
|
||||||
|
color: grey;
|
||||||
|
}
|
||||||
|
|
||||||
|
.text-box {
|
||||||
|
position: relative;
|
||||||
|
|
||||||
|
width: 100%;
|
||||||
|
height: 25%;
|
||||||
|
}
|
||||||
|
|
||||||
|
.text-box p {
|
||||||
|
margin: 0;
|
||||||
|
width: 80%;
|
||||||
|
position: absolute;
|
||||||
|
top: 50%;
|
||||||
|
left: 50%;
|
||||||
|
transform: translate(-50%, -50%);
|
||||||
|
|
||||||
|
text-align: center;
|
||||||
|
word-wrap: wrap;
|
||||||
font-size: 2em;
|
font-size: 2em;
|
||||||
}
|
}
|
||||||
|
|
||||||
#text-box {
|
|
||||||
width 100%;
|
|
||||||
height: 4em;
|
|
||||||
}
|
|
||||||
|
|
||||||
|
|
|
||||||