summaryrefslogtreecommitdiff
path: root/www
diff options
context:
space:
mode:
Diffstat (limited to 'www')
-rw-r--r--www/css/index.css183
-rw-r--r--www/index.html24
-rw-r--r--www/js/api.js91
-rw-r--r--www/js/html5ks.js2
-rw-r--r--www/js/menu.js4
5 files changed, 158 insertions, 146 deletions
diff --git a/www/css/index.css b/www/css/index.css
index 2fedd0e..2883101 100644
--- a/www/css/index.css
+++ b/www/css/index.css
@@ -1,3 +1,4 @@
+/* font-face */
@font-face {
font-family: "Playtime";
/* src: url("playtime.ttf"); */
@@ -12,62 +13,55 @@
src: url("font/GentiumPlus.ttf");
src: url("font/GentiumPlus.woff");
}
-body {
- margin: 0;
- padding: 0;
- background: gray;
- font: 22px/27px Playtime, sans-serif;
-}
+
+/* general styling */
* {
-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;
+body {
+ margin: 0;
+ padding: 0;
+ background: gray;
+ font: 22px/27px Playtime, sans-serif;
}
-#container, #bg.scale, #vid.scale {
- top: 50%;
- left: 50%;
+h2 {
+ font: 20px/28px Playtime; /* yes, h2 has *smaller* font */
+ font-weight: bold;
}
-#container {
- width: 800px;
- height: 600px;
- margin-top: -300px;
- margin-left: -400px;
+
+/* input */
+label {
+ display: block;
}
-#who {
- color: black;
- position: absolute;
- top: 452px;
- left: 12px;
- font-weight: bold;
+.button, h2, label {
+ opacity: 0.4;
}
-.say {
- color: white;
+.button-disabled {
+ opacity: 0.1;
}
-#say {
- width: 750px;
- height: 90px;
- position: absolute;
- top: 493px;
- left: 28px;
+.button:not(.button-disabled):hover {
+ opacity: 1;
}
-#window-image {
- position: absolute;
- top: 440px;
- left: 0;
+input[type="checkbox"] {
+ display: none;
}
-#gray {
- position: absolute;
- width: 100%;
- height: 100%;
- background-color: rgb(64, 64, 64);
- background-color: rgba(64, 64, 64, 0.8);
- z-index: 9;
+input[type="checkbox"] + span:before {
+ display: inline-block;
+ height: 19px;
+ width: 20px;
+ content: "";
+ background-position: left -2px top -3px;
+ background-repeat: no-repeat;
+ background-image: url("../dump/ui/bt-cf-unchecked.png");
+}
+input[type="checkbox"]:checked + span:before {
+ background-image: url("../dump/ui/bt-cf-checked.png");
}
+
+/* warnings */
#warn-container {
visibility: hidden;
cursor: auto;
@@ -89,61 +83,78 @@ html.no-js #warn-container {
width: 600px;
z-index: 10;
}
-h2 {
- font: 20px/28px Playtime;
- font-weight: bold;
-}
-html.no-js #warn li:not(#js) { display: none; }
+html.no-js #warn li { display: none; }
+html.js #warn noscript { display: none; }
#warn li#ie { display: none; }
html.video #warn li#video { display: none; }
html.audio #warn li#audio { display: none; }
html.fontface #warn li#fontface { display: none; }
html.csstransforms #warn li#csstransforms { display: none; }
html.csstransitions #warn li#csstransitions { display: none; }
-label {
- display: block;
-}
-.button, h2, label {
- opacity: 0.4;
-}
-.button-disabled {
- opacity: 0.1;
-}
-.button-enabled:hover {
- opacity: 1;
-}
#gotit {
text-align: center;
}
html.no-js #gotit {
display: none;
}
-#main-menu-buttons .button {
- margin: 4px;
+
+/* wooo, the real content */
+#container, #vid {
+ cursor: url("../dump/ui/mousecursor.png"), default;
+ position: absolute;
+ -moz-backface-visibility: hidden;
+ -webkit-backface-visibility: hidden;
+ backface-visibility: hidden;
}
-input[type="checkbox"] {
- display: none;
+#container, #vid.scale {
+ top: 50%;
+ left: 50%;
}
-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;
+#container {
+ width: 800px;
+ height: 600px;
+ margin-top: -300px;
+ margin-left: -400px;
+ overflow: hidden;
}
-input[type="checkbox"]:checked + span:before {
- background: url("../dump/ui/bt-cf-checked.png") no-repeat left bottom;
+#show img {
+ position: absolute;
}
-#ctc, #nvlctc {
+#window {
+ background: url("../dump/ui/bg-say.png");
+ width: 800px;
+ height: 160px;
position: absolute;
- bottom: 20px;
- right: 10px;
- -webkit-animation: blink 2s infinite;
- -moz-animation: blink 2s infinite;
- animation: blink 2s infinite;
+ top: 440px;
+ left: 0;
}
-#nvlctc {
- bottom: 25px;
+#who {
+ color: black;
+ position: absolute;
+ top: 12px;
+ left: 12px;
+ font-weight: bold;
+}
+.say {
+ color: white;
+}
+#say {
+ width: 750px;
+ height: 90px;
+ position: absolute;
+ top: 53px;
+ left: 28px;
+}
+#gray {
+ position: absolute;
+ width: 100%;
+ height: 100%;
+ background-color: rgb(64, 64, 64);
+ background-color: rgba(64, 64, 64, 0.8);
+ z-index: 9;
+}
+#main-menu-buttons .button {
+ margin: 4px;
}
#nvl {
position: absolute;
@@ -160,6 +171,17 @@ input[type="checkbox"]:checked + span:before {
display: block;
margin: 10px 8px;
}
+#ctc, #nvlctc {
+ position: absolute;
+ bottom: 20px;
+ right: 10px;
+ -webkit-animation: blink 2s infinite;
+ -moz-animation: blink 2s infinite;
+ animation: blink 2s infinite;
+}
+#nvlctc {
+ bottom: 25px;
+}
.centered {
width: 100%;
text-align: center;
@@ -173,6 +195,3 @@ 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 5b99526..31b406c 100644
--- a/www/index.html
+++ b/www/index.html
@@ -38,15 +38,13 @@
<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 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>
</ul>
- <div id="gotit" class="button button-enabled">I know it's broken, let me play!</div>
+ <div id="gotit" class="button">I know it's broken, let me play!</div>
</div>
</div>
- <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>
<div id="say" class="say"></div>
<img id="ctc" src="dump/ui/ctc.png" style="display: none">
@@ -59,10 +57,10 @@
<div id="centered" class="centered say"></div>
<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="start" class="button">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="options-button" class="button">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">
@@ -74,20 +72,20 @@
<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" class="option" id="hdisable"> <span>Disable adult content</span></label>
- <label class="button button-enabled"><input type="checkbox" class="option" id="skipUnread"> <span>Skip unread text</span></label>
- <label class="button button-enabled"><input type="checkbox" class="option" id="skipAfterChoices"> <span>Keep skipping after choices</span></label>
- <label class="button button-enabled"><input type="checkbox" class="option" id="useWebP"> <span>Use WebP images (less bandwidth, more CPU)</span></label>
- <label class="button button-enabled"><input type="checkbox" class="option" id="fullscreen"> <span>Scale content</span></label>
- <label class="button button-enabled"><input type="checkbox" class="option" id="scaleVideo"> <span>Scale video</span></label>
+ <label class="button"><input type="checkbox" class="option" id="hdisable"> <span>Disable adult content</span></label>
+ <label class="button"><input type="checkbox" class="option" id="skipUnread"> <span>Skip unread text</span></label>
+ <label class="button"><input type="checkbox" class="option" id="skipAfterChoices"> <span>Keep skipping after choices</span></label>
+ <label class="button"><input type="checkbox" class="option" id="useWebP"> <span>Use WebP images (less bandwidth, more CPU)</span></label>
+ <label class="button"><input type="checkbox" class="option" id="fullscreen"> <span>Scale content</span></label>
+ <label class="button"><input type="checkbox" class="option" id="scaleVideo"> <span>Scale video</span></label>
<label><input type="range" min="0.0" max="1.0" step="0.001" class="option" id="textSpeed"> <span class="tr">Text speed</span></label>
<label><input type="range" min="0.0" max="1.0" step="0.001" class="option" id="autoModeDelay"> <span class="tr">Auto mode delay</span></label>
<label><input type="range" min="0.0" max="1.0" step="0.001" class="option" id="musicVolume"> <span class="tr">Music volume</span></label>
- <label><input type="range" min="0.0" max="1.0" step="0.001" class="option" id="sfxVolume"> <span class="tr">SFX volume</span> <span id="test-sfx" class="button button-enabled"><img src="dump/ui/bt-musicplay.png"> Test</span></label>
+ <label><input type="range" min="0.0" max="1.0" step="0.001" class="option" id="sfxVolume"> <span class="tr">SFX volume</span> <span id="test-sfx" class="button"><img src="dump/ui/bt-musicplay.png"> Test</span></label>
</div>
- <div id="return" class="button button-enabled" style="position: absolute; bottom: 15px; right: 20px;">
+ <div id="return" class="button" style="position: absolute; bottom: 15px; right: 20px;">
<img src="dump/ui/bt-return.png">
Return
</div>
diff --git a/www/js/api.js b/www/js/api.js
index c3c9f48..4aebde1 100644
--- a/www/js/api.js
+++ b/www/js/api.js
@@ -170,50 +170,15 @@ window.html5ks.api = {
},
// NOT iscene
scene: function (type, name) {
- var deferred = when.defer(),
- nom = type;
- if (name) {
- nom = type + "_" + name;
- }
- var img = new Image();
- var image = html5ks.data.images[nom];
- if (!image) {
- var typ = {
- "bg": {dir:"bgs",ext:"jpg"}
- }[type];
- image = typ.dir + "/" + name + "." + typ.ext;
- }
- var bg = html5ks.elements.bg;
- if (typeof image == "string") {
- if (image.substring(0,1) == "#") {
- bg.style.background = "";
- bg.style.backgroundColor = image;
- deferred.resolve();
- return deferred.promise;
- } else {
- image = {image: image};
- }
- }
- img.onload = function () {
- console.debug("setting bg " + img.src);
- bg.style.background = "";
- bg.style.backgroundImage = "url(" + img.src + ")";
- bg.style.backgroundSize = "cover";
- deferred.resolve();
- };
- img.onerror = function () {
- throw new Error("bg could not load");
- };
- if (Modernizr.webp) {
- image.image = image.image.replace(/\.[a-z]+$/, ".webp");
- }
- img.src = "dump/" + image.image;
- return deferred.promise;
+ html5ks.elements.show.innerHTML = "";
+ return this.show.apply(this, arguments);
},
show: function (name, type, location) {
var deferred = when.defer();
- var el = document.getElementById(name) || document.createElement("img");
+ var lookup = document.getElementById(name),
+ el = lookup || document.createElement("img");
+ if (!location && !lookup) location = "center";
el.onload = function () {
if (location) {
// calculate position
@@ -249,17 +214,49 @@ window.html5ks.api = {
// TODO: check if img is really in images.js
deferred.resolve();
};
- var src = "dump/sprites/" + name + "/" + name + "_" + type + ".";
+ var nom = name;
+ if (type) {
+ nom = name + "_" + type;
+ }
+ var image = html5ks.data.images[nom];
+ if (typeof image == "undefined") {
+ switch (name) {
+ case "bg":
+ image = "bgs/" + type + ".jpg";
+ break;
+ case "url":
+ name = type;
+ image = type;
+ break;
+ default:
+ image = "sprites/" + name + "/" + name + "_" + type + ".png";
+ }
+ }
+ if (typeof image == "string") {
+ if (image.substring(0,1) == "#") {
+ el.style.backgroundColor = image;
+ el.style.width = "100%";
+ el.style.height = "100%";
+ el.src = "";
+ deferred.resolve();
+ return deferred.promise;
+ } else {
+ image = {image: image};
+ }
+ }
+ var src = "";
if (html5ks.persistent.settings.useWebP) {
- src += "webp";
+ src = image.image.replace(/\.[a-z]+$/, ".webp");
} else {
- src += "png";
+ src = image.image;
}
el.id = name;
- el.src = src;
+ el.src = "dump/" + src;
// prevent FOUIPC (flash of incorrectly placed content)
- if (location) el.style.display = "none";
- html5ks.elements.show.appendChild(el);
+ if (!lookup) {
+ el.style.display = "none";
+ html5ks.elements.show.appendChild(el);
+ }
deferred.resolve();
return deferred.promise;
},
@@ -439,7 +436,7 @@ window.html5ks.api = {
frag = document.createDocumentFragment(),
choice = document.createElement("div");
- choice.className = "choice button button-enabled";
+ choice.className = "choice button";
for (var i in choices) {
choice.innerHTML = i;
diff --git a/www/js/html5ks.js b/www/js/html5ks.js
index 354bae8..8a174dc 100644
--- a/www/js/html5ks.js
+++ b/www/js/html5ks.js
@@ -41,7 +41,6 @@ window.html5ks = {
},
who: document.getElementById("who"),
say: document.getElementById("say"),
- bg: document.getElementById("bg"),
window: document.getElementById("window"),
ctc: document.getElementById("ctc"),
nvl: document.getElementById("nvl"),
@@ -91,7 +90,6 @@ window.html5ks = {
}
};
- applyScale(html5ks.elements.bg, newScale);
if (html5ks.persistent.settings.scaleVideo) {
applyScale(html5ks.elements.video, newScale);
}
diff --git a/www/js/menu.js b/www/js/menu.js
index a57f9a0..ca0637f 100644
--- a/www/js/menu.js
+++ b/www/js/menu.js
@@ -7,7 +7,7 @@
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.api.show("url", "ui/main/bg-main.png");
this.elements.mainMenu.style.display = "block";
},
@@ -77,7 +77,7 @@
}, false);
html5ks.fetch("imachine").then(function () {
var start = this.elements.main.start;
- start.className = start.className.replace("button-disabled", "button-enabled");
+ start.className = start.className.replace("button-disabled", "");
this._imachine_loaded = true;
}.bind(this));
}
generated by cgit v1.2.3-70-g09d2 (git 2.47.0) at 2024-11-22 09:10:33 +0000