hippie/source/code/intro.js

class Intro {
	constructor(name) {
		this.name = name;
	}

	init() {
		return new Promise((resolve) => {
			console.log('%s Init', this.name);

			resolve();
		});
	}
}

class UI {
	constructor() {
		this.introDelay = 6;
		this.hintDelay = 1;
		this.isAgree = false;
		this.steps = {
			agreement: {
				element: document.getElementById('agreement'),
				msgIn: 'Agreement shown.',
				msgOut: 'Agreement accepted.',
				msgNo: 'No agreement today.'
			}
		};
		this.intro = document.getElementById('intro');
		this.agreement = this.steps.agreement.element;
		this.hint = {
			element: document.getElementById('hint'),
			delay: this.hintDelay * 1000
		};
		this.loader = document.getElementById('loader');
	}

	showIntro() {
		const el = this.intro;
		const dy = this.introDelay * 1000;

		document.addEventListener('click', hintHandler, false);
		document.addEventListener('keydown', hintHandler, false);

		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.");

							el.classList.add('di_none');
							resolve("Intro fin.");
						});
					},
					dy
				);
			} else {
				reject('No intro available.');
			}
		})
	}

	showHint() {
		if (typeof this.hint.timeoutId === 'number') {
			this.cancelHint();
		}

		this.hint.element.classList.remove('di_none');

		this.hint.timeoutId = setTimeout(
			() => {
				this.dismissHint();
			},
			this.hint.delay
		);
	}

	dismissHint() {
		this.hint.element.classList.add('di_none');
		this.hint.timeoutId = undefined;
	}

	cancelHint() {
		clearTimeout(this.hint.timeoutId);
	}

	showIdle() {
		const el = document.getElementById('idle');

		return new Promise((resolve, reject) => {
			if (el) {
				console.info('Idle.');

				el.classList.replace('op_hide', 'op_show');
				resolve('Idle.');
			} else {
				reject();
			}
		})
	}

	init() {
		return new Promise((resolve) => {
			console.log('Init');

			resolve();
		});
	}
}

function init() {
	return new Promise((resolve) => {
		console.log('Init');

		// Set all steps to not receive pointer events
		document.querySelectorAll('.step').forEach(element => {
			console.log(element);
			
			element.style.pointerEvents = 'none';
		});

		resolve();
	});
}

function showIntro() {
	const el = intro;
	const dy = introDelay * 1000;

	document.addEventListener('click', hintHandler, false);
	document.addEventListener('keydown', hintHandler, false);

	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.");

						el.classList.add('di_none');

						resolve("Intro fin.");
					});
				},
				dy
			);
		} else {
			document.removeEventListener('click', hintHandler);
			document.removeEventListener('keydown', hintHandler);

			reject('No intro available.');
		}
	})
}

function showAgreement() {
	document.removeEventListener('click', hintHandler);
	document.removeEventListener('keydown', hintHandler);
	const el = agreement;
	const dy = introDelay * 1000;

	return new Promise((resolve, reject) => {
		if (el) {
			console.info(steps.agreement.msgIn);

			el.classList.replace('op_hide', 'op_show');
			el.style.pointerEvents = '';

			el.addEventListener('click', agreeHandler);
			document.addEventListener('keydown', agreeHandler);
		} else {
			reject(steps.agreement.msgNo);
		}

		function agreeHandler() {
			const el = agreement;

			isAgree = true;

			el.classList.replace('op_show', 'op_hide');
			el.addEventListener('transitionend', function endListener() {
				console.info(steps.agreement.msgOut);

				el.removeEventListener('transitionend', endListener);
				el.removeEventListener('click', agreeHandler);
				document.removeEventListener('keydown', agreeHandler);
				el.classList.add('di_none');

				resolve(steps.agreement.msgOut);
			});
		}
	})
}

function showIdle() {
	const el = document.getElementById('idle');

	document.addEventListener('mouseleave', idleStart, false);
	document.addEventListener('mouseenter', idleStop, false);

	return new Promise((resolve, reject) => {
		if (el) {
			console.info('Idle.');

			el.classList.replace('op_hide', 'op_show');
			el.style.pointerEvents = '';
			el.addEventListener('click', idleStart, false);

			resolve('Idle.');
		} else {
			document.removeEventListener('mouseleave', idleStart);
			document.removeEventListener('mouseenter', idleStop);

			reject();
		}
	})
}

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() {
			const maxChunk = 33;
			const time = 400;
			let increment = randomIntFrom(1, maxChunk);

			progress += increment;

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

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

			if (progress < 100) {
				setTimeout(updateProgressBar, time);
			} 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', function endListener() {
					console.info("Core loaded.");

					el.removeEventListener('transitionend', endListener);
					el.classList.add('di_none');

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

/**
 * 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;
}

/**
 * Erstellt Kontext für hint-Objekt und ermöglicht das Entfernen des Ereignis.
 */
function hintHandler() {
	hint.show();
}

function idleStart() {
	idle.cycle();
}

function idleStop() {
	idle.cancel();
}

/**
 * Blendet einen Schritt aus.
 * 
 * @param {*} e 
 * @returns 
 */
function stepHandler(e) {
	const el = e.target;
	const msg = steps[el.id].msgOut;

	return new Promise(function (resolve) {
		el.classList.replace('op_show', 'op_hide');
		el.addEventListener('transitionend', function endListener() {
			console.info(msg);

			el.removeEventListener('transitionend', endListener);
			
			resolve(msg);
		});
	})
}