diff options
| -rw-r--r-- | README | 2 | ||||
| -rw-r--r-- | TODO | 2 | ||||
| -rw-r--r-- | www/css/index.css | 9 | ||||
| -rw-r--r-- | www/index.html | 1 | ||||
| -rw-r--r-- | www/js/api.js | 69 | ||||
| -rw-r--r-- | www/js/html5ks.js | 14 | ||||
| -rw-r--r-- | www/js/imachine.js | 13 |
7 files changed, 77 insertions, 33 deletions
@@ -2,6 +2,8 @@ This is an HTML5 implementation of the game Katawa Shoujo. [0] It's still very much a WIP, but at least the first scene displays half-credibly. +Run lighttpd -f lighttpd.conf which just serves files in www with a reasonable MIME type, expiry date and gzip. + If I haven't finished the TODO (probably), check /TODO for a list of things that need to be worked on. *snip* knows I could use another hand on this. [0] http://www.katawa-shoujo.com/ @@ -5,7 +5,7 @@ all of this should (read: must) be completed for a 1.0 release - show command - redo images.js using json including ALL transitions - transitions. ALL THE TRANSITIONS -- text reveal +- ltr text reveal - wallodrugs - fix cursor to apply to all document - cache script.json files diff --git a/www/css/index.css b/www/css/index.css index 85125be..19651da 100644 --- a/www/css/index.css +++ b/www/css/index.css @@ -151,6 +151,9 @@ input[type="checkbox"]:checked + span:before { -moz-animation: blink 2s infinite; animation: blink 2s infinite; } +#nvlctc { + bottom: 25px; +} #nvl { position: absolute; top: 0; @@ -160,6 +163,10 @@ input[type="checkbox"]:checked + span:before { background: url("../dump/ui/bg-nvl.png") no-repeat top left; } #nvlsay { - padding: 25px 35px; + padding: 15px 35px; color: white; } +.nvl-block { + display: block; + margin: 10px 8px; +} diff --git a/www/index.html b/www/index.html index ff38ee2..729d26a 100644 --- a/www/index.html +++ b/www/index.html @@ -55,6 +55,7 @@ <div id="nvlsay"></div> <img id="nvlctc" src="dump/ui/ctc_rotated.png"> </div> + <div id="choices"></div> <div id="main-menu" style="display: none;"> <div id="main-menu-buttons" style="top: 377px; position: absolute; left: 81px;"> <div id="start" class="button button-enabled">Start</div> diff --git a/www/js/api.js b/www/js/api.js index 34a34d9..320845a 100644 --- a/www/js/api.js +++ b/www/js/api.js @@ -9,26 +9,25 @@ window.html5ks.api = { } } }, - seen_scene: function (scene) { - return !!html5ks.persistent.seen_scenes[scene]; - }, - scene_register: function (scene) { - html5ks.persistent.seen_scenes.scene = true; - }, - fading: function (audio, dir, fade) { - var fadeSet = html5ks.persistent.settings.fade, - step = fadeSet / (fade * 1000), - over = audio.volume + step * dir; - if (over > 1) { - audio.volume = 1; - } else if (over < 0) { - audio.volume = 0; - } else { - audio.volume += step * dir; - setTimeout(function () { - html5ks.api.fading(audio, dir, fade); - }, fadeSet); - } + set_volume: function (volume, delay, channel) { + var deferred = when.defer(), + audio = html5ks.elements.audio[channel], + chg = volume - audio.volume, + step = chg / (delay * 10); + var f = setInterval(function () { + var newv = audio.volume + step; + if (newv > 1) { + audio.volume = 1; + clearInterval(f); + } else if (newv < 0) { + audio.volume = 0; + clearInterval(f); + } else { + audio.volume = newv; + } + }, 100); + deferred.resolve(); + return deferred.promise; }, play: function (channel, name, fade) { // TODO: fade @@ -42,7 +41,7 @@ window.html5ks.api = { audio.removeEventListener("playing", playing, false); deferred.resolve(); if (fade) { - html5ks.api.fading(audio, 1, fade); + html5ks.api.set_volume(1, fade, channel); } }, false); audio.addEventListener("error", function error() { @@ -61,7 +60,7 @@ window.html5ks.api = { audio = html5ks.elements.audio[channel], fadeSet = html5ks.persistent.settings.fade; if (fade) { - this.fading(audio, -1, fade); + this.set_volume(0, fade, channel); } else { audio.pause(); } @@ -108,7 +107,6 @@ window.html5ks.api = { return this.movie_cutscene(this_video.slice(0,-4)); }, iscene: function (target, is_h, is_end) { - this.scene_register(target); var deferred = when.defer(), label = html5ks.data.script[target], i = 0; @@ -236,7 +234,7 @@ window.html5ks.api = { nvlsay: function (text) { var deferred = when.defer(); - html5ks.elements.nvlsay.innerHTML += text + "<br>"; + html5ks.elements.nvlsay.innerHTML += "<span class='nvl-block'>" + text + "</span>"; html5ks.elements.nvlctc.style.display = "block"; html5ks.next = function () { html5ks.elements.nvlctc.style.display = "none"; @@ -344,5 +342,28 @@ window.html5ks.api = { console.error("no such nvl action " + action); } return deferred.promise; + }, + + menu: function (char, str, choices) { + var deferred = when.defer(); + this.character(char, str).then(function () { + var menu = html5ks.elements.choices, + frag = document.createDocumentFragment(), + choice = document.createElement("div"); + + choice.className = "choice"; + + for (var i in choices) { + choice.innerHTML = i; + choice.addEventListener("click", function () { + deferred.resolve(choices[i]); + }, false); + frag.appendChild(choice); + choice = choice.cloneNode(false); + } + + html5ks.elements.choices.innerHTML = ""; + html5ks.elements.choices.appendChild(frag); + }); } }; diff --git a/www/js/html5ks.js b/www/js/html5ks.js index 86278f0..d76f2a0 100644 --- a/www/js/html5ks.js +++ b/www/js/html5ks.js @@ -23,8 +23,10 @@ window.html5ks = { autoModeDelay: 0.2, musicVolume: 1, sfxVolume: 1 - }, - store: {} + } + }, + store: { + seen_scenes: {} }, state: {}, initElements: function () { @@ -72,14 +74,18 @@ window.html5ks = { container.style.webkitTransform = "scale(" + newScale + ")"; container.style.mozTransform = "scale(" + newScale + ")"; container.style.transform = "scale(" + newScale + ")"; - container.className += " scale"; + if (container.className.indexOf("scale") === -1) { + container.className += " scale"; + } var applyScale = function (el, scale) { el.style.height = scale * 600 + "px"; el.style.marginTop = "-" + scale * 300 + "px"; el.style.width = scale * 800 + "px"; el.style.marginLeft = "-" + scale * 400 + "px"; - el.className += " scale"; + if (el.className.indexOf("scale") === -1) { + el.className += " scale"; + } }; applyScale(html5ks.elements.bg, newScale); diff --git a/www/js/imachine.js b/www/js/imachine.js index fd657ef..12a2f7a 100644 --- a/www/js/imachine.js +++ b/www/js/imachine.js @@ -1,12 +1,18 @@ html5ks.imachine = (function () { "use strict"; return { + seen_scene: function (scene) { + return !!html5ks.store.seen_scenes[scene]; + }, + scene_register: function (scene) { + html5ks.store.seen_scenes[scene] = true; + }, start: function () { return this.run("imachine"); }, run: function (label) { var deferred = when.defer(), - ilabel = html5ks.data.imachine[label], + ilabel = typeof label === "string" ? html5ks.data.imachine[label] : label, i = 0, runInst = function () { var inst = ilabel[i++]; @@ -20,6 +26,7 @@ html5ks.imachine = (function () { case "object": switch (inst[0]) { case "iscene": + this.scene_register(inst[1]); case "act_op": switch (inst[1]) { case "op_vid1": @@ -31,9 +38,9 @@ html5ks.imachine = (function () { break; case "seen_scene": if (this.seen_scene(inst[1])) { - runInst(inst[2]); + this.run(inst[2]); } else { - runInst(inst[3]); + this.run(inst[3]); } break; case "attraction_sc": |