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

feat: Update game screen

Browse source 
- Use new RandomPixelPlaceholder
- Add first event for view
This commit is contained in:
sthag 2026-04-05 12:18:40 +02:00
parent 167e35ae33
commit 38274c1277
2 changed files with 43 additions and 14 deletions
Download patch file Download diff file Expand all files Collapse all files

52
source/screens/demo/examples/game/tfw.liquid
View file

@ -25,8 +25,8 @@ tags:
<main>
<nav>
<div class="important">Filter</div>
<input placeholder="Search" type="text">
<select name="type">
<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>
@ -89,15 +89,17 @@ tags:
</div>
</div>
<div>
<div class="background">
<h2>King Of Kings</h2>
<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&nbsp;CR, 5000&nbsp;XP, 2 days of water, +&nbsp;Scav faction
rating</p>
</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&nbsp;CR, 5000&nbsp;XP, 2 days of water, +&nbsp;Scav faction
rating</p>
</div>
</main>
<footer class="io">
@ -114,6 +116,7 @@ tags:
<script>
const menu = document.querySelector('body > header');
const placeholder = document.querySelectorAll('.background');
const viewQuest = document.getElementById('viewQuest');
class Menu {
constructor(element, options = {}) {
@ -139,6 +142,7 @@ tags:
this.changeView(this.default);
}
// TODO: Sollte auch die Menüauswahl anpassen
changeView(type) {
console.debug(type);
const id = 'view' + capitalizeFirstLetter(type);
@ -195,15 +199,35 @@ tags:
};
}
// 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 RandomPixelCanvas(element, {
width: Math.floor(element.parentElement.clientWidth),
height: Math.floor(element.parentElement.clientHeight),
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)'
filter: 'grayscale(' + grayscale + ') hue-rotate(' + hue + 'deg)',
type: 'img'
});
});

5
source/style/modules/game/_tfw.scss
View file

@ -172,4 +172,9 @@
}
}
}
.quest,
footer *:not(button[data-action="back"]) {
opacity: 0;
}
}