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;
|
||||
}
|
||||
|
||||