diff --git a/js/main.js b/js/main.js index cbca248..3564c67 100644 --- a/js/main.js +++ b/js/main.js @@ -536,30 +536,10 @@ class Level { } } -class LevelBrowserOverlay { - constructor(game) { +class Overlay { + constructor(game, root) { this.game = game; - this.root = mk('table.level-browser'); - for (let [i, stored_level] of this.game.stored_game.levels.entries()) { - this.root.append(mk('tr', - {'data-index': i}, - mk('td', i + 1), - mk('td', stored_level.title), - // TODO score? - // TODO other stats?? - mk('td', '▶'), - )); - } - - this.root.addEventListener('click', ev => { - let tr = ev.target.closest('table.level-browser tr'); - if (! tr) - return; - - let index = parseInt(tr.getAttribute('data-index'), 10); - this.game.load_level(index); - this.close(); - }); + this.root = root; // Don't propagate clicks on the root element, so they won't trigger a // parent overlay's automatic dismissal @@ -573,21 +553,62 @@ class LevelBrowserOverlay { this.game.set_state('paused'); } - let overlay = mk('div.overlay', mk('div.dialog', this.root)); + let overlay = mk('div.overlay', this.root); document.body.append(overlay); // Remove the overlay when clicking outside the element overlay.addEventListener('click', ev => { this.close(); }); - - return promise; } close() { this.root.closest('.overlay').remove(); } } +class LevelBrowserOverlay extends Overlay { + constructor(game) { + let root = mk('table.level-browser'); + for (let [i, stored_level] of game.stored_game.levels.entries()) { + this.root.append(mk('tr', + {'data-index': i}, + mk('td', i + 1), + mk('td', stored_level.title), + // TODO score? + // TODO other stats?? + mk('td', '▶'), + )); + } + + root.addEventListener('click', ev => { + let tr = ev.target.closest('table.level-browser tr'); + if (! tr) + return; + + let index = parseInt(tr.getAttribute('data-index'), 10); + this.game.load_level(index); + this.close(); + }); + + super(game, mk('div.dialog', root)); + } +} +class ConfirmOverlay extends Overlay { + constructor(game, message, what) { + let root = mk('div.dialog', mk('p', {}, message)); + let yes = mk('button', {type: 'button'}, "Yep"); + let no = mk('button', {type: 'button'}, "Nope"); + yes.addEventListener('click', ev => { + this.close(); + what(); + }); + no.addEventListener('click', ev => { + this.close(); + }); + root.append(yes, no); + super(game, root); + } +} // TODO: // - some kinda visual theme i guess lol @@ -640,7 +661,7 @@ const GAME_UI_HTML = `