let introDelay = 6; let hintDelay = 1; const intro = document.getElementById('intro'); const agreement = document.getElementById('agreement'); const hint = { element: document.getElementById('hint'), delay: hintDelay * 1000, show() { if (typeof this.timeoutId === 'number') { this.cancel(); } this.element.classList.remove('di_none'); this.timeoutId = setTimeout( () => { this.dismiss(); }, this.delay ); }, dismiss() { this.element.classList.add('di_none'); this.timeoutId = undefined; }, cancel() { clearTimeout(this.timeoutId); } }; window.addEventListener('click', () => hint.show()); window.addEventListener('keydown', () => hint.show()); function agree() { if (agreement) { console.info("Agreement show."); agreement.classList.replace('op_hide', 'op_show'); setTimeout(() => { agreement.classList.replace('op_show', 'op_hide'); console.info("Agreement closed."); }, introDelay * 1000) } } function init() { return new Promise((resolve) => { console.log('Init'); resolve(); }); } function showIntro() { const el = intro; const dy = introDelay * 1000; return new Promise((resolve, reject) => { if (el) { console.info("Intro begin."); el.classList.replace('op_hide', 'op_show'); setTimeout( () => { el.classList.replace('op_show', 'op_hide'); el.addEventListener('transitionend', () => { console.info("Intro fin."); resolve("Intro fin."); }); }, dy ); } else { reject('No intro available.'); } }) } function showAgreement() { const el = agreement; const dy = introDelay * 1000; return new Promise((resolve, reject) => { if (el) { console.info("Agreement show."); el.classList.replace('op_hide', 'op_show'); setTimeout( () => { el.classList.replace('op_show', 'op_hide'); el.addEventListener('transitionend', () => { console.info("Agreement closed."); resolve("closed"); }); }, dy ) } else { reject('No agreement today.'); } }) } init() .then(showIntro) .catch(er => console.error(er)) .then(showAgreement) .catch(er => console.error(er)) .finally(() => { console.debug('Init end.'); });