We use a lot of new features in this; your browser seems to have some issues...

It doesn't seem to have JavaScript enabled. This site doesn't work at all without it. Really. Don't know how to enable JS?
It doesn't seem to support HTML5 video, which means that you won't be able to see any of the videos (obviously). Unless stated below, though, transitions should still work. You should strongly consider upgrading.
It doesn't seem to support HTML5 audio, which means you won't be able to hear any of the amazing music. You should strongly consider upgrading.
It doesn't seem to support the @font-face at-rule, which lets us display the Playtime and Gentium fonts used in Katawa Shoujo. Any browser released in the last 2 years or so should support it.
It doesn't seem to support CSS transforms, which means that we won't be able to scale the window or show most transitions. Any browser released in the last 2 years ago should work.
It doesn't seem to support CSS transitions, which means that transitions won't work. Videos should still work though, unless stated above. You should definitely try upgrading.
It might not support SVG filters on HTML content, which means that filters like the sunset in the tea room will display as regular images. Unfortunately, this is only implemented in Firefox now.

I know it's broken, let me play!

We use a lot of new features in this; your browser seems to have some issues...

It doesn't seem to have JavaScript enabled. This site doesn't work at all without it. Really. Don't know how to enable JS?
It doesn't seem to support HTML5 video, which means that you won't be able to see any of the videos (obviously). Unless stated below, though, transitions should still work. You should strongly consider upgrading.
It doesn't seem to support HTML5 audio, which means you won't be able to hear any of the amazing music. You should strongly consider upgrading.
It doesn't seem to support the @font-face at-rule, which lets us display the Playtime and Gentium fonts used in Katawa Shoujo. Any browser released in the last 2 years or so should support it.
It doesn't seem to support CSS transforms, which means that we won't be able to scale the window or show most transitions. Any browser released in the last 2 years ago should work.
It doesn't seem to support CSS transitions, which means that transitions won't work. Videos should still work though, unless stated above. You should definitely try upgrading.
It might not support SVG filters on HTML content, which means that filters like the sunset in the tea room will display as regular images. Unfortunately, this is only implemented in Firefox now.

I know it's broken, let me play!

- +

- -

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, diff --git a/www/playtime-webfont.svg b/www/playtime-webfont.svg deleted file mode 100644 index f63de50..0000000 --- a/www/playtime-webfont.svg +++ /dev/null @@ -1,229 +0,0 @@ - - - \ No newline at end of file diff --git a/www/playtime-webfont.ttf b/www/playtime-webfont.ttf deleted file mode 100644 index 33917b3..0000000 Binary files a/www/playtime-webfont.ttf and /dev/null differ diff --git a/www/playtime-webfont.woff b/www/playtime-webfont.woff deleted file mode 100644 index 57867e2..0000000 Binary files a/www/playtime-webfont.woff and /dev/null differ diff --git a/www/playtime.ttf b/www/playtime.ttf deleted file mode 100644 index a36000a..0000000 Binary files a/www/playtime.ttf and /dev/null differ diff --git a/www/playtime_bold.ttf b/www/playtime_bold.ttf deleted file mode 100644 index e730c2b..0000000 Binary files a/www/playtime_bold.ttf and /dev/null differ -- cgit v1.2.3-70-g09d2