woooo, more working

5 files changed, 305 insertions, 232 deletions

diff --git a/www/js/.jshintrc b/www/js/.jshintrc
index 23ef946..5dca845 100644
--- a/www/js/.jshintrc
+++ b/www/js/.jshintrc
@@ -1,4 +1,9 @@
 {
   "globalstrict": true,
-  "browser": true
+  "browser": true,
+  "devel": true,
+  "globals": {
+    "html5ks": false,
+    "when": false
+  }
 }
diff --git a/www/js/api.js b/www/js/api.js
new file mode 100644
index 0000000..1738ddf
--- /dev/null
+++ b/www/js/api.js
@@ -0,0 +1,192 @@
+"use strict";
+window.html5ks.api = {
+  seen_scene: function (scene) {
+    return !!html5ks.persistent.seen_scenes[scene];
+  },
+  scene_register: function (scene) {
+    html5ks.persistent.seen_scenes.scene = true;
+  },
+  fading: function (audio, dir, fade) {
+    var fadeSet = html5ks.persistent.settings.fade,
+        step = fadeSet / (fade * 1000),
+        over = audio.volume + step * dir;
+    if (over > 1) {
+      audio.volume = 1;
+    } else if (over < 0) {
+      audio.volume = 0;
+    } else {
+      audio.volume += step * dir;
+      setTimeout(function () {
+        this.fading(audio, dir, fade);
+      }, fadeSet);
+    }
+  },
+  play: function (channel, name, fade) {
+    // 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.load();
+    if (fade) {
+      audio.volume = 0;
+    }
+    audio.play();
+    audio.addEventListener("playing", function playing() {
+      audio.removeEventListener("playing", playing, false);
+      deferred.resolve();
+      html5ks.fading(audio, 1, fade);
+    }, false);
+    audio.addEventListener("error", function error() {
+      audio.removeEventListener("error", error, false);
+      deferred.reject(this.error);
+    }, false);
+    return deferred.promise;
+  },
+  stop: function (channel, fade) {
+    var deferred = when.defer(),
+        audio = html5ks.elements.audio[channel],
+        fadeSet = html5ks.persistent.settings.fade;
+    if (fade) {
+      this.fading(audio, -1, fade);
+    } else {
+      audio.pause();
+    }
+    deferred.resolve();
+    return deferred.promise;
+  },
+  play_video: function (vid_src) {
+    var deferred = when.defer(),
+        video = html5ks.elements.video;
+    video.src = "/dump/video/" + vid_src + ".webm";
+    video.load();
+    video.play();
+    video.addEventListener("ended", function () {
+      deferred.resolve();
+    }, false);
+    video.addEventListener("error", function () {
+      deferred.reject(this.error);
+    }, false);
+    return deferred.promise;
+  },
+  act_op: function (this_video) {
+    // strip off extension
+    return this.play_video(this_video.slice(0,-4));
+  },
+  iscene: function (target, is_h, is_end) {
+    this.scene_register(target);
+    return window.script[target]();
+  },
+  window: function (action, transition) {
+    var windw = html5ks.elements.window,
+        deferred = when.defer();
+    switch (action) {
+      case "show":
+        windw.style.display = "block";
+        break;
+      case "hide":
+        windw.style.display = "none";
+        break;
+      default:
+        throw new Error("unknown window action " + action);
+    }
+    deferred.resolve(action);
+    return deferred.promise;
+  },
+  // NOT iscene
+  scene: function (type, name) {
+    var deferred = when.defer(),
+        nom = type;
+    if (name) {
+      nom = type + "_" + name;
+    }
+    var bg = html5ks.elements.img.bg;
+    var image = html5ks.data.images[nom];
+    if (!image) {
+      var typ = {
+        "bg": {dir:"bgs",ext:"jpg"}
+      }[type];
+      image = typ.dir + "/" + name + "." + typ.ext;
+    }
+    html5ks.elements.img.solid.style.backgroundColor = '';
+    if (typeof image == "string") {
+      if (image.substring(0,1) == "#") {
+        html5ks.elements.img.solid.style.backgroundColor = image;
+        deferred.resolve();
+        return deferred.promise;
+      } else {
+        image = {image: image};
+      }
+    }
+    bg.onload = function () {
+      deferred.resolve();
+    };
+    bg.onerror = function () {
+      throw new Error("bg could not load");
+    };
+    bg.src = "/dump/" + image.image;
+    return deferred.promise;
+  },
+  show: function () {
+    var deferred = when.defer();
+    deferred.resolve();
+    return deferred.promise;
+  },
+  hide: function () {
+    var deferred = when.defer();
+    deferred.resolve();
+    return deferred.promise;
+  },
+  run: function (label) {
+    label.forEach(function (inst) {
+      var cmd = inst[0],
+          args = inst.slice(1);
+      switch (cmd) {
+        case "extend":
+        case "hide":
+        case "ksgallery_unlock":
+        case "nvl":
+        case "play":
+        case "scene":
+        case "set_volume":
+        case "show":
+        case "stop":
+        case "window":
+          html5ks.api[cmd].apply(html5ks, args);
+          break;
+        default:
+          if (html5ks.data.characters[cmd]) {
+            this.character(cmd, args);
+          } else {
+            console.error("instruction not implemented: %o", inst);
+          }
+      }
+    });
+  },
+  character: function (name, str) {
+    var deferred = when.defer(),
+        text = str,
+        char = html5ks.data.characters[name];
+    if (char.what_prefix) {
+      text = char.what_prefix + text;
+    }
+    if (char.what_suffix) {
+      text = text + char.what_suffix;
+    }
+    var who = html5ks.elements.who;
+    who.textContent = char.name;
+    if (char.color) {
+      who.style.color = char.color;
+    } else {
+      who.style.color = "#ffffff";
+    }
+    html5ks.elements.say.textContent = text;
+    html5ks.next = function () {
+      deferred.resolve(text);
+      html5ks.next = function () {};
+    };
+    if (html5ks.state.auto) {
+      setTimeout(html5ks.next, 1000 + html5ks.persistent.settings.autospeed * text.length);
+    }
+    return deferred.promise;
+  }
+};
diff --git a/www/js/characters.js b/www/js/characters.js
index cc9213c..9138e5b 100644
--- a/www/js/characters.js
+++ b/www/js/characters.js
@@ -1,5 +1,4 @@
-if (!window.html5ks) window.html5ks = {};
-html5ks.characters = {
+window.html5ks.data.characters = {
   name_only: {name: ""},
   
   hi: {name: "Hisao", color: "#629276"},
diff --git a/www/js/html5ks.js b/www/js/html5ks.js
index cd3d6e3..ade740f 100644
--- a/www/js/html5ks.js
+++ b/www/js/html5ks.js
@@ -1,235 +1,112 @@
 (function () {
-"use strict";
-window.html5ks = {
-  persistent: {
-    seen_scenes: {},
-    attraction: {
-      kenji: 0,
-      sc: 0,
-      hanako: 0
+  "use strict";
+  window.html5ks = {
+    persistent: {
+      seen_scenes: {},
+      attraction: {
+        kenji: 0,
+        sc: 0,
+        hanako: 0
+      },
+      hdisabled: false,
+      settings: {
+        // ms per character
+        autospeed: 20,
+        fade: 100,
+        gotit: false
+      }
     },
-    hdisabled: false,
-    settings: {
-      // ms per character
-      autospeed: 20,
-      fade: 100
-    }
-  },
-  state: {
-    auto: false
-  },
-  save: function () {
-    localStorage.persistent = JSON.stringify(this.persistent);
-  },
-  load: function () {
-    if (localStorage.persistent) this.persistent = JSON.parse(localStorage.persistent);
-  },
-  seen_scene: function (scene) {
-    return !!this.persistent.seen_scenes[scene];
-  },
-  scene_register: function (scene) {
-    this.persistent.seen_scenes.scene = true;
-  },
-  fading: function (audio, dir, fade) {
-    var fadeSet = html5ks.persistent.settings.fade,
-        step = fadeSet / (fade * 1000),
-        over = audio.volume + step * dir;
-    if (over > 1) {
-      audio.volume = 1;
-    } else if (over < 0) {
-      audio.volume = 0;
-    } else {
-      audio.volume += step * dir;
-      setTimeout(function () {
-        html5ks.fading(audio, dir, fade);
-      }, fadeSet);
-    }
-  },
-  play: function (channel, name, fade) {
-    // TODO: fade
-    var deferred = when.defer(),
-        audio = this.elements.audio[channel];
-    audio.src = "/dump/" + (channel === "music" ? "bgm/" + this.music[name] + ".ogg" : this.sfx[name]);
-    audio.load();
-    if (fade) {
-      audio.volume = 0;
-    }
-    audio.play();
-    audio.addEventListener("playing", function playing() {
-      audio.removeEventListener("playing", playing, false);
-      deferred.resolve(this);
-      html5ks.fading(audio, 1, fade);
-    }, false);
-    audio.addEventListener("error", function error() {
-      audio.removeEventListener("error", error, false);
-      deferred.reject(this.error);
-    }, false);
-    return deferred.promise;
-  },
-  stop: function (channel, fade) {
-    var deferred = when.defer(),
-        audio = this.elements.audio[channel],
-        fadeSet = html5ks.persistent.settings.fade;
-    if (fade) {
-      html5ks.fading(audio, -1, fade);
-    } else {
-      audio.pause();
-    }
-    deferred.resolve();
-    return deferred.promise;
-  },
-  play_video: function (vid_src) {
-    var deferred = when.defer(),
-        video = this.elements.video;
-    video.src = "/dump/video/" + vid_src + ".webm";
-    video.load();
-    video.play();
-    video.addEventListener("ended", function () {
-      deferred.resolve(this);
-    }, false);
-    video.addEventListener("error", function () {
-      deferred.reject(this.error);
-    }, false);
-    return deferred.promise;
-  },
-  act_op: function (this_video) {
-    // strip off extension
-    return this.play_video(this_video.slice(0,-4));
-  },
-  iscene: function (target, is_h, is_end) {
-    this.scene_register(target);
-    return window.script[target]();
-  },
-  window: function (action, transition) {
-    var windw = this.elements.windw,
-        deferred = when.defer();
-    switch (action) {
-      case "show":
-        windw.style.display = "block";
-        break;
-      case "hide":
-        windw.style.display = "none";
-        break;
-      default:
-        throw new Error("unknown window action " + action);
-    }
-    deferred.resolve(action);
-    return deferred.promise;
-  },
-  imageTypes: {
-    "bg": {dir:"bgs",ext:"jpg"}
-  },
-  // NOT iscene
-  scene: function (type, name) {
-    var deferred = when.defer(),
-        nom = type;
-    if (name) {
-      nom = type + "_" + name;
-    }
-    var bg = this.elements.img.bg;
-    var image = this.images[nom];
-    if (!image) {
-      var typ = this.imageTypes[type];
-      image = typ.dir + "/" + name + "." + typ.ext;
-    }
-    this.elements.img.solid.style.backgroundColor = '';
-    if (typeof image == "string") {
-      if (image.substring(0,1) == "#") {
-        this.elements.img.solid.style.backgroundColor = image;
-        deferred.resolve();
-        return deferred.promise;
+    state: {
+      auto: false
+    },
+    initElements: function () {
+      this.elements = {
+        container: document.getElementById("container"),
+        video: document.getElementById("vid"),
+        audio: {
+          music: new Audio(),
+          ambient: new Audio(),
+          sound: new Audio()
+        },
+        who: document.getElementById("who"),
+        say: document.getElementById("say"),
+        img: {
+          bg: document.getElementById("bg"),
+          solid: document.getElementById("solid")
+        },
+        window: document.getElementById("window")
+      };
+      this.elements.audio.music.loop = true;
+      this.elements.audio.ambient.loop = true;
+    },
+    load: function () {
+      if (localStorage.persistent) this.persistent = JSON.parse(localStorage.persistent);
+    },
+    save: function () {
+      localStorage.persistent = JSON.stringify(this.persistent);
+    },
+    scale: function () {
+      var height = document.documentElement.clientHeight,
+          width = document.documentElement.clientWidth,
+          newScale = 1;
+      if (height / width <= 0.75) { // widescreen
+        newScale = height / 600;
       } else {
-        image = {image: image};
+        newScale = width / 800;
       }
-    }
-    bg.onload = function () {
-      deferred.resolve(this);
-    };
-    bg.onerror = function () {
-      throw new Error("bg could not load");
-    };
-    bg.src = "/dump/" + image.image;
-    return deferred.promise;
-  },
-  scale: function () {
-    var height = document.documentElement.clientHeight,
-        width = document.documentElement.clientWidth,
-        newScale = 1;
-    if (height / width <= 0.75) { // widescreen
-      newScale = height / 600;
-    } else {
-      newScale = width / 800;
-    }
-    this.elements.container.style.webkitTransform = "scale(" + newScale + ")";
-    this.elements.container.style.mozTransform = "scale(" + newScale + ")";
-    this.elements.container.style.transform = "scale(" + newScale + ")";
-  },
-  next: function () {},
-  loadChars: function () {
-    for (var character in this.characters) {
-      this[character] = function (text) {
-        var deferred = when.defer();
-        this.elements.say.textContent = text;
-        this.next = function () {
-          deferred.resolve(text);
-          this.next = function () {};
-        };
-        if (this.state.auto) {
-          setTimeout(this.next, 1000 + this.persistent.settings.autospeed * text.length);
+      html5ks.elements.container.style.webkitTransform = "scale(" + newScale + ")";
+      html5ks.elements.container.style.mozTransform = "scale(" + newScale + ")";
+      html5ks.elements.container.style.transform = "scale(" + newScale + ")";
+    },
+    next: function () {},
+    loadChars: function () {
+      for (var character in this.characters) {
+      }
+    },
+    warnUnsupported: function () {
+      if (!html5ks.persistent.settings.gotit) {
+        if (!(/Firefox/.test(navigator.userAgent))) {
+          document.getElementById("html-svg-filter").style.display = "block";
+        }
+        var warn = document.getElementById("warn-container");
+        document.getElementById("gotit").addEventListener("mouseup", function () {
+          warn.style.mozAnimation = "0.5s dissolveout";
+          warn.style.webkitAnimation = "0.5s dissolveout";
+          warn.style.animation = "0.5s dissolveout";
+          warn.style.opacity = 0;
+          html5ks.persistent.settings.gotit = true;
+        }, false);
+        var warns = document.getElementById("warns").children;
+        for (var i = 0; i < warns.length; i++) {
+          if (window.getComputedStyle(warns[i]).getPropertyValue("display") !== "none") {
+            warn.style.display = "block";
+          }
         }
-        return deferred.promise;
-      };
-    }
-  },
-  show: function () {
-    var deferred = when.defer();
-    deferred.resolve();
-    return deferred.promise;
-  },
-  hide: function () {
-    var deferred = when.defer();
-    deferred.resolve();
-    return deferred.promise;
-  },
-  warnUnsupported: function () {
-    if (!(/Firefox/.test(navigator.userAgent))) {
-      document.getElementById("html-svg-filter").style.display = "block";
-    }
-    document.getElementById("gotit").addEventListener("mouseup", function () {
-      document.getElementById("warn").style.display = "none";
-    }, false);
-  },
-  onload: function () {
-    this.elements = {
-      container: document.getElementById("container"),
-      video: document.getElementById("vid"),
-      audio: {
-        music: new Audio(),
-        ambient: new Audio(),
-        sound: new Audio()
-      },
-      say: document.getElementById("say"),
-      img: {
-        bg: document.getElementById("bg"),
-        solid: document.getElementById("solid")
       }
-    };
-    this.elements.audio.music.loop = true;
-    this.elements.audio.ambient.loop = true;
-    this.load();
-    this.scale();
-    window.addEventListener("resize", function () {
-      html5ks.scale();
-    }, false);
-    this.loadChars();
-    this.elements.container.addEventListener("mouseup", function () {
-      html5ks.next();
-    }, false);
-    this.warnUnsupported();
-    en_NOP1();
-  }
-};
-document.addEventListener("DOMContentLoaded", function () {
-  html5ks.onload();
-}, false);
+    },
+    initEvents: function () {
+      window.addEventListener("resize", html5ks.scale, false);
+      this.elements.container.addEventListener("mouseup", function () {
+        html5ks.next();
+      }, false);
+    },
+    onload: function () {
+      this.initElements();
+      this.loadChars();
+      this.load();
+      this.scale();
+      this.initEvents();
+      this.warnUnsupported();
+    },
+    winload: function () {
+      this.elements.img.bg.src = "";
+    }
+  };
+  window.html5ks.data = {};
+  document.addEventListener("DOMContentLoaded", function () {
+    html5ks.onload();
+  }, false);
+  window.addEventListener("load", function () {
+    html5ks.winload();
+  }, false);
 }());
diff --git a/www/js/images.js b/www/js/images.js
index 5ff851c..c5e95ad 100644
--- a/www/js/images.js
+++ b/www/js/images.js
@@ -3,7 +3,7 @@
 var stub = function(){};
 var LiveComposite = stub;
 var im = {Composite:stub,Crop:stub,FactorScale:stub,Grayscale:stub};
-html5ks.images = {
+window.html5ks.data.images = {
     "ev_other_iwanako_start": {
         image: "event/other_iwanako_nosnow.jpg",
         xalign: 0.5,