summaryrefslogtreecommitdiff
path: root/www
diff options
context:
space:
mode:
Diffstat (limited to 'www')
-rw-r--r--www/css/font/GentiumPlus.svg (renamed from www/css/GentiumPlus.svg)0
-rw-r--r--www/css/font/GentiumPlus.ttf (renamed from www/css/GentiumPlus.ttf)bin32496 -> 32496 bytes
-rw-r--r--www/css/font/GentiumPlus.woff (renamed from www/css/GentiumPlus.woff)bin15144 -> 15144 bytes
-rw-r--r--www/css/font/PlaytimeWithHotToddies.svg (renamed from www/css/PlaytimeWithHotToddies.svg)0
-rw-r--r--www/css/font/PlaytimeWithHotToddies.ttf (renamed from www/css/PlaytimeWithHotToddies.ttf)bin46488 -> 46488 bytes
-rw-r--r--www/css/font/PlaytimeWithHotToddies.woff (renamed from www/css/PlaytimeWithHotToddies.woff)bin29924 -> 29924 bytes
-rw-r--r--www/css/font/gentium.ttf (renamed from www/css/gentium.ttf)bin362664 -> 362664 bytes
-rw-r--r--www/css/font/playtime-webfont.svg (renamed from www/css/playtime-webfont.svg)0
-rw-r--r--www/css/font/playtime-webfont.ttf (renamed from www/css/playtime-webfont.ttf)bin95952 -> 95952 bytes
-rw-r--r--www/css/font/playtime-webfont.woff (renamed from www/css/playtime-webfont.woff)bin55584 -> 55584 bytes
-rw-r--r--www/css/font/playtime.ttf (renamed from www/css/playtime.ttf)bin71220 -> 71220 bytes
-rw-r--r--www/css/font/playtime_bold.ttf (renamed from www/css/playtime_bold.ttf)bin47916 -> 47916 bytes
-rw-r--r--www/css/index.css68
-rw-r--r--www/index.html63
-rw-r--r--www/js/api.js44
-rw-r--r--www/js/html5ks.js41
-rw-r--r--www/js/menu.js33
17 files changed, 191 insertions, 58 deletions
diff --git a/www/css/GentiumPlus.svg b/www/css/font/GentiumPlus.svg
index 78dca99..78dca99 100644
--- a/www/css/GentiumPlus.svg
+++ b/www/css/font/GentiumPlus.svg
diff --git a/www/css/GentiumPlus.ttf b/www/css/font/GentiumPlus.ttf
index c27adb5..c27adb5 100644
--- a/www/css/GentiumPlus.ttf
+++ b/www/css/font/GentiumPlus.ttf
Binary files differ
diff --git a/www/css/GentiumPlus.woff b/www/css/font/GentiumPlus.woff
index 5cbe4c0..5cbe4c0 100644
--- a/www/css/GentiumPlus.woff
+++ b/www/css/font/GentiumPlus.woff
Binary files differ
diff --git a/www/css/PlaytimeWithHotToddies.svg b/www/css/font/PlaytimeWithHotToddies.svg
index 820e79b..820e79b 100644
--- a/www/css/PlaytimeWithHotToddies.svg
+++ b/www/css/font/PlaytimeWithHotToddies.svg
diff --git a/www/css/PlaytimeWithHotToddies.ttf b/www/css/font/PlaytimeWithHotToddies.ttf
index 01835e8..01835e8 100644
--- a/www/css/PlaytimeWithHotToddies.ttf
+++ b/www/css/font/PlaytimeWithHotToddies.ttf
Binary files differ
diff --git a/www/css/PlaytimeWithHotToddies.woff b/www/css/font/PlaytimeWithHotToddies.woff
index d745c54..d745c54 100644
--- a/www/css/PlaytimeWithHotToddies.woff
+++ b/www/css/font/PlaytimeWithHotToddies.woff
Binary files differ
diff --git a/www/css/gentium.ttf b/www/css/font/gentium.ttf
index a8c1756..a8c1756 100644
--- a/www/css/gentium.ttf
+++ b/www/css/font/gentium.ttf
Binary files differ
diff --git a/www/css/playtime-webfont.svg b/www/css/font/playtime-webfont.svg
index f63de50..f63de50 100644
--- a/www/css/playtime-webfont.svg
+++ b/www/css/font/playtime-webfont.svg
diff --git a/www/css/playtime-webfont.ttf b/www/css/font/playtime-webfont.ttf
index 33917b3..33917b3 100644
--- a/www/css/playtime-webfont.ttf
+++ b/www/css/font/playtime-webfont.ttf
Binary files differ
diff --git a/www/css/playtime-webfont.woff b/www/css/font/playtime-webfont.woff
index 57867e2..57867e2 100644
--- a/www/css/playtime-webfont.woff
+++ b/www/css/font/playtime-webfont.woff
Binary files differ
diff --git a/www/css/playtime.ttf b/www/css/font/playtime.ttf
index a36000a..a36000a 100644
--- a/www/css/playtime.ttf
+++ b/www/css/font/playtime.ttf
Binary files differ
diff --git a/www/css/playtime_bold.ttf b/www/css/font/playtime_bold.ttf
index e730c2b..e730c2b 100644
--- a/www/css/playtime_bold.ttf
+++ b/www/css/font/playtime_bold.ttf
Binary files differ
diff --git a/www/css/index.css b/www/css/index.css
index 7818403..23acff5 100644
--- a/www/css/index.css
+++ b/www/css/index.css
@@ -1,16 +1,16 @@
@font-face {
font-family: "Playtime";
/* src: url("playtime.ttf"); */
- src: url("PlaytimeWithHotToddies.svg");
- src: url("PlaytimeWithHotToddies.ttf");
- src: url("PlaytimeWithHotToddies.woff");
+ src: url("font/PlaytimeWithHotToddies.svg");
+ src: url("font/PlaytimeWithHotToddies.ttf");
+ src: url("font/PlaytimeWithHotToddies.woff");
}
@font-face {
font-family: "Gentium";
/* src: url("gentium.ttf"); */
- src: url("GentiumPlus.svg");
- src: url("GentiumPlus.ttf");
- src: url("GentiumPlus.woff");
+ src: url("font/GentiumPlus.svg");
+ src: url("font/GentiumPlus.ttf");
+ src: url("font/GentiumPlus.woff");
}
body {
margin: 0;
@@ -18,14 +18,22 @@ body {
background: gray;
font: 22px/27px Playtime, sans-serif;
}
+* {
+ -moz-user-select: -moz-none;
+ -webkit-user-select: none;
+ -ms-user-select: none;
+ user-select: none;
+}
+#container, #bg, #vid {
+ cursor: url("../dump/ui/mousecursor.png"), default;
+ position: absolute;
+ top: 50%;
+ left: 50%;
+}
#container {
- cursor: url("/dump/ui/mousecursor.png"), auto;
width: 800px;
height: 600px;
- position: absolute;
- top: 50%;
margin-top: -300px;
- left: 50%;
margin-left: -400px;
}
@keyframes toright {
@@ -36,11 +44,6 @@ body {
left: -190px;
}
}
-#bg,#vid {
- position: absolute;
- width: 800px;
- height: 600px;
-}
#who {
color: black;
position: absolute;
@@ -55,10 +58,6 @@ body {
position: absolute;
top: 493px;
left: 28px;
- -moz-user-select: none;
- -webkit-user-select: none;
- -ms-user-select: none;
- user-select: none;
}
#window-image {
position: absolute;
@@ -94,9 +93,10 @@ html.no-js #warn-container {
width: 600px;
z-index: 10;
}
-#notwork {
- font: 28px/34px Playtime;
+h2 {
+ font: 20px/28px Playtime;
font-weight: bold;
+ opacity: 0.4;
}
html.no-js #warn li:not(#js) { display: none; }
html.video #warn li#video { display: none; }
@@ -106,10 +106,16 @@ html.csstransforms #warn li#csstransforms { display: none; }
html.csstransitions #warn li#csstransitions { display: none; }
html #warn li#html-svg-filter { display: none; }
.button {
- cursor: pointer;
+ display: block;
+}
+.button-enabled {
+/* cursor: pointer; */
opacity: 0.4;
}
-.button:hover {
+.button-disabled {
+ opacity: 0.1;
+}
+.button-enabled:hover {
opacity: 1;
}
#gotit {
@@ -118,3 +124,19 @@ html #warn li#html-svg-filter { display: none; }
html.no-js #gotit {
display: none;
}
+#main-menu-buttons .button {
+ margin: 4px;
+}
+input[type="checkbox"] {
+ display: none;
+}
+input[type="checkbox"] + span:before {
+ display: inline-block;
+ height: 19px;
+ width: 20px;
+ content: "";
+ background: url("../dump/ui/bt-cf-unchecked.png") no-repeat left bottom;
+}
+input[type="checkbox"]:checked + span:before {
+ background: url("../dump/ui/bt-cf-checked.png") no-repeat left bottom;
+}
diff --git a/www/index.html b/www/index.html
index 64950d5..a512b02 100644
--- a/www/index.html
+++ b/www/index.html
@@ -11,24 +11,24 @@
};
window.define.amd = {};
</script>
- <link rel="shortcut icon" type="image/png" href="/dump/ui/icon.png">
- <link rel="apple-touch-icon" href="/dump/ui/icon.png">
- <link rel="stylesheet" type="text/css" href="/css/anim.css">
- <link rel="stylesheet" type="text/css" href="/css/index.css">
- <script src="/js/lib/when/when.js"></script>
- <script src="/js/lib/jquery-2.0.2.min.js"></script>
- <script src="/js/lib/modernizr.custom.44609.js"></script>
- <script src="/js/html5ks.js"></script>
- <script src="/js/api.js"></script>
- <script src="/js/play.js"></script>
- <script src="/js/images.js"></script>
- <script src="/js/characters.js"></script>
+ <link rel="shortcut icon" type="image/png" href="dump/ui/icon.png">
+ <link rel="apple-touch-icon" href="dump/ui/icon.png">
+ <link rel="stylesheet" type="text/css" href="css/anim.css">
+ <link rel="stylesheet" type="text/css" href="css/index.css">
+ <script src="js/lib/when/when.js"></script>
+ <script src="js/lib/modernizr.custom.44609.js"></script>
+ <script src="js/html5ks.js"></script>
+ <script src="js/menu.js"></script>
+ <script src="js/api.js"></script>
+ <script src="js/play.js"></script>
+ <script src="js/images.js"></script>
+ <script src="js/characters.js"></script>
</head>
- <body><div id="all">
+ <body><div id="all" style="height: 100%; position: absolute; width: 100%;">
<div id="warn-container">
<div id="gray"></div>
<div id="warn">
- <div id="notwork">We use a lot of new features in this; your browser seems to have some issues...</div>
+ <h2>We use a lot of new features in this; your browser seems to have some issues...</h2>
<ul id="warns">
<noscript><li id="js">It doesn't seem to have JavaScript enabled. This site doesn't work at all without it. Really. <a href="http://enable-javascript.com">Don't know how to enable JS?</a></li></noscript>
<li id="video">It doesn't seem to support <a href="https://en.wikipedia.org/wiki/HTML5_video">HTML5 video</a>, which means that you won't be able to see any of the videos (obviously). Unless stated below, though, transitions should still work. <a href="http://caniuse.com/#feat=video">You should strongly consider upgrading.</a></li>
@@ -38,17 +38,44 @@
<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="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">I know it's broken, let me play!</div>
+ <div id="gotit" class="button button-enabled">I know it's broken, let me play!</div>
</div>
</div>
+ <div id="bg"></div>
<div id="container">
- <div id="bg"></div>
<div id="window" style="display: none;">
- <img id="window-image" src="/dump/ui/bg-say.png" alt="">
+ <img id="window-image" src="dump/ui/bg-say.png" alt="">
<div id="who"></div>
<div id="say"></div>
</div>
- <video id="vid"></video>
+ <div id="main-menu" style="display: none;">
+ <div id="main-menu-buttons" style="top: 377px; position: absolute; left: 81px;">
+ <div id="start" class="button button-enabled">Start</div>
+ <div id="load" class="button button-disabled">Load</div>
+ <div id="extras" class="button button-disabled">Extras</div>
+ <div id="options-button" class="button button-enabled">Options</div>
+ <div id="quit" class="button button-disabled">Quit</div>
+ </div>
+ <div id="version" style="position: absolute; bottom: 10px; right: 15px; font: 8px/8px Playtime; opacity: 0.4">
+ Katawa Shoujo v1.0
+ <br>
+ HTML5KS 0.0.1
+ </div>
+ </div>
+ <div id="dialogs" style="display: none; position: absolute; top: 50%; width: 504px; height: 395px; background: url(dump/ui/bg-config.png); left: 50%; margin-left: -252px; margin-top: -197.5px;">
+ <div id="options" style="padding: 10px 20px;">
+ <h2>Options</h2>
+ <label class="button button-enabled"><input type="checkbox" id="hdisable"> <span>Disable adult content</span></label>
+ <label class="button button-enabled"><input type="checkbox" id="fullscreen"> <span>Fullscreen mode</span></label>
+ <label class="button button-enabled"><input type="checkbox" id="skip-unread"> <span>Skip unread text</span></label>
+ <label class="button button-enabled"><input type="checkbox" id="skip-after-choices"> <span>Keep skipping after choices</span></label>
+ </div>
+ <div id="return" class="button button-enabled" style="position: absolute; bottom: 15px; right: 20px;">
+ <img src="dump/ui/bt-return.png">
+ Return
+ </div>
+ </div>
</div>
+ <video id="vid"></video>
</div></body>
</html>
diff --git a/www/js/api.js b/www/js/api.js
index 14d8335..e5a6a58 100644
--- a/www/js/api.js
+++ b/www/js/api.js
@@ -25,7 +25,7 @@ window.html5ks.api = {
// 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.src = "dump/" + (channel === "music" ? "bgm/" + html5ks.data.music[name] + ".ogg" : html5ks.data.sfx[name]);
audio.load();
audio.volume = fade ? 0 : 1;
audio.play();
@@ -56,16 +56,30 @@ window.html5ks.api = {
},
movie_cutscene: function (vid_src) {
var deferred = when.defer(),
- video = html5ks.elements.video;
- video.src = "/dump/video/" + vid_src + ".webm";
+ video = html5ks.elements.video,
+ src = "dump/video/" + vid_src + ".";
+
+ if (Modernizr.video.webm) {
+ video.src = src + "webm";
+ } else if (Modernizr.video.ogg) {
+ video.src = src + "ogg";
+ } else if (Modernizr.video.h264) {
+ video.src = src + "mp4";
+ }
+
video.load();
+ video.style.display = "block";
video.play();
var done = function () {
this.style.display = "none";
this.pause();
deferred.resolve();
};
- video.addEventListener("mouseup", done, false);
+ video.addEventListener("click", function (e) {
+ if (e.button === 0) {
+ done.call(this);
+ }
+ }, false);
video.addEventListener("ended", done, false);
video.addEventListener("error", function () {
deferred.reject(this.error);
@@ -81,10 +95,15 @@ window.html5ks.api = {
var label = html5ks.data.script[target],
i = 0;
(function run() {
- html5ks.api.runInst(label[i]).then(run, console.error);
- i++;
+ if (label[i]) {
+ html5ks.api.runInst(label[i]).then(run, console.error);
+ i++;
+ } else {
+ html5ks.mainMenu();
+ }
}());
},
+
window: function (action, transition) {
var windw = html5ks.elements.window,
deferred = when.defer();
@@ -96,6 +115,7 @@ window.html5ks.api = {
deferred.resolve(action);
return deferred.promise;
},
+
// NOT iscene
scene: function (type, name) {
var deferred = when.defer(),
@@ -122,15 +142,20 @@ window.html5ks.api = {
}
img.onload = function () {
console.debug("setting bg " + img.src);
- html5ks.elements.bg.style.background = "url(" + img.src + ")";
+ var bg = html5ks.elements.bg;
+ bg.style.background = "url(" + img.src + ") no-repeat 0 0 / cover black";
deferred.resolve();
};
img.onerror = function () {
throw new Error("bg could not load");
};
- img.src = "/dump/" + image.image;
+ if (Modernizr.webp) {
+ image.image = image.image.replace(/\.[a-z]+$/, ".webp");
+ }
+ img.src = "dump/" + image.image;
return deferred.promise;
},
+
show: function () {
var deferred = when.defer();
deferred.resolve();
@@ -141,9 +166,11 @@ window.html5ks.api = {
deferred.resolve();
return deferred.promise;
},
+
with: function (transition, action) {
return this.runInst(action);
},
+
runInst: function (inst) {
var cmd = inst[0],
args = inst.slice(1);
@@ -163,6 +190,7 @@ window.html5ks.api = {
}
}
},
+
character: function (name, str) {
var deferred = when.defer(),
text = str,
diff --git a/www/js/html5ks.js b/www/js/html5ks.js
index 6c0234e..3291dab 100644
--- a/www/js/html5ks.js
+++ b/www/js/html5ks.js
@@ -35,7 +35,13 @@
who: document.getElementById("who"),
say: document.getElementById("say"),
bg: document.getElementById("bg"),
- window: document.getElementById("window")
+ window: document.getElementById("window"),
+ mainMenu: document.getElementById("main-menu"),
+ dialogs: document.getElementById("dialogs"),
+ dialog: {
+ options: document.getElementById("options"),
+ return: document.getElementById("return")
+ }
};
this.elements.audio.music.loop = true;
this.elements.audio.ambient.loop = true;
@@ -47,8 +53,8 @@
localStorage.persistent = JSON.stringify(this.persistent);
},
scale: function () {
- var newScale = 1;
if (html5ks.persistent.settings.scale) {
+ var newScale = 1;
var height = document.documentElement.clientHeight,
width = document.documentElement.clientWidth;
if (height / width <= 0.75) { // widescreen
@@ -56,12 +62,22 @@
} else {
newScale = width / 800;
}
- } else {
- newScale = 1;
+
+ var container = html5ks.elements.container;
+ container.style.webkitTransform = "scale(" + newScale + ")";
+ container.style.mozTransform = "scale(" + newScale + ")";
+ container.style.transform = "scale(" + 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";
+ }
+
+ applyScale(html5ks.elements.bg, newScale);
+ applyScale(html5ks.elements.video, newScale);
}
- html5ks.elements.container.style.webkitTransform = "scale(" + newScale + ")";
- html5ks.elements.container.style.mozTransform = "scale(" + newScale + ")";
- html5ks.elements.container.style.transform = "scale(" + newScale + ")";
},
next: function () {},
initEvents: function () {
@@ -69,6 +85,13 @@
this.elements.container.addEventListener("mouseup", function () {
html5ks.next();
}, false);
+ var deselect = function () {
+ window.getSelection().collapse(this, 0);
+ };
+ document.body.addEventListener("mousemove", deselect, true);
+ document.body.addEventListener("mouseup", deselect, true);
+ document.body.addEventListener("keyup", deselect, true);
+ this.menu.initEvents();
},
warnUnsupported: function () {
if (!html5ks.persistent.settings.gotit) {
@@ -101,7 +124,7 @@
winload: function () {
this.fetch("script", "a1-monday").then(function () {
html5ks.api.movie_cutscene("4ls").then(function () {
- html5ks.api.iscene("en_NOP1")
+ html5ks.menu.mainMenu();
});
});
},
@@ -114,7 +137,7 @@
deferred.resolve();
} else {
var xhr = new XMLHttpRequest();
- xhr.open("GET", "/scripts/script-" + name + ".json");
+ xhr.open("GET", "scripts/script-" + name + ".json");
xhr.onreadystatechange = function () {
script[name] = true;
if (xhr.readyState === 4) {
diff --git a/www/js/menu.js b/www/js/menu.js
new file mode 100644
index 0000000..8d68fcd
--- /dev/null
+++ b/www/js/menu.js
@@ -0,0 +1,33 @@
+html5ks.menu = {
+ mainMenu: function () {
+ html5ks.api.stop("music");
+ html5ks.api.stop("sound");
+ html5ks.api.stop("ambient");
+ html5ks.api.window("hide");
+ html5ks.api.play("music", "music_menus");
+ html5ks.elements.bg.style.background = "url(dump/ui/main/bg-main.png) 0 0 / cover";
+ html5ks.elements.mainMenu.style.display = "block";
+ },
+
+ activeDialog: null,
+
+ dialog: function (name) {
+ this.activeDialog = html5ks.elements.dialog[name];
+ this.activeDialog.style.display = "block";
+ html5ks.elements.dialogs.style.display = "block";
+ },
+
+ initEvents: function () {
+ document.getElementById("start").addEventListener("click", function () {
+ html5ks.elements.mainMenu.style.display = "none";
+ html5ks.api.iscene("en_NOP1");
+ }, false);
+ document.getElementById("options-button").addEventListener("click", function () {
+ html5ks.menu.dialog("options");
+ }, false);
+ html5ks.elements.dialog.return.addEventListener("click", function (e) {
+ html5ks.menu.activeDialog.style.display = "none";
+ html5ks.elements.dialogs.style.display = "none";
+ }, false);
+ }
+};
generated by cgit v1.2.3-70-g09d2 (git 2.47.0) at 2024-11-22 12:48:09 +0000