Fix... stuff.

5 files changed, 158 insertions, 146 deletions

diff --git a/www/css/index.css b/www/css/index.css
index 2fedd0e..2883101 100644
--- a/www/css/index.css
+++ b/www/css/index.css
@@ -1,3 +1,4 @@
+/* font-face */
 @font-face {
   font-family: "Playtime";
   /* src: url("playtime.ttf"); */
@@ -12,62 +13,55 @@
   src: url("font/GentiumPlus.ttf");
   src: url("font/GentiumPlus.woff");
 }
-body {
-  margin: 0;
-  padding: 0;
-  background: gray;
-  font: 22px/27px Playtime, sans-serif;
-}
+
+/* general styling */
 * {
   -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;
+body {
+  margin: 0;
+  padding: 0;
+  background: gray;
+  font: 22px/27px Playtime, sans-serif;
 }
-#container, #bg.scale, #vid.scale {
-  top: 50%;
-  left: 50%;
+h2 {
+  font: 20px/28px Playtime; /* yes, h2 has *smaller* font */
+  font-weight: bold;
 }
-#container {
-  width: 800px;
-  height: 600px;
-  margin-top: -300px;
-  margin-left: -400px;
+
+/* input */
+label {
+  display: block;
 }
-#who {
-  color: black;
-  position: absolute;
-  top: 452px;
-  left: 12px;
-  font-weight: bold;
+.button, h2, label {
+  opacity: 0.4;
 }
-.say {
-  color: white;
+.button-disabled {
+  opacity: 0.1;
 }
-#say {
-  width: 750px;
-  height: 90px;
-  position: absolute;
-  top: 493px;
-  left: 28px;
+.button:not(.button-disabled):hover {
+  opacity: 1;
 }
-#window-image {
-  position: absolute;
-  top: 440px;
-  left: 0;
+input[type="checkbox"] {
+  display: none;
 }
-#gray {
-  position: absolute;
-  width: 100%;
-  height: 100%;
-  background-color: rgb(64, 64, 64);
-  background-color: rgba(64, 64, 64, 0.8);
-  z-index: 9;
+input[type="checkbox"] + span:before {
+  display: inline-block;
+  height: 19px;
+  width: 20px;
+  content: "";
+  background-position: left -2px top -3px;
+  background-repeat: no-repeat;
+  background-image: url("../dump/ui/bt-cf-unchecked.png");
+}
+input[type="checkbox"]:checked + span:before {
+  background-image: url("../dump/ui/bt-cf-checked.png");
 }
+
+/* warnings */
 #warn-container {
   visibility: hidden;
   cursor: auto;
@@ -89,61 +83,78 @@ html.no-js #warn-container {
   width: 600px;
   z-index: 10;
 }
-h2 {
-  font: 20px/28px Playtime;
-  font-weight: bold;
-}
-html.no-js          #warn li:not(#js) { display: none; }
+html.no-js          #warn li { display: none; }
+html.js             #warn noscript { display: none; }
                     #warn li#ie { display: none; }
 html.video          #warn li#video { display: none; }
 html.audio          #warn li#audio { display: none; }
 html.fontface       #warn li#fontface { display: none; }
 html.csstransforms  #warn li#csstransforms { display: none; }
 html.csstransitions #warn li#csstransitions { display: none; }
-label {
-  display: block;
-}
-.button, h2, label {
-  opacity: 0.4;
-}
-.button-disabled {
-  opacity: 0.1;
-}
-.button-enabled:hover {
-  opacity: 1;
-}
 #gotit {
   text-align: center;
 }
 html.no-js #gotit {
   display: none;
 }
-#main-menu-buttons .button {
-  margin: 4px;
+
+/* wooo, the real content */
+#container, #vid {
+  cursor: url("../dump/ui/mousecursor.png"), default;
+  position: absolute;
+  -moz-backface-visibility: hidden;
+  -webkit-backface-visibility: hidden;
+  backface-visibility: hidden;
 }
-input[type="checkbox"] {
-  display: none;
+#container, #vid.scale {
+  top: 50%;
+  left: 50%;
 }
-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;
+#container {
+  width: 800px;
+  height: 600px;
+  margin-top: -300px;
+  margin-left: -400px;
+  overflow: hidden;
 }
-input[type="checkbox"]:checked + span:before {
-  background: url("../dump/ui/bt-cf-checked.png") no-repeat left bottom;
+#show img {
+  position: absolute;
 }
-#ctc, #nvlctc {
+#window {
+  background: url("../dump/ui/bg-say.png");
+  width: 800px;
+  height: 160px;
   position: absolute;
-  bottom: 20px;
-  right: 10px;
-  -webkit-animation: blink 2s infinite;
-  -moz-animation: blink 2s infinite;
-  animation: blink 2s infinite;
+  top: 440px;
+  left: 0;
 }
-#nvlctc {
-  bottom: 25px;
+#who {
+  color: black;
+  position: absolute;
+  top: 12px;
+  left: 12px;
+  font-weight: bold;
+}
+.say {
+  color: white;
+}
+#say {
+  width: 750px;
+  height: 90px;
+  position: absolute;
+  top: 53px;
+  left: 28px;
+}
+#gray {
+  position: absolute;
+  width: 100%;
+  height: 100%;
+  background-color: rgb(64, 64, 64);
+  background-color: rgba(64, 64, 64, 0.8);
+  z-index: 9;
+}
+#main-menu-buttons .button {
+  margin: 4px;
 }
 #nvl {
   position: absolute;
@@ -160,6 +171,17 @@ input[type="checkbox"]:checked + span:before {
   display: block;
   margin: 10px 8px;
 }
+#ctc, #nvlctc {
+  position: absolute;
+  bottom: 20px;
+  right: 10px;
+  -webkit-animation: blink 2s infinite;
+  -moz-animation: blink 2s infinite;
+  animation: blink 2s infinite;
+}
+#nvlctc {
+  bottom: 25px;
+}
 .centered {
   width: 100%;
   text-align: center;
@@ -173,6 +195,3 @@ 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 5b99526..31b406c 100644
--- a/www/index.html
+++ b/www/index.html
@@ -38,15 +38,13 @@
           <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 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>
         </ul>
-        <div id="gotit" class="button button-enabled">I know it's broken, let me play!</div>
+        <div id="gotit" class="button">I know it's broken, let me play!</div>
       </div>
     </div>
-    <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>
         <div id="say" class="say"></div>
         <img id="ctc" src="dump/ui/ctc.png" style="display: none">
@@ -59,10 +57,10 @@
       <div id="centered" class="centered say"></div>
       <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="start" class="button">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="options-button" class="button">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">
@@ -74,20 +72,20 @@
       <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" class="option" id="hdisable"> <span>Disable adult content</span></label>
-          <label class="button button-enabled"><input type="checkbox" class="option" id="skipUnread"> <span>Skip unread text</span></label>
-          <label class="button button-enabled"><input type="checkbox" class="option" id="skipAfterChoices"> <span>Keep skipping after choices</span></label>
-          <label class="button button-enabled"><input type="checkbox" class="option" id="useWebP"> <span>Use WebP images (less bandwidth, more CPU)</span></label>
-          <label class="button button-enabled"><input type="checkbox" class="option" id="fullscreen"> <span>Scale content</span></label>
-          <label class="button button-enabled"><input type="checkbox" class="option" id="scaleVideo"> <span>Scale video</span></label>
+          <label class="button"><input type="checkbox" class="option" id="hdisable"> <span>Disable adult content</span></label>
+          <label class="button"><input type="checkbox" class="option" id="skipUnread"> <span>Skip unread text</span></label>
+          <label class="button"><input type="checkbox" class="option" id="skipAfterChoices"> <span>Keep skipping after choices</span></label>
+          <label class="button"><input type="checkbox" class="option" id="useWebP"> <span>Use WebP images (less bandwidth, more CPU)</span></label>
+          <label class="button"><input type="checkbox" class="option" id="fullscreen"> <span>Scale content</span></label>
+          <label class="button"><input type="checkbox" class="option" id="scaleVideo"> <span>Scale video</span></label>
 
           <label><input type="range" min="0.0" max="1.0" step="0.001" class="option" id="textSpeed"> <span class="tr">Text speed</span></label>
           <label><input type="range" min="0.0" max="1.0" step="0.001" class="option" id="autoModeDelay"> <span class="tr">Auto mode delay</span></label>
 
           <label><input type="range" min="0.0" max="1.0" step="0.001" class="option" id="musicVolume"> <span class="tr">Music volume</span></label>
-          <label><input type="range" min="0.0" max="1.0" step="0.001" class="option" id="sfxVolume"> <span class="tr">SFX volume</span> <span id="test-sfx" class="button button-enabled"><img src="dump/ui/bt-musicplay.png"> Test</span></label>
+          <label><input type="range" min="0.0" max="1.0" step="0.001" class="option" id="sfxVolume"> <span class="tr">SFX volume</span> <span id="test-sfx" class="button"><img src="dump/ui/bt-musicplay.png"> Test</span></label>
         </div>
-        <div id="return" class="button button-enabled" style="position: absolute; bottom: 15px; right: 20px;">
+        <div id="return" class="button" style="position: absolute; bottom: 15px; right: 20px;">
           <img src="dump/ui/bt-return.png">
           Return
         </div>
diff --git a/www/js/api.js b/www/js/api.js
index c3c9f48..4aebde1 100644
--- a/www/js/api.js
+++ b/www/js/api.js
@@ -170,50 +170,15 @@ window.html5ks.api = {
   }, 
   // NOT iscene
   scene: function (type, name) {
-    var deferred = when.defer(),
-        nom = type;
-    if (name) {
-      nom = type + "_" + name;
-    }
-    var img = new Image();
-    var image = html5ks.data.images[nom];
-    if (!image) {
-      var typ = {
-        "bg": {dir:"bgs",ext:"jpg"}
-      }[type];
-      image = typ.dir + "/" + name + "." + typ.ext;
-    }
-    var bg = html5ks.elements.bg;
-    if (typeof image == "string") {
-      if (image.substring(0,1) == "#") {
-        bg.style.background = "";
-        bg.style.backgroundColor = image;
-        deferred.resolve();
-        return deferred.promise;
-      } else {
-        image = {image: image};
-      }
-    }
-    img.onload = function () {
-      console.debug("setting bg " + img.src);
-      bg.style.background = "";
-      bg.style.backgroundImage = "url(" + img.src + ")";
-      bg.style.backgroundSize = "cover";
-      deferred.resolve();
-    };
-    img.onerror = function () {
-      throw new Error("bg could not load");
-    };
-    if (Modernizr.webp) {
-      image.image = image.image.replace(/\.[a-z]+$/, ".webp");
-    }
-    img.src = "dump/" + image.image;
-    return deferred.promise;
+    html5ks.elements.show.innerHTML = "";
+    return this.show.apply(this, arguments);
   },
 
   show: function (name, type, location) {
     var deferred = when.defer();
-    var el = document.getElementById(name) || document.createElement("img");
+    var lookup = document.getElementById(name),
+        el = lookup || document.createElement("img");
+    if (!location && !lookup) location = "center";
     el.onload = function () {
       if (location) {
         // calculate position
@@ -249,17 +214,49 @@ window.html5ks.api = {
       // TODO: check if img is really in images.js
       deferred.resolve();
     };
-    var src = "dump/sprites/" + name + "/" + name + "_" + type + ".";
+    var nom = name;
+    if (type) {
+      nom = name + "_" + type;
+    }
+    var image = html5ks.data.images[nom];
+    if (typeof image == "undefined") {
+      switch (name) {
+        case "bg":
+          image = "bgs/" + type + ".jpg";
+          break;
+        case "url":
+          name = type;
+          image = type;
+          break;
+        default:
+          image = "sprites/" + name + "/" + name + "_" + type + ".png";
+      }
+    }
+    if (typeof image == "string") {
+      if (image.substring(0,1) == "#") {
+        el.style.backgroundColor = image;
+        el.style.width = "100%";
+        el.style.height = "100%";
+        el.src = "";
+        deferred.resolve();
+        return deferred.promise;
+      } else {
+        image = {image: image};
+      }
+    }
+    var src = "";
     if (html5ks.persistent.settings.useWebP) {
-      src += "webp";
+      src = image.image.replace(/\.[a-z]+$/, ".webp");
     } else {
-      src += "png";
+      src = image.image;
     }
     el.id = name;
-    el.src = src;
+    el.src = "dump/" + src;
     // prevent FOUIPC (flash of incorrectly placed content)
-    if (location) el.style.display = "none";
-    html5ks.elements.show.appendChild(el);
+    if (!lookup) {
+      el.style.display = "none";
+      html5ks.elements.show.appendChild(el);
+    }
     deferred.resolve();
     return deferred.promise;
   },
@@ -439,7 +436,7 @@ window.html5ks.api = {
         frag = document.createDocumentFragment(),
         choice = document.createElement("div");
 
-    choice.className = "choice button button-enabled";
+    choice.className = "choice button";
 
     for (var i in choices) {
       choice.innerHTML = i;
diff --git a/www/js/html5ks.js b/www/js/html5ks.js
index 354bae8..8a174dc 100644
--- a/www/js/html5ks.js
+++ b/www/js/html5ks.js
@@ -41,7 +41,6 @@ window.html5ks = {
       },
       who: document.getElementById("who"),
       say: document.getElementById("say"),
-      bg: document.getElementById("bg"),
       window: document.getElementById("window"),
       ctc: document.getElementById("ctc"),
       nvl: document.getElementById("nvl"),
@@ -91,7 +90,6 @@ window.html5ks = {
         }
       };
 
-      applyScale(html5ks.elements.bg, newScale);
       if (html5ks.persistent.settings.scaleVideo) {
         applyScale(html5ks.elements.video, newScale);
       }
diff --git a/www/js/menu.js b/www/js/menu.js
index a57f9a0..ca0637f 100644
--- a/www/js/menu.js
+++ b/www/js/menu.js
@@ -7,7 +7,7 @@
       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.api.show("url", "ui/main/bg-main.png");
       this.elements.mainMenu.style.display = "block";
     },
 
@@ -77,7 +77,7 @@
       }, false);
       html5ks.fetch("imachine").then(function () {
         var start = this.elements.main.start;
-        start.className = start.className.replace("button-disabled", "button-enabled");
+        start.className = start.className.replace("button-disabled", "");
         this._imachine_loaded = true;
       }.bind(this));
     }