diff options
| -rw-r--r-- | www/css/index.css | 2 | ||||
| -rw-r--r-- | www/index.html | 5 | ||||
| -rw-r--r-- | www/js/api.js | 57 | ||||
| -rw-r--r-- | www/js/html5ks.js | 22 |
4 files changed, 49 insertions, 37 deletions
diff --git a/www/css/index.css b/www/css/index.css index b1e1a78..7818403 100644 --- a/www/css/index.css +++ b/www/css/index.css @@ -36,7 +36,7 @@ body { left: -190px; } } -#bg,#vid,#solid { +#bg,#vid { position: absolute; width: 800px; height: 600px; diff --git a/www/index.html b/www/index.html index 62d790f..64950d5 100644 --- a/www/index.html +++ b/www/index.html @@ -42,10 +42,7 @@ </div> </div> <div id="container"> - <div id="img"> - <img id="bg" src="/loading.jpg" alt=""> - <div id="solid"></div> - </div> + <div id="bg"></div> <div id="window" style="display: none;"> <img id="window-image" src="/dump/ui/bg-say.png" alt=""> <div id="who"></div> diff --git a/www/js/api.js b/www/js/api.js index 41a76f5..14d8335 100644 --- a/www/js/api.js +++ b/www/js/api.js @@ -27,9 +27,7 @@ window.html5ks.api = { audio = html5ks.elements.audio[channel]; audio.src = "/dump/" + (channel === "music" ? "bgm/" + html5ks.data.music[name] + ".ogg" : html5ks.data.sfx[name]); audio.load(); - if (fade) { - audio.volume = 0; - } + audio.volume = fade ? 0 : 1; audio.play(); audio.addEventListener("playing", function playing() { audio.removeEventListener("playing", playing, false); @@ -56,15 +54,19 @@ window.html5ks.api = { deferred.resolve(); return deferred.promise; }, - play_video: function (vid_src) { + movie_cutscene: function (vid_src) { var deferred = when.defer(), video = html5ks.elements.video; video.src = "/dump/video/" + vid_src + ".webm"; video.load(); video.play(); - video.addEventListener("ended", function () { + var done = function () { + this.style.display = "none"; + this.pause(); deferred.resolve(); - }, false); + }; + video.addEventListener("mouseup", done, false); + video.addEventListener("ended", done, false); video.addEventListener("error", function () { deferred.reject(this.error); }, false); @@ -72,11 +74,16 @@ window.html5ks.api = { }, act_op: function (this_video) { // strip off extension - return this.play_video(this_video.slice(0,-4)); + return this.movie_cutscene(this_video.slice(0,-4)); }, iscene: function (target, is_h, is_end) { this.scene_register(target); - return window.script[target](); + var label = html5ks.data.script[target], + i = 0; + (function run() { + html5ks.api.runInst(label[i]).then(run, console.error); + i++; + }()); }, window: function (action, transition) { var windw = html5ks.elements.window, @@ -96,7 +103,7 @@ window.html5ks.api = { if (name) { nom = type + "_" + name; } - var bg = html5ks.elements.img.bg; + var img = new Image(); var image = html5ks.data.images[nom]; if (!image) { var typ = { @@ -104,23 +111,24 @@ window.html5ks.api = { }[type]; image = typ.dir + "/" + name + "." + typ.ext; } - html5ks.elements.img.solid.style.backgroundColor = ''; if (typeof image == "string") { if (image.substring(0,1) == "#") { - html5ks.elements.img.solid.style.backgroundColor = image; + html5ks.elements.bg.style.background = image; deferred.resolve(); return deferred.promise; } else { image = {image: image}; } } - bg.onload = function () { + img.onload = function () { + console.debug("setting bg " + img.src); + html5ks.elements.bg.style.background = "url(" + img.src + ")"; deferred.resolve(); }; - bg.onerror = function () { + img.onerror = function () { throw new Error("bg could not load"); }; - bg.src = "/dump/" + image.image; + img.src = "/dump/" + image.image; return deferred.promise; }, show: function () { @@ -144,6 +152,9 @@ window.html5ks.api = { } else { if (this[cmd]) { return this[cmd].apply(this, args); + } else if (/^[A-Z]/.test(cmd)) { + console.log("cmd starts with caps, probably character"); + return this.character(cmd, args); } else { console.error("no such cmd " + cmd); var deferred = when.defer(); @@ -152,18 +163,13 @@ window.html5ks.api = { } } }, - runScript: function (label) { - var i = 0; - (function run() { - console.log(label[i]); - html5ks.api.runInst(label[i]).then(run, console.error); - i++; - }()); - }, character: function (name, str) { var deferred = when.defer(), text = str, char = html5ks.data.characters[name]; + if (!char) { + char = { name: name } + } if (char.what_prefix) { text = char.what_prefix + text; } @@ -186,5 +192,12 @@ window.html5ks.api = { setTimeout(html5ks.next, 1000 + html5ks.persistent.settings.autospeed * text.length); } return deferred.promise; + }, + Pause: function (duration) { + var deferred = when.defer(); + setTimeout(function () { + deferred.resolve(); + }, duration * 1000); + return deferred.promise; } }; diff --git a/www/js/html5ks.js b/www/js/html5ks.js index 08b8e73..6c0234e 100644 --- a/www/js/html5ks.js +++ b/www/js/html5ks.js @@ -2,7 +2,7 @@ "use strict"; window.html5ks = { data: { - scripts: {} + script: {} }, persistent: { seen_scenes: {}, @@ -34,10 +34,7 @@ }, who: document.getElementById("who"), say: document.getElementById("say"), - img: { - bg: document.getElementById("bg"), - solid: document.getElementById("solid") - }, + bg: document.getElementById("bg"), window: document.getElementById("window") }; this.elements.audio.music.loop = true; @@ -103,23 +100,28 @@ }, winload: function () { this.fetch("script", "a1-monday").then(function () { - html5ks.api.runScript(html5ks.data.scripts["a1-monday"].en_NOP1) + html5ks.api.movie_cutscene("4ls").then(function () { + html5ks.api.iscene("en_NOP1") + }); }); - this.elements.img.bg.src = ""; }, fetch: function (type, name) { var deferred = when.defer(); switch (type) { case "script": - var scripts = html5ks.data.scripts; - if (typeof scripts[name] === "object") { + var script = html5ks.data.script; + if (script[name]) { deferred.resolve(); } else { var xhr = new XMLHttpRequest(); xhr.open("GET", "/scripts/script-" + name + ".json"); xhr.onreadystatechange = function () { + script[name] = true; if (xhr.readyState === 4) { - scripts[name] = JSON.parse(xhr.responseText); + var resp = JSON.parse(xhr.responseText); + for (var label in resp) { + script[label] = resp[label]; + } deferred.resolve(); } }; |