From 6b5b8b06aa7394244efb741d362da4a642c2bc70 Mon Sep 17 00:00:00 2001 From: "Eevee (Evelyn Woods)" Date: Wed, 9 Sep 2020 21:39:24 -0600 Subject: [PATCH] Spruce up the options dialog, though it still doesn't work --- js/main.js | 79 ++++++++++++++++++++++++++++++++++++++++++------------ style.css | 60 +++++++++++++++++++++++++++++++++++++++-- 2 files changed, 120 insertions(+), 19 deletions(-) diff --git a/js/main.js b/js/main.js index d05633a..fbee82f 100644 --- a/js/main.js +++ b/js/main.js @@ -1774,7 +1774,15 @@ class AboutOverlay extends DialogOverlay { // - all manner of fucking bugs // TODO distinguish between deliberately gameplay changes and bugs, though that's kind of an arbitrary line const AESTHETIC_OPTIONS = [{ - + key: 'anim_half_speed', + label: "Animate at half speed", + default: true, + note: "CC2 plays animations at utterly ludicrous speeds and it looks very bad. This option plays them at half speed (except for explosions and splashes, which have a fixed duration), which is objectively better in every way.", +}, { + key: 'offset_actors', + label: "Offset some actors", + default: true, + note: "Chip's Challenge typically draws everything in a grid, which looks a bit funny for tall skinny objects like... the player. And teeth. This option draws both of them raised up slightly, so they'll break the grid and add a slight 3D effect. May not work for all tilesets.", }]; const COMPAT_OPTIONS = [{ key: 'tiles_react_instantly', @@ -1797,45 +1805,82 @@ const OPTIONS_TABS = [{ class OptionsOverlay extends DialogOverlay { constructor(conductor) { super(conductor); + this.root.classList.add('dialog-options'); this.set_title("options"); this.add_button("well alright then", ev => { this.close(); }); + this.main.append(mk('p', "Sorry! This stuff doesn't actually work yet.")); + let tab_strip = mk('nav.tabstrip'); this.main.append(tab_strip); this.tab_links = {}; this.tab_blocks = {}; + this.current_tab = 'aesthetic'; for (let tabdef of OPTIONS_TABS) { let link = mk('a', {href: 'javascript:', 'data-tab': tabdef.name}, tabdef.label); + link.addEventListener('click', ev => { + ev.preventDefault(); + this.switch_tab(ev.target.getAttribute('data-tab')); + }); tab_strip.append(link); this.tab_links[tabdef.name] = link; - let block = mk('section'); + let block = mk('section.tabblock'); this.main.append(block); this.tab_blocks[tabdef.name] = block; + + if (tabdef.name === this.current_tab) { + link.classList.add('--selected'); + block.classList.add('--selected'); + } } + // Aesthetic tab + this._add_options(this.tab_blocks['aesthetic'], AESTHETIC_OPTIONS); + // Compat tab this.tab_blocks['compat'].append( mk('p', "If you don't know what any of these are for, you can pretty safely ignore them."), mk('p', "Changes won't take effect until you restart the level."), ); - let ul = mk('ul'); - this.tab_blocks['compat'].append(ul); - for (let optdef of COMPAT_OPTIONS) { - let li = mk('li'); - let label = mk('label'); - li.append(label); - label.append(mk('input', {type: 'checkbox', name: optdef.key})); - for (let impl of optdef.impls) { - label.append(mk(`img.compat-icon`, {src: `compat-${impl}.png`})); - } - label.append(optdef.label); - li.append(mk('p', optdef.note)); - ul.append(li); - } + this._add_options(this.tab_blocks['compat'], COMPAT_OPTIONS); + } - this.main.append(mk('p', "Sorry! This stuff doesn't actually work yet.")); + _add_options(root, options) { + let ul = mk('ul'); + root.append(ul); + for (let optdef of options) { + let li = mk('li'); + let label = mk('label.option'); + label.append(mk('input', {type: 'checkbox', name: optdef.key})); + if (optdef.impls) { + for (let impl of optdef.impls) { + label.append(mk('img.compat-icon', {src: `compat-${impl}.png`})); + } + } + label.append(mk('span.option-label', optdef.label)); + let help_icon = mk('img.-help', {src: 'help.png'}); + label.append(help_icon); + let help_text = mk('p.option-help', optdef.note); + li.append(label); + li.append(help_text); + ul.append(li); + help_icon.addEventListener('click', ev => { + help_text.classList.toggle('--visible'); + }); + } + } + + switch_tab(tab) { + if (this.current_tab === tab) + return; + + this.tab_links[this.current_tab].classList.remove('--selected'); + this.tab_blocks[this.current_tab].classList.remove('--selected'); + this.current_tab = tab; + this.tab_links[this.current_tab].classList.add('--selected'); + this.tab_blocks[this.current_tab].classList.add('--selected'); } } diff --git a/style.css b/style.css index 198c6e7..85bf198 100644 --- a/style.css +++ b/style.css @@ -1,5 +1,5 @@ html { - font-size: 24px; + font-size: 16px; height: 100%; } body { @@ -26,7 +26,7 @@ input[type=checkbox] { } button { font-size: inherit; - padding: 0.125em 0.5em; + padding: 0.25em 0.5em; border: 1px solid black; font-family: inherit; background: #909090; @@ -119,6 +119,62 @@ table.level-browser tr:hover { background: hsl(225, 60%, 90%); } +/* Options dialog */ +.dialog-options { + height: 60%; + width: 75%; +} +.dialog-options > section { + flex: 1; +} +nav.tabstrip { + display: flex; + border-bottom: 1px solid #d0d0d0; +} +nav.tabstrip > a { + margin: 0 0.5em; + padding: 0.5em 1em; + color: inherit; + text-decoration: none; + border-top-left-radius: 0.5em; + border-top-right-radius: 0.5em; +} +nav.tabstrip > a:hover { + background: #e8e8e8; +} +nav.tabstrip > a.--selected { + background: #d0d0d0; +} +.dialog section.tabblock { + display: none; + overflow: auto; + margin: 0.25em 0.5em; +} +.dialog section.tabblock.--selected { + display: initial; +} +label.option { + display: flex; + align-items: center; + padding: 0.25em; +} +label.option:hover { + outline: 2px solid #d0d0d0; + outline-radius: 2px; +} +label.option .option-label { + flex: 1; +} +.option-help { + display: none; + background: #e8e8e8; + padding: 0.5em 0.75em; + border-radius: 0.5em; +} +.option-help.--visible { + /* TODO */ +} + /* Bits and pieces */ img.compat-icon { margin: 0 0.25em 0.125em;