doodeedoodeediddlydooo

3 files changed, 101 insertions, 17 deletions

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