Improve ergonomics of the level props dialog a bit

js/main-editor.js

@@ -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',

js/util.js

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

style.css

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