141 lines
No EOL
3 KiB
Text
141 lines
No EOL
3 KiB
Text
---
|
|
title: Intro
|
|
tags:
|
|
- game
|
|
---
|
|
{% assign bodyClass = 'body_intro' -%}
|
|
{% layout 'hippie-view/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="init" 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 assets %}
|
|
{{ block.super -}}
|
|
<script src="/js/intro.js"></script>
|
|
{% endblock %}
|
|
|
|
{%- block script %}
|
|
{{ block.super -}}
|
|
<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('init');
|
|
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';
|
|
window.location.href = './menu.html';
|
|
});
|
|
</script>
|
|
{% endblock %} |