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

feat: Change styles for game

Browse source
This commit is contained in:
sthag 2026-04-04 10:22:04 +02:00
parent a67a36decb
commit afcb06a808
2 changed files with 68 additions and 37 deletions
Download patch file Download diff file Expand all files Collapse all files

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

@ -21,17 +21,20 @@ tags:
<button data-action="ready">Ready Room</button>
<button data-action="next">&gt;</button>
</header>
<div>
<main>
<div class="flex_auto">
<main class="flex_auto">
<nav>
<div class="important">Filter</div>
<input placeholder="Search" type="text">
<div>
<p>Quest type</p>
<menu>
<li></li>
</menu>
</div>
<select name="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>
@ -47,17 +50,15 @@ tags:
<th>Type</th>
</tr>
<tr>
<td>
<td class="background">
<span>Scorched Earth</span>
<div class="background"></div>
</td>
<td>...</td>
<td class="subtle">Available</td>
</tr>
<tr>
<td>
<td class="background">
<span>Location name</span>
<div id="location" class="background"></div>
</td>
<td>...</td>
<td class="subtle">Available</td>
@ -75,16 +76,12 @@ tags:
<th colspan="3">Active quests (Max.: 4)</th>
</tr>
<tr>
<td>
<div class="background"></div>
</td>
<td class="background"></td>
<td>King Of Kings</td>
<td class="subtle">Active</td>
</tr>
<tr>
<td>
<div class="background"></div>
</td>
<td class="background"></td>
<td>Garage Days Pt. 1</td>
<td class="subtle success">Complete</td>
</tr>
@ -92,7 +89,9 @@ tags:
</div>
</div>
<div>
<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>
@ -112,7 +111,7 @@ tags:
{{ block.super -}}
<script>
const menu = document.querySelector('body > header');
const locations = document.querySelectorAll('main table .background');
const placeholder = document.querySelectorAll('.background');
menu.addEventListener('click', (event) => {
const buttons = menu.querySelectorAll('button');
@ -127,15 +126,17 @@ tags:
}
});
locations.forEach(element => {
const blur = randomIntFrom(0, 4);
placeholder.forEach(element => {
const hue = randomIntFrom(0, 360);
const grayscale = randomFloatFrom(0, 1);
console.log(hue, grayscale);
new RandomPixelCanvas(element, {
width: Math.floor(element.parentElement.clientWidth),
height: Math.floor(element.parentElement.clientHeight),
colors: ['#fad803', '#d30a51', '#273f8b', '#b7e0f0', '#52bed1', '#0c85ff'],
filter: 'grayscale(' + grayscale + ') blur(' + blur + 'px)'
filter: 'grayscale(' + grayscale + ') hue-rotate(' + hue + 'deg)'
});
});
</script>