From 193426e583dcaf4423a5f29a0f9297b0bf23231c Mon Sep 17 00:00:00 2001 From: Alex Xu Date: Thu, 27 Jun 2013 21:37:05 -0400 Subject: doodeedoodeediddlydooo --- www/js/api.js | 44 ++++++++++++++++++++++++++++++++++++-------- www/js/html5ks.js | 41 ++++++++++++++++++++++++++++++++--------- www/js/menu.js | 33 +++++++++++++++++++++++++++++++++ 3 files changed, 101 insertions(+), 17 deletions(-) create mode 100644 www/js/menu.js (limited to 'www/js') 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-54-g00ecf