add context menu UI, fix misc. bugs

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");
+      }
     }
   };
 }());