diff options
| -rw-r--r-- | Makefile | 6 | ||||
| m--------- | Modernizr | 0 | ||||
| -rw-r--r-- | www/css/index.css | 105 | ||||
| -rw-r--r-- | www/index.html | 26 | ||||
| -rw-r--r-- | www/js/api.js | 4 | ||||
| -rw-r--r-- | www/js/menu.js | 2 |
6 files changed, 113 insertions, 30 deletions
@@ -3,7 +3,7 @@ SPACE := $(null) $(null) FFMPEG ?= ffmpeg -v warning -y CWEBP ?= cwebp -CWEBP += -short -alpha_cleanup +CWEBP += -quiet -alpha_cleanup WEBPMUX ?= webpmux CONVERT ?= convert APNGASM ?= apngasm @@ -11,7 +11,7 @@ UGLIFYJS ?= uglifyjs ifdef MINIMAL ZOPFLIPNG ?= : DEFLOPT ?= : -DEFLUFF ?= : +DEFLUFF ?= cat PNGQUANT ?= : else ZOPFLIPNG ?= zopflipng @@ -129,7 +129,7 @@ $(DUMP)/ui/bt-cf-unchecked.webp $(DUMP)/ui/bt-cf-checked.webp: %.webp: %.png mv -f "$<".tmp "$<" $(DUMP)/ui/ctc_strip-0.png: $(CTC_ANIM_SRC) - $(CONVERT) "$<" -crop 16x16 $(patsubst %.png,%*.png,$<) + $(CONVERT) "$<" -crop 16x16 $(DUMP)/ui/ctc_strip-%d.png $(DUMP)/ui/ctc_strip-%.png: $(CTC_ANIM_SRC) $(DUMP)/ui/ctc_strip-0.png @touch -r "$(DUMP)/ui/ctc_strip-0.png" "$@" diff --git a/Modernizr b/Modernizr -Subproject 8a5b7a95bf03bef04f0917ce3fa36f633017863 +Subproject 96b3e677965b33e4af227d573da69775f2ad480 diff --git a/www/css/index.css b/www/css/index.css index b94f40d..c2c3f9c 100644 --- a/www/css/index.css +++ b/www/css/index.css @@ -101,23 +101,69 @@ html.no-js #gotit { /* dialogs */ #dialogs { - background: url("../dump/ui/bg-config.png"); z-index: 50; width: 504px; height: 395px; margin-left: -252px; margin-top: -197.5px; } +.no-webp #dialogs { + background: url("../dump/ui/bg-config.png"); +} .webp #dialogs { background: url("../dump/ui/bg-config.webp"); } -#options { +#dialogs > div { + display: none; padding: 10px 20px; } +.config_sfxtest_label { + padding-left: 24px; + background-repeat: no-repeat; +} +.no-webp .config_sfxtest_label { + background-image: url("../dump/ui/bt-musicplay.png"); +} +.webp .config_sfxtest_label { + background-image: url("../dump/ui/bt-musicplay.webp"); +} +.config_language_sel { + padding-left: 24px; + background-repeat: no-repeat; +} +.no-webp .config_language_sel { + background-image: url("../dump/ui/bt-language.png"); +} +.webp .config_language_sel { + background-image: url("../dump/ui/bt-language.webp"); +} +.saves { + overflow-y: scroll; + height: 260px; + width: 450px; +} +.new_save_button { + padding-left: 30px; + background-repeat: no-repeat; +} +.no-webp .new_save_button { + background-image: url("../dump/ui/bt-star.png"); +} +.webp .new_save_button { + background-image: url("../dump/ui/bt-star.webp"); +} #return { position: absolute; bottom: 15px; right: 20px; + padding-left: 30px; + background-repeat: no-repeat; +} +.no-webp #return { + background-image: url("../dump/ui/bt-return.png"); +} +.webp #return { + background-image: url("../dump/ui/bt-return.webp"); } /* content */ @@ -128,13 +174,15 @@ html.no-js #gotit { position: absolute; } #window { - background: url("../dump/ui/bg-say.png"); width: 800px; height: 160px; position: absolute; top: 440px; left: 0; } +.no-webp #window { + background: url("../dump/ui/bg-say.png"); +} .webp #window { background: url("../dump/ui/bg-say.webp"); } @@ -156,15 +204,18 @@ html.no-js #gotit { left: 28px; } #nvl { - background: url("../dump/ui/bg-nvl.png") no-repeat top left; + background: white no-repeat top left; position: absolute; top: 0; left: 0; width: 100%; height: 100%; } +.no-webp #nvl { + background-image: url("../dump/ui/bg-nvl.png"); +} .webp #nvl { - background: url("../dump/ui/bg-nvl.webp") no-repeat top left; + background-image: url("../dump/ui/bg-nvl.webp"); } #nvlsay { padding: 15px 35px; @@ -179,12 +230,14 @@ html.no-js #gotit { right: 10px; width: 16px; height: 16px; - background-image: url("../dump/ui/ctc.png"); -o-animation: blink 2s infinite linear; -moz-animation: blink 2s infinite linear; -webkit-animation: blink 2s infinite linear; animation: blink 2s infinite linear; } +.no-webp .ctc { + background-image: url("../dump/ui/ctc.png"); +} .webp .ctc { background-image: url("../dump/ui/ctc.webp"); } @@ -224,14 +277,29 @@ html.no-js #gotit { right: 10px; display: none; } +.no-webp #auto { + background: url("dump/ui/sd-auto.png"); +} +.webp #auto { + background: url("dump/ui/sd-auto.webp"); +} +.no-webp #skip { + background: url("dump/ui/sd-skip.png"); +} +.webp #skip { + background: url("dump/ui/sd-skip.webp"); +} #choices { left: 0; } .webp .choice { - background: url("../dump/ui/bg-choice.webp") no-repeat top center; + background-image: url("../dump/ui/bg-choice.webp"); +} +.no-webp .choice { + background-image: url("../dump/ui/bg-choice.png"); } .choice { - background: url("../dump/ui/bg-choice.png") no-repeat top center; + background: white no-repeat top center; text-align: center; height: 35px; line-height: 30px; @@ -241,10 +309,13 @@ html.no-js #gotit { text-align: center; } .webp #context-menu { - background: url("../dump/ui/bg-gm.webp") no-repeat top center; + background-image: url("../dump/ui/bg-gm.webp"); +} +.no-webp #context-menu { + background-image: url("../dump/ui/bg-gm.png"); } #context-menu { - background: url("../dump/ui/bg-gm.png") no-repeat top center; + background: white no-repeat top center; margin-top: -210px; padding-top: 60px; position: absolute; @@ -266,6 +337,11 @@ html.no-js #gotit { } /* main menu */ +#main-menu-buttons { + top: 377px; + position: absolute; + left: 81px; +} #main-menu-buttons .button { margin: 4px; } @@ -297,16 +373,17 @@ input[type="checkbox"] { .webp input[type="checkbox"] + span:before { background-image: url("../dump/ui/bt-cf-unchecked.webp"); } -input[type="checkbox"] + span:before { +.no-webp input[type="checkbox"] + span:before { background-image: url("../dump/ui/bt-cf-unchecked.png"); +} +input[type="checkbox"] + span:before { display: inline-block; height: 19px; width: 20px; content: ""; - background-position: left bottom; - background-repeat: no-repeat; + background: white left bottom no-repeat; } -input[type="checkbox"]:checked + span:before { +.no-webp input[type="checkbox"]:checked + span:before { background-image: url("../dump/ui/bt-cf-checked.png"); } .webp input[type="checkbox"]:checked + span:before { diff --git a/www/index.html b/www/index.html index 357cab6..600b52f 100644 --- a/www/index.html +++ b/www/index.html @@ -48,11 +48,11 @@ </div> <div id="choices" class="centered"></div> <div id="centered" class="centered say"></div> - <img class="status" id="auto" src="dump/ui/sd-auto.png" alt="Auto"> - <img class="status" id="skip" src="dump/ui/sd-skip.png" alt="Skip"> + <span class="status" id="auto" alt="Auto"> + <span class="status" id="skip" alt="Skip"> </div> <div id="main-menu" style="display: none;"> - <div id="main-menu-buttons" style="top: 377px; position: absolute; left: 81px;"> + <div id="main-menu-buttons"> <div id="start" class="button main_menu_start disabled"></div> <div id="load" class="button main_menu_load disabled"></div> <div id="extras" class="button main_menu_extra disabled"></div> @@ -66,7 +66,7 @@ </div> </div> <div id="dialogs" class="centered" style="display: none;"> - <div id="options" style="padding: 10px 20px;"> + <div id="options"> <h2 class="config_page_caption"></h2> <label class="button"><input type="checkbox" class="option" id="hdisable"> <span class="hdisabled_label"></span></label> <label class="button"><input type="checkbox" class="option" id="skipUnread"> <span class="config_skip_unseen_label"></span></label> @@ -76,14 +76,20 @@ <label><input type="range" min="0.0" max="1.0" step="0.001" class="option" id="autoModeDelay"> <span class="config_afmspeed_label"></span></label> <label><input type="range" min="0.0" max="1.0" step="0.001" class="option" id="musicVolume"> <span class="config_musicvol_label"></span></label> - <label><input type="range" min="0.0" max="1.0" step="0.001" class="option" id="sfxVolume"> <span class="config_sfxvol_label"></span> <span id="test-sound" class="button config_sfxtest_label"><img src="dump/ui/bt-musicplay.png" alt="Play"></span></label> + <label><input type="range" min="0.0" max="1.0" step="0.001" class="option" id="sfxVolume"> <span class="config_sfxvol_label"></span> <span id="test-sound" class="button config_sfxtest_label"></span></label> - <label class="button disabled" id="language"><img src="dump/ui/bt-language.png"> <span class="config_language_sel"></span></label> + <label class="button disabled config_language_sel"></label> </div> - <label id="return" class="button" style="position: absolute; bottom: 15px; right: 20px;"> - <img src="dump/ui/bt-return.png"> - <span class="return_button_text"></span> - </label> + <div id="load_dlg"> + <h2 class="load_page_caption"></h2> + <div class="saves"></div> + </div> + <div id="save_dlg"> + <h2 class="save_page_caption"></h2> + <div class="saves"></div> + <div class="button new_save_button"></div> + </div> + <label id="return" class="button return_button_text"></label> </div> <div id="context" style="display: none;"> <div id="context-menu" class="centered"> diff --git a/www/js/api.js b/www/js/api.js index 12e8ecc..46e8f54 100644 --- a/www/js/api.js +++ b/www/js/api.js @@ -37,7 +37,6 @@ window.html5ks.api = { _loadMedia: function (el, src, types) { var i = 0; var _nextType = function () { - i++; for (; i < types.length; i++) { var type = types[i]; if (el.canPlayType(type[0])) { @@ -46,7 +45,6 @@ window.html5ks.api = { return true; } } - return false; }; html5ks.spin(1); @@ -58,7 +56,7 @@ window.html5ks.api = { el.onerror = function (e) { if (e.code === e.MEDIA_ERR_SRC_NOT_SUPPORTED) { - if (_nextType()) { + if (_nextType(++i)) { console.warn("browser claimed support for " + types[i-1] + " but failed"); } else { console.error("no media formats supported"); diff --git a/www/js/menu.js b/www/js/menu.js index 89eceef..eb87111 100644 --- a/www/js/menu.js +++ b/www/js/menu.js @@ -26,6 +26,8 @@ html5ks.menu = { dialogs: document.getElementById("dialogs"), dialog: { options: document.getElementById("options"), + load: document.getElementById("load_dlg"), + save: document.getElementById("save_dlg"), retn: document.getElementById("return") }, mainMenu: document.getElementById("main-menu"), |