diff options
-rw-r--r-- | www/css/index.css | 2 | ||||
-rw-r--r-- | www/index.html | 10 | ||||
-rw-r--r-- | www/js/.jshintrc | 1 | ||||
-rw-r--r-- | www/js/api.js | 2 | ||||
-rw-r--r-- | www/js/html5ks.js | 26 | ||||
-rw-r--r-- | www/js/menu.js | 85 |
6 files changed, 82 insertions, 44 deletions
diff --git a/www/css/index.css b/www/css/index.css index 5b72fc4..533559c 100644 --- a/www/css/index.css +++ b/www/css/index.css @@ -106,7 +106,7 @@ html.fontface #warn li#fontface { display: none; } html.csstransforms #warn li#csstransforms { display: none; } html.csstransitions #warn li#csstransitions { display: none; } html #warn li#html-svg-filter { display: none; } -.button { +label { display: block; } .button-enabled { diff --git a/www/index.html b/www/index.html index 9cc9dc3..4c054b9 100644 --- a/www/index.html +++ b/www/index.html @@ -26,7 +26,6 @@ </head> <body><div id="all" style="height: 100%; position: absolute; width: 100%;"> <div id="warn-container"> - <div id="gray"></div> <div id="warn"> <h2>We use a lot of new features in this; your browser seems to have some issues...</h2> <ul id="warns"> @@ -44,6 +43,7 @@ </div> <div id="bg"></div> <div id="container"> + <div id="gray" style="display: none;"></div> <div id="window" style="display: none;"> <img id="window-image" src="dump/ui/bg-say.png" alt=""> <div id="who"></div> @@ -70,6 +70,14 @@ <label class="button button-enabled"><input type="checkbox" id="fullscreen"> <span>Fullscreen mode</span></label> <label class="button button-enabled"><input type="checkbox" id="skip-unread"> <span>Skip unread text</span></label> <label class="button button-enabled"><input type="checkbox" id="skip-after-choices"> <span>Keep skipping after choices</span></label> + <label class="button button-enabled"><input type="checkbox" id="use-webp"> <span>Use WebP images (less bandwidth, more CPU)</span></label> + <label class="button button-enabled"><input type="checkbox" id="scale-video"> <span>Scale video to fullscreen (decreases performance)</span></label> + + <label><input type="range" id="text-speed"> <span class="tr">Text speed</span></label> + <label><input type="range" id="auto-mode-delay"> <span class="tr">Auto mode delay</span></label> + + <label><input type="range" id="music-volume"> <span class="tr">Music volume</span></label> + <label><input type="range" id="sfx-volume"> <span class="tr">SFX volume</span> <span id="test-sfx" class="button button-enabled"><img src="dump/ui/bt-musicplay.png"> Test</span></label> </div> <div id="return" class="button button-enabled" style="position: absolute; bottom: 15px; right: 20px;"> <img src="dump/ui/bt-return.png"> diff --git a/www/js/.jshintrc b/www/js/.jshintrc index 5dca845..6c2d36a 100644 --- a/www/js/.jshintrc +++ b/www/js/.jshintrc @@ -3,6 +3,7 @@ "browser": true, "devel": true, "globals": { + "Modernizr": false, "html5ks": false, "when": false } diff --git a/www/js/api.js b/www/js/api.js index b50f4c3..41139f9 100644 --- a/www/js/api.js +++ b/www/js/api.js @@ -198,7 +198,7 @@ window.html5ks.api = { text = str, char = html5ks.data.characters[name]; if (!char) { - char = { name: name } + char = { name: name }; } if (char.what_prefix) { text = char.what_prefix + text; diff --git a/www/js/html5ks.js b/www/js/html5ks.js index 30a0247..a6518c0 100644 --- a/www/js/html5ks.js +++ b/www/js/html5ks.js @@ -35,13 +35,7 @@ who: document.getElementById("who"), say: document.getElementById("say"), bg: document.getElementById("bg"), - window: document.getElementById("window"), - mainMenu: document.getElementById("main-menu"), - dialogs: document.getElementById("dialogs"), - dialog: { - options: document.getElementById("options"), - return: document.getElementById("return") - } + window: document.getElementById("window") }; this.elements.audio.music.loop = true; this.elements.audio.ambient.loop = true; @@ -73,7 +67,7 @@ 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); @@ -91,7 +85,6 @@ 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) { @@ -126,7 +119,8 @@ this.initEvents(); if (!this.warnUnsupported()) { this.start(); - }; + } + this.menu.init(); }, start: function () { this.fetch("script", "a1-monday").then(function () { @@ -137,13 +131,13 @@ }, fetch: function (type, name) { var deferred = when.defer(); + var xhr = new XMLHttpRequest(); switch (type) { case "script": 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; @@ -158,6 +152,16 @@ xhr.send(); } break; + case "imachine": + xhr.open("GET", "scripts/imachine.json"); + xhr.onreadystatechange = function () { + if (xhr.readyState === 4) { + html5ks.data.imachine = JSON.parse(xhr.responseText); + deferred.resolve(); + } + }; + xhr.send(); + break; default: throw new Error("fetchtype " + type + " not implemented"); } diff --git a/www/js/menu.js b/www/js/menu.js index ad37964..573dd8d 100644 --- a/www/js/menu.js +++ b/www/js/menu.js @@ -1,33 +1,58 @@ -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"; - }, +(function () { + "use strict"; + 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"; + this.elements.mainMenu.style.display = "block"; + }, - activeDialog: null, + activeDialog: null, - dialog: function (name) { - this.activeDialog = html5ks.elements.dialog[name]; - this.activeDialog.style.display = "block"; - html5ks.elements.dialogs.style.display = "block"; - }, + 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").then(html5ks.menu.mainMenu); - }, 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); - } -}; + initElements: function () { + this.elements = { + dialogs: document.getElementById("dialogs"), + dialog: { + return: document.getElementById("return") + }, + mainMenu: document.getElementById("main-menu"), + main: { + start: document.getElementById("start"), + optionsButton: document.getElementById("options-button"), + } + }; + }, + + init: function () { + this.initElements(); + this.elements.main.start.addEventListener("click", function () { + if (this._imachine_loaded) { + this.elements.mainMenu.style.display = "none"; + html5ks.api.iscene("en_NOP1").then(this.mainMenu.bind(this)); + } + }.bind(this), false); + this.elements.main.optionsButton.addEventListener("click", function () { + html5ks.menu.dialog("options"); + }, false); + this.elements.dialog.return.addEventListener("click", function (e) { + html5ks.menu.activeDialog.style.display = "none"; + html5ks.elements.dialogs.style.display = "none"; + }, false); + html5ks.fetch("imachine").then(function () { + var start = this.elements.main.start; + start.className = start.className.replace("button-disabled", "button-enabled"); + this._imachine_loaded = true; + }.bind(this)); + } + }; +}()); |