diff options
| -rw-r--r-- | www/css/index.css | 11 | ||||
| -rw-r--r-- | www/index.html | 10 | ||||
| -rw-r--r-- | www/js/api.js | 1 | ||||
| -rw-r--r-- | www/js/html5ks.js | 21 | ||||
| -rw-r--r-- | www/js/menu.js | 116 |
5 files changed, 112 insertions, 47 deletions
diff --git a/www/css/index.css b/www/css/index.css index c1ae018..3f6e64c 100644 --- a/www/css/index.css +++ b/www/css/index.css @@ -53,7 +53,7 @@ html.no-js #warn-container { position: absolute; top: 10%; width: 600px; - z-index: 10; + z-index: 100; } html.no-js #warn li { display: none; } html.js #warn noscript { display: none; } @@ -95,7 +95,10 @@ html.no-js #gotit { height: 100%; background-color: rgb(0, 0, 0); opacity: 0.5; - z-index: 9; + z-index: 10; +} +#dialogs { + z-index: 50; } #show { height: 100%; @@ -154,6 +157,10 @@ html.no-js #gotit { #nvlctc { bottom: 25px; } +#centered { + text-align: center; + width: 100%; +} .centered { position: absolute; margin: auto; diff --git a/www/index.html b/www/index.html index 8c4a615..92a2611 100644 --- a/www/index.html +++ b/www/index.html @@ -53,13 +53,13 @@ <img id="nvlctc" src="dump/ui/ctc_rotated.png"> </div> <div id="choices" class="centered"></div> - <div id="centered" class="centered say"></div> + <div id="centered" class="say"></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">Start</div> <div id="load" class="button disabled">Load</div> <div id="extras" class="button disabled">Extras</div> - <div id="options-button" class="button">Options</div> + <div class="options-button button">Options</div> <div class="quit button disabled">Quit</div> </div> <div id="version" style=""> @@ -97,10 +97,10 @@ <div id="text-history" class="button disabled">Text history</div> <div id="skip-mode" class="button">Skip mode</div> <div id="auto-mode" class="button">Auto mode</div> - <div id="options" class="button">Options</div> + <div class="options-button button">Options</div> <div id="save" class="button">Save</div> - <div id="load" class="button">Load</div> - <div id="main-menu" class="button">Main menu</div> + <div class="load button">Load</div> + <div id="goto-main-menu" class="button">Main menu</div> <div class="quit button disabled">Quit</div> </div> <div id="context-info"> diff --git a/www/js/api.js b/www/js/api.js index 316c9a6..4c5a48f 100644 --- a/www/js/api.js +++ b/www/js/api.js @@ -124,6 +124,7 @@ window.html5ks.api = { iscene: function (target, is_h, is_end) { + html5ks.state.status = "scene"; var deferred = when.defer(), label = html5ks.data.script[html5ks.persistent.language + "_" + target], i = 0; diff --git a/www/js/html5ks.js b/www/js/html5ks.js index 4f38a42..4f54844 100644 --- a/www/js/html5ks.js +++ b/www/js/html5ks.js @@ -133,19 +133,16 @@ window.html5ks = { initEvents: function () { window.onresize = html5ks.scale; this.elements.container.addEventListener("mouseup", function (e) { - switch (e.button) { - case 0: - html5ks.next(); - break; - case 1: - html5ks.menu.showImage(); - break; + if (html5ks.state.status === "scene") { + switch (e.button) { + case 0: + html5ks.next(); + break; + case 1: + html5ks.menu.showImage(); + break; + } } - e.preventDefault(); - }, false); - this.elements.container.addEventListener("contextmenu", function (e) { - html5ks.menu.context(); - e.preventDefault(); }, false); window.addEventListener("dragstart", function (e) { e.preventDefault(); diff --git a/www/js/menu.js b/www/js/menu.js index c39f037..c8e9bd4 100644 --- a/www/js/menu.js +++ b/www/js/menu.js @@ -9,6 +9,7 @@ html5ks.api.play("music", "music_menus"); html5ks.api.show("url", "ui/main/bg-main.png"); this.elements.mainMenu.style.display = "block"; + html5ks.state.status = "menu"; }, activeDialog: null, @@ -17,6 +18,8 @@ this.activeDialog = this.elements.dialog[name]; this.activeDialog.style.display = "block"; this.elements.dialogs.style.display = "block"; + this.elements.context.style.display = "none"; + html5ks.elements.gray.style.display = "block"; }, initElements: function () { @@ -28,12 +31,11 @@ }, mainMenu: document.getElementById("main-menu"), main: { - start: document.getElementById("start"), - optionsButton: document.getElementById("options-button"), + start: document.getElementById("start") }, context: document.getElementById("context"), contextMenu: document.getElementById("context-menu"), - contextInfo: document.getElementById("context-info"), + contextInfo: document.getElementById("context-info") }; }, @@ -72,8 +74,82 @@ options[0].parentNode.parentNode.addEventListener("change", change, false); options[0].parentNode.parentNode.addEventListener("input", change, false); - this.elements.main.optionsButton.addEventListener("click", function () { - html5ks.menu.dialog("options"); + var optionsButton = document.getElementsByClassName("options-button"); + + for (var i = optionsButton.length - 1; i >= 0; i--) { + optionsButton[i].addEventListener("click", function (e) { + html5ks.menu.dialog("options"); + e.stopPropagation(); + }, false); + } + + html5ks.elements.container.addEventListener("contextmenu", function (e) { + switch (html5ks.state.status) { + case "scene": + case "context": + html5ks.state.skip = false; + html5ks.state.auto = false; + this.context(); + } + e.preventDefault(); + }.bind(this), false); + + this.elements.dialog.return.addEventListener("click", function (e) { + html5ks.menu.activeDialog.style.display = "none"; + html5ks.menu.activeDialog = null; + html5ks.menu.elements.dialogs.style.display = "none"; + if (html5ks.state.status === "context") { + html5ks.menu.context(true); + } else { + html5ks.elements.gray.style.display = "none"; + } + e.stopPropagation(); + }, false); + + ["AppleWebKit", "MSIE", "Trident"].forEach(function (ua) { + if (navigator.userAgent.indexOf(ua) > -1) { + var quit = document.getElementsByClassName("quit"); + for (var i = quit.length - 1; i >= 0; i++) { + quit[i].className = quit.className.replace("disabled", ""); + quit[i].addEventListener("click", function () { + window.close(); + top.open('','_self',''); + top.close(); + }, false); + } + return false; + } + }, this); + + document.getElementById("context-return").addEventListener("click", function () { + html5ks.menu.context(false); + }, false); + + document.getElementById("show-image").addEventListener("click", function () { + html5ks.menu.context(false); + html5ks.elements.window.style.display = "none"; + html5ks.elements.container.addEventListener("click", function click() { + this.removeEventListener("click", click, true); + html5ks.menu.context(true); + }, true); + }, false); + + document.getElementById("skip-mode").addEventListener("click", function () { + html5ks.menu.context(false); + html5ks.state.skip = true; + html5ks.next(); + }, false); + + document.getElementById("auto-mode").addEventListener("click", function () { + html5ks.menu.context(false); + html5ks.state.auto = true; + html5ks.next(); + }, false); + + document.getElementById("goto-main-menu").addEventListener("click", function () { + html5ks.next = function () {}; + html5ks.menu.context(false); + html5ks.menu.mainMenu(); }, false); }, @@ -116,42 +192,26 @@ start.className = start.className.replace("disabled", ""); this._imachine_loaded = true; }.bind(this)); - - this.elements.dialog.return.addEventListener("click", function () { - html5ks.menu.activeDialog.style.display = "none"; - html5ks.menu.elements.dialogs.style.display = "none"; - }, false); - - ["AppleWebKit", "MSIE", "Trident"].forEach(function (ua) { - if (navigator.userAgent.indexOf(ua) > -1) { - var quit = document.getElementsByClassName("quit"); - for (var i = quit.length - 1; i >= 0; i++) { - quit[i].className = quit.className.replace("disabled", ""); - quit[i].addEventListener("click", function () { - window.close(); - top.open('','_self',''); - top.close(); - }, false); - } - return false; - } - }, this); }, - context: function (show) { + context: function (show, transitional) { switch (show) { case true: + html5ks.state.status = "context"; html5ks.elements.gray.style.display = "block"; html5ks.elements.window.style.display = "none"; this.elements.context.style.display = "block"; break; case false: + html5ks.state.status = "scene"; html5ks.elements.gray.style.display = "none"; - html5ks.elements.window.style.display = "block"; + if (html5ks.state.status === "scene") { + html5ks.elements.window.style.display = "block"; + } this.elements.context.style.display = "none"; break; default: - this.context(html5ks.elements.gray.style.display !== "block"); + this.context(this.elements.context.style.display !== "block"); } } }; |