leif/lexys-labyrinth
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

Spruce up the options dialog, though it still doesn't work

Browse Source
This commit is contained in:
Eevee (Evelyn Woods) 2020-09-09 21:39:24 -06:00
parent 790adb34c4
commit 6b5b8b06aa
2 changed files with 120 additions and 19 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

77
js/main.js
View File

@ -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');
}
}

60
style.css
View File

@ -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;