summaryrefslogtreecommitdiff
path: root/www
diff options
context:
space:
mode:
Diffstat (limited to 'www')
-rw-r--r--www/css/index.css11
-rw-r--r--www/index.html10
-rw-r--r--www/js/api.js1
-rw-r--r--www/js/html5ks.js21
-rw-r--r--www/js/menu.js116
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");
}
}
};
generated by cgit v1.2.3-70-g09d2 (git 2.47.0) at 2024-11-22 09:13:47 +0000