---
title: Intro
tags: 
  - demoExample
---

{% set pageId = "init" %}
{% set bodyClass = "body_intro" %}

{% extends "hippie/_app_frame.njk" %}
{% import "hippie/macros/_placeholder.njk" as ph %}

{% 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>
		{{ ph.brand('brand') }}
		<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 %}
	{{ super() }}
	<script src="{{ pageBase }}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 %}