diff options
-rw-r--r-- | README | 4 | ||||
-rw-r--r-- | TODO | 5 | ||||
-rw-r--r-- | lighttpd.conf | 1 | ||||
-rw-r--r-- | www/css/index.css | 3 | ||||
-rw-r--r-- | www/index.html | 7 | ||||
-rw-r--r-- | www/js/api.js | 96 | ||||
-rw-r--r-- | www/js/html5ks.js | 8 |
7 files changed, 105 insertions, 19 deletions
@@ -2,7 +2,9 @@ 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. +Run nginx.sh to start nginx with appropriate options for development, then connect to localhost:8080. + +lighttpd -f lighttpd.conf should also work, but is not actively tested. 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. @@ -1,8 +1,8 @@ todo ordered by most to least important... ish all of this should (read: must) be completed for a 1.0 release -- menu (doesn't work) -- show command +- menu (doesn't go back up call stack) +- show command (somehow deletes bg) - redo images.js using json including ALL transitions - transitions. ALL THE TRANSITIONS - ltr text reveal (for nvl too) @@ -10,4 +10,5 @@ all of this should (read: must) be completed for a 1.0 release - fix cursor to apply to all document - organize the CSS into a reasonable order - convert characters.js into json and load with html5ks.fetch +- rewrite all the JS, the structure is <redacted>. - remove reference to this from README diff --git a/lighttpd.conf b/lighttpd.conf index a934d1a..c894d65 100644 --- a/lighttpd.conf +++ b/lighttpd.conf @@ -79,3 +79,4 @@ $HTTP["url"] == "/dump/bgm/Stride.ogg" { setenv.add-response-header += ( "X-Cont $HTTP["url"] == "/dump/bgm/The_Student_Council.ogg" { setenv.add-response-header += ( "X-Content-Duration" => "103" ) } $HTTP["url"] == "/dump/bgm/To_Become_One.ogg" { setenv.add-response-header += ( "X-Content-Duration" => "248" ) } $HTTP["url"] == "/dump/bgm/Wiosna.ogg" { setenv.add-response-header += ( "X-Content-Duration" => "70" ) } +# TODO: Add /dump/sfx content duration diff --git a/www/css/index.css b/www/css/index.css index d05e2f4..03f765d 100644 --- a/www/css/index.css +++ b/www/css/index.css @@ -174,3 +174,6 @@ 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 c019183..17ceead 100644 --- a/www/index.html +++ b/www/index.html @@ -2,7 +2,7 @@ <html class="no-js"> <head> <meta charset="utf-8"> - <meta name="viewport" content="width=800, height=600, initial-scale=1, maximum-scale=1"> + <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, minimum-scale=1, user-scalable=no"> <title>Katawa Shoujo</title> <script> window.define = function(factory) { @@ -36,8 +36,10 @@ <li id="audio">It doesn't seem to support <a href="https://en.wikipedia.org/wiki/HTML5_audio">HTML5 audio</a>, which means you won't be able to hear any of the amazing music. <a href="http://caniuse.com/#feat=audio">You should strongly consider upgrading.</a></li> <li id="fontface">It doesn't seem to support <a href="https://developer.mozilla.org/en-US/docs/Web/CSS/@font-face">the @font-face at-rule</a>, which lets us display the Playtime and Gentium fonts used in Katawa Shoujo. <a href="http://caniuse.com/#feat=fontface">Any browser released in the last 2 years or so should support it.</a></li> <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 transitions 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> + <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> + <!-- svg filters aren't actually implemented yet <li id="html-svg-filter">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. <a href="http://caniuse.com/#feat=svg-html">Unfortunately, this is only implemented in Firefox now.</a></li> + --> </ul> <div id="gotit" class="button button-enabled">I know it's broken, let me play!</div> </div> @@ -45,6 +47,7 @@ <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> diff --git a/www/js/api.js b/www/js/api.js index c8c495a..c3c9f48 100644 --- a/www/js/api.js +++ b/www/js/api.js @@ -68,7 +68,7 @@ window.html5ks.api = { return deferred.promise; }, - movie_cutscene: function (vid_src) { + movie_cutscene: function (vid_src, skippable) { var deferred = when.defer(), video = html5ks.elements.video, src = "dump/video/" + vid_src + "."; @@ -87,13 +87,25 @@ window.html5ks.api = { video.style.display = "block"; video.play(); var done = function () { - this.style.display = "none"; - this.pause(); + video.style.display = "none"; + // clear event listeners + var oldVideo = document.getElementById("vid"); + oldVideo.pause(); + var newVideo = video.cloneNode(true); + oldVideo.parentNode.replaceChild(newVideo, oldVideo); + html5ks.elements.video = newVideo; deferred.resolve(); }; - video.addEventListener("click", function (e) { - if (e.button === 0) { - done.call(this); + document.addEventListener("keyup", function keyupListener(e) { + if (e.keyCode === 27) { + done(); + e.preventDefault(); + e.stopPropagation(); + } + }, false); + video.addEventListener("click", function clickListener(e) { + if (e.button === 0 && skippable) { + done(); } }, false); video.addEventListener("ended", done, false); @@ -171,9 +183,11 @@ window.html5ks.api = { }[type]; image = typ.dir + "/" + name + "." + typ.ext; } + var bg = html5ks.elements.bg; if (typeof image == "string") { if (image.substring(0,1) == "#") { - html5ks.elements.bg.style.background = image; + bg.style.background = ""; + bg.style.backgroundColor = image; deferred.resolve(); return deferred.promise; } else { @@ -182,8 +196,9 @@ window.html5ks.api = { } img.onload = function () { console.debug("setting bg " + img.src); - var bg = html5ks.elements.bg; - bg.style.background = "url(" + img.src + ") no-repeat 0 0 / cover black"; + bg.style.background = ""; + bg.style.backgroundImage = "url(" + img.src + ")"; + bg.style.backgroundSize = "cover"; deferred.resolve(); }; img.onerror = function () { @@ -196,13 +211,66 @@ window.html5ks.api = { return deferred.promise; }, - show: function () { + show: function (name, type, location) { var deferred = when.defer(); + var el = document.getElementById(name) || document.createElement("img"); + el.onload = function () { + if (location) { + // calculate position + // we don't actually know how big the image is till we fetch it + var positions = { + left: { xpos: 0.0, xanchor: 0.0, ypos: 1.0, yanchor: 1.0 }, + right: { xpos: 1.0, xanchor: 1.0, ypos: 1.0, yanchor: 1.0 }, + center: { xpos: 0.5, xanchor: 0.5, ypos: 1.0, yanchor: 1.0 }, + truecenter: { xpos: 0.5, xanchor: 0.5, ypos: 0.5, yanchor: 0.5 }, + topleft: { xpos: 0.0, xanchor: 0.0, ypos: 0.0, yanchor: 0.0 }, + topright: { xpos: 1.0, xanchor: 1.0, ypos: 0.0, yanchor: 0.0 }, + top: { xpos: 0.5, xanchor: 0.5, ypos: 0.0, yanchor: 0.0 }, + twoleft: { xpos: 0.3, xanchor: 0.5, ypos: 1.0, yanchor: 1.0 }, + tworight: { xpos: 0.7, xanchor: 0.5, ypos: 1.0, yanchor: 1.0 }, + closeleft: { xpos: 0.25, xanchor: 0.5, ypos: 1.0, yanchor: 1.0 }, + closeright: { xpos: 0.75, xanchor: 0.5, ypos: 1.0, yanchor: 1.0 }, + twoleftoff: { xpos: 0.32, xanchor: 0.5, ypos: 1.0, yanchor: 1.0 }, + tworightoff: { xpos: 0.68, xanchor: 0.5, ypos: 1.0, yanchor: 1.0 }, + centeroff: { xpos: 0.52, xanchor: 0.5, ypos: 1.0, yanchor: 1.0 }, + bgleft: { xpos: 0.4, xanchor: 0.5, ypos: 1.0, yanchor: 1.0 }, + bgright: { xpos: 0.6, xanchor: 0.5, ypos: 1.0, yanchor: 1.0 } + }; + var pos = positions[location]; + el.style.left = pos.xpos * 800 + "px"; + el.style.top = pos.ypos * 600 + "px"; + el.style.marginLeft = "-" + pos.xanchor * el.width + "px"; + el.style.marginTop = "-" + pos.yanchor * el.height + "px"; + el.style.display = "block"; + } + deferred.resolve(); + }; + el.onerror = function () { + // TODO: check if img is really in images.js + deferred.resolve(); + }; + var src = "dump/sprites/" + name + "/" + name + "_" + type + "."; + if (html5ks.persistent.settings.useWebP) { + src += "webp"; + } else { + src += "png"; + } + el.id = name; + el.src = src; + // prevent FOUIPC (flash of incorrectly placed content) + if (location) el.style.display = "none"; + html5ks.elements.show.appendChild(el); deferred.resolve(); return deferred.promise; }, - hide: function () { + hide: function (name) { var deferred = when.defer(); + var show = html5ks.elements.show.children; + for (var i = show.length - 1; i >= 0; i--) { + if (show[i].id === name) { + html5ks.elements.show.removeChild(show[i]); + } + } deferred.resolve(); return deferred.promise; }, @@ -251,7 +319,11 @@ window.html5ks.api = { w = /{w(=\d*\.\d*)?}/.exec(str); if (!char) { - char = { name: name }; + char = { + name: name, + what_prefix: "“", + what_suffix: "”" + }; } if (!extend && char.what_prefix) { text = char.what_prefix + text; diff --git a/www/js/html5ks.js b/www/js/html5ks.js index 8de3c8d..e7f5991 100644 --- a/www/js/html5ks.js +++ b/www/js/html5ks.js @@ -1,4 +1,5 @@ "use strict"; +console.log("HELP") window.html5ks = { data: { script: {} @@ -46,7 +47,8 @@ window.html5ks = { nvl: document.getElementById("nvl"), nvlsay: document.getElementById("nvlsay"), nvlctc: document.getElementById("nvlctc"), - choices: document.getElementById("choices") + choices: document.getElementById("choices"), + show: document.getElementById("show") }; this.elements.audio.music.loop = true; this.elements.audio.ambient.loop = true; @@ -123,9 +125,11 @@ window.html5ks = { if (/MSIE/.test(navigator.userAgent)) { document.getElementById("ie").style.display = "block"; } + /* svg not actually implemented yet if (!(/Firefox/.test(navigator.userAgent))) { document.getElementById("html-svg-filter").style.display = "block"; } + */ for (var i = 0; i < warns.length; i++) { if (window.getComputedStyle(warns[i]).getPropertyValue("display") !== "none") { warn.style.visibility = "visible"; @@ -157,7 +161,7 @@ window.html5ks = { }, start: function () { this.fetch("script", "a1-monday").then(function () { - html5ks.api.movie_cutscene("4ls").then(function () { + html5ks.api.movie_cutscene("4ls", true).then(function () { html5ks.menu.mainMenu(); }); }); |