summaryrefslogtreecommitdiff
diff options
context:
space:
mode:
Diffstat
-rw-r--r--www/css/index.css8
-rw-r--r--www/js/api.js27
-rw-r--r--www/js/html5ks.js136
-rw-r--r--www/js/menu.js31
4 files changed, 122 insertions, 80 deletions
diff --git a/www/css/index.css b/www/css/index.css
index 7b671c2..5b12d77 100644
--- a/www/css/index.css
+++ b/www/css/index.css
@@ -28,7 +28,7 @@ body {
font: 22px/27px Playtime, sans-serif;
}
h2 {
- font: 20px/28px Playtime; /* yes, h2 has *smaller* font */
+ font: 20px/24px Playtime; /* yes, h2 has *smaller* font */
font-weight: bold;
}
@@ -106,15 +106,15 @@ html.no-js #gotit {
-webkit-backface-visibility: hidden;
backface-visibility: hidden;
}
-#container, #vid.scale {
+#container, #vid {
top: 50%;
left: 50%;
-}
-#container {
width: 800px;
height: 600px;
margin-top: -300px;
margin-left: -400px;
+}
+#container {
overflow: hidden;
}
#show img {
diff --git a/www/js/api.js b/www/js/api.js
index 43692cf..295b472 100644
--- a/www/js/api.js
+++ b/www/js/api.js
@@ -15,13 +15,17 @@ window.html5ks.api = {
var deferred = when.defer(),
audio = html5ks.elements.audio[channel],
step = (target - audio.volume) / (delay * 20);
- var f = setInterval(function () {
- // clamp new volume 0-1
- audio.volume = Math.min(Math.max(audio.volume + step, 0), 1);
- if (audio.volume === 0 || audio.volume === 1) {
- clearInterval(f);
- }
- }, 50);
+ if (!delay) {
+ audio.volume = target;
+ } else {
+ var f = setInterval(function () {
+ // clamp new volume 0-1
+ audio.volume = Math.min(Math.max(audio.volume + step, 0), 1);
+ if (audio.volume === 0 || audio.volume === 1) {
+ clearInterval(f);
+ }
+ }, 50);
+ }
deferred.resolve();
return deferred.promise;
},
@@ -36,7 +40,7 @@ window.html5ks.api = {
html5ks.elements.audio[channel] = audio;
audio.src = "dump/" + (channel === "music" ? "bgm/" + html5ks.data.music[name] + ".ogg" : html5ks.data.sfx[name]);
audio.load();
- var volume = html5ks.persistent.settings[channel + "Volume"];
+ var volume = html5ks.persistent[channel + "Volume"];
audio.volume = fade ? 0 : volume;
audio.play();
audio.onplaying = function () {
@@ -86,6 +90,7 @@ window.html5ks.api = {
video.load();
video.style.display = "block";
+ video.volume = html5ks.persistent.musicVolume;
video.play();
var done = function () {
video.style.display = "none";
@@ -119,7 +124,7 @@ window.html5ks.api = {
iscene: function (target, is_h, is_end) {
var deferred = when.defer(),
- label = html5ks.data.script[html5ks.persistent.settings.language + "_" + target],
+ label = html5ks.data.script[html5ks.persistent.language + "_" + target],
i = 0;
(function run(ret) {
if (label[i]) {
@@ -252,7 +257,7 @@ window.html5ks.api = {
image = {image: image};
}
var src = "";
- if (html5ks.persistent.settings.useWebP) {
+ if (html5ks.persistent.useWebP) {
src = image.image.replace(/\.[a-z]+$/, ".webp");
} else {
src = image.image;
@@ -383,7 +388,7 @@ window.html5ks.api = {
if (html5ks.state.skip || str.indexOf("{nw}") > -1) {
html5ks.next();
} else if (html5ks.state.auto) {
- setTimeout(html5ks.next, 1000 + html5ks.persistent.settings.autospeed * text.length);
+ setTimeout(html5ks.next, 1000 + html5ks.persistent.autospeed * text.length);
}
}
return deferred.promise;
diff --git a/www/js/html5ks.js b/www/js/html5ks.js
index 0c2c1f7..42542fd 100644
--- a/www/js/html5ks.js
+++ b/www/js/html5ks.js
@@ -3,9 +3,9 @@ window.html5ks = {
data: {
script: {}
},
- persistent: {
- seen_scenes: {},
- settings: {
+ persistent: {},
+ init: function () {
+ var defaultPersistent = {
fade: 100,
gotit: false,
hdisable: false,
@@ -20,6 +20,22 @@ window.html5ks = {
musicVolume: 1,
sfxVolume: 1,
language: "en"
+ };
+ var loaded = localStorage.persistent ? JSON.parse(localStorage.persistent) : {};
+ for (var k in defaultPersistent) {
+ (function () {
+ var v = typeof loaded[k] === "undefined" ? defaultPersistent[k] : loaded[k];
+ Object.defineProperty(html5ks.persistent, k, {
+ get: function () {
+ return v;
+ },
+ set: function (value) {
+ v = value;
+ localStorage.persistent = JSON.stringify(html5ks.persistent);
+ },
+ enumerable: true
+ });
+ }());
}
},
store: {
@@ -53,18 +69,9 @@ window.html5ks = {
show: document.getElementById("show")
};
},
- load: function () {
- if (localStorage.persistent) {
- this.persistent = JSON.parse(localStorage.persistent);
- this.loaded = true;
- }
- },
- save: function () {
- localStorage.persistent = JSON.stringify(this.persistent);
- },
scale: function () {
- if (html5ks.persistent.settings.scaleAll) {
- var newScale = 1;
+ var newScale = 1;
+ if (html5ks.persistent.scaleAll) {
var height = document.documentElement.clientHeight,
width = document.documentElement.clientWidth;
if (height / width <= 0.75) { // widescreen
@@ -72,39 +79,54 @@ window.html5ks = {
} else {
newScale = width / 800;
}
+ }
- var container = html5ks.elements.container;
- container.style.webkitTransform = "scale(" + newScale + ")";
- container.style.mozTransform = "scale(" + newScale + ")";
- container.style.transform = "scale(" + newScale + ")";
- 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";
- if (el.className.indexOf("scale") === -1) {
- el.className += " scale";
- }
- };
+ var container = html5ks.elements.container;
+ container.style.webkitTransform = "scale(" + newScale + ")";
+ container.style.mozTransform = "scale(" + newScale + ")";
+ container.style.transform = "scale(" + newScale + ")";
+ if (container.className.indexOf("scale") === -1) {
+ container.className += " scale";
+ }
- if (html5ks.persistent.settings.scaleVideo) {
- applyScale(html5ks.elements.video, newScale);
+ 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";
+ if (el.className.indexOf("scale") === -1) {
+ el.className += " scale";
}
+ };
+
+ if (html5ks.persistent.scaleVideo) {
+ applyScale(html5ks.elements.video, newScale);
}
},
- fullscreen: function () {
- var all = html5ks.elements.all;
- if (all.requestFullscreen) {
- all.requestFullscreen();
- } else if (all.mozRequestFullScreen) {
- all.mozRequestFullScreen();
- } else if (all.webkitRequestFullscreen) {
- all.webkitRequestFullscreen();
+ fullscreen: function (onoff) {
+ if (onoff !== false) {
+ var all = html5ks.elements.all;
+ if (all.requestFullscreen) {
+ all.requestFullscreen();
+ } else if (all.mozRequestFullScreen) {
+ all.mozRequestFullScreen();
+ } else if (all.webkitRequestFullscreen) {
+ all.webkitRequestFullscreen();
+ } else {
+ return false;
+ }
+ } else {
+ if (document.requestFullscreen) {
+ document.requestFullscreen();
+ } else if (document.mozCancelFullScreen) {
+ document.mozCancelFullScreen();
+ } else if (document.webkitCancelFullscreen) {
+ document.webkitCancelFullscreen();
+ } else {
+ return false;
+ }
}
+ return true;
},
initEvents: function () {
window.onresize = html5ks.scale;
@@ -114,22 +136,31 @@ window.html5ks = {
window.addEventListener("dragstart", function (e) {
e.preventDefault();
}, false);
- if (html5ks.persistent.settings.fullscreen) {
+ if (html5ks.persistent.fullscreen) {
window.addEventListener("click", function click() {
window.removeEventListener("click", click, false);
html5ks.fullscreen();
}, false);
}
+ var fullscreenchange = function () {
+ if (!(document.fullscreenElement || document.mozFullScreenElement || document.webkitFullscreenElement)) {
+ html5ks.persistent.fullscreen = false;
+ document.getElementById("fullscreen").checked = false;
+ }
+ };
+ document.addEventListener("mozfullscreenchange", fullscreenchange, false);
+ document.addEventListener("webkitfullscreenchange", fullscreenchange, false);
+ document.addEventListener("fullscreenchange", fullscreenchange, false);
},
warnUnsupported: function () {
- if (!html5ks.persistent.settings.gotit) {
+ if (!html5ks.persistent.gotit) {
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;
+ html5ks.persistent.gotit = true;
html5ks.start();
}, false);
var warns = document.getElementById("warns").children;
@@ -146,7 +177,6 @@ window.html5ks = {
},
onload: function () {
this.initElements();
- this.load();
this.scale();
this.initEvents();
if (!this.warnUnsupported()) {
@@ -154,23 +184,13 @@ window.html5ks = {
}
this.api.init();
this.menu.init();
- if (this.persistent.settings.fullscreen) {
+ if (this.persistent.fullscreen) {
document.body.addEventListener("click", function onclick() {
this.removeEventListener("click", onclick, false);
html5ks.fullscreen();
}, false);
}
},
- winload: function () {
- if (!this.loaded) {
- this.persistent.settings.useWebP = Modernizr.webp;
- }
- if (!Modernizr.webp && this.persistent.settings.useWebP) {
- var webpjs = document.createElement("script");
- webpjs.src = "js/webpjs-0.0.2.min.js";
- document.head.appendChild(webpjs);
- }
- },
start: function () {
this.fetch("script").then(function () {
html5ks.api.movie_cutscene("4ls", true).then(function () {
@@ -214,9 +234,7 @@ window.html5ks = {
return deferred.promise;
}
};
+html5ks.init();
document.addEventListener("DOMContentLoaded", function () {
html5ks.onload();
}, false);
-window.addEventListener("onload", function () {
- html5ks.winload();
-}, false);
diff --git a/www/js/menu.js b/www/js/menu.js
index cb29675..1a3e712 100644
--- a/www/js/menu.js
+++ b/www/js/menu.js
@@ -37,25 +37,44 @@
initOptions: function () {
var options = document.getElementsByClassName("option"),
- values = html5ks.persistent.settings;
+ values = html5ks.persistent;
- options[0].parentNode.parentNode.addEventListener("change", function (e) {
+ if (!html5ks.persistent.scaleAll) {
+ document.getElementById("scaleVideo").parentNode.className += " button-disabled";
+ }
+
+ var change = function (e) {
var target = e.target;
- values[target.id] = typeof target.checked !== "undefined" ? target.checked : target.value;
+ values[target.id] = target.type === "checkbox" ? target.checked : target.value;
switch (target.id) {
case "fullscreen":
- html5ks.fullscreen();
+ if (target.checked) {
+ html5ks.fullscreen();
+ } else {
+ html5ks.fullscreen(false);
+ }
break;
case "scaleAll":
+ var scaleVideo = document.getElementById("scaleVideo");
+ if (!target.checked) {
+ scaleVideo.checked = false;
+ scaleVideo.parentNode.className += " button-disabled";
+ } else {
+ scaleVideo.checked = true;
+ scaleVideo.parentNode.className = scaleVideo.parentNode.className.replace("button-disabled", "");
+ }
case "scaleVideo":
html5ks.scale();
break;
case "musicVolume":
case "sfxVolume":
- html5ks.elements.audio[target.id.replace("Volume", "")].volume = target.value;
+ html5ks.api.set_volume(target.value, 0, target.id.replace("Volume", ""))
break;
}
- }, false);
+ };
+
+ options[0].parentNode.parentNode.addEventListener("change", change, false);
+ options[0].parentNode.parentNode.addEventListener("input", change, false);
for (var i = options.length - 1; i >= 0; i--) {
var option = options[i];
switch (option.type) {
generated by cgit v1.2.3-70-g09d2 (git 2.47.0) at 2024-11-25 16:03:44 +0000