We use a lot of new features in this; your browser seems to have some issues...

It doesn't seem to support HTML5 video, which means that you won't be able to see any of the videos (obviously). Unless stated below, though, transitions should still work. You should strongly consider upgrading.
It doesn't seem to support CSS transitions, which means that transitions won't work. Videos should still work though, unless stated above. You should definitely try upgrading.
It might not support SVG filters on HTML content, which means that filters like the sunset in the tea room will display as regular images. Unfortunately, this is only implemented in Firefox now.

I know it's broken, let me play!

+ +

diff --git a/www/js/api.js b/www/js/api.js index 14d8335..e5a6a58 100644 --- a/www/js/api.js +++ b/www/js/api.js @@ -25,7 +25,7 @@ window.html5ks.api = { // TODO: fade var deferred = when.defer(), audio = html5ks.elements.audio[channel]; - audio.src = "/dump/" + (channel === "music" ? "bgm/" + html5ks.data.music[name] + ".ogg" : html5ks.data.sfx[name]); + audio.src = "dump/" + (channel === "music" ? "bgm/" + html5ks.data.music[name] + ".ogg" : html5ks.data.sfx[name]); audio.load(); audio.volume = fade ? 0 : 1; audio.play(); @@ -56,16 +56,30 @@ window.html5ks.api = { }, movie_cutscene: function (vid_src) { var deferred = when.defer(), - video = html5ks.elements.video; - video.src = "/dump/video/" + vid_src + ".webm"; + video = html5ks.elements.video, + src = "dump/video/" + vid_src + "."; + + if (Modernizr.video.webm) { + video.src = src + "webm"; + } else if (Modernizr.video.ogg) { + video.src = src + "ogg"; + } else if (Modernizr.video.h264) { + video.src = src + "mp4"; + } + video.load(); + video.style.display = "block"; video.play(); var done = function () { this.style.display = "none"; this.pause(); deferred.resolve(); }; - video.addEventListener("mouseup", done, false); + video.addEventListener("click", function (e) { + if (e.button === 0) { + done.call(this); + } + }, false); video.addEventListener("ended", done, false); video.addEventListener("error", function () { deferred.reject(this.error); @@ -81,10 +95,15 @@ window.html5ks.api = { var label = html5ks.data.script[target], i = 0; (function run() { - html5ks.api.runInst(label[i]).then(run, console.error); - i++; + if (label[i]) { + html5ks.api.runInst(label[i]).then(run, console.error); + i++; + } else { + html5ks.mainMenu(); + } }()); }, + window: function (action, transition) { var windw = html5ks.elements.window, deferred = when.defer(); @@ -96,6 +115,7 @@ window.html5ks.api = { deferred.resolve(action); return deferred.promise; }, + // NOT iscene scene: function (type, name) { var deferred = when.defer(), @@ -122,15 +142,20 @@ window.html5ks.api = { } img.onload = function () { console.debug("setting bg " + img.src); - html5ks.elements.bg.style.background = "url(" + img.src + ")"; + var bg = html5ks.elements.bg; + bg.style.background = "url(" + img.src + ") no-repeat 0 0 / cover black"; deferred.resolve(); }; img.onerror = function () { throw new Error("bg could not load"); }; - img.src = "/dump/" + image.image; + if (Modernizr.webp) { + image.image = image.image.replace(/\.[a-z]+$/, ".webp"); + } + img.src = "dump/" + image.image; return deferred.promise; }, + show: function () { var deferred = when.defer(); deferred.resolve(); @@ -141,9 +166,11 @@ window.html5ks.api = { deferred.resolve(); return deferred.promise; }, + with: function (transition, action) { return this.runInst(action); }, + runInst: function (inst) { var cmd = inst[0], args = inst.slice(1); @@ -163,6 +190,7 @@ window.html5ks.api = { } } }, + character: function (name, str) { var deferred = when.defer(), text = str, diff --git a/www/js/html5ks.js b/www/js/html5ks.js index 6c0234e..3291dab 100644 --- a/www/js/html5ks.js +++ b/www/js/html5ks.js @@ -35,7 +35,13 @@ who: document.getElementById("who"), say: document.getElementById("say"), bg: document.getElementById("bg"), - window: document.getElementById("window") + window: document.getElementById("window"), + mainMenu: document.getElementById("main-menu"), + dialogs: document.getElementById("dialogs"), + dialog: { + options: document.getElementById("options"), + return: document.getElementById("return") + } }; this.elements.audio.music.loop = true; this.elements.audio.ambient.loop = true; @@ -47,8 +53,8 @@ localStorage.persistent = JSON.stringify(this.persistent); }, scale: function () { - var newScale = 1; if (html5ks.persistent.settings.scale) { + var newScale = 1; var height = document.documentElement.clientHeight, width = document.documentElement.clientWidth; if (height / width <= 0.75) { // widescreen @@ -56,12 +62,22 @@ } else { newScale = width / 800; } - } else { - newScale = 1; + + var container = html5ks.elements.container; + container.style.webkitTransform = "scale(" + newScale + ")"; + container.style.mozTransform = "scale(" + newScale + ")"; + container.style.transform = "scale(" + newScale + ")"; + + 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"; + } + + applyScale(html5ks.elements.bg, newScale); + applyScale(html5ks.elements.video, newScale); } - html5ks.elements.container.style.webkitTransform = "scale(" + newScale + ")"; - html5ks.elements.container.style.mozTransform = "scale(" + newScale + ")"; - html5ks.elements.container.style.transform = "scale(" + newScale + ")"; }, next: function () {}, initEvents: function () { @@ -69,6 +85,13 @@ this.elements.container.addEventListener("mouseup", function () { html5ks.next(); }, false); + var deselect = function () { + window.getSelection().collapse(this, 0); + }; + document.body.addEventListener("mousemove", deselect, true); + document.body.addEventListener("mouseup", deselect, true); + document.body.addEventListener("keyup", deselect, true); + this.menu.initEvents(); }, warnUnsupported: function () { if (!html5ks.persistent.settings.gotit) { @@ -101,7 +124,7 @@ winload: function () { this.fetch("script", "a1-monday").then(function () { html5ks.api.movie_cutscene("4ls").then(function () { - html5ks.api.iscene("en_NOP1") + html5ks.menu.mainMenu(); }); }); }, @@ -114,7 +137,7 @@ deferred.resolve(); } else { var xhr = new XMLHttpRequest(); - xhr.open("GET", "/scripts/script-" + name + ".json"); + xhr.open("GET", "scripts/script-" + name + ".json"); xhr.onreadystatechange = function () { script[name] = true; if (xhr.readyState === 4) { diff --git a/www/js/menu.js b/www/js/menu.js new file mode 100644 index 0000000..8d68fcd --- /dev/null +++ b/www/js/menu.js @@ -0,0 +1,33 @@ +html5ks.menu = { + mainMenu: function () { + html5ks.api.stop("music"); + html5ks.api.stop("sound"); + html5ks.api.stop("ambient"); + html5ks.api.window("hide"); + html5ks.api.play("music", "music_menus"); + html5ks.elements.bg.style.background = "url(dump/ui/main/bg-main.png) 0 0 / cover"; + html5ks.elements.mainMenu.style.display = "block"; + }, + + activeDialog: null, + + dialog: function (name) { + this.activeDialog = html5ks.elements.dialog[name]; + this.activeDialog.style.display = "block"; + html5ks.elements.dialogs.style.display = "block"; + }, + + initEvents: function () { + document.getElementById("start").addEventListener("click", function () { + html5ks.elements.mainMenu.style.display = "none"; + html5ks.api.iscene("en_NOP1"); + }, false); + document.getElementById("options-button").addEventListener("click", function () { + html5ks.menu.dialog("options"); + }, false); + html5ks.elements.dialog.return.addEventListener("click", function (e) { + html5ks.menu.activeDialog.style.display = "none"; + html5ks.elements.dialogs.style.display = "none"; + }, false); + } +}; -- cgit v1.2.3-70-g09d2

We use a lot of new features in this; your browser seems to have some issues...

Options