doodeedoodeediddlydooo

19 files changed, 202 insertions, 60 deletions

diff --git a/TODO b/TODO
index 2cc70bc..ef98b89 100644
--- a/TODO
+++ b/TODO
@@ -1,2 +1,7 @@
+todo ordered by most to least important... ish
+
+- imachine
+- menu
+- extend
 - fix cursor to apply to all document
 - cache script.json files
diff --git a/lighttpd.conf b/lighttpd.conf
index f2df7b7..445c0e2 100644
--- a/lighttpd.conf
+++ b/lighttpd.conf
@@ -23,9 +23,13 @@ index-file.names = ("index.html")
 
 dir-listing.activate = "enable"
 
-server.modules = ( "mod_compress", "mod_expire", "mod_setenv" )
+server.modules = ( "mod_expire", "mod_compress", "mod_setenv" )
 
-expire.url = ("/dump/" => "access plus 1 years", "/js/lib/" => "access plus 1 days")
+expire.url = ("/dump/" => "access plus 1 years",
+              "/css/font/" => "access plus 7 days",
+              "/js/lib/" => "access plus 1 days",
+              "/scripts/" => "access plus 1 days",
+              "/" => "access plus 5 seconds")
 setenv.add-response-header += (
     "Cache-Control" => "public"
 )
diff --git a/www/css/GentiumPlus.svg b/www/css/font/GentiumPlus.svg
index 78dca99..78dca99 100644
--- a/www/css/GentiumPlus.svg
+++ b/www/css/font/GentiumPlus.svg
diff --git a/www/css/GentiumPlus.ttf b/www/css/font/GentiumPlus.ttf
index c27adb5..c27adb5 100644
--- a/www/css/GentiumPlus.ttf
+++ b/www/css/font/GentiumPlus.ttf
diff --git a/www/css/GentiumPlus.woff b/www/css/font/GentiumPlus.woff
index 5cbe4c0..5cbe4c0 100644
--- a/www/css/GentiumPlus.woff
+++ b/www/css/font/GentiumPlus.woff
diff --git a/www/css/PlaytimeWithHotToddies.svg b/www/css/font/PlaytimeWithHotToddies.svg
index 820e79b..820e79b 100644
--- a/www/css/PlaytimeWithHotToddies.svg
+++ b/www/css/font/PlaytimeWithHotToddies.svg
diff --git a/www/css/PlaytimeWithHotToddies.ttf b/www/css/font/PlaytimeWithHotToddies.ttf
index 01835e8..01835e8 100644
--- a/www/css/PlaytimeWithHotToddies.ttf
+++ b/www/css/font/PlaytimeWithHotToddies.ttf
diff --git a/www/css/PlaytimeWithHotToddies.woff b/www/css/font/PlaytimeWithHotToddies.woff
index d745c54..d745c54 100644
--- a/www/css/PlaytimeWithHotToddies.woff
+++ b/www/css/font/PlaytimeWithHotToddies.woff
diff --git a/www/css/gentium.ttf b/www/css/font/gentium.ttf
index a8c1756..a8c1756 100644
--- a/www/css/gentium.ttf
+++ b/www/css/font/gentium.ttf
diff --git a/www/css/playtime-webfont.svg b/www/css/font/playtime-webfont.svg
index f63de50..f63de50 100644
--- a/www/css/playtime-webfont.svg
+++ b/www/css/font/playtime-webfont.svg
diff --git a/www/css/playtime-webfont.ttf b/www/css/font/playtime-webfont.ttf
index 33917b3..33917b3 100644
--- a/www/css/playtime-webfont.ttf
+++ b/www/css/font/playtime-webfont.ttf
diff --git a/www/css/playtime-webfont.woff b/www/css/font/playtime-webfont.woff
index 57867e2..57867e2 100644
--- a/www/css/playtime-webfont.woff
+++ b/www/css/font/playtime-webfont.woff
diff --git a/www/css/playtime.ttf b/www/css/font/playtime.ttf
index a36000a..a36000a 100644
--- a/www/css/playtime.ttf
+++ b/www/css/font/playtime.ttf
diff --git a/www/css/playtime_bold.ttf b/www/css/font/playtime_bold.ttf
index e730c2b..e730c2b 100644
--- a/www/css/playtime_bold.ttf
+++ b/www/css/font/playtime_bold.ttf
diff --git a/www/css/index.css b/www/css/index.css
index 7818403..23acff5 100644
--- a/www/css/index.css
+++ b/www/css/index.css
@@ -1,16 +1,16 @@
 @font-face {
   font-family: "Playtime";
   /* src: url("playtime.ttf"); */
-  src: url("PlaytimeWithHotToddies.svg");
-  src: url("PlaytimeWithHotToddies.ttf");
-  src: url("PlaytimeWithHotToddies.woff");
+  src: url("font/PlaytimeWithHotToddies.svg");
+  src: url("font/PlaytimeWithHotToddies.ttf");
+  src: url("font/PlaytimeWithHotToddies.woff");
 }
 @font-face {
   font-family: "Gentium";
   /* src: url("gentium.ttf"); */
-  src: url("GentiumPlus.svg");
-  src: url("GentiumPlus.ttf");
-  src: url("GentiumPlus.woff");
+  src: url("font/GentiumPlus.svg");
+  src: url("font/GentiumPlus.ttf");
+  src: url("font/GentiumPlus.woff");
 }
 body {
   margin: 0;
@@ -18,14 +18,22 @@ body {
   background: gray;
   font: 22px/27px Playtime, sans-serif;
 }
+* {
+  -moz-user-select: -moz-none;
+  -webkit-user-select: none;
+  -ms-user-select: none;
+  user-select: none;
+}
+#container, #bg, #vid {
+  cursor: url("../dump/ui/mousecursor.png"), default;
+  position: absolute;
+  top: 50%;
+  left: 50%;
+}
 #container {
-  cursor: url("/dump/ui/mousecursor.png"), auto;
   width: 800px;
   height: 600px;
-  position: absolute;
-  top: 50%;
   margin-top: -300px;
-  left: 50%;
   margin-left: -400px;
 }
 @keyframes toright {
@@ -36,11 +44,6 @@ body {
     left: -190px;
   }
 }
-#bg,#vid {
-  position: absolute;
-  width: 800px;
-  height: 600px;
-}
 #who {
   color: black;
   position: absolute;
@@ -55,10 +58,6 @@ body {
   position: absolute;
   top: 493px;
   left: 28px;
-  -moz-user-select: none;
-  -webkit-user-select: none;
-  -ms-user-select: none;
-  user-select: none;
 }
 #window-image {
   position: absolute;
@@ -94,9 +93,10 @@ html.no-js #warn-container {
   width: 600px;
   z-index: 10;
 }
-#notwork {
-  font: 28px/34px Playtime;
+h2 {
+  font: 20px/28px Playtime;
   font-weight: bold;
+  opacity: 0.4;
 }
 html.no-js #warn li:not(#js) { display: none; }
 html.video #warn li#video { display: none; }
@@ -106,10 +106,16 @@ html.csstransforms #warn li#csstransforms { display: none; }
 html.csstransitions #warn li#csstransitions { display: none; }
 html #warn li#html-svg-filter { display: none; }
 .button {
-  cursor: pointer;
+  display: block;
+}
+.button-enabled {
+/* cursor: pointer; */
   opacity: 0.4;
 }
-.button:hover {
+.button-disabled {
+  opacity: 0.1;
+}
+.button-enabled:hover {
   opacity: 1;
 }
 #gotit {
@@ -118,3 +124,19 @@ html #warn li#html-svg-filter { display: none; }
 html.no-js #gotit {
   display: none;
 }
+#main-menu-buttons .button {
+  margin: 4px;
+}
+input[type="checkbox"] {
+  display: none;
+}
+input[type="checkbox"] + span:before {
+  display: inline-block;
+  height: 19px;
+  width: 20px;
+  content: "";
+  background: url("../dump/ui/bt-cf-unchecked.png") no-repeat left bottom;
+}
+input[type="checkbox"]:checked + span:before {
+  background: url("../dump/ui/bt-cf-checked.png") no-repeat left bottom;
+}
diff --git a/www/index.html b/www/index.html
index 64950d5..a512b02 100644
--- a/www/index.html
+++ b/www/index.html
@@ -11,24 +11,24 @@
         };
         window.define.amd = {};
     </script>
-    <link rel="shortcut icon" type="image/png" href="/dump/ui/icon.png">
-    <link rel="apple-touch-icon" href="/dump/ui/icon.png">
-    <link rel="stylesheet" type="text/css" href="/css/anim.css">
-    <link rel="stylesheet" type="text/css" href="/css/index.css">
-    <script src="/js/lib/when/when.js"></script>
-    <script src="/js/lib/jquery-2.0.2.min.js"></script>
-    <script src="/js/lib/modernizr.custom.44609.js"></script>
-    <script src="/js/html5ks.js"></script>
-    <script src="/js/api.js"></script>
-    <script src="/js/play.js"></script>
-    <script src="/js/images.js"></script>
-    <script src="/js/characters.js"></script>
+    <link rel="shortcut icon" type="image/png" href="dump/ui/icon.png">
+    <link rel="apple-touch-icon" href="dump/ui/icon.png">
+    <link rel="stylesheet" type="text/css" href="css/anim.css">
+    <link rel="stylesheet" type="text/css" href="css/index.css">
+    <script src="js/lib/when/when.js"></script>
+    <script src="js/lib/modernizr.custom.44609.js"></script>
+    <script src="js/html5ks.js"></script>
+    <script src="js/menu.js"></script>
+    <script src="js/api.js"></script>
+    <script src="js/play.js"></script>
+    <script src="js/images.js"></script>
+    <script src="js/characters.js"></script>
   </head>
-  <body><div id="all">
+  <body><div id="all" style="height: 100%; position: absolute; width: 100%;">
     <div id="warn-container">
       <div id="gray"></div>
       <div id="warn">
-        <div id="notwork">We use a lot of new features in this; your browser seems to have some issues...</div>
+        <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="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>
@@ -38,17 +38,44 @@
           <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="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">I know it's broken, let me play!</div>
+        <div id="gotit" class="button button-enabled">I know it's broken, let me play!</div>
       </div>
     </div>
+    <div id="bg"></div>
     <div id="container">
-      <div id="bg"></div>
       <div id="window" style="display: none;">
-        <img id="window-image" src="/dump/ui/bg-say.png" alt="">
+        <img id="window-image" src="dump/ui/bg-say.png" alt="">
         <div id="who"></div>
         <div id="say"></div>
       </div>
-      <video id="vid"></video>
+      <div id="main-menu" style="display: none;">
+        <div id="main-menu-buttons" style="top: 377px; position: absolute; left: 81px;">
+          <div id="start" class="button button-enabled">Start</div>
+          <div id="load" class="button button-disabled">Load</div>
+          <div id="extras" class="button button-disabled">Extras</div>
+          <div id="options-button" class="button button-enabled">Options</div>
+          <div id="quit" class="button button-disabled">Quit</div>
+        </div>
+        <div id="version" style="position: absolute; bottom: 10px; right: 15px; font: 8px/8px Playtime; opacity: 0.4">
+          Katawa Shoujo v1.0
+          <br>
+          HTML5KS 0.0.1
+        </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="options" style="padding: 10px 20px;">
+          <h2>Options</h2>
+          <label class="button button-enabled"><input type="checkbox" id="hdisable"> <span>Disable adult content</span></label>
+          <label class="button button-enabled"><input type="checkbox" id="fullscreen"> <span>Fullscreen mode</span></label>
+          <label class="button button-enabled"><input type="checkbox" id="skip-unread"> <span>Skip unread text</span></label>
+          <label class="button button-enabled"><input type="checkbox" id="skip-after-choices"> <span>Keep skipping after choices</span></label>
+        </div>
+        <div id="return" class="button button-enabled" style="position: absolute; bottom: 15px; right: 20px;">
+          <img src="dump/ui/bt-return.png">
+          Return
+        </div>
+      </div>
     </div>
+    <video id="vid"></video>
   </div></body>
 </html>
diff --git a/www/js/api.js b/www/js/api.js
index 14d8335..e5a6a58 100644
--- a/www/js/api.js
+++ b/www/js/api.js
@@ -25,7 +25,7 @@ window.html5ks.api = {
     // TODO: fade
     var deferred = when.defer(),
         audio = html5ks.elements.audio[channel];
-    audio.src = "/dump/" + (channel === "music" ? "bgm/" + html5ks.data.music[name] + ".ogg" : html5ks.data.sfx[name]);
+    audio.src = "dump/" + (channel === "music" ? "bgm/" + html5ks.data.music[name] + ".ogg" : html5ks.data.sfx[name]);
     audio.load();
     audio.volume = fade ? 0 : 1;
     audio.play();
@@ -56,16 +56,30 @@ window.html5ks.api = {
   },
   movie_cutscene: function (vid_src) {
     var deferred = when.defer(),
-        video = html5ks.elements.video;
-    video.src = "/dump/video/" + vid_src + ".webm";
+        video = html5ks.elements.video,
+        src = "dump/video/" + vid_src + ".";
+
+    if (Modernizr.video.webm) {
+      video.src = src + "webm";
+    } else if (Modernizr.video.ogg) {
+      video.src = src + "ogg";
+    } else if (Modernizr.video.h264) {
+      video.src = src + "mp4";
+    }
+
     video.load();
+    video.style.display = "block";
     video.play();
     var done = function () {
       this.style.display = "none";
       this.pause();
       deferred.resolve();
     };
-    video.addEventListener("mouseup", done, false);
+    video.addEventListener("click", function (e) {
+      if (e.button === 0) {
+        done.call(this);
+      }
+    }, false);
     video.addEventListener("ended", done, false);
     video.addEventListener("error", function () {
       deferred.reject(this.error);
@@ -81,10 +95,15 @@ window.html5ks.api = {
     var label = html5ks.data.script[target],
         i = 0;
     (function run() {
-      html5ks.api.runInst(label[i]).then(run, console.error);
-      i++;
+      if (label[i]) {
+        html5ks.api.runInst(label[i]).then(run, console.error);
+        i++;
+      } else {
+        html5ks.mainMenu();
+      }
     }());
   },
+
   window: function (action, transition) {
     var windw = html5ks.elements.window,
         deferred = when.defer();
@@ -96,6 +115,7 @@ window.html5ks.api = {
     deferred.resolve(action);
     return deferred.promise;
   },
+
   // NOT iscene
   scene: function (type, name) {
     var deferred = when.defer(),
@@ -122,15 +142,20 @@ window.html5ks.api = {
     }
     img.onload = function () {
       console.debug("setting bg " + img.src);
-      html5ks.elements.bg.style.background = "url(" + img.src + ")";
+      var bg = html5ks.elements.bg;
+      bg.style.background = "url(" + img.src + ") no-repeat 0 0 / cover black";
       deferred.resolve();
     };
     img.onerror = function () {
       throw new Error("bg could not load");
     };
-    img.src = "/dump/" + image.image;
+    if (Modernizr.webp) {
+      image.image = image.image.replace(/\.[a-z]+$/, ".webp");
+    }
+    img.src = "dump/" + image.image;
     return deferred.promise;
   },
+
   show: function () {
     var deferred = when.defer();
     deferred.resolve();
@@ -141,9 +166,11 @@ window.html5ks.api = {
     deferred.resolve();
     return deferred.promise;
   },
+
   with: function (transition, action) {
     return this.runInst(action);
   },
+
   runInst: function (inst) {
     var cmd = inst[0],
         args = inst.slice(1);
@@ -163,6 +190,7 @@ window.html5ks.api = {
       }
     }
   },
+
   character: function (name, str) {
     var deferred = when.defer(),
         text = str,
diff --git a/www/js/html5ks.js b/www/js/html5ks.js
index 6c0234e..3291dab 100644
--- a/www/js/html5ks.js
+++ b/www/js/html5ks.js
@@ -35,7 +35,13 @@
         who: document.getElementById("who"),
         say: document.getElementById("say"),
         bg: document.getElementById("bg"),
-        window: document.getElementById("window")
+        window: document.getElementById("window"),
+        mainMenu: document.getElementById("main-menu"),
+        dialogs: document.getElementById("dialogs"),
+        dialog: {
+          options: document.getElementById("options"),
+          return: document.getElementById("return")
+        }
       };
       this.elements.audio.music.loop = true;
       this.elements.audio.ambient.loop = true;
@@ -47,8 +53,8 @@
       localStorage.persistent = JSON.stringify(this.persistent);
     },
     scale: function () {
-      var newScale = 1;
       if (html5ks.persistent.settings.scale) {
+        var newScale = 1;
         var height = document.documentElement.clientHeight,
             width = document.documentElement.clientWidth;
         if (height / width <= 0.75) { // widescreen
@@ -56,12 +62,22 @@
         } else {
           newScale = width / 800;
         }
-      } else {
-        newScale = 1;
+
+        var container = html5ks.elements.container;
+        container.style.webkitTransform = "scale(" + newScale + ")";
+        container.style.mozTransform = "scale(" + newScale + ")";
+        container.style.transform = "scale(" + newScale + ")";
+
+        var applyScale = function (el, scale) {
+          el.style.height = scale * 600 + "px";
+          el.style.marginTop = "-" + scale * 300 + "px";
+          el.style.width = scale * 800 + "px";
+          el.style.marginLeft = "-" + scale * 400 + "px";
+        }
+
+        applyScale(html5ks.elements.bg, newScale);
+        applyScale(html5ks.elements.video, newScale);
       }
-      html5ks.elements.container.style.webkitTransform = "scale(" + newScale + ")";
-      html5ks.elements.container.style.mozTransform = "scale(" + newScale + ")";
-      html5ks.elements.container.style.transform = "scale(" + newScale + ")";
     },
     next: function () {},
     initEvents: function () {
@@ -69,6 +85,13 @@
       this.elements.container.addEventListener("mouseup", function () {
         html5ks.next();
       }, false);
+      var deselect = function () {
+        window.getSelection().collapse(this, 0);
+      };
+      document.body.addEventListener("mousemove", deselect, true);
+      document.body.addEventListener("mouseup", deselect, true);
+      document.body.addEventListener("keyup", deselect, true);
+      this.menu.initEvents();
     },
     warnUnsupported: function () {
       if (!html5ks.persistent.settings.gotit) {
@@ -101,7 +124,7 @@
     winload: function () {
       this.fetch("script", "a1-monday").then(function () {
         html5ks.api.movie_cutscene("4ls").then(function () {
-          html5ks.api.iscene("en_NOP1")
+          html5ks.menu.mainMenu();
         });
       });
     },
@@ -114,7 +137,7 @@
             deferred.resolve();
           } else {
             var xhr = new XMLHttpRequest();
-            xhr.open("GET", "/scripts/script-" + name + ".json");
+            xhr.open("GET", "scripts/script-" + name + ".json");
             xhr.onreadystatechange = function () {
               script[name] = true;
               if (xhr.readyState === 4) {
diff --git a/www/js/menu.js b/www/js/menu.js
new file mode 100644
index 0000000..8d68fcd
--- /dev/null
+++ b/www/js/menu.js
@@ -0,0 +1,33 @@
+html5ks.menu = {
+  mainMenu: function () {
+    html5ks.api.stop("music");
+    html5ks.api.stop("sound");
+    html5ks.api.stop("ambient");
+    html5ks.api.window("hide");
+    html5ks.api.play("music", "music_menus");
+    html5ks.elements.bg.style.background = "url(dump/ui/main/bg-main.png) 0 0 / cover";
+    html5ks.elements.mainMenu.style.display = "block";
+  },
+
+  activeDialog: null,
+
+  dialog: function (name) {
+    this.activeDialog = html5ks.elements.dialog[name];
+    this.activeDialog.style.display = "block";
+    html5ks.elements.dialogs.style.display = "block";
+  },
+
+  initEvents: function () {
+    document.getElementById("start").addEventListener("click", function () {
+      html5ks.elements.mainMenu.style.display = "none";
+      html5ks.api.iscene("en_NOP1");
+    }, false);
+    document.getElementById("options-button").addEventListener("click", function () {
+      html5ks.menu.dialog("options");
+    }, false);
+    html5ks.elements.dialog.return.addEventListener("click", function (e) {
+      html5ks.menu.activeDialog.style.display = "none";
+      html5ks.elements.dialogs.style.display = "none";
+    }, false);
+  }
+};