hippie/source/code/ui.js

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