summaryrefslogtreecommitdiff
diff options
context:
space:
mode:
authorAlex Xu <alex_y_xu@yahoo.ca>2013-07-11 18:42:27 -0400
committerAlex Xu <alex_y_xu@yahoo.ca>2013-07-11 18:43:21 -0400
commit9ef324d2d2e40f919de9b7d7e1852affa97e0e91 (patch)
treed1ad86610afae719a9831e46bae5dcdcab437fcb
parent099c1c466fe02f55f7a4a2ad7bb985f457f8da1a (diff)
downloadhtml5ks-9ef324d2d2e40f919de9b7d7e1852affa97e0e91.tar.xz
html5ks-9ef324d2d2e40f919de9b7d7e1852affa97e0e91.zip
do more work
Diffstat
-rw-r--r--README4
-rw-r--r--TODO5
-rw-r--r--lighttpd.conf1
-rw-r--r--www/css/index.css3
-rw-r--r--www/index.html7
-rw-r--r--www/js/api.js96
-rw-r--r--www/js/html5ks.js8
7 files changed, 105 insertions, 19 deletions
diff --git a/README b/README
index 8693448..20c6d84 100644
--- a/README
+++ b/README
@@ -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.
diff --git a/TODO b/TODO
index 8c67fc8..b1ff54b 100644
--- a/TODO
+++ b/TODO
@@ -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();
});
});
generated by cgit v1.2.3-70-g09d2 (git 2.47.0) at 2024-11-22 07:51:38 +0000