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

Improve ergonomics of the level props dialog a bit

Browse Source
This commit is contained in:
Eevee (Evelyn Woods) 2020-12-30 11:30:50 -07:00
parent 48803b1483
commit 09d220b2a3
3 changed files with 59 additions and 7 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

48
js/main-editor.js
View File

@ -5,7 +5,7 @@ import * as c2g from './format-c2g.js';
import { PrimaryView, TransientOverlay, DialogOverlay, flash_button, load_json_from_storage, save_json_to_storage } from './main-base.js';
import CanvasRenderer from './renderer-canvas.js';
import TILE_TYPES from './tiletypes.js';
import { SVG_NS, mk, mk_svg, string_from_buffer_ascii, bytestring_to_buffer, walk_grid } from './util.js';
import { SVG_NS, mk, mk_button, mk_svg, string_from_buffer_ascii, bytestring_to_buffer, walk_grid } from './util.js';
import * as util from './util.js';
class EditorPackMetaOverlay extends DialogOverlay {
@ -45,7 +45,7 @@ class EditorLevelMetaOverlay extends DialogOverlay {
let dl = mk('dl.formgrid');
this.main.append(dl);
let time_limit_input = mk('input', {name: 'time_limit', type: 'range', min: 0, max: 999, value: stored_level.time_limit});
let time_limit_input = mk('input', {name: 'time_limit', type: 'number', min: 0, max: 999, value: stored_level.time_limit});
let time_limit_output = mk('output');
let update_time_limit = () => {
let time_limit = parseInt(time_limit_input.value, 10);
@ -54,7 +54,7 @@ class EditorLevelMetaOverlay extends DialogOverlay {
text = "No time limit";
}
else {
text = `${time_limit} (${util.format_duration(time_limit)})`;
text = util.format_duration(time_limit);
}
time_limit_output.textContent = text;
};
@ -74,14 +74,48 @@ class EditorLevelMetaOverlay extends DialogOverlay {
mk('dt', "Author"),
mk('dd', mk('input', {name: 'author', type: 'text', value: stored_level.author})),
mk('dt', "Time limit"),
mk('dd', time_limit_input, " ", time_limit_output),
mk('dd',
time_limit_input,
" ",
time_limit_output,
mk('br'),
mk_button("None", ev => {
this.root.elements['time_limit'].value = 0;
update_time_limit();
}),
mk_button("−30s", ev => {
this.root.elements['time_limit'].value = Math.max(0,
parseInt(this.root.elements['time_limit'].value, 10) - 30);
update_time_limit();
}),
mk_button("+30s", ev => {
this.root.elements['time_limit'].value = Math.min(999,
parseInt(this.root.elements['time_limit'].value, 10) + 30);
update_time_limit();
}),
mk_button("Max", ev => {
this.root.elements['time_limit'].value = 999;
update_time_limit();
}),
),
mk('dt', "Size"),
mk('dd',
"Width: ",
mk('input', {name: 'size_x', type: 'number', min: 10, max: 100, value: stored_level.size_x}),
mk('br'),
"Height: ",
" × ",
mk('input', {name: 'size_y', type: 'number', min: 10, max: 100, value: stored_level.size_y}),
mk('br'),
mk_button("10×10", ev => {
this.root.elements['size_x'].value = 10;
this.root.elements['size_y'].value = 10;
}),
mk_button("32×32", ev => {
this.root.elements['size_x'].value = 32;
this.root.elements['size_y'].value = 32;
}),
mk_button("100×100", ev => {
this.root.elements['size_x'].value = 100;
this.root.elements['size_y'].value = 100;
}),
),
mk('dt', "Viewport"),
mk('dd',

6
js/util.js
View File

@ -30,6 +30,12 @@ export function mk(tag_selector, ...children) {
return _mk(el, children);
}
export function mk_button(label, onclick) {
let el = mk('button', {type: 'button'}, label);
el.addEventListener('click', onclick);
return el;
}
export const SVG_NS = 'http://www.w3.org/2000/svg';
export function mk_svg(tag_selector, ...children) {
let [tag, ...classes] = tag_selector.split('.');

12
style.css
View File

@ -33,6 +33,12 @@ input[type=range] {
margin: 0.125em;
vertical-align: middle;
}
input[type=number] {
font-size: inherit;
width: 4em;
width: 8ch;
text-align: right;
}
button,
.radio-faux-button-set > label > input + span {
font-size: inherit;
@ -264,6 +270,12 @@ dl.formgrid > dd {
grid-column: 2;
margin: 0;
}
dl.formgrid > dd button {
margin: 0.25em 0;
}
dl.formgrid > dd button + button {
margin-left: 0.25em;
}
/* Individual overlays */
table.level-browser {