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>

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

@ -9,6 +9,21 @@
display: flex;
flex-flow: column nowrap;
.flex_auto {
display: flex;
flex: auto;
min-height: 0;
}
th,
.important,
.subtle,
button,
input[type="text"],
select {
text-transform: uppercase;
}
th,
.important {
color: white;
@ -25,13 +40,32 @@
@extend .txt_smaller;
color: hippie.$color_darkest;
text-transform: uppercase;
}
.success {
color: hippie.basic_color(alpha);
}
.background {
position: relative;
overflow: hidden;
*:not(canvas) {
z-index: map.get(hippie.$z-indexes, "content-bottom");
position: relative;
color: white;
}
canvas {
z-index: map.get(hippie.$z-indexes, "default");
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
}
}
& > header {
& > button.active {
border-color: hippie.$color_highlight_basic;
@ -45,21 +79,11 @@
}
& > div {
display: flex;
flex-flow: column nowrap;
flex: auto;
min-height: 0;
& > main {
display: flex;
flex-flow: row nowrap;
flex: auto;
gap: hippie.$space_double;
min-height: 0;
& > div:first-child {
flex: 1;
}
& > div:last-child {
flex: 2;
@ -84,13 +108,19 @@
}
nav {
& > *:not(:last-child) {
margin-bottom: hippie.$space_basic;
}
flex: 1;
display: flex;
flex-flow: column nowrap;
gap: hippie.$space_basic;
min-height: 0;
input:not([type="checkbox"], [type="range"]) {
@extend .input_io;
}
select {
@extend .io_select;
}
}
table {