From f2331df4bac581d5e81fd25b6a49028715365e8b Mon Sep 17 00:00:00 2001 From: Alex Xu Date: Fri, 2 Aug 2013 14:48:23 -0400 Subject: add context menu UI, fix misc. bugs --- www/css/index.css | 119 ++++++++++++++++++++++++++++++++++-------------------- www/index.html | 29 ++++++++++--- www/js/html5ks.js | 17 +++++++- www/js/menu.js | 68 +++++++++++++++++++++---------- 4 files changed, 162 insertions(+), 71 deletions(-) (limited to 'www') diff --git a/www/css/index.css b/www/css/index.css index 09c818d..14d07ad 100644 --- a/www/css/index.css +++ b/www/css/index.css @@ -33,35 +33,6 @@ h2 { font-weight: bold; } -/* input */ -label { - display: block; -} -.button, h2, label { - opacity: 0.4; -} -.button-disabled { - opacity: 0.1; -} -.button:not(.button-disabled):hover { - opacity: 1; -} -input[type="checkbox"] { - display: none; -} -input[type="checkbox"] + span:before { - display: inline-block; - height: 19px; - width: 20px; - content: ""; - background-position: left bottom; - background-repeat: no-repeat; - background-image: url("../dump/ui/bt-cf-unchecked.png"); -} -input[type="checkbox"]:checked + span:before { - background-image: url("../dump/ui/bt-cf-checked.png"); -} - /* warnings */ #warn-container { visibility: hidden; @@ -118,6 +89,14 @@ html.no-js #gotit { #container { overflow: hidden; } +#gray { + position: absolute; + width: 100%; + height: 100%; + background-color: rgb(0, 0, 0); + opacity: 0.5; + z-index: 9; +} #show { height: 100%; } @@ -139,7 +118,7 @@ html.no-js #gotit { left: 12px; font-weight: bold; } -.say { +.say, #context-info { color: white; } #say { @@ -149,17 +128,6 @@ html.no-js #gotit { top: 53px; left: 28px; } -#gray { - position: absolute; - width: 100%; - height: 100%; - background-color: rgb(64, 64, 64); - background-color: rgba(64, 64, 64, 0.8); - z-index: 9; -} -#main-menu-buttons .button { - margin: 4px; -} #nvl { position: absolute; top: 0; @@ -187,16 +155,81 @@ html.no-js #gotit { bottom: 25px; } .centered { - width: 100%; - text-align: center; position: absolute; top: 0; bottom: 0; height: 0; + width: 100%; margin: auto; + text-align: center; } .choice { background: url("../dump/ui/bg-choice.png") no-repeat top center; height: 35px; line-height: 30px; } +#context > div { + z-index: 20; +} +#context-menu { + background: url("../dump/ui/bg-gm.png") no-repeat top center; + margin-top: -210px; + padding-top: 60px; + position: absolute; + left: 50%; + height: 380px; + width: 200px; + margin-left: -100px; + top: 50%; +} +#context-menu .button { + padding: 1.5px; +} +#context-info { + font: 19px/22px Playtime; + position: absolute; + top: auto; + height: auto; + bottom: 10px; +} + +/* main menu */ +#main-menu-buttons .button { + margin: 4px; +} +#version { + position: absolute; + bottom: 10px; + right: 15px; + font: 8px/8px Playtime; + opacity: 0.4; +} + +/* input */ +label { + display: block; +} +.button, h2, label { + opacity: 0.4; +} +.button-disabled { + opacity: 0.1; +} +.button:not(.button-disabled):hover { + opacity: 1; +} +input[type="checkbox"] { + display: none; +} +input[type="checkbox"] + span:before { + display: inline-block; + height: 19px; + width: 20px; + content: ""; + background-position: left bottom; + background-repeat: no-repeat; + background-image: url("../dump/ui/bt-cf-unchecked.png"); +} +input[type="checkbox"]:checked + span:before { + background-image: url("../dump/ui/bt-cf-checked.png"); +} diff --git a/www/index.html b/www/index.html index 06e67d4..fa5d4be 100644 --- a/www/index.html +++ b/www/index.html @@ -31,12 +31,12 @@

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

I know it's broken, let me play!
@@ -60,15 +60,15 @@
Load
Extras
Options
-
Quit
+
Quit
-
+
Katawa Shoujo v1.1
HTML5KS 0.1.0
- diff --git a/www/js/html5ks.js b/www/js/html5ks.js index a672dbb..4f38a42 100644 --- a/www/js/html5ks.js +++ b/www/js/html5ks.js @@ -59,6 +59,7 @@ window.html5ks = { ambient: new Audio(), sound: new Audio() }, + gray: document.getElementById("gray"), who: document.getElementById("who"), say: document.getElementById("say"), window: document.getElementById("window"), @@ -131,8 +132,20 @@ window.html5ks = { }, initEvents: function () { window.onresize = html5ks.scale; - this.elements.container.addEventListener("mouseup", function () { - html5ks.next(); + this.elements.container.addEventListener("mouseup", function (e) { + 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 62d1357..927e568 100644 --- a/www/js/menu.js +++ b/www/js/menu.js @@ -30,19 +30,15 @@ main: { start: document.getElementById("start"), optionsButton: document.getElementById("options-button"), - quit: document.getElementById("quit") - } + }, + context: document.getElementById("context"), + contextMenu: document.getElementById("context-menu"), + contextInfo: document.getElementById("context-info"), }; }, - initOptions: function () { - var options = document.getElementsByClassName("option"), - values = html5ks.persistent; - - if (!html5ks.persistent.scaleAll) { - document.getElementById("scaleVideo").parentNode.className += " button-disabled"; - } - + initEvents: function () { + var options = document.getElementsByClassName("option"); var change = function (e) { var target = e.target; values[target.id] = target.type === "checkbox" ? target.checked : target.value; @@ -75,6 +71,20 @@ 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"); + }, false); + }, + + initOptions: function () { + var options = document.getElementsByClassName("option"), + values = html5ks.persistent; + + if (!html5ks.persistent.scaleAll) { + document.getElementById("scaleVideo").parentNode.className += " button-disabled"; + } + for (var i = options.length - 1; i >= 0; i--) { var option = options[i]; switch (option.type) { @@ -88,14 +98,11 @@ console.error("unknown option type %s", option.type); } } - - this.elements.main.optionsButton.addEventListener("click", function () { - html5ks.menu.dialog("options"); - }, false); }, init: function () { this.initElements(); + this.initEvents(); this.initOptions(); this.elements.main.start.addEventListener("click", function () { @@ -117,16 +124,35 @@ ["AppleWebKit", "MSIE", "Trident"].forEach(function (ua) { if (navigator.userAgent.indexOf(ua) > -1) { - var quit = this.elements.main.quit; - quit.className = quit.className.replace("button-disabled", ""); - this.elements.main.quit.addEventListener("click", function () { - window.close(); - top.open('','_self',''); - top.close(); - }, false); + var quit = document.getElementsByClassName("quit"); + for (var i = quit.length - 1; i >= 0; i++) { + quit[i].className = quit.className.replace("button-disabled", ""); + quit[i].addEventListener("click", function () { + window.close(); + top.open('','_self',''); + top.close(); + }, false); + } return false; } }, this); + }, + + context: function (show) { + switch (show) { + case true: + html5ks.elements.gray.style.display = "block"; + html5ks.elements.window.style.display = "none"; + this.elements.context.style.display = "block"; + break; + case false: + html5ks.elements.gray.style.display = "none"; + html5ks.elements.window.style.display = "block"; + this.elements.context.style.display = "none"; + break; + default: + this.context(html5ks.elements.gray.style.display !== "block"); + } } }; }()); -- cgit v1.2.3-70-g09d2