From 62f7bd5ecd17be14b0f21f6044e695179d6458cd Mon Sep 17 00:00:00 2001 From: Alex Xu Date: Sat, 13 Jul 2013 10:40:07 -0400 Subject: Fix... stuff. --- README | 5 +- TODO | 14 ----- www/css/index.css | 183 ++++++++++++++++++++++++++++++------------------------ www/index.html | 24 ++++--- www/js/api.js | 91 +++++++++++++-------------- www/js/html5ks.js | 2 - www/js/menu.js | 4 +- 7 files changed, 162 insertions(+), 161 deletions(-) delete mode 100644 TODO diff --git a/README b/README index 20c6d84..79b64aa 100644 --- a/README +++ b/README @@ -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 diff --git a/TODO b/TODO deleted file mode 100644 index b1ff54b..0000000 --- a/TODO +++ /dev/null @@ -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 . -- 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 @@
  • It doesn't seem to support CSS transforms, which means that we won't be able to scale the window or show most transitions. Any browser released in the last 2 years ago should work.
  • It doesn't seem to support CSS transitions, which means that almost all animations won't work. Videos should still work though, unless stated above. You should definitely try upgrading.
    • -
    I know it's broken, let me play!
    +
    I know it's broken, let me play!
    -