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> <main>
<nav> <nav>
<div class="important">Filter</div> <div class="important">Filter</div>
<input placeholder="Search" type="text"> <input placeholder="Search" aria-label="search" type="text">
<select name="type"> <select name="type" aria-label="type">
<option value="" selected>Type</option> <option value="" selected>Type</option>
<option value="all">All</option> <option value="all">All</option>
<option value="assasin">Assasination</option> <option value="assasin">Assasination</option>
@ -89,15 +89,17 @@ tags:
</div> </div>
</div> </div>
<div> <div>
<div class="background"> <div class="quest">
<h2>King Of Kings</h2> <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> </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> </div>
</main> </main>
<footer class="io"> <footer class="io">
@ -114,6 +116,7 @@ tags:
<script> <script>
const menu = document.querySelector('body > header'); const menu = document.querySelector('body > header');
const placeholder = document.querySelectorAll('.background'); const placeholder = document.querySelectorAll('.background');
const viewQuest = document.getElementById('viewQuest');
class Menu { class Menu {
constructor(element, options = {}) { constructor(element, options = {}) {
@ -139,6 +142,7 @@ tags:
this.changeView(this.default); this.changeView(this.default);
} }
// TODO: Sollte auch die Menüauswahl anpassen
changeView(type) { changeView(type) {
console.debug(type); console.debug(type);
const id = 'view' + capitalizeFirstLetter(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 => { placeholder.forEach(element => {
const hue = randomIntFrom(0, 360); const hue = randomIntFrom(0, 360);
const grayscale = randomFloatFrom(0, 1); const grayscale = randomFloatFrom(0, 1);
new RandomPixelCanvas(element, { new RandomPixelPlaceholder(element, {
width: Math.floor(element.parentElement.clientWidth), width: Math.floor(element.clientWidth),
height: Math.floor(element.parentElement.clientHeight), height: Math.floor(element.clientHeight),
colors: ['#fad803', '#d30a51', '#273f8b', '#b7e0f0', '#52bed1', '#0c85ff'], 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;
}
} }