feat: update vn
|
|
@ -3,14 +3,22 @@
|
|||
<link rel="stylesheet" href="styles.css" />
|
||||
</head>
|
||||
<html>
|
||||
<body>
|
||||
<body onload="advance()">
|
||||
<div class="column">
|
||||
|
||||
<div class="centre">
|
||||
<img id="portrait" src="img/stargazer.png"></img>
|
||||
<div id="text-box"></div>
|
||||
<a id="button" href="#" onclick="advance()">start</a>
|
||||
<div class=img-container>
|
||||
<img id="portrait" src="img/frog.png"></img>
|
||||
</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>
|
||||
</html>
|
||||
<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 frames = [
|
||||
"hello! you're just in time!", "img/yay.png", null,
|
||||
"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,
|
||||
"press start to begin!", "img/kt/stargazer.png", "start",
|
||||
|
||||
"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,
|
||||
"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,
|
||||
"hey, could you sort the books for me?", "img/books-messy.png", "stack by size",
|
||||
|
||||
"why don't you try again?", "img/books-size.png", "push stack over",
|
||||
"", "img/books-messy.png", "order books by colour",
|
||||
"", "img/books-colour.png", null,
|
||||
"yes, i can you've finished STACKING them,", "img/books-size.png", null,
|
||||
"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/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?", "img/blast.png", null,
|
||||
"simple, i don't do colours.", "img/grin.png", null,
|
||||
"it's nothing personal, they're just not for me, you know?", "img/glad-you-asked.png", "restart"
|
||||
"why don't you try again?", "img/books-size.png", "push stack over",
|
||||
"", "img/books-messy.png", "order books by colour",
|
||||
"", "img/books-colour.png", null,
|
||||
|
||||
"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) {
|
||||
document.getElementById('text-box').innerHTML = text;
|
||||
document.getElementById('text-box-content').innerHTML = text;
|
||||
}
|
||||
|
||||
function setImage(path) {
|
||||
|
|
@ -35,12 +37,11 @@ function setImage(path) {
|
|||
|
||||
function setButtonText(text) {
|
||||
console.log(text);
|
||||
if (text == null)
|
||||
{
|
||||
if (text == null) {
|
||||
text = "next";
|
||||
}
|
||||
|
||||
document.getElementById('button').innerHTML = text;
|
||||
document.getElementById('button-text').innerHTML = text;
|
||||
}
|
||||
|
||||
function advance() {
|
||||
|
|
|
|||
|
|
@ -1,20 +1,87 @@
|
|||
img {
|
||||
max-height: 70vh;
|
||||
width: auto;
|
||||
body
|
||||
{
|
||||
padding: 0;
|
||||
margin: 0;
|
||||
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
font-family: sans-serif;
|
||||
|
||||
color: white;
|
||||
background-color: black;
|
||||
}
|
||||
|
||||
.centre {
|
||||
margin: auto;
|
||||
padding: 0;
|
||||
width: 50%;
|
||||
.column {
|
||||
margin: 0 auto;
|
||||
left: 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 {
|
||||
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;
|
||||
}
|
||||
|
||||
#text-box {
|
||||
width 100%;
|
||||
height: 4em;
|
||||
}
|
||||
|
||||
|
|
|
|||