hippie/source/code/ui.js

let introDelay = 6;
let hintDelay = 1;

const intro = {
	element: document.getElementById('intro'),
	delay: introDelay * 1000,
	show() {
		if (typeof this.timeoutId === 'number') {
			this.cancel();
		}

		console.info("Intro begin.");
		this.element.classList.replace('op_hide', 'op_show');

		this.timeoutId = setTimeout(
			() => {
				this.dismiss();
			},
			this.delay
		)
	},
	dismiss() {
		this.element.classList.replace('op_show', 'op_hide');
		this.timeoutId = undefined;

		this.element.addEventListener('transitionend', () => {
			console.info("Intro fin.");
			agree();
		});
	},
	cancel() {
		clearTimeout(this.timeoutId);
	}
};
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());

if (intro.element) intro.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)
	}
}