lexys-labyrinth/js/editor-tile-overlays.js

91 lines
2.6 KiB
JavaScript

import { TransientOverlay } from './main-base.js';
import { mk } from './util.js';
// FIXME could very much stand to have a little animation when appearing
class TileEditorOverlay extends TransientOverlay {
constructor(conductor) {
let root = mk('form.editor-popup-tile-editor');
root.append(mk('span.popup-chevron'));
super(conductor, root);
this.editor = conductor.editor;
this.tile = null;
}
edit_tile(tile) {
this.tile = tile;
}
static configure_tile_defaults(tile) {
// FIXME maybe this should be on the tile type, so it functions as documentation there?
}
}
class LetterTileEditor extends TileEditorOverlay {
constructor(conductor) {
super(conductor);
let list = mk('ol.editor-letter-tile-picker');
this.root.append(list);
this.glyph_elements = {};
for (let c = 32; c < 128; c++) {
let glyph = String.fromCharCode(c);
let input = mk('input', {type: 'radio', name: 'glyph', value: glyph});
this.glyph_elements[glyph] = input;
let item = mk('li', mk('label', input, mk('span.-glyph', glyph)));
list.append(item);
}
list.addEventListener('change', ev => {
let glyph = this.root.elements['glyph'].value;
if (this.tile) {
this.tile.ascii_code = glyph.charCodeAt(0);
// FIXME should be able to mark tiles as dirty, also this is sure a mouthful
this.conductor.editor.renderer.draw();
}
});
}
edit_tile(tile) {
super.edit_tile(tile);
this.root.elements['glyph'].value = String.fromCharCode(tile.ascii_code);
}
static configure_tile_defaults(tile) {
tile.ascii_code = 32;
}
}
class HintTileEditor extends TileEditorOverlay {
constructor(conductor) {
super(conductor);
this.text = mk('textarea.editor-hint-tile-text');
this.root.append(this.text);
this.text.addEventListener('input', ev => {
if (this.tile) {
this.tile.specific_hint = this.text.value;
}
});
}
edit_tile(tile) {
super.edit_tile(tile);
this.text.value = tile.specific_hint ?? "";
}
static configure_tile_defaults(tile) {
tile.specific_hint = "";
}
}
export const TILES_WITH_PROPS = {
floor_letter: LetterTileEditor,
hint: HintTileEditor,
// TODO various wireable tiles
// TODO initial value of counter
// TODO cloner arrows
// TODO railroad parts
// TODO later, custom floor/wall selection
};