From 1177e84b179b79ebc86a08e1fde49ed6cbd1327d Mon Sep 17 00:00:00 2001
From: Alex Xu <alex_y_xu@yahoo.ca>
Date: Tue, 2 Jul 2013 10:46:36 -0400
Subject: working

---
 README             |  2 ++
 TODO               |  2 +-
 www/css/index.css  |  9 ++++++-
 www/index.html     |  1 +
 www/js/api.js      | 69 +++++++++++++++++++++++++++++++++++-------------------
 www/js/html5ks.js  | 14 +++++++----
 www/js/imachine.js | 13 +++++++---
 7 files changed, 77 insertions(+), 33 deletions(-)

diff --git a/README b/README
index 5d9f3d3..8693448 100644
--- a/README
+++ b/README
@@ -2,6 +2,8 @@ This is an HTML5 implementation of the game Katawa Shoujo. [0]
 
 It's still very much a WIP, but at least the first scene displays half-credibly.
 
+Run lighttpd -f lighttpd.conf which just serves files in www with a reasonable MIME type, expiry date and gzip.
+
 If I haven't finished the TODO (probably), check /TODO for a list of things that need to be worked on. *snip* knows I could use another hand on this.
 
 [0] http://www.katawa-shoujo.com/
diff --git a/TODO b/TODO
index 124d37a..e3ed075 100644
--- a/TODO
+++ b/TODO
@@ -5,7 +5,7 @@ all of this should (read: must) be completed for a 1.0 release
 - show command
 - redo images.js using json including ALL transitions
 - transitions. ALL THE TRANSITIONS
-- text reveal
+- ltr text reveal
 - wallodrugs
 - fix cursor to apply to all document
 - cache script.json files
diff --git a/www/css/index.css b/www/css/index.css
index 85125be..19651da 100644
--- a/www/css/index.css
+++ b/www/css/index.css
@@ -151,6 +151,9 @@ input[type="checkbox"]:checked + span:before {
   -moz-animation: blink 2s infinite;
   animation: blink 2s infinite;
 }
+#nvlctc {
+  bottom: 25px;
+}
 #nvl {
   position: absolute;
   top: 0;
@@ -160,6 +163,10 @@ input[type="checkbox"]:checked + span:before {
   background: url("../dump/ui/bg-nvl.png") no-repeat top left;
 }
 #nvlsay {
-  padding: 25px 35px;
+  padding: 15px 35px;
   color: white;
 }
+.nvl-block {
+  display: block;
+  margin: 10px 8px;
+}
diff --git a/www/index.html b/www/index.html
index ff38ee2..729d26a 100644
--- a/www/index.html
+++ b/www/index.html
@@ -55,6 +55,7 @@
         <div id="nvlsay"></div>
         <img id="nvlctc" src="dump/ui/ctc_rotated.png">
       </div>
+      <div id="choices"></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>
diff --git a/www/js/api.js b/www/js/api.js
index 34a34d9..320845a 100644
--- a/www/js/api.js
+++ b/www/js/api.js
@@ -9,26 +9,25 @@ 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 () {
-        html5ks.api.fading(audio, dir, fade);
-      }, fadeSet);
-    }
+  set_volume: function (volume, delay, channel) {
+    var deferred = when.defer(),
+        audio = html5ks.elements.audio[channel],
+        chg = volume - audio.volume,
+        step = chg / (delay * 10);
+    var f = setInterval(function () {
+      var newv = audio.volume + step;
+      if (newv > 1) {
+        audio.volume = 1;
+        clearInterval(f);
+      } else if (newv < 0) {
+        audio.volume = 0;
+        clearInterval(f);
+      } else {
+        audio.volume = newv;
+      }
+    }, 100);
+    deferred.resolve();
+    return deferred.promise;
   },
   play: function (channel, name, fade) {
     // TODO: fade
@@ -42,7 +41,7 @@ window.html5ks.api = {
       audio.removeEventListener("playing", playing, false);
       deferred.resolve();
       if (fade) {
-        html5ks.api.fading(audio, 1, fade);
+        html5ks.api.set_volume(1, fade, channel);
       }
     }, false);
     audio.addEventListener("error", function error() {
@@ -61,7 +60,7 @@ window.html5ks.api = {
         audio = html5ks.elements.audio[channel],
         fadeSet = html5ks.persistent.settings.fade;
     if (fade) {
-      this.fading(audio, -1, fade);
+      this.set_volume(0, fade, channel);
     } else {
       audio.pause();
     }
@@ -108,7 +107,6 @@ window.html5ks.api = {
     return this.movie_cutscene(this_video.slice(0,-4));
   },
   iscene: function (target, is_h, is_end) {
-    this.scene_register(target);
     var deferred = when.defer(),
         label = html5ks.data.script[target],
         i = 0;
@@ -236,7 +234,7 @@ window.html5ks.api = {
 
   nvlsay: function (text) {
     var deferred = when.defer();
-    html5ks.elements.nvlsay.innerHTML += text + "<br>";
+    html5ks.elements.nvlsay.innerHTML += "<span class='nvl-block'>" + text + "</span>";
     html5ks.elements.nvlctc.style.display = "block";
     html5ks.next = function () {
       html5ks.elements.nvlctc.style.display = "none";
@@ -344,5 +342,28 @@ window.html5ks.api = {
         console.error("no such nvl action " + action);
     }
     return deferred.promise;
+  },
+
+  menu: function (char, str, choices) {
+    var deferred = when.defer();
+    this.character(char, str).then(function () {
+      var menu = html5ks.elements.choices,
+          frag = document.createDocumentFragment(),
+          choice = document.createElement("div");
+
+      choice.className = "choice";
+
+      for (var i in choices) {
+        choice.innerHTML = i;
+        choice.addEventListener("click", function () {
+          deferred.resolve(choices[i]);
+        }, false);
+        frag.appendChild(choice);
+        choice = choice.cloneNode(false);
+      }
+
+      html5ks.elements.choices.innerHTML = "";
+      html5ks.elements.choices.appendChild(frag);
+    });
   }
 };
diff --git a/www/js/html5ks.js b/www/js/html5ks.js
index 86278f0..d76f2a0 100644
--- a/www/js/html5ks.js
+++ b/www/js/html5ks.js
@@ -23,8 +23,10 @@ window.html5ks = {
       autoModeDelay: 0.2,
       musicVolume: 1,
       sfxVolume: 1
-    },
-    store: {}
+    }
+  },
+  store: {
+    seen_scenes: {}
   },
   state: {},
   initElements: function () {
@@ -72,14 +74,18 @@ window.html5ks = {
       container.style.webkitTransform = "scale(" + newScale + ")";
       container.style.mozTransform = "scale(" + newScale + ")";
       container.style.transform = "scale(" + newScale + ")";
-      container.className += " scale";
+      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";
-        el.className += " scale";
+        if (el.className.indexOf("scale") === -1) {
+          el.className += " scale";
+        }
       };
 
       applyScale(html5ks.elements.bg, newScale);
diff --git a/www/js/imachine.js b/www/js/imachine.js
index fd657ef..12a2f7a 100644
--- a/www/js/imachine.js
+++ b/www/js/imachine.js
@@ -1,12 +1,18 @@
 html5ks.imachine = (function () {
   "use strict";
   return {
+    seen_scene: function (scene) {
+      return !!html5ks.store.seen_scenes[scene];
+    },
+    scene_register: function (scene) {
+      html5ks.store.seen_scenes[scene] = true;
+    },
     start: function () {
       return this.run("imachine");
     },
     run: function (label) {
       var deferred = when.defer(),
-          ilabel = html5ks.data.imachine[label],
+          ilabel = typeof label === "string" ? html5ks.data.imachine[label] : label,
           i = 0,
           runInst = function () {
             var inst = ilabel[i++];
@@ -20,6 +26,7 @@ html5ks.imachine = (function () {
               case "object":
                 switch (inst[0]) {
                   case "iscene":
+                    this.scene_register(inst[1]);
                   case "act_op":
                     switch (inst[1]) {
                       case "op_vid1":
@@ -31,9 +38,9 @@ html5ks.imachine = (function () {
                     break;
                   case "seen_scene":
                     if (this.seen_scene(inst[1])) {
-                      runInst(inst[2]);
+                      this.run(inst[2]);
                     } else {
-                      runInst(inst[3]);
+                      this.run(inst[3]);
                     }
                     break;
                   case "attraction_sc":
-- 
cgit v1.2.3-70-g09d2