fix various persistent-related bugs

4 files changed, 122 insertions, 80 deletions

diff --git a/www/css/index.css b/www/css/index.css
index 7b671c2..5b12d77 100644
--- a/www/css/index.css
+++ b/www/css/index.css
@@ -28,7 +28,7 @@ body {
   font: 22px/27px Playtime, sans-serif;
 }
 h2 {
-  font: 20px/28px Playtime; /* yes, h2 has *smaller* font */
+  font: 20px/24px Playtime; /* yes, h2 has *smaller* font */
   font-weight: bold;
 }
 
@@ -106,15 +106,15 @@ html.no-js #gotit {
   -webkit-backface-visibility: hidden;
   backface-visibility: hidden;
 }
-#container, #vid.scale {
+#container, #vid {
   top: 50%;
   left: 50%;
-}
-#container {
   width: 800px;
   height: 600px;
   margin-top: -300px;
   margin-left: -400px;
+}
+#container {
   overflow: hidden;
 }
 #show img {
diff --git a/www/js/api.js b/www/js/api.js
index 43692cf..295b472 100644
--- a/www/js/api.js
+++ b/www/js/api.js
@@ -15,13 +15,17 @@ window.html5ks.api = {
     var deferred = when.defer(),
         audio = html5ks.elements.audio[channel],
         step = (target - audio.volume) / (delay * 20);
-    var f = setInterval(function () {
-      // clamp new volume 0-1
-      audio.volume = Math.min(Math.max(audio.volume + step, 0), 1);
-      if (audio.volume === 0 || audio.volume === 1) {
-        clearInterval(f);
-      }
-    }, 50);
+    if (!delay) {
+      audio.volume = target;
+    } else {
+      var f = setInterval(function () {
+        // clamp new volume 0-1
+        audio.volume = Math.min(Math.max(audio.volume + step, 0), 1);
+        if (audio.volume === 0 || audio.volume === 1) {
+          clearInterval(f);
+        }
+      }, 50);
+    }
     deferred.resolve();
     return deferred.promise;
   },
@@ -36,7 +40,7 @@ window.html5ks.api = {
     html5ks.elements.audio[channel] = audio;
     audio.src = "dump/" + (channel === "music" ? "bgm/" + html5ks.data.music[name] + ".ogg" : html5ks.data.sfx[name]);
     audio.load();
-    var volume = html5ks.persistent.settings[channel + "Volume"];
+    var volume = html5ks.persistent[channel + "Volume"];
     audio.volume = fade ? 0 : volume;
     audio.play();
     audio.onplaying = function () {
@@ -86,6 +90,7 @@ window.html5ks.api = {
 
     video.load();
     video.style.display = "block";
+    video.volume = html5ks.persistent.musicVolume;
     video.play();
     var done = function () {
       video.style.display = "none";
@@ -119,7 +124,7 @@ window.html5ks.api = {
 
   iscene: function (target, is_h, is_end) {
     var deferred = when.defer(),
-        label = html5ks.data.script[html5ks.persistent.settings.language + "_" + target],
+        label = html5ks.data.script[html5ks.persistent.language + "_" + target],
         i = 0;
     (function run(ret) {
       if (label[i]) {
@@ -252,7 +257,7 @@ window.html5ks.api = {
       image = {image: image};
     }
     var src = "";
-    if (html5ks.persistent.settings.useWebP) {
+    if (html5ks.persistent.useWebP) {
       src = image.image.replace(/\.[a-z]+$/, ".webp");
     } else {
       src = image.image;
@@ -383,7 +388,7 @@ window.html5ks.api = {
       if (html5ks.state.skip || str.indexOf("{nw}") > -1) {
         html5ks.next();
       } else if (html5ks.state.auto) {
-        setTimeout(html5ks.next, 1000 + html5ks.persistent.settings.autospeed * text.length);
+        setTimeout(html5ks.next, 1000 + html5ks.persistent.autospeed * text.length);
       }
     }
     return deferred.promise;
diff --git a/www/js/html5ks.js b/www/js/html5ks.js
index 0c2c1f7..42542fd 100644
--- a/www/js/html5ks.js
+++ b/www/js/html5ks.js
@@ -3,9 +3,9 @@ window.html5ks = {
   data: {
     script: {}
   },
-  persistent: {
-    seen_scenes: {},
-    settings: {
+  persistent: {},
+  init: function () {
+    var defaultPersistent = {
       fade: 100,
       gotit: false,
       hdisable: false,
@@ -20,6 +20,22 @@ window.html5ks = {
       musicVolume: 1,
       sfxVolume: 1,
       language: "en"
+    };
+    var loaded = localStorage.persistent ? JSON.parse(localStorage.persistent) : {};
+    for (var k in defaultPersistent) {
+      (function () {
+        var v = typeof loaded[k] === "undefined" ? defaultPersistent[k] : loaded[k];
+        Object.defineProperty(html5ks.persistent, k, {
+          get: function () {
+            return v;
+          },
+          set: function (value) {
+            v = value;
+            localStorage.persistent = JSON.stringify(html5ks.persistent);
+          },
+          enumerable: true
+        });
+      }());
     }
   },
   store: {
@@ -53,18 +69,9 @@ window.html5ks = {
       show: document.getElementById("show")
     };
   },
-  load: function () {
-    if (localStorage.persistent) {
-      this.persistent = JSON.parse(localStorage.persistent);
-      this.loaded = true;
-    }
-  },
-  save: function () {
-    localStorage.persistent = JSON.stringify(this.persistent);
-  },
   scale: function () {
-    if (html5ks.persistent.settings.scaleAll) {
-      var newScale = 1;
+    var newScale = 1;
+    if (html5ks.persistent.scaleAll) {
       var height = document.documentElement.clientHeight,
           width = document.documentElement.clientWidth;
       if (height / width <= 0.75) { // widescreen
@@ -72,39 +79,54 @@ window.html5ks = {
       } else {
         newScale = width / 800;
       }
+    }
 
-      var container = html5ks.elements.container;
-      container.style.webkitTransform = "scale(" + newScale + ")";
-      container.style.mozTransform = "scale(" + newScale + ")";
-      container.style.transform = "scale(" + newScale + ")";
-      if (container.className.indexOf("scale") === -1) {
-        container.className += " scale";
-      }
-
-      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";
-        if (el.className.indexOf("scale") === -1) {
-          el.className += " scale";
-        }
-      };
+    var container = html5ks.elements.container;
+    container.style.webkitTransform = "scale(" + newScale + ")";
+    container.style.mozTransform = "scale(" + newScale + ")";
+    container.style.transform = "scale(" + newScale + ")";
+    if (container.className.indexOf("scale") === -1) {
+      container.className += " scale";
+    }
 
-      if (html5ks.persistent.settings.scaleVideo) {
-        applyScale(html5ks.elements.video, 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";
+      if (el.className.indexOf("scale") === -1) {
+        el.className += " scale";
       }
+    };
+
+    if (html5ks.persistent.scaleVideo) {
+      applyScale(html5ks.elements.video, newScale);
     }
   },
-  fullscreen: function () {
-    var all = html5ks.elements.all;
-    if (all.requestFullscreen) {
-      all.requestFullscreen();
-    } else if (all.mozRequestFullScreen) {
-      all.mozRequestFullScreen();
-    } else if (all.webkitRequestFullscreen) {
-      all.webkitRequestFullscreen();
+  fullscreen: function (onoff) {
+    if (onoff !== false) {
+      var all = html5ks.elements.all;
+      if (all.requestFullscreen) {
+        all.requestFullscreen();
+      } else if (all.mozRequestFullScreen) {
+        all.mozRequestFullScreen();
+      } else if (all.webkitRequestFullscreen) {
+        all.webkitRequestFullscreen();
+      } else {
+        return false;
+      }
+    } else {
+      if (document.requestFullscreen) {
+        document.requestFullscreen();
+      } else if (document.mozCancelFullScreen) {
+        document.mozCancelFullScreen();
+      } else if (document.webkitCancelFullscreen) {
+        document.webkitCancelFullscreen();
+      } else {
+        return false;
+      }
     }
+    return true;
   },
   initEvents: function () {
     window.onresize = html5ks.scale;
@@ -114,22 +136,31 @@ window.html5ks = {
     window.addEventListener("dragstart", function (e) {
       e.preventDefault();
     }, false);
-    if (html5ks.persistent.settings.fullscreen) {
+    if (html5ks.persistent.fullscreen) {
       window.addEventListener("click", function click() {
         window.removeEventListener("click", click, false);
         html5ks.fullscreen();
       }, false);
     }
+    var fullscreenchange = function () {
+      if (!(document.fullscreenElement || document.mozFullScreenElement || document.webkitFullscreenElement)) {
+        html5ks.persistent.fullscreen = false;
+        document.getElementById("fullscreen").checked = false;
+      }
+    };
+    document.addEventListener("mozfullscreenchange", fullscreenchange, false);
+    document.addEventListener("webkitfullscreenchange", fullscreenchange, false);
+    document.addEventListener("fullscreenchange", fullscreenchange, false);
   },
   warnUnsupported: function () {
-    if (!html5ks.persistent.settings.gotit) {
+    if (!html5ks.persistent.gotit) {
       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;
+        html5ks.persistent.gotit = true;
         html5ks.start();
       }, false);
       var warns = document.getElementById("warns").children;
@@ -146,7 +177,6 @@ window.html5ks = {
   },
   onload: function () {
     this.initElements();
-    this.load();
     this.scale();
     this.initEvents();
     if (!this.warnUnsupported()) {
@@ -154,23 +184,13 @@ window.html5ks = {
     }
     this.api.init();
     this.menu.init();
-    if (this.persistent.settings.fullscreen) {
+    if (this.persistent.fullscreen) {
       document.body.addEventListener("click", function onclick() {
         this.removeEventListener("click", onclick, false);
         html5ks.fullscreen();
       }, false);
     }
   },
-  winload: function () {
-    if (!this.loaded) {
-      this.persistent.settings.useWebP = Modernizr.webp;
-    }
-    if (!Modernizr.webp && this.persistent.settings.useWebP) {
-      var webpjs = document.createElement("script");
-      webpjs.src = "js/webpjs-0.0.2.min.js";
-      document.head.appendChild(webpjs);
-    }
-  },
   start: function () {
     this.fetch("script").then(function () {
       html5ks.api.movie_cutscene("4ls", true).then(function () {
@@ -214,9 +234,7 @@ window.html5ks = {
     return deferred.promise;
   }
 };
+html5ks.init();
 document.addEventListener("DOMContentLoaded", function () {
   html5ks.onload();
 }, false);
-window.addEventListener("onload", function () {
-  html5ks.winload();
-}, false);
diff --git a/www/js/menu.js b/www/js/menu.js
index cb29675..1a3e712 100644
--- a/www/js/menu.js
+++ b/www/js/menu.js
@@ -37,25 +37,44 @@
 
     initOptions: function () {
       var options = document.getElementsByClassName("option"),
-          values = html5ks.persistent.settings;
+          values = html5ks.persistent;
 
-      options[0].parentNode.parentNode.addEventListener("change", function (e) {
+      if (!html5ks.persistent.scaleAll) {
+        document.getElementById("scaleVideo").parentNode.className += " button-disabled";
+      }
+
+      var change = function (e) {
         var target = e.target;
-        values[target.id] = typeof target.checked !== "undefined" ? target.checked : target.value;
+        values[target.id] = target.type === "checkbox" ? target.checked : target.value;
         switch (target.id) {
           case "fullscreen":
-            html5ks.fullscreen();
+            if (target.checked) {
+              html5ks.fullscreen();
+            } else {
+              html5ks.fullscreen(false);
+            }
             break;
           case "scaleAll":
+            var scaleVideo = document.getElementById("scaleVideo");
+            if (!target.checked) {
+              scaleVideo.checked = false;
+              scaleVideo.parentNode.className += " button-disabled";
+            } else {
+              scaleVideo.checked = true;
+              scaleVideo.parentNode.className = scaleVideo.parentNode.className.replace("button-disabled", "");
+            }
           case "scaleVideo":
             html5ks.scale();
             break;
           case "musicVolume":
           case "sfxVolume":
-            html5ks.elements.audio[target.id.replace("Volume", "")].volume = target.value;
+            html5ks.api.set_volume(target.value, 0, target.id.replace("Volume", ""))
             break;
         }
-      }, false);
+      };
+
+      options[0].parentNode.parentNode.addEventListener("change", change, false);
+      options[0].parentNode.parentNode.addEventListener("input", change, false);
       for (var i = options.length - 1; i >= 0; i--) {
         var option = options[i];
         switch (option.type) {