feat(vn): simple vn
|
|
@ -0,0 +1,16 @@
|
||||||
|
<head>
|
||||||
|
<meta charset="UTF-8"/>
|
||||||
|
<link rel="stylesheet" href="styles.css" />
|
||||||
|
</head>
|
||||||
|
<html>
|
||||||
|
<body>
|
||||||
|
|
||||||
|
<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>
|
||||||
|
|
||||||
|
</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: 106 KiB |
|
After Width: | Height: | Size: 155 KiB |
|
After Width: | Height: | Size: 135 KiB |
|
After Width: | Height: | Size: 107 KiB |
|
After Width: | Height: | Size: 46 KiB |
|
After Width: | Height: | Size: 47 KiB |
|
After Width: | Height: | Size: 174 KiB |
|
After Width: | Height: | Size: 60 KiB |
|
After Width: | Height: | Size: 109 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: 55 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: 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: 137 KiB |
|
After Width: | Height: | Size: 64 KiB |
|
After Width: | Height: | Size: 64 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 |
|
|
@ -0,0 +1,62 @@
|
||||||
|
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,
|
||||||
|
|
||||||
|
"hey, could you sort the books for me?", "img/books-messy.png", "stack books by size",
|
||||||
|
|
||||||
|
"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,
|
||||||
|
|
||||||
|
"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/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"
|
||||||
|
];
|
||||||
|
|
||||||
|
|
||||||
|
function setText(text) {
|
||||||
|
document.getElementById('text-box').innerHTML = text;
|
||||||
|
}
|
||||||
|
|
||||||
|
function setImage(path) {
|
||||||
|
document.getElementById('portrait').src = path;
|
||||||
|
}
|
||||||
|
|
||||||
|
function setButtonText(text) {
|
||||||
|
console.log(text);
|
||||||
|
if (text == null)
|
||||||
|
{
|
||||||
|
text = "next";
|
||||||
|
}
|
||||||
|
|
||||||
|
document.getElementById('button').innerHTML = text;
|
||||||
|
}
|
||||||
|
|
||||||
|
function advance() {
|
||||||
|
const stride = 3;
|
||||||
|
|
||||||
|
if (idx >= frames.length) {
|
||||||
|
idx = 0;
|
||||||
|
}
|
||||||
|
|
||||||
|
let text = frames[idx];
|
||||||
|
let img = frames[idx + 1];
|
||||||
|
let buttonText = frames[idx + 2];
|
||||||
|
|
||||||
|
setText(text);
|
||||||
|
setButtonText(buttonText);
|
||||||
|
setImage(img);
|
||||||
|
|
||||||
|
idx += stride;
|
||||||
|
}
|
||||||
|
|
@ -0,0 +1,20 @@
|
||||||
|
img {
|
||||||
|
max-height: 70vh;
|
||||||
|
width: auto;
|
||||||
|
}
|
||||||
|
|
||||||
|
.centre {
|
||||||
|
margin: auto;
|
||||||
|
padding: 0;
|
||||||
|
width: 50%;
|
||||||
|
}
|
||||||
|
|
||||||
|
#button {
|
||||||
|
font-size: 2em;
|
||||||
|
}
|
||||||
|
|
||||||
|
#text-box {
|
||||||
|
width 100%;
|
||||||
|
height: 4em;
|
||||||
|
}
|
||||||
|
|
||||||