feat: Change file structure
- 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:
parent
610e22b3c9
commit
b67a8a893a
78 changed files with 21 additions and 19 deletions
22
source/view/demo/examples/game/index.liquid
Normal file
22
source/view/demo/examples/game/index.liquid
Normal file
|
|
@ -0,0 +1,22 @@
|
|||
---
|
||||
title: Game
|
||||
tags:
|
||||
- demoExample
|
||||
- index
|
||||
---
|
||||
{% layout 'hippie/simple.liquid' %}
|
||||
|
||||
{% block body %}
|
||||
<div class="sec_main_center">
|
||||
<nav role="doc-toc">
|
||||
<h1>{{ title }}</h1>
|
||||
<ul class="link">
|
||||
{%- for game in collections.game -%}
|
||||
<li>
|
||||
<a href="{{ game.page.url }}">{{ game.data.title }}</a>
|
||||
</li>
|
||||
{%- endfor -%}
|
||||
</ul>
|
||||
</nav>
|
||||
</div>
|
||||
{% endblock %}
|
||||
141
source/view/demo/examples/game/intro.liquid
Normal file
141
source/view/demo/examples/game/intro.liquid
Normal file
|
|
@ -0,0 +1,141 @@
|
|||
---
|
||||
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 %}
|
||||
16
source/view/demo/examples/game/menu.liquid
Normal file
16
source/view/demo/examples/game/menu.liquid
Normal file
|
|
@ -0,0 +1,16 @@
|
|||
---
|
||||
title: Menu
|
||||
tags:
|
||||
- game
|
||||
---
|
||||
{% assign bodyClass = 'body_menu' -%}
|
||||
{% layout 'hippie/simple.liquid' %}
|
||||
|
||||
{% block body %}
|
||||
{% render 'hippie/partials/game-menu.liquid', links: menu %}
|
||||
<footer>
|
||||
{% brand 'brand', 'last' %}
|
||||
<p>Marke</p>
|
||||
{% endbrand %}
|
||||
</footer>
|
||||
{% endblock %}
|
||||
86
source/view/demo/examples/game/mwo.liquid
Normal file
86
source/view/demo/examples/game/mwo.liquid
Normal file
|
|
@ -0,0 +1,86 @@
|
|||
---
|
||||
title: MWO
|
||||
tags:
|
||||
- game
|
||||
---
|
||||
{% assign bodyClass = 'body_mwo' -%}
|
||||
{% layout 'hippie/game.liquid' %}
|
||||
|
||||
{% block links %}
|
||||
{{ block.super -}}
|
||||
<link href="/vendor/bootstrap-icons/font/bootstrap-icons.min.css" rel="stylesheet">
|
||||
{% endblock %}
|
||||
|
||||
{% block body %}
|
||||
<canvas id="view"></canvas>
|
||||
|
||||
<header class="io controls">
|
||||
<nav>
|
||||
<button onclick="toggleAnimation()">Toggle</button>
|
||||
</nav>
|
||||
<nav>
|
||||
<span>Color</span>
|
||||
<button onclick="changeColor('black')">Black</button>
|
||||
<button onclick="changeColor('white')">White</button>
|
||||
<button onclick="changeColor('crimson')">Red</button>
|
||||
<button onclick="changeColor('#00ffff')">Cyan</button>
|
||||
</nav>
|
||||
<nav>
|
||||
<span>Crosshair</span>
|
||||
<button onclick="changeCrosshairStyle('cross')"><i class="bi bi-plus-lg"></i></button>
|
||||
<button onclick="changeCrosshairStyle('circle')"><i class="bi bi-circle"></i></button>
|
||||
<button onclick="changeCrosshairStyle('dot')"><i class="bi bi-dot"></i></button>
|
||||
<button onclick="changeCrosshairStyle('level')"><i class="bi bi-dash-circle"></i></button>
|
||||
</nav>
|
||||
<nav>
|
||||
<span>Connector</span>
|
||||
<button onclick="toggleConnector()">Toggle</button>
|
||||
<hr class="vertical">
|
||||
<button onclick="changeConnectorStyle('arrow')"><i class="bi bi-caret-up-fill"></i></button>
|
||||
<button onclick="changeConnectorStyle('square')"><i class="bi bi-square-fill"></i></button>
|
||||
<button onclick="changeConnectorStyle('circle')"><i class="bi bi-circle-fill"></i></button>
|
||||
<button onclick="changeConnectorStyle('diamond')"><i class="bi bi-diamond-fill"></i></button>
|
||||
</nav>
|
||||
</header>
|
||||
{% endblock %}
|
||||
|
||||
{% block assets %}
|
||||
<script src="/js/game.js"></script>
|
||||
{% endblock %}
|
||||
|
||||
{% block script %}
|
||||
<script>
|
||||
const canvas = document.getElementById('view');
|
||||
canvas.width = window.innerWidth;
|
||||
canvas.height = window.innerHeight;
|
||||
|
||||
const crosshair = new HippieCrosshair(canvas);
|
||||
|
||||
function changeCrosshairStyle(style) {
|
||||
crosshair.setCrosshairStyle(style);
|
||||
}
|
||||
|
||||
function changeConnectorStyle(style) {
|
||||
crosshair.setConnectorStyle(style);
|
||||
}
|
||||
|
||||
function changeColor(color) {
|
||||
crosshair.setCrosshairColor(color);
|
||||
crosshair.setConnectorColor(color);
|
||||
crosshair.lineColor = `rgba(${parseInt(color.slice(1, 3), 16)}, ${parseInt(color.slice(3, 5), 16)}, ${parseInt(color.slice(5, 7), 16)}, 0.3)`;
|
||||
}
|
||||
|
||||
function toggleConnector() {
|
||||
crosshair.setConnectorVisibility(!crosshair.connectorShow);
|
||||
}
|
||||
|
||||
function toggleAnimation() {
|
||||
crosshair.toggleAnimation();
|
||||
}
|
||||
|
||||
window.addEventListener('resize', () => {
|
||||
canvas.width = window.innerWidth;
|
||||
canvas.height = window.innerHeight;
|
||||
});
|
||||
</script>
|
||||
{% endblock %}
|
||||
236
source/view/demo/examples/game/tfw.liquid
Normal file
236
source/view/demo/examples/game/tfw.liquid
Normal file
|
|
@ -0,0 +1,236 @@
|
|||
---
|
||||
title: TFW
|
||||
tags:
|
||||
- game
|
||||
---
|
||||
{% assign bodyClass = 'body_tfw' -%}
|
||||
{% layout 'hippie/game.liquid' %}
|
||||
|
||||
{% block body %}
|
||||
<header class="io">
|
||||
<button data-action="escape">☰</button>
|
||||
<button data-direction="previous"><</button>
|
||||
<button data-view="quest">Quests</button>
|
||||
<button data-view="region">Regions</button>
|
||||
<button data-view="vendor">Vendors</button>
|
||||
<button data-view="manufacture">Manufacture</button>
|
||||
<button data-view="character">Characters</button>
|
||||
<button data-view="stash">Stash</button>
|
||||
<button data-view="secret">Secret Storage</button>
|
||||
<button data-view="squad">Squads</button>
|
||||
<button data-view="ready">Ready Room</button>
|
||||
<button data-direction="next">></button>
|
||||
</header>
|
||||
<div id="viewQuest" class="view">
|
||||
<main>
|
||||
<nav>
|
||||
<div class="important">Filter</div>
|
||||
<input placeholder="Search" aria-label="search" type="text">
|
||||
<select name="type" aria-label="type">
|
||||
<option value="" selected>Type</option>
|
||||
<option value="all">All</option>
|
||||
<option value="assasin">Assasination</option>
|
||||
<option value="loot">Looting</option>
|
||||
<option value="extract">Extract</option>
|
||||
<option value="fetch">Fetch</option>
|
||||
<option value="kill">Kill</option>
|
||||
</select>
|
||||
</nav>
|
||||
<div>
|
||||
<div>
|
||||
<table>
|
||||
<colgroup>
|
||||
<col class="l">
|
||||
<col class="q">
|
||||
<col class="t">
|
||||
</colgroup>
|
||||
<tr>
|
||||
<th>Location</th>
|
||||
<th>Quest</th>
|
||||
<th>Type</th>
|
||||
</tr>
|
||||
<tr>
|
||||
<td class="background">
|
||||
<span>Scorched Earth</span>
|
||||
</td>
|
||||
<td>...</td>
|
||||
<td class="subtle">Available</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td class="background">
|
||||
<span>Location name</span>
|
||||
</td>
|
||||
<td>...</td>
|
||||
<td class="subtle">Available</td>
|
||||
</tr>
|
||||
</table>
|
||||
</div>
|
||||
<div>
|
||||
<table>
|
||||
<colgroup>
|
||||
<col class="l">
|
||||
<col class="q">
|
||||
<col class="s">
|
||||
</colgroup>
|
||||
<tr>
|
||||
<th colspan="3">Active quests (Max.: 4)</th>
|
||||
</tr>
|
||||
<tr>
|
||||
<td class="background"></td>
|
||||
<td>King Of Kings</td>
|
||||
<td class="subtle">Active</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td class="background"></td>
|
||||
<td>Garage Days Pt. 1</td>
|
||||
<td class="subtle success">Complete</td>
|
||||
</tr>
|
||||
</table>
|
||||
</div>
|
||||
</div>
|
||||
<div>
|
||||
<div class="quest">
|
||||
<div class="background">
|
||||
<h2>King Of Kings</h2>
|
||||
</div>
|
||||
<p>A hijacked medium mech dubbed the "Rat King" ...</p>
|
||||
<hr class="dotted">
|
||||
<p>Collect Rat King residue.</p>
|
||||
<hr>
|
||||
<p>Multiple rig container upgrades, 5000 CR, 5000 XP, 2 days of water, + Scav faction
|
||||
rating</p>
|
||||
</div>
|
||||
</div>
|
||||
</main>
|
||||
<footer class="io">
|
||||
<button data-action="back">Back</button>
|
||||
<button data-action="accept">Accept</button>
|
||||
</footer>
|
||||
</div>
|
||||
<div id="viewRegion" class="view"></div>
|
||||
<div id="viewVendor" class="view"></div>
|
||||
{% endblock %}
|
||||
|
||||
{%- block script %}
|
||||
{{ block.super -}}
|
||||
<script>
|
||||
const menu = document.querySelector('body > header');
|
||||
const placeholder = document.querySelectorAll('.background');
|
||||
const viewQuest = document.getElementById('viewQuest');
|
||||
|
||||
class Menu {
|
||||
constructor(element, options = {}) {
|
||||
this._element = element;
|
||||
this._siblings = element.querySelectorAll('button[data-view]');
|
||||
this.default = options.default || 'quest';
|
||||
|
||||
element.addEventListener('click', this.onClick.bind(this)); // Bind to get the clicked element and not the DOM element of the class
|
||||
|
||||
this.#init();
|
||||
}
|
||||
|
||||
escape() {
|
||||
console.log('escape');
|
||||
}
|
||||
|
||||
#init() {
|
||||
const currentBtn = Array.from(this._siblings).find(
|
||||
el => el.dataset.view === this.default
|
||||
);
|
||||
|
||||
currentBtn.classList.add('active');
|
||||
this.changeView(this.default);
|
||||
}
|
||||
|
||||
// TODO: Sollte auch die Menüauswahl anpassen
|
||||
changeView(type) {
|
||||
console.debug(type);
|
||||
const id = 'view' + capitalizeFirstLetter(type);
|
||||
const views = document.querySelectorAll('.view');
|
||||
|
||||
for (const view of views) {
|
||||
view.style.display = 'none';
|
||||
}
|
||||
|
||||
document.getElementById(id).style.display = 'flex';
|
||||
}
|
||||
|
||||
onClick(event) {
|
||||
const siblings = this._siblings;
|
||||
const action = event.target.dataset.action;
|
||||
const view = event.target.dataset.view;
|
||||
const direction = event.target.dataset.direction;
|
||||
|
||||
if (event.button !== 0) return;
|
||||
|
||||
if (direction) {
|
||||
const currentBtn = this._element.querySelector('.active');
|
||||
let newButton, newView = undefined;
|
||||
|
||||
if (currentBtn === null) return;
|
||||
|
||||
if (direction === 'next') {
|
||||
newButton = currentBtn.nextElementSibling;
|
||||
newView = currentBtn.nextElementSibling.dataset.view;
|
||||
} else {
|
||||
newButton = currentBtn.previousElementSibling;
|
||||
newView = currentBtn.previousElementSibling.dataset.view;
|
||||
}
|
||||
|
||||
if (!newButton.dataset.view) {
|
||||
newButton = direction === 'next' ? siblings[0] : siblings[siblings.length - 1];
|
||||
}
|
||||
|
||||
currentBtn.classList.remove('active');
|
||||
newButton.classList.add('active');
|
||||
this.changeView(newView);
|
||||
}
|
||||
|
||||
if (view) {
|
||||
for (const sibling of siblings) {
|
||||
sibling.classList.remove('active');
|
||||
}
|
||||
|
||||
this.changeView(view);
|
||||
event.target.classList.add('active');
|
||||
}
|
||||
|
||||
if (action) this[action]();
|
||||
};
|
||||
}
|
||||
|
||||
// TODO: Allgemeinere Umsetzung anstreben
|
||||
viewQuest.addEventListener('click', (event) => {
|
||||
const rows = viewQuest.querySelectorAll('tr');
|
||||
const rowTarget = event.target.closest('tr');
|
||||
|
||||
if (event.button !== 0) return;
|
||||
|
||||
// TODO: Ziele unterscheiden
|
||||
if (rowTarget) {
|
||||
for (const row of rows) {
|
||||
row.classList.remove('active');
|
||||
}
|
||||
|
||||
rowTarget.classList.add('active');
|
||||
document.querySelector('.quest').style.opacity = 1;
|
||||
document.querySelector('footer button[data-action=accept]').style.display = 'inline-block';
|
||||
}
|
||||
});
|
||||
|
||||
placeholder.forEach(element => {
|
||||
const hue = randomIntFrom(0, 360);
|
||||
const grayscale = randomFloatFrom(0, 1);
|
||||
|
||||
new RandomPixelPlaceholder(element, {
|
||||
width: Math.floor(element.clientWidth),
|
||||
height: Math.floor(element.clientHeight),
|
||||
colors: ['#fad803', '#d30a51', '#273f8b', '#b7e0f0', '#52bed1', '#0c85ff'],
|
||||
filter: 'grayscale(' + grayscale + ') hue-rotate(' + hue + 'deg)',
|
||||
type: 'img'
|
||||
});
|
||||
});
|
||||
|
||||
new Menu(menu);
|
||||
</script>
|
||||
{% endblock %}
|
||||
Loading…
Add table
Add a link
Reference in a new issue