diff --git a/src/ui.ts b/src/ui.ts index 98270ed..5c0b3a1 100644 --- a/src/ui.ts +++ b/src/ui.ts @@ -212,7 +212,7 @@ export function initUI( document.getElementById('help-btn')!.addEventListener('click', () => helpModal.classList.toggle('visible')); document.getElementById('help-close')!.addEventListener('click', () => helpModal.classList.remove('visible')); helpModal.addEventListener('click', (e) => { if (!helpInner.contains(e.target as Node)) helpModal.classList.remove('visible'); }); - document.addEventListener('keydown', (e) => { if (e.key === '?' || (e.key === 'Escape' && helpModal.classList.contains('visible'))) helpModal.classList.toggle('visible'); }); + document.addEventListener('keydown', (e) => { if (e.key === '?') helpModal.classList.toggle('visible'); }); const charactersModal = document.getElementById('characters-modal')!; const charactersInner = document.getElementById('characters-modal-inner')!; @@ -252,7 +252,16 @@ export function initUI( }); document.getElementById('lightbox-close')!.addEventListener('click', () => lightbox.classList.remove('visible')); lightbox.addEventListener('click', (e) => { if (e.target === lightbox) lightbox.classList.remove('visible'); }); - document.addEventListener('keydown', (e) => { if (e.key === 'Escape') lightbox.classList.remove('visible'); }); + + // Escape closes whichever overlay is topmost — lightbox sits on top of + // the characters modal, which can sit on top of help, so check in that + // order and stop at the first one actually open. + document.addEventListener('keydown', (e) => { + if (e.key !== 'Escape') return; + if (lightbox.classList.contains('visible')) { lightbox.classList.remove('visible'); return; } + if (charactersModal.classList.contains('visible')) { charactersModal.classList.remove('visible'); return; } + if (helpModal.classList.contains('visible')) { helpModal.classList.remove('visible'); return; } + }); // Split the map container: map on top, log below const mapContainer = document.getElementById('map-container')!;