summaryrefslogtreecommitdiff
diff options
context:
space:
mode:
authorAlex Xu <alex_y_xu@yahoo.ca>2014-01-24 18:07:37 -0500
committerAlex Xu <alex_y_xu@yahoo.ca>2014-01-24 18:07:37 -0500
commit3a367a00e45880de6b5472c07ce65043ab83eae7 (patch)
treed361c4212e1a4745ebd0ade192769a7cf50a3150
parent941668dbb44260573f6c7d590e120a986ac99c62 (diff)
parent4dc2aa175624a4d29e4c4e8d3881461df093d13f (diff)
downloadhtml5ks-3a367a00e45880de6b5472c07ce65043ab83eae7.tar.xz
html5ks-3a367a00e45880de6b5472c07ce65043ab83eae7.zip
Merge branch 'master' of happinessforme.com:html5ks
Conflicts: Makefile www/js/api.js
-rw-r--r--Makefile74
-rw-r--r--README12
-rw-r--r--nginx.inc.conf12
-rw-r--r--www/js/api.js103
-rw-r--r--www/js/html5ks.js6
-rw-r--r--www/warn.html15
-rw-r--r--www/warned.html10
7 files changed, 139 insertions, 93 deletions
diff --git a/Makefile b/Makefile
index 50b25ee..5c7e09e 100644
--- a/Makefile
+++ b/Makefile
@@ -1,12 +1,13 @@
-null :=
-SPACE := $(null) $(null)
+null :=
+SPACE := $(null) $(null)
FFMPEG ?= ffmpeg
-FFMPEG += -v warning $(FFMPEGFLAGS)
+FFMPEG += -v warning -y
OPUSENC ?= opusenc
ZOPFLIPNG ?= zopflipng
-OPTIPNG ?= optipng
-JPEGOPTIM ?= jpegoptim
+DEFLOPT ?= wine DeflOpt
+DEFLUFF ?= defluff
+PNGQUANT ?= pngquant
CWEBP ?= cwebp
CWEBP += -short -alpha_cleanup
WEBPMUX ?= webpmux
@@ -23,19 +24,26 @@ all: video audio images js
VIDEO := $(wildcard $(DUMP)/video/*.mkv)
MP4 := $(patsubst %.mkv,%.mp4,$(VIDEO))
WEBM := $(patsubst %.mkv,%.webm,$(VIDEO))
+VP9 := $(patsubst %.mkv,%.vp9.webm,$(VIDEO))
OGV := $(patsubst %.mkv,%.ogv,$(VIDEO))
-CVIDEO := $(MP4) $(WEBM) $(OGV)
+CVIDEO := $(MP4) $(WEBM) $(VP9) $(OGV)
video: $(CVIDEO)
+%.y4m: %.mkv
+ $(FFMPEG) -i "$<" -c:a copy "$@"
+
%.mp4: %.mkv
- $(FFMPEG) -i $< -c:v libx264 -preset slower -tune animation -c:a libfdk_aac $@
+ $(FFMPEG) -i "$<" -c:v libx264 -preset slower -tune animation -c:a libfdk_aac "$@"
%.webm: %.mkv
- $(FFMPEG) -i $< -c:v libvpx -crf 15 -b:v 1M -c:a copy $@
+ $(FFMPEG) -i "$<" -crf 10 -b:v 1M -c:a copy "$@"
+
+%.vp9.webm: %.mkv
+ $(FFMPEG) -i "$<" -strict -2 -c:v libvpx-vp9 -crf 8 -b:v 1M -c:a libopus -vbr 1 -b:a 64k "$@"
%.ogv: %.mkv
- $(FFMPEG) -i $< -c:v libtheora -qscale:v 6 -c:a copy $@
+ $(FFMPEG) -i "$<" -c:v libtheora -qscale:v 10 -c:a copy "$@"
# === AUDIO ===
@@ -48,17 +56,17 @@ CAUDIO := $(OPUS) $(M4A)
audio: $(CAUDIO)
%.wav: %.ogg
- $(FFMPEG) -i $< -c:a pcm_s16le $@
+ $(FFMPEG) -i "$<" -c:a pcm_s16le "$@"
%.opus: %.wav
- $(OPUSENC) --bitrate 64 $< $@
+ $(FFMPEG) -i "$<" -c:a libopus -vbr 1 -b:a 64k "$@"
%.m4a: %.wav
- $(FFMPEG) -i $< -c:a libfdk_aac -vbr 2 $@
+ $(FFMPEG) -i "$<" -c:a libfdk_aac -vbr 1 "$@"
# === IMAGES ===
-PNG := $(shell find $(DUMP) -name '*.png')
+PNG := $(shell find $(DUMP) -name '*.png' ! -name 'ctc_strip.png')
JPG := $(shell find $(DUMP) -name '*.jpg')
WEBP := $(patsubst %.png,%.webp,$(PNG)) \
$(patsubst %.jpg,%.webp,$(JPG))
@@ -69,34 +77,44 @@ CTC_ANIM := $(DUMP)/ui/ctc_anim.png $(DUMP)/ui/ctc_anim.webp
images: $(WEBP) $(CTC_ANIM) www/favicon.ico
+$(DUMP)/ui/ctc_strip.webp: $(DUMP)/ui/ctc_strip.png
+ :
+
%.webp: %.png
- $(ZOPFLIPNG) -m -y $< $<
- $(CWEBP) -q 99 -m 6 $< -o $@
+ $(PNGQUANT) --force --speed 1 --ext .png "$<"
+ $(ZOPFLIPNG) -m -y "$<" "$<"
+ $(DEFLOPT) "$<"
+ $(DEFLUFF) < "$<" > "$<".tmp
+ mv -f "$<".tmp "$<"
+ $(CWEBP) -q 99 -m 6 "$<" -o "$@"
%.webp: %.jpg
- $(JPEGOPTIM) --strip-all $<
- $(CWEBP) -q 90 -m 6 $< -o $@
+ $(CWEBP) -q 90 -m 6 "$<" -o "$@"
www/favicon.ico: $(DUMP)/ui/icon.png
- $(CONVERT) $< -resize 256x256 -transparent white $@
+ $(CONVERT) "$<" -resize 256x256 -transparent white "$@"
$(DUMP)/ui/bt-cf-unchecked.webp $(DUMP)/ui/bt-cf-checked.webp: %.webp: %.png
- $(CONVERT) -trim $< $<
- $(OPTIPNG) -o7 $<
- $(ZOPFLIPNG) -m -y $< $<
- $(CWEBP) -q 99 -m 6 $< -o $@
+ $(CONVERT) -trim "$<" "$<"
+ $(PNGQUANT) --force --speed 1 --ext .png "$<"
+ $(ZOPFLIPNG) -m -y "$<" "$<"
+ $(DEFLOPT) "$<"
+ $(DEFLUFF) < "$<" > "$<".tmp
+ mv -f "$<".tmp "$<"
+ $(CWEBP) -q 99 -m 6 "$<" -o "$@"
$(DUMP)/ui/ctc_strip-0.png: $(CTC_ANIM_SRC)
- $(CONVERT) $< -crop 16x16 $(patsubst %.png,%*.png,$<)
+ $(CONVERT) "$<" -crop 16x16 $(patsubst %.png,%*.png,$<)
+ $(PNGQUANT) --force --speed 1 --ext .png "$<"
$(DUMP)/ui/ctc_strip-%.png: $(CTC_ANIM_SRC) $(DUMP)/ui/ctc_strip-0.png
- @touch $@
+ @touch "$@"
$(DUMP)/ui/ctc_anim.png: $(CTC_ANIM_TMP)
- $(APNGASM) $@ $^ 3 100
+ $(APNGASM) "$@" $^ 3 100
$(DUMP)/ui/ctc_anim.webp: $(CTC_ANIM_TMP_WEBP)
- $(WEBPMUX) -frame $(subst $(SPACE), +30 -frame ,$^) +30 -loop 0 -o $@
+ $(WEBPMUX) -frame $(subst $(SPACE), +30 -frame ,$^) +30 -loop 0 -o "$@"
# === JS ===
@@ -105,7 +123,7 @@ JS := www/js/html5ks.js www/js/menu.js www/js/api.js www/js/play.js www/js/image
js: www/js/all.min.js
www/js/all.min.js: $(JS)
- $(UGLIFYJS) $^ -o $@ -p 2 -m -c drop_debugger=false
+ $(UGLIFYJS) $^ -o "$@" --source-map "$@".map --source-map-url ./all.min.js.map -p 2 -m -c drop_debugger=false
# === MISC ===
@@ -116,7 +134,7 @@ jshint: $(JS)
jshint $^
space:
- find $(DUMP) \( -name '*.wav' -o -name '*.mkv' -o -path "$(DUMP)/font*" \) -delete
+ find $(DUMP) \( -name '*.wav' -o -name '*.mkv' -o -path "$(DUMP)/font*" -o -name 'ctc_strip-*.*' \) -print -delete
watch:
while inotifywait -r -e modify,delete,move --exclude="^\./\.git" --exclude="\.swp$$" .; do \
diff --git a/README b/README
index 179656c..5c273f8 100644
--- a/README
+++ b/README
@@ -6,7 +6,16 @@ This is a WIP HTML5 implementation of the game Katawa Shoujo. [0]
- Bash
- ffmpeg with fdk-aac, libtheora, libvpx, libx264
- opusenc from opus-tools
+- TruePNG
+- DeflOpt
+- defluff
+- pngquant
+- recommended: jpegmini
+- jpegrescan
- cwebp and webpmux from libwebp
+- ImageMagick
+- apngasm
+- uglifyjs
=== Recommended ===
- nginx
@@ -19,7 +28,8 @@ This is a WIP HTML5 implementation of the game Katawa Shoujo. [0]
0. Get Katawa Shoujo.
1. Copy *.rpyc from Katawa Shoujo/game into unrpyc/ directory.
2. Extract files from Katawa Shoujo/game/data.rpa with an rpa extractor, e.g. unrpa. Put files in www/dump.
-3. Run setup.sh. [2]
+3. Install prerequisites, download DeflOpt and defluff and place exes in this directory.
+4. Run setup.sh. [2]
4. Run nginx.sh to start nginx, then navigate to localhost:8080 in your browser.
-- or --
diff --git a/nginx.inc.conf b/nginx.inc.conf
index b795a1c..acab0ef 100644
--- a/nginx.inc.conf
+++ b/nginx.inc.conf
@@ -14,19 +14,19 @@ location ~ ^/(css/font|js/lib)/ {
location / {
set $warned NO;
if ($http_cookie ~ "warned") {
- set $warned YES;
+ set $warned YES;
}
if ($args ~ "warned") {
- set $warned YES;
+ set $warned YES;
}
if ($warned = NO) {
- return 307 /warn.html;
+ return 307 /warn.html;
}
}
-location /setcookie.html {
+location /warned.ngx {
add_header Set-Cookie "warned=1; Expires=Tue, 19 Jan 2038 00:00:00 GMT; HttpOnly";
- return 301 /;
+ return 301 "/warned.html?$args&language=$http_accept_language";
}
location /warn.html {
@@ -40,3 +40,5 @@ location /robots.txt {
expires 5s;
add_header Cache-Control public;
add_header X-UA-Compatible "IE=edge";
+
+# vim:ft=nginx:
diff --git a/www/js/api.js b/www/js/api.js
index 84cc881..74971ae 100644
--- a/www/js/api.js
+++ b/www/js/api.js
@@ -33,6 +33,41 @@ window.html5ks.api = new (function () {
return when.resolve();
},
+ _loadMedia: function (el, src, types) {
+ var deferred = when.defer();
+ var i = 0;
+ var _nextType = function () {
+ for (; i < types.length; i++) {
+ var type = types[i];
+ if (el.canPlayType(type[0])) {
+ el.src = src + "." + type[1];
+ el.load();
+ return true;
+ }
+ }
+ return false;
+ };
+
+ _nextType();
+
+ el.oncanplaythrough = function () {
+ el.play();
+ };
+
+ el.onerror = function (e) {
+ if (e.code === e.MEDIA_ERR_SRC_NOT_SUPPORTED) {
+ if (!_nextType()) {
+ console.log("no audio formats supported");
+ deferred.resolve();
+ }
+ } else {
+ console.error("unknown audio error");
+ deferred.resolve();
+ }
+ };
+ return deferred.promise;
+ },
+
play: function (channel, name, ignore, fade) {
this.stop(channel);
var deferred = when.defer(),
@@ -55,26 +90,6 @@ window.html5ks.api = new (function () {
volume = html5ks.persistent.sfxVolume;
}
- var types = ["opus", "ogg", "m4a", "wav"];
-
- var setNextType = function (i) {
- for (; i < types.length; i++) {
- if (Modernizr.audio[types[i]]) {
- audio.src = src + "." + types[i];
- audio.load();
- audio.volume = fade ? 0 : volume;
- return i;
- }
- }
- return null;
- };
-
- var i;
-
- audio.addEventListener("canplaythrough", function canplaythrough() {
- audio.removeEventListener("canplaythrough", canplaythrough, false);
- audio.play();
- });
audio.addEventListener("playing", function playing() {
audio.removeEventListener("playing", playing, false);
if (fade) {
@@ -82,21 +97,15 @@ window.html5ks.api = new (function () {
}
deferred.resolve();
}, false);
- audio.onerror = function (e) {
- if (e.code === e.MEDIA_ERR_SRC_NOT_SUPPORTED) {
- i = setNextType(++i);
- if (!i) {
- console.error("No media formats appear to be supported.");
- console.error(e);
- deferred.resolve();
- }
- } else {
- console.error(e);
- deferred.resolve();
- }
- };
- i = setNextType(0);
+ audio.volume = fade ? 0 : volume;
+ this._loadMedia(audio, src, [
+ ['audio/ogg; codecs="opus"', "opus"],
+ ['audio/ogg; codecs="vorbis"', "ogg"],
+ ['audio/x-m4a', "m4a"],
+ ['audio/aac', "aac"],
+ ['audio/wav; codecs="1"', "wav"]]).then(function () { deferred.resolve(); });
+ // TODO: fix this garbage -------------------------------^
return deferred.promise;
},
@@ -123,7 +132,7 @@ window.html5ks.api = new (function () {
movie_cutscene: function (vid_src, skippable) {
var deferred = when.defer(),
video = html5ks.elements.video,
- src = "dump/video/" + vid_src + ".";
+ src = "dump/video/" + vid_src;
this.stop("all");
clearInterval(html5ks._nextTimeout);
@@ -132,22 +141,15 @@ window.html5ks.api = new (function () {
return deferred.resolve();
}
- var types = {
- "webm": "webm",
- "ogg": "ogv",
- "h264": "mp4"
- };
- for (var type in types) {
- if (Modernizr.video[type]) {
- video.src = src + types[type];
- break;
- }
- }
-
- video.load();
+ this._loadMedia(video, src, [
+ ['video/webm; codecs="vp9,opus"', "vp9.webm"],
+ ['video/webm; codecs="vp8,vorbis"', "webm"],
+ ['video/ogg; codecs="theora,vorbis"', "ogv"],
+ // TODO: check that this is the right codec
+ ['video/mp4; codecs="avc1.42E01E,mp4a.40.2"']]).then(function () { deferred.resolve(); });
+ // TODO: fix this garbage
video.style.display = "block";
video.volume = html5ks.persistent.musicVolume;
- video.play();
var done = function () {
video.style.display = "none";
video.pause();
@@ -166,9 +168,6 @@ window.html5ks.api = new (function () {
}
};
video.onended = done;
- video.onerror = function () {
- deferred.reject(this.error);
- };
return deferred.promise;
},
diff --git a/www/js/html5ks.js b/www/js/html5ks.js
index e1c0bd7..093505e 100644
--- a/www/js/html5ks.js
+++ b/www/js/html5ks.js
@@ -19,7 +19,11 @@ window.html5ks = {
sfxVolume: 1,
language: "en"
};
- var loaded = localStorage.persistent ? JSON.parse(localStorage.persistent) : {};
+ try {
+ var loaded = localStorage.persistent ? JSON.parse(localStorage.persistent) : {};
+ } catch (e) {
+ var loaded = {};
+ }
var defProp = function (v) {
Object.defineProperty(html5ks.persistent, k, {
get: function () {
diff --git a/www/warn.html b/www/warn.html
index 5d41083..5c7c898 100644
--- a/www/warn.html
+++ b/www/warn.html
@@ -6,13 +6,16 @@
<body>
<p>Okay, before we start, we need to go through a few things first.</p>
<p>If you don't know what Katawa Shoujo is, see <a href="http://www.katawa-shoujo.com/">http://www.katawa-shoujo.com/</a>, then come back.</p>
- <p>The full version of Katawa Shoujo contains adult material.<br>
- Promise that you are over <b>18 years</b> old and that you will not make the material available to persons below that age.
- </p>
+ <p>There's like, a little bit of... inappropriate content, so we have to make you promise you're over 18.</p>
+ <p>If you don't want to see any, er, explicit content, hit the appropriate checkbox at the bottom of the page.</p>
<p>Also, please don't bother the original developers on the forums or IRC about bugs in this. This is entirely unofficial and not controlled by them whatsoever.<br>
- This includes typos, graphical misplacement, downtime, and any other glitches of any sort. Bug me instead: <a href="https://bugzilla.happinessforme.com/">https://bugzilla.happinessforme.com/</a>, or use the official distribution until HTML5KS is feature-complete.
+ This includes missing features, typos, downtime, and any other glitches of any sort. Bug me instead: <a href="https://bugzilla.happinessforme.com/">https://bugzilla.happinessforme.com/</a>, or use the official distribution until HTML5KS is feature-complete.
</p>
- <p>FYI, this site sets a single anonymous cookie (warned=1) so that you won't have to keep seeing this page. It also sets localStorage to keep your settings and saves (when that's implemented). This stays on your computer and never goes anywhere. If you live in the EU, please don't sue me.</p>
- <p><a href="setcookie.html">OK? Great.</a></p>
+ <p>FYI, this site sets a single anonymous cookie (warned=1) so that you won't have to keep seeing this page. It also sets localStorage to keep your settings and saves. The latter always stays on your computer and never goes anywhere. If you live in the EU, please don't sue me.</p>
+ <form method="GET" action="warned.ngx">
+ <p><input type="checkbox" name="hdisable"><label for="hdisable">Disable adult content</label>
+ <br>
+ <input type="submit" value="Let's go!">
+ </form>
</body>
</html>
diff --git a/www/warned.html b/www/warned.html
new file mode 100644
index 0000000..5d44d7c
--- /dev/null
+++ b/www/warned.html
@@ -0,0 +1,10 @@
+<!DOCTYPE html>
+<html><head>
+<script>
+localStorage.persistent = {
+ hdisable: location.search.indexOf("hdisable=on") > -1,
+ language: location.search.search("language=.*[=,]en") > -1 ? "en" : "fr"
+};
+location.replace("./");
+</script>
+</head><body>If you're seeing this, something's gone wrong. Go back and report a bug.</body></html>