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);
	}
};
const loader = document.getElementById('loader');

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;

	window.addEventListener('click', () => hint.show());
	window.addEventListener('keydown', () => hint.show());

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

function loadCore() {
	const el = loader;
	const bar = loader.querySelector('#progress');
	const status = loader.querySelector('#status');
	const spinner = loader.querySelector('#spinner');
	const sp = spinner.querySelector('span');

	let progress = 0;

	return new Promise((resolve) => {
		console.info("Core loading.");

		updateProgressBar();

		function updateProgressBar() {
			let increment = randomIntFrom(1, 19);

			progress += increment;

			if (progress >= 100) progress = 100;
			// console.log(progress);

			bar.style.width = progress + '%';
			status.textContent = progress + '%';

			if (progress < 100) {
				setTimeout(updateProgressBar, 800);
			} else {
				bar.style.width = '100%';
				sp.style.animationPlayState = 'paused';
				spinner.style.color = 'white';
				spinner.style.backgroundColor = 'black';
				el.classList.replace('op_show', 'op_hide');
				el.addEventListener('transitionend', () => {
					console.info("Core loaded.");

					resolve("Core loaded.");
				});
			}
		}
	});
}

init()
	.then(loadCore)
	.then(showIntro)
	.catch(er => console.error(er))
	.then(showAgreement)
	.catch(er => console.error(er))
	.finally(() => {
		console.debug('Init end.', loader, intro, agreement);
	});

// document.addEventListener('DOMContentLoaded', () => {
// 	const barEl = document.getElementById('bar');
// 	const bar = document.getElementById('progress');
// 	const status = document.getElementById('status');
// 	const spinnerEl = document.getElementById('spinner');
// 	const spinner = document.getElementById('spinner').querySelector('span');

// 	let progress = 0;

// 	function updateProgressBar() {
// 		let increment = randomIntFrom(1, 9);
// 		progress += increment;

// 		if (progress >= 100) progress = 100;
// 		console.log(progress);

// 		bar.style.width = progress + '%';
// 		status.textContent = progress + '%';

// 		if (progress < 100) {
// 			setTimeout(updateProgressBar, 100);
// 		} else {
// 			bar.style.width = '100%';
// 			spinner.style.animationPlayState = 'paused';
// 			spinnerEl.style.color = 'white';
// 			spinnerEl.style.backgroundColor = 'black';
// 		}
// 	}

// 	updateProgressBar();

// 	window.addEventListener('load', () => {
// 		// progressEl.style.width = '100%';
// 		// setTimeout(() => {
// 		// 		progressBar.style.opacity = 0;
// 		// 		setTimeout(() => {
// 		// 				progressBar.style.display = 'none';
// 		// 		}, 500);
// 		// }, 2000);
// 	});
// });

/**
 * Gibt eine Zahl zwischen <min> und <max> aus.
 * Die Werte <min> und <max> sind dabei mit eingeschlossen.
 * Mit <pos> kann der Exponent für eine 10er-Teilung angegeben werden.
 * 
 * @param {number} min 
 * @param {number} max 
 * @param {number} pos 
 * @returns {number}
 */
function randomIntFrom(min, max, pos = 0) {
	pos = Math.pow(10, pos);
	min = Math.ceil(min);
	max = Math.floor(max);

	return Math.floor((Math.random() * (max - min + 1) + min) / pos) * pos;
}