diff options
| -rw-r--r-- | README | 5 | ||||
| -rw-r--r-- | TODO | 14 | ||||
| -rw-r--r-- | www/css/index.css | 183 | ||||
| -rw-r--r-- | www/index.html | 24 | ||||
| -rw-r--r-- | www/js/api.js | 91 | ||||
| -rw-r--r-- | www/js/html5ks.js | 2 | ||||
| -rw-r--r-- | www/js/menu.js | 4 |
7 files changed, 162 insertions, 161 deletions
@@ -1,12 +1,15 @@ This is an HTML5 implementation of the game Katawa Shoujo. [0] +jQuery is not used, but when.js [1] is used as a sensible Promises/A+ implementation. + It's still very much a WIP, but at least the first scene displays half-credibly. 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. +Check Bugzilla for things that need to be done. [2] [0] http://www.katawa-shoujo.com/ [1] https://github.com/cujojs/when/ +[2] https://bugzilla.happinessforme.com/buglist.cgi?cmdtype=runnamed&namedcmd=All+open+bugs @@ -1,14 +0,0 @@ -todo ordered by most to least important... ish -all of this should (read: must) be completed for a 1.0 release - -- 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) -- wallodrugs -- 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/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)); } |