interaktionsweise/hippie
1
1
Fork 0
Code Issues Pull requests Releases 3 Activity Actions

feat: Change file structure

Browse source 
- Move return object to named export for 11ty config
- screens is now view
- 11ty data files moved to view/_data
- templates is now view/_includes
- Both are the default directories
- data is now used as intended, for user data
- Update index to reflect filenames and structure
This commit is contained in:
sthag 2026-04-05 14:13:32 +02:00
parent 610e22b3c9
commit b67a8a893a
78 changed files with 21 additions and 19 deletions
Download patch file Download diff file Expand all files Collapse all files

141
source/screens/demo/examples/game/intro.liquid
View file

@ -1,141 +0,0 @@
---
title: Intro
tags:
- game
---
{% 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="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 %}