summaryrefslogtreecommitdiff
diff options
context:
space:
mode:
Diffstat
-rw-r--r--www/css/index.css119
-rw-r--r--www/index.html29
-rw-r--r--www/js/html5ks.js17
-rw-r--r--www/js/menu.js68
4 files changed, 162 insertions, 71 deletions
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 @@
<h2>We use a lot of new features in this; your browser seems to have some issues...</h2>
<ul id="warns">
<noscript><li id="js">It doesn't seem to have JavaScript enabled. This site doesn't work at all without it. Really. <a href="http://enable-javascript.com">Don't know how to enable JS?</a></li></noscript>
- <li id="ie">You're using Internet Explorer. Please upgrade to any other browser. <a href="//getfirefox.com">Firefox</a> and <a href="//google.com/chrome">Chrome</a> are both fine options. If you insist on IE, don't expect anything to work properly.</li>
+ <li id="ie">You're using Internet Explorer. Please upgrade to any other browser. <a href="//getfirefox.com">Firefox</a> and <a href="//google.com/chrome">Chrome</a> are both fine options. Nothing will work in IE. I promise.</li>
<li id="video">It doesn't seem to support <a href="https://en.wikipedia.org/wiki/HTML5_video">HTML5 video</a>, which means that you won't be able to see any of the videos (obviously). Unless stated below, though, transitions should still work. <a href="http://caniuse.com/#feat=video">You should strongly consider upgrading.</a></li>
<li id="audio">It doesn't seem to support <a href="https://en.wikipedia.org/wiki/HTML5_audio">HTML5 audio</a>, which means you won't be able to hear any of the amazing music. <a href="http://caniuse.com/#feat=audio">You should strongly consider upgrading.</a></li>
<li id="fontface">It doesn't seem to support <a href="https://developer.mozilla.org/en-US/docs/Web/CSS/@font-face">the @font-face at-rule</a>, which lets us display the Playtime and Gentium fonts used in Katawa Shoujo. <a href="http://caniuse.com/#feat=fontface">Any browser released in the last 2 years or so should support it.</a></li>
<li id="csstransforms">It doesn't seem to support <a href="https://developer.mozilla.org/en-US/docs/Web/Guide/CSS/Using_CSS_transforms">CSS transforms</a>, which means that we won't be able to scale the window or show most transitions. <a href="http://caniuse.com/#feat=transforms2d">Any browser released in the last 2 years ago should work.</a></li>
- <li id="csstransitions">It doesn't seem to support <a href="https://developer.mozilla.org/en-US/docs/Web/Guide/CSS/Using_CSS_transitions">CSS transitions</a>, which means that almost all animations won't work. Videos should still work though, unless stated above. <a href="http://caniuse.com/#feat=css-transitions">You should definitely try upgrading.</a></li>
+ <li id="csstransitions">It doesn't seem to support <a href="https://developer.mozilla.org/en-US/docs/Web/Guide/CSS/Using_CSS_transitions">CSS transitions</a>, which means that almost all animations won't work. Videos should still work though, unless stated above. <a href="http://caniuse.com/#feat=css-transitions">You should definitely consider upgrading.</a></li>
</ul> <div id="gotit" class="button">I know it's broken, let me play!</div>
</div>
</div>
@@ -60,15 +60,15 @@
<div id="load" class="button button-disabled">Load</div>
<div id="extras" class="button button-disabled">Extras</div>
<div id="options-button" class="button">Options</div>
- <div id="quit" class="button button-disabled">Quit</div>
+ <div class="quit button button-disabled">Quit</div>
</div>
- <div id="version" style="position: absolute; bottom: 10px; right: 15px; font: 8px/8px Playtime; opacity: 0.4">
+ <div id="version" style="">
Katawa Shoujo v1.1
<br>
HTML5KS 0.1.0
</div>
</div>
- <div id="dialogs" style="display: none; position: absolute; top: 50%; width: 504px; height: 395px; background: url(dump/ui/bg-config.png); left: 50%; margin-left: -252px; margin-top: -197.5px;">
+ <div id="dialogs" style="display: none; width: 504px; height: 395px; background: url(dump/ui/bg-config.png); margin-left: -252px; margin-top: -197.5px;" class="centered">
<div id="options" style="padding: 10px 20px;">
<h2>Options</h2>
<label class="button"><input type="checkbox" class="option" id="hdisable"> <span>Disable adult content</span></label>
@@ -90,6 +90,25 @@
Return
</div>
</div>
+ <div id="context" style="display: none;">
+ <div id="context-menu" class="centered">
+ <div id="context-return" class="button">Return</div>
+ <div id="show-image" class="button">Show image</div>
+ <div id="text-history" class="button 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 id="save" class="button">Save</div>
+ <div id="load" class="button">Load</div>
+ <div id="main-menu" class="button">Main menu</div>
+ <div class="quit button button-disabled">Quit</div>
+ </div>
+ <div id="context-info" class="centered">
+ <div>Play time: <span id="play-time"></span></div>
+ <div>Current scene: <span id="current-scene"></span></div>
+ <div>Current music track: <span id="current-music-track"></span></div>
+ </div>
+ </div>
</div>
<video id="vid"></video>
</div></body>
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");
+ }
}
};
}());
generated by cgit v1.2.3-70-g09d2 (git 2.47.0) at 2024-11-22 04:03:33 +0000