---
title: Intro
tags:
- game
---

{% assign pageId = "init" %}
{% assign bodyClass = 'body_intro' -%}
{% layout 'hippie/app.liquid' %}

{% block body %}
<div id="loader" class="step op_show">
	<div id="bar">
		<div id="spinner">
			<span>I</span>
		</div>
		<div id="wrap">
			<div id="progress"></div>
		</div>
		<div id="status">0%</div>
	</div>
</div>
<div id="intro" class="step op_hide">
	<div id="hint" class="toast di_none" role="alert" aria-live="assertive" aria-atomic="true">
		<p>Hold
			<kbd>space</kbd>
			to skip.</p>
	</div>
	{% brand 'brand' %}
	<h1>Marke</h1>
	{% endbrand %}
	<p>Powered by</p>
	<ul class="tech-stack">
		<li>Vendor</li>
		<li>IDE</li>
		<li>Engine</li>
	</ul>
</div>
<div id="agreement" class="step op_hide">
	<h1>Agreement</h1>
	<p>This needs to be seen and acknowledged.<br>So an interaction must be made to continue.</p>
</div>
<div id="idle" class="step op_hide">
	<div class="mouse-overlay"></div>
	<div class="hello">Hello World!</div>
	<p class="hello">Only left mouse click or any key</p>
</div>
{% endblock %}

{%- block script %}
{{ block.super -}}
<script src="/js/intro.js"></script>
<script>
	//let intro = new Intro('Intro');
	//intro.init();

	//const ui = new UI();
	//ui
	//  .init()
	//  .then(() => ui.showIntro())
	//  .then(() => ui.showHint())
	//  .then(() => ui.showIdle())
	//  .catch((error) => console.error(error));

	let introDelay = 6;
	let hintDelay = 1;
	let cycleDelay = 2;
	let isAgree = false;
	const steps = {
		agreement: {
			element: document.getElementById('agreement'),
			msgIn: 'Agreement shown.',
			msgOut: 'Agreement accepted.',
			msgNo: 'No agreement today.'
		}
	};
	const intro = document.getElementById('intro');
	const agreement = steps.agreement.element;
	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');
	const idle = {
		element: document.getElementById('idle'),
		delay: cycleDelay * 1000,
		position: 0,
		cycle() {
			if (typeof this.intervalId === 'number') {
				this.cancel();
			}
			this.intervalId = setInterval(() => {
				this.position++;
				if (this.position >= flagColors.length) {
					this.position = 0;
				}
				this.element.style.backgroundColor = '#' + flagColors[this.position];
			}, this.delay);
		},
		cancel() {
			this.intervalId && clearInterval(this.intervalId);
		}
	}
	init()
		.then(loadCore)
		.then(showIntro)
		.catch(er => console.error(er))
		.then(showAgreement)
		.then(showIdle)
		.catch(er => console.error(er))
		.finally(() => {
			console.debug('Init end.', isAgree);
			// location = 'demo/examples/ui/new.html';
		});
</script>
{% endblock %}