From 9ef324d2d2e40f919de9b7d7e1852affa97e0e91 Mon Sep 17 00:00:00 2001
From: Alex Xu <alex_y_xu@yahoo.ca>
Date: Thu, 11 Jul 2013 18:42:27 -0400
Subject: do more work

---
 www/css/index.css |  3 ++
 www/index.html    |  7 ++--
 www/js/api.js     | 96 ++++++++++++++++++++++++++++++++++++++++++++++++-------
 www/js/html5ks.js |  8 +++--
 4 files changed, 98 insertions(+), 16 deletions(-)

(limited to 'www')
diff --git a/www/css/index.css b/www/css/index.css
index d05e2f4..03f765d 100644
--- a/www/css/index.css
+++ b/www/css/index.css
@@ -174,3 +174,6 @@ input[type="checkbox"]:checked + span:before {
   background: url("../dump/ui/bg-choice.png") no-repeat top center;
   height: 35px;
 }
+#show img {
+  position: absolute;
+}
diff --git a/www/index.html b/www/index.html
index c019183..17ceead 100644
--- a/www/index.html
+++ b/www/index.html
@@ -2,7 +2,7 @@
 <html class="no-js">
   <head>
     <meta charset="utf-8">
-    <meta name="viewport" content="width=800, height=600, initial-scale=1, maximum-scale=1">
+    <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, minimum-scale=1, user-scalable=no">
     <title>Katawa Shoujo</title>
     <script>
         window.define = function(factory) {
@@ -36,8 +36,10 @@
           <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 transitions 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 try upgrading.</a></li>
+          <!-- svg filters aren't actually implemented yet
           <li id="html-svg-filter">It might not support SVG filters on HTML content, which means that filters like the sunset in the tea room will display as regular images. <a href="http://caniuse.com/#feat=svg-html">Unfortunately, this is only implemented in Firefox now.</a></li>
+          -->
         </ul>
         <div id="gotit" class="button button-enabled">I know it's broken, let me play!</div>
       </div>
@@ -45,6 +47,7 @@
     <div id="bg"></div>
     <div id="container">
       <div id="gray" style="display: none;"></div>
+      <div id="show"></div>
       <div id="window" style="display: none;">
         <img id="window-image" src="dump/ui/bg-say.png" alt="">
         <div id="who"></div>
diff --git a/www/js/api.js b/www/js/api.js
index c8c495a..c3c9f48 100644
--- a/www/js/api.js
+++ b/www/js/api.js
@@ -68,7 +68,7 @@ window.html5ks.api = {
     return deferred.promise;
   },
 
-  movie_cutscene: function (vid_src) {
+  movie_cutscene: function (vid_src, skippable) {
     var deferred = when.defer(),
         video = html5ks.elements.video,
         src = "dump/video/" + vid_src + ".";
@@ -87,13 +87,25 @@ window.html5ks.api = {
     video.style.display = "block";
     video.play();
     var done = function () {
-      this.style.display = "none";
-      this.pause();
+      video.style.display = "none";
+      // clear event listeners
+      var oldVideo = document.getElementById("vid");
+      oldVideo.pause();
+      var newVideo = video.cloneNode(true);
+      oldVideo.parentNode.replaceChild(newVideo, oldVideo);
+      html5ks.elements.video = newVideo;
       deferred.resolve();
     };
-    video.addEventListener("click", function (e) {
-      if (e.button === 0) {
-        done.call(this);
+    document.addEventListener("keyup", function keyupListener(e) {
+      if (e.keyCode === 27) {
+        done();
+        e.preventDefault();
+        e.stopPropagation();
+      }
+    }, false);
+    video.addEventListener("click", function clickListener(e) {
+      if (e.button === 0 && skippable) {
+        done();
       }
     }, false);
     video.addEventListener("ended", done, false);
@@ -171,9 +183,11 @@ window.html5ks.api = {
       }[type];
       image = typ.dir + "/" + name + "." + typ.ext;
     }
+    var bg = html5ks.elements.bg;
     if (typeof image == "string") {
       if (image.substring(0,1) == "#") {
-        html5ks.elements.bg.style.background = image;
+        bg.style.background = "";
+        bg.style.backgroundColor = image;
         deferred.resolve();
         return deferred.promise;
       } else {
@@ -182,8 +196,9 @@ window.html5ks.api = {
     }
     img.onload = function () {
       console.debug("setting bg " + img.src);
-      var bg = html5ks.elements.bg;
-      bg.style.background = "url(" + img.src + ") no-repeat 0 0 / cover black";
+      bg.style.background = "";
+      bg.style.backgroundImage = "url(" + img.src + ")";
+      bg.style.backgroundSize = "cover";
       deferred.resolve();
     };
     img.onerror = function () {
@@ -196,13 +211,66 @@ window.html5ks.api = {
     return deferred.promise;
   },
 
-  show: function () {
+  show: function (name, type, location) {
     var deferred = when.defer();
+    var el = document.getElementById(name) || document.createElement("img");
+    el.onload = function () {
+      if (location) {
+        // calculate position
+        // we don't actually know how big the image is till we fetch it
+        var positions = {
+          left: { xpos: 0.0, xanchor: 0.0, ypos: 1.0, yanchor: 1.0 },
+          right: { xpos: 1.0, xanchor: 1.0, ypos: 1.0, yanchor: 1.0 },
+          center: { xpos: 0.5, xanchor: 0.5, ypos: 1.0, yanchor: 1.0 },
+          truecenter: { xpos: 0.5, xanchor: 0.5, ypos: 0.5, yanchor: 0.5 },
+          topleft: { xpos: 0.0, xanchor: 0.0, ypos: 0.0, yanchor: 0.0 },
+          topright: { xpos: 1.0, xanchor: 1.0, ypos: 0.0, yanchor: 0.0 },
+          top: { xpos: 0.5, xanchor: 0.5, ypos: 0.0, yanchor: 0.0 },
+          twoleft: { xpos: 0.3, xanchor: 0.5, ypos: 1.0, yanchor: 1.0 },
+          tworight: { xpos: 0.7, xanchor: 0.5, ypos: 1.0, yanchor: 1.0 },
+          closeleft: { xpos: 0.25, xanchor: 0.5, ypos: 1.0, yanchor: 1.0 },
+          closeright: { xpos: 0.75, xanchor: 0.5, ypos: 1.0, yanchor: 1.0 },
+          twoleftoff: { xpos: 0.32, xanchor: 0.5, ypos: 1.0, yanchor: 1.0 },
+          tworightoff: { xpos: 0.68, xanchor: 0.5, ypos: 1.0, yanchor: 1.0 },
+          centeroff: { xpos: 0.52, xanchor: 0.5, ypos: 1.0, yanchor: 1.0 },
+          bgleft: { xpos: 0.4, xanchor: 0.5, ypos: 1.0, yanchor: 1.0 },
+          bgright: { xpos: 0.6, xanchor: 0.5, ypos: 1.0, yanchor: 1.0 }
+        };
+        var pos = positions[location];
+        el.style.left = pos.xpos * 800 + "px";
+        el.style.top = pos.ypos * 600 + "px";
+        el.style.marginLeft = "-" + pos.xanchor * el.width + "px";
+        el.style.marginTop = "-" + pos.yanchor * el.height + "px";
+        el.style.display = "block";
+      }
+      deferred.resolve();
+    };
+    el.onerror = function () {
+      // TODO: check if img is really in images.js
+      deferred.resolve();
+    };
+    var src = "dump/sprites/" + name + "/" + name + "_" + type + ".";
+    if (html5ks.persistent.settings.useWebP) {
+      src += "webp";
+    } else {
+      src += "png";
+    }
+    el.id = name;
+    el.src = src;
+    // prevent FOUIPC (flash of incorrectly placed content)
+    if (location) el.style.display = "none";
+    html5ks.elements.show.appendChild(el);
     deferred.resolve();
     return deferred.promise;
   },
-  hide: function () {
+  hide: function (name) {
     var deferred = when.defer();
+    var show = html5ks.elements.show.children;
+    for (var i = show.length - 1; i >= 0; i--) {
+      if (show[i].id === name) {
+        html5ks.elements.show.removeChild(show[i]);
+      }
+    }
     deferred.resolve();
     return deferred.promise;
   },
@@ -251,7 +319,11 @@ window.html5ks.api = {
         w = /{w(=\d*\.\d*)?}/.exec(str);
 
     if (!char) {
-      char = { name: name };
+      char = {
+        name: name,
+        what_prefix: "“",
+        what_suffix: "”"
+      };
     }
     if (!extend && char.what_prefix) {
       text = char.what_prefix + text;
diff --git a/www/js/html5ks.js b/www/js/html5ks.js
index 8de3c8d..e7f5991 100644
--- a/www/js/html5ks.js
+++ b/www/js/html5ks.js
@@ -1,4 +1,5 @@
 "use strict";
+console.log("HELP")
 window.html5ks = {
   data: {
     script: {}
@@ -46,7 +47,8 @@ window.html5ks = {
       nvl: document.getElementById("nvl"),
       nvlsay: document.getElementById("nvlsay"),
       nvlctc: document.getElementById("nvlctc"),
-      choices: document.getElementById("choices")
+      choices: document.getElementById("choices"),
+      show: document.getElementById("show")
     };
     this.elements.audio.music.loop = true;
     this.elements.audio.ambient.loop = true;
@@ -123,9 +125,11 @@ window.html5ks = {
       if (/MSIE/.test(navigator.userAgent)) {
         document.getElementById("ie").style.display = "block";
       }
+      /* svg not actually implemented yet
       if (!(/Firefox/.test(navigator.userAgent))) {
         document.getElementById("html-svg-filter").style.display = "block";
       }
+      */
       for (var i = 0; i < warns.length; i++) {
         if (window.getComputedStyle(warns[i]).getPropertyValue("display") !== "none") {
           warn.style.visibility = "visible";
@@ -157,7 +161,7 @@ window.html5ks = {
   },
   start: function () {
     this.fetch("script", "a1-monday").then(function () {
-      html5ks.api.movie_cutscene("4ls").then(function () {
+      html5ks.api.movie_cutscene("4ls", true).then(function () {
         html5ks.menu.mainMenu();
       });
     });
-- 
cgit v1.2.3-70-g09d2

