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

Compare commits

base: interaktionsweise:d5dfacb9a9072523098d49080a3a4d86b3b48715
Branches Tags
interaktionsweise:development
interaktionsweise:main
interaktionsweise:testing-clean-css
interaktionsweise:testing-gulp
interaktionsweise:testing-npm-scripts
interaktionsweise:v3
interaktionsweise:v2
interaktionsweise:v1
..
compare: interaktionsweise:a9620461830ffb4f842f8808b2af3f4213a951ad
Branches Tags
interaktionsweise:development
interaktionsweise:main
interaktionsweise:testing-clean-css
interaktionsweise:testing-gulp
interaktionsweise:testing-npm-scripts
interaktionsweise:v3
interaktionsweise:v2
interaktionsweise:v1

No commits in common. "d5dfacb9a9072523098d49080a3a4d86b3b48715" and "a9620461830ffb4f842f8808b2af3f4213a951ad" have entirely different histories.
d5dfacb9a9 ... a962046183

18 changed files with 152 additions and 650 deletions
Download patch file Download diff file Expand all files Collapse all files

5
.eleventy.js
View file

@ -31,8 +31,7 @@ export default async function (eleventyConfig) {
return (data) => `${data.page.filePathStem}.${data.page.outputFileExtension}`; return (data) => `${data.page.filePathStem}.${data.page.outputFileExtension}`;
}); });
// TODO: Demo entfernen const demoPath = await hasFiles('source/screens') ? '/demo/' : '/';
const permalinkPath = await hasFiles('source/screens') ? '/demo/' : '/';
eleventyConfig.addGlobalData('hippie', { eleventyConfig.addGlobalData('hippie', {
brand: 'hippie', brand: 'hippie',
@ -45,7 +44,7 @@ export default async function (eleventyConfig) {
mail: 'name@domain.tld', mail: 'name@domain.tld',
domain: 'https://domain.tld' domain: 'https://domain.tld'
}, },
permalink: permalinkPath, demoPath: demoPath,
debugMode: true, debugMode: true,
legacyMode: false legacyMode: false
}); });

2
CHANGELOG.md
View file

@ -1,5 +1,5 @@
| Commit | Version | Description | | Commit | Version | Description |
|:-----------------------------------------|:-------:|:------------------------------------------------| | :--- | :----: | :--- |
| 6095870ce33fd3775718a1de3d33f604fd0630ab | 0.4.2 | Javascript again | | 6095870ce33fd3775718a1de3d33f604fd0630ab | 0.4.2 | Javascript again |
| 50a1a6d9257b272e076c2e3b5bac39c7d17b2793 | 0.5.0 | Changes to content | | 50a1a6d9257b272e076c2e3b5bac39c7d17b2793 | 0.5.0 | Changes to content |
| e2bbe9273a292a3806de1599f752258a2721d067 | 0.5.1 | | | e2bbe9273a292a3806de1599f752258a2721d067 | 0.5.1 | |

72
source/code/hippie/app.js
View file

@ -1,5 +1,3 @@
/* jshint strict: false */
// TODO: Inhalte angleichen nach Zusammenfassung von app.js und function.js. // TODO: Inhalte angleichen nach Zusammenfassung von app.js und function.js.
// Benennung und Beschreibungen verbessern. // Benennung und Beschreibungen verbessern.
@ -192,13 +190,13 @@ function composeMail(tag, name, prov, suffix, text, topic) {
el.innerHTML = elContent + text; el.innerHTML = elContent + text;
el.setAttribute('href', 'mailto:' + mailString + topic); el.setAttribute('href', 'mailto:' + mailString + topic);
} else { } else {
const elements = document.getElementsByClassName(tag.slice(1)); const els = document.getElementsByClassName(tag.slice(1));
for (const element of elements) { for (let el of els) {
const content = element.innerHTML; const elContent = el.innerHTML;
element.innerHTML = content + text; el.innerHTML = elContent + text;
element.setAttribute('href', 'mailto:' + mailString + topic); el.setAttribute('href', 'mailto:' + mailString + topic);
} }
} }
} }
@ -426,10 +424,10 @@ function randomIntFrom(min, max, pos = 0) {
return Math.floor((Math.random() * (max - min + 1) + min) / pos) * pos; return Math.floor((Math.random() * (max - min + 1) + min) / pos) * pos;
} }
function randomFloatFrom(min, max, dec = 1) { function randomFloatFrom(min, max, dec = 0) {
dec = Math.pow(10, dec); dec = Math.pow(10, dec);
return Math.round((Math.random() * (max - min) + min) * dec) / dec; return Math.round((Math.random() * (max - min + 1) + min) * dec) / dec;
} }
/** /**
@ -556,62 +554,6 @@ function zeroFill(number, width) {
// Retrieved 2026-03-08, License - CC BY-SA 4.0 // Retrieved 2026-03-08, License - CC BY-SA 4.0
const delay = ms => new Promise(res => setTimeout(res, ms)); const delay = ms => new Promise(res => setTimeout(res, ms));
class RandomPixelCanvas {
constructor(containerElement, options = {}) {
this.container = containerElement;
this.width = options.width || 400;
this.height = options.height || 300;
this.colors = options.colors || ['#000000', '#ffffff'];
this.filter = options.filter || '';
this.canvas = this.createCanvas();
this.fillWithRandomPixels();
}
createCanvas() {
const canvas = document.createElement('canvas');
canvas.width = this.width;
canvas.height = this.height;
canvas.style.filter = this.filter;
this.container.appendChild(canvas);
return canvas;
}
fillWithRandomPixels() {
const ctx = this.canvas.getContext('2d');
const imageData = ctx.createImageData(this.width, this.height);
const data = imageData.data;
for (let i = 0; i < data.length; i += 4) {
const color = this.getRandomColor();
const rgb = this.hexToRgb(color);
data[i] = rgb.r; // Red
data[i + 1] = rgb.g; // Green
data[i + 2] = rgb.b; // Blue
data[i + 3] = 255; // Alpha
}
ctx.putImageData(imageData, 0, 0);
}
getRandomColor() {
return this.colors[Math.floor(Math.random() * this.colors.length)];
}
hexToRgb(hex) {
const result = /^#?([a-f\d]{2})([a-f\d]{2})([a-f\d]{2})$/i.exec(hex);
return result ? {
r: parseInt(result[1], 16),
g: parseInt(result[2], 16),
b: parseInt(result[3], 16)
} : {r: 0, g: 0, b: 0};
}
}
// CONCEPTS // CONCEPTS
// NOTE: Benutzt private Zuweisungen // NOTE: Benutzt private Zuweisungen

18
source/data/menu.json
View file

@ -1,18 +0,0 @@
[
{
"text": "New",
"href": "#new"
},
{
"text": "Continue",
"href": "#continue"
},
{
"text": "Settings",
"href": "#options"
},
{
"text": "Leave",
"href": "/"
}
]

6
source/screens/demo/basics.liquid
View file

@ -208,7 +208,7 @@ order: 2
<figure class="js_pop"> <figure class="js_pop">
<figcaption>Fahne</figcaption> <figcaption>Fahne</figcaption>
{% comment %}// TODO: Durch Platzhalter ersetzten und Prozentangaben ermöglichen{% endcomment %} {% comment %}// TODO: Durch Platzhalter ersetzten und Prozentangaben ermöglichen{% endcomment %}
<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" <svg version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px"
y="0px" width="10%" height="10%" viewbox="0 0 1920 1200" preserveaspectratio="xMinYMax slice"> y="0px" width="10%" height="10%" viewbox="0 0 1920 1200" preserveaspectratio="xMinYMax slice">
<desc>Flag</desc> <desc>Flag</desc>
<rect id="triangle-5" y="0" fill="#273F8B" width="1920" height="1200"/> <rect id="triangle-5" y="0" fill="#273F8B" width="1920" height="1200"/>
@ -243,7 +243,7 @@ order: 2
<article> <article>
<h1 id="textlevel">Textebene</h1> <h1 id="textlevel">Textebene</h1>
<h2>Verweise</h2> <h2>Verweise</h2>
<p id="links">Ein wesentlicher Bestandteil von Hypertext sind <a href="">Verweise</a> <p>Ein wesentlicher Bestandteil von Hypertext sind <a href="">Verweise</a>
<code>&lt;a&gt;</code>. Sie dienen als Sprungmarken innerhalb des Netzwerks. Es kann grob zwischen internen <code>&lt;a&gt;</code>. Sie dienen als Sprungmarken innerhalb des Netzwerks. Es kann grob zwischen internen
und externen Verweisen unterschieden werden. und externen Verweisen unterschieden werden.
<a class="a_internal js_pop" href="#links">Interne Verweise</a> <a class="a_internal js_pop" href="#links">Interne Verweise</a>
@ -948,7 +948,7 @@ order: 2
<div class="box_placeholder"></div> <div class="box_placeholder"></div>
<hr class="hidden"/> <hr class="hidden"/>
<div class="box_placeholder"> <div class="box_placeholder">
<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" <svg version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px"
y="0px" width="100%" height="100%"> y="0px" width="100%" height="100%">
<line x1='0' y1='0' x2='100%' y2='100%' stroke='#000' stroke-width='.5'/> <line x1='0' y1='0' x2='100%' y2='100%' stroke='#000' stroke-width='.5'/>
<line x1='0' y1='100%' x2='100%' y2='0' stroke='#000' stroke-width='.5'/> <line x1='0' y1='100%' x2='100%' y2='0' stroke='#000' stroke-width='.5'/>

7
source/screens/demo/examples/game/mwo.liquid → source/screens/demo/examples/game/fpv.liquid
View file

@ -1,10 +1,10 @@
--- ---
title: MWO title: FPV
tags: tags:
- game - game
--- ---
{% assign bodyClass = 'body_mwo' -%} {% assign bodyClass = 'body_fpv' -%}
{% layout 'hippie/game.liquid' %} {% layout 'hippie/simple.liquid' %}
{% block links %} {% block links %}
{{ block.super -}} {{ block.super -}}
@ -83,4 +83,5 @@ tags:
canvas.height = window.innerHeight; canvas.height = window.innerHeight;
}); });
</script> </script>
{% endblock %} {% endblock %}

17
source/screens/demo/examples/game/menu.liquid
View file

@ -3,11 +3,24 @@ title: Menu
tags: tags:
- game - game
--- ---
{% assign bodyClass = 'body_menu' -%} {% assign bodyClass = 'body_game' -%}
{% layout 'hippie/simple.liquid' %} {% layout 'hippie/simple.liquid' %}
{% block body %} {% block body %}
{% render 'hippie/partials/game-menu.liquid', links: menu %} <div class="sec_main_center">
<nav role="doc-toc">
<hgroup>
<h1>Game - TFW</h1>
<p>Additional name</p>
</hgroup>
<ul class="link">
<li><a href="#new">Neues Spiel</a></li>
<li><a href="#continue">Spiel fortsetzen</a></li>
<li><a href="#options">Einstellungen</a></li>
<li><a href="#quit">Spiel beenden</a></li>
</ul>
</nav>
</div>
<footer> <footer>
{% brand 'brand', 'last' %} {% brand 'brand', 'last' %}
<p>Marke</p> <p>Marke</p>

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

@ -1,212 +0,0 @@
---
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">&lt;</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">&gt;</button>
</header>
<div id="viewQuest" class="view">
<main>
<nav>
<div class="important">Filter</div>
<input placeholder="Search" type="text">
<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>
<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="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>
</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');
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);
}
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]();
};
}
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),
colors: ['#fad803', '#d30a51', '#273f8b', '#b7e0f0', '#52bed1', '#0c85ff'],
filter: 'grayscale(' + grayscale + ') hue-rotate(' + hue + 'deg)'
});
});
new Menu(menu);
</script>
{% endblock %}

42
source/screens/demo/examples/ui/table.liquid
View file

@ -25,7 +25,7 @@ tags:
<i class="bi bi-hash"></i> <i class="bi bi-hash"></i>
</button> </button>
<div class="group_nav"> <div class="group_nav">
<select id="sltNum" name="position-number" aria-label="numbering"> <select id="sltNum" name="position-number">
<option value="" selected>None</option> <option value="" selected>None</option>
<option value="numeric">123</option> <option value="numeric">123</option>
<option value="latin">ABC</option> <option value="latin">ABC</option>
@ -62,26 +62,26 @@ tags:
<th scope="row"></th> <th scope="row"></th>
<td class="io"> <td class="io">
<nav> <nav>
<input class="input_io" name="active" aria-label="active" type="checkbox"> <input class="input_io" name="active" type="checkbox">
<span class="a_button" data-action="drag"><i class="bi bi-grip-horizontal" title="Drag"></i></span> <span class="a_button" data-action="drag"><i class="bi bi-grip-horizontal" title="Drag"></i></span>
</nav> </nav>
</td> </td>
<td class="pos-num"></td> <td class="pos-num"></td>
<td><input class="input_io" name="number" aria-label="number" type="text"></td> <td><input class="input_io" name="number" type="text"></td>
<td><input class="input_io" name="name" aria-label="name" type="text"></td> <td><input class="input_io" name="name" type="text"></td>
{% comment %}<td class="ellipsis"></td>{% endcomment %} {% comment %}<td class="ellipsis"></td>{% endcomment %}
<td> <td>
<textarea class="fit" name="description" cols="64" rows="2" aria-label="description"></textarea> <textarea class="fit" name="description" cols="64" rows="2"></textarea>
</td> </td>
<td><input class="input_io" name="amount" aria-label="amount" type="number"></td> <td><input class="input_io" name="amount" type="number"></td>
<td> <td>
<select class="io_select" name="unit" aria-label="unit"> <select class="io_select" name="units">
<option value="">None</option> <option value="">None</option>
<option value="piece">Piece(s)</option> <option value="piece">Piece(s)</option>
<option value="hour">Hour(s)</option> <option value="hour">Hour(s)</option>
</select> </select>
</td> </td>
<td><input class="input_io" name="price" aria-label="price" type="text"></td> <td><input class="input_io" name="price" type="text"></td>
<td class="unit"></td> <td class="unit"></td>
<td class="io"> <td class="io">
<nav> <nav>
@ -97,7 +97,7 @@ tags:
<th scope="row"></th> <th scope="row"></th>
<td class="io"> <td class="io">
<nav> <nav>
<input class="input_io" name="active" aria-label="active" type="checkbox"> <input class="input_io" name="active" type="checkbox">
<span class="a_button" data-action="drag"><i class="bi bi-grip-horizontal" title="Drag"></i></span> <span class="a_button" data-action="drag"><i class="bi bi-grip-horizontal" title="Drag"></i></span>
</nav> </nav>
</td> </td>
@ -105,11 +105,11 @@ tags:
<td class="rigid"></td> <td class="rigid"></td>
<td></td> <td></td>
<td> <td>
<textarea class="fit" name="description" cols="64" rows="2" aria-label="description"></textarea> <textarea class="fit" name="description" cols="64" rows="2"></textarea>
</td> </td>
<td><input name="amount" aria-label="number" type="number"></td> <td><input name="amount" type="number"></td>
<td> <td>
<select name="unit" aria-label="unit"> <select name="units">
<option value="">None</option> <option value="">None</option>
<option value="piece">Piece(s)</option> <option value="piece">Piece(s)</option>
<option value="hour">Hour(s)</option> <option value="hour">Hour(s)</option>
@ -131,13 +131,13 @@ tags:
<th scope="row"></th> <th scope="row"></th>
<td class="io"> <td class="io">
<nav> <nav>
<input class="input_io" name="active" aria-label="active" type="checkbox"> <input class="input_io" name="active" type="checkbox">
<span class="a_button" data-action="drag"><i class="bi bi-grip-horizontal" title="Drag"></i></span> <span class="a_button" data-action="drag"><i class="bi bi-grip-horizontal" title="Drag"></i></span>
</nav> </nav>
</td> </td>
<td class="pos-num"></td> <td class="pos-num"></td>
<td colspan="7"> <td colspan="7">
<textarea class="fit" name="description" cols="64" rows="2" aria-label="description"></textarea> <textarea class="fit" name="description" cols="64" rows="2"></textarea>
</td> </td>
<td class="io"> <td class="io">
<nav> <nav>
@ -151,7 +151,7 @@ tags:
<th scope="row"></th> <th scope="row"></th>
<td class="io"> <td class="io">
<nav> <nav>
<input class="input_io" name="active" aria-label="active" type="checkbox"> <input class="input_io" name="active" type="checkbox">
<span class="a_button" data-action="drag"><i class="bi bi-grip-horizontal" title="Drag"></i></span> <span class="a_button" data-action="drag"><i class="bi bi-grip-horizontal" title="Drag"></i></span>
<button name="group" title="Expand"><i class="bi bi-arrows-expand"></i></button> <button name="group" title="Expand"><i class="bi bi-arrows-expand"></i></button>
</nav> </nav>
@ -230,17 +230,15 @@ tags:
const rowTarget = event.target.closest('tr'); const rowTarget = event.target.closest('tr');
const groupTarget = event.target.closest('[name="group"]'); const groupTarget = event.target.closest('[name="group"]');
if (event.button !== 0) return; if (rowTarget && event.button === 0) {
for (row of rows) {
if (rowTarget) {
for (const row of rows) {
row.classList.remove('active'); row.classList.remove('active');
} }
rowTarget.classList.add('active'); rowTarget.classList.add('active');
} }
if (groupTarget) { if (groupTarget && event.button === 0) {
console.log('group'); console.log('group');
let currentRow = groupTarget.closest('tr').nextElementSibling; let currentRow = groupTarget.closest('tr').nextElementSibling;
@ -298,7 +296,7 @@ tags:
const cells = content.querySelectorAll('th:first-child'); const cells = content.querySelectorAll('th:first-child');
const isHidden = cells[0].classList.contains('di_none'); const isHidden = cells[0].classList.contains('di_none');
for (const cell of cells) { for (cell of cells) {
if (isHidden) { if (isHidden) {
cell.classList.remove('di_none'); cell.classList.remove('di_none');
} else { } else {
@ -314,7 +312,7 @@ tags:
const clone = cloneRow(); const clone = cloneRow();
const viewportHeight = window.innerHeight; const viewportHeight = window.innerHeight;
const elementActive = tbodyPosition.querySelector('tr.active'); const elementActive = tbodyPosition.querySelector('tr.active');
let elementNew; let elementNew = undefined;
let elementBound = undefined; let elementBound = undefined;
if (elementActive) { if (elementActive) {

2
source/screens/demo/index.liquid
View file

@ -1,5 +1,5 @@
--- ---
permalink: "{{ hippie.permalink }}" permalink: "{{ hippie.demoPath }}"
title: Index title: Index
--- ---
{% assign pageId = page.fileSlug -%} {% assign pageId = page.fileSlug -%}

48
source/style/modules/_game.scss
View file

@ -3,9 +3,35 @@
@use "../hippie-style/hippie"; @use "../hippie-style/hippie";
.body_menu { $colors: hippie.$color_palette;
$steps: (0, 14.28, 28.57, 42.85, 57.14, 71.43, 100);
@function getColor($index, $colors) {
$color_keys: map.keys($colors);
$key_count: list.length($color_keys);
$cycled_index: ($index % $key_count) + 1;
$key: list.nth($color_keys, $cycled_index);
@return map.get($colors, $key);
}
@mixin fadeColors($steps, $colors) {
@keyframes fadeColor {
@for $i from 1 through list.length($steps) {
$percent: list.nth($steps, $i);
$color: getColor($i - 1, $colors);
#{$percent}% {
background-color: $color;
}
}
}
animation: fadeColor 16s infinite linear;
}
.body_game {
@extend .h_full_view; @extend .h_full_view;
background-color: hippie.basic_color(delta); background-color: hotpink;
footer { footer {
@extend .pos_abs; @extend .pos_abs;
@ -28,3 +54,21 @@
} }
} }
} }
.body_fpv {
@extend .h_full_view;
canvas {
@include fadeColors($steps, $colors);
display: block;
cursor: none;
}
.controls {
position: fixed;
top: 0;
left: 0;
border-radius: hippie.$radius_basic;
}
}

48
source/style/modules/game/_mwo.scss
View file

@ -1,48 +0,0 @@
@use 'sass:list';
@use "sass:map";
@use "../../hippie-style/hippie";
$colors: hippie.$color_palette;
$steps: (0, 14.28, 28.57, 42.85, 57.14, 71.43, 100);
@function getColor($index, $colors) {
$color_keys: map.keys($colors);
$key_count: list.length($color_keys);
$cycled_index: ($index % $key_count) + 1;
$key: list.nth($color_keys, $cycled_index);
@return map.get($colors, $key);
}
@mixin fadeColors($steps, $colors) {
@keyframes fadeColor {
@for $i from 1 through list.length($steps) {
$percent: list.nth($steps, $i);
$color: getColor($i - 1, $colors);
#{$percent}% {
background-color: $color;
}
}
}
animation: fadeColor 16s infinite linear;
}
.body_mwo {
@extend .h_full_view;
canvas {
@include fadeColors($steps, $colors);
display: block;
cursor: none;
}
.controls {
position: fixed;
top: 0;
left: 0;
border-radius: hippie.$radius_basic;
}
}

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

@ -1,185 +0,0 @@
@use 'sass:list';
@use "sass:map";
@use "../../hippie-style/hippie";
.body_tfw {
@extend .h_full_view;
display: flex;
flex-flow: column nowrap;
th,
.important,
.subtle,
button,
input[type="text"],
select {
text-transform: uppercase;
}
th,
.important {
color: white;
background-color: hippie.basic_color(echo);
}
.important {
padding: hippie.$space_half;
border-block: hippie.$width_border_basic solid hippie.$color_back_basic;
font-weight: bold;
}
.subtle {
@extend .txt_smaller;
color: hippie.$color_darkest;
}
.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;
color: hippie.$color_highlight_basic;
background-color: hippie.$color_action_basic;
}
& > button:not(:first-child, :last-child, :nth-child(2)) {
flex: 1;
}
}
.view {
flex: auto;
display: flex;
flex-flow: column nowrap;
min-height: 0;
& > main {
flex: auto;
display: flex;
flex-flow: row nowrap;
gap: hippie.$space_double;
min-height: 0;
& > div:last-child {
flex: 2;
}
& > div:nth-child(2) {
flex: 4;
display: flex;
flex-flow: column nowrap;
gap: hippie.$space_basic;
min-height: 0;
div:first-child {
flex: auto;
overflow: auto;
min-height: 0;
}
div:last-child {
flex: 0 0 auto;
}
}
nav {
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 {
table-layout: fixed;
width: 100%;
margin: 0;
th {
text-align: center;
}
td {
position: relative;
height: 4em;
vertical-align: top;
span {
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%;
}
&:last-child {
text-align: center;
vertical-align: middle;
}
}
.l {
width: 30%;
}
.q {
width: 50%;
}
.t, .s {
width: 20%;
}
}
}
& > footer {
justify-content: space-between;
padding: hippie.$space_basic;
& > button:last-child {
//margin-left: auto;
padding-inline: 2em;
}
}
}
}

2
source/style/ui.scss
View file

@ -9,8 +9,6 @@
@use "modules/ui/gallery_module"; @use "modules/ui/gallery_module";
@use "modules/ui/windows_module"; @use "modules/ui/windows_module";
@use "modules/ui/table_module"; @use "modules/ui/table_module";
@use "modules/game/mwo";
@use "modules/game/tfw";
$color_gui_back: hippie.$color_dark; $color_gui_back: hippie.$color_dark;
$space_gui_half: hippie.$space_half; $space_gui_half: hippie.$space_half;

15
source/templates/hippie/game.liquid
View file

@ -1,15 +0,0 @@
{% assign pageId = page.fileSlug -%}
{% layout 'hippie/default.liquid' %}
{% block title %}{{ title }}{% endblock %}
{% block links %}
{{ block.super -}}
<link href="/css/ui.css" media="all" rel="stylesheet"/>
{% endblock %}
{% block assets %}
<script src="/vendor/hippie-script.js"></script>
<script src="/js/globals.js"></script>
<script src="/js/app.js"></script>
{% endblock %}

15
source/templates/hippie/partials/game-menu.liquid
View file

@ -1,15 +0,0 @@
<div class="sec_main_center">
<nav role="doc-toc">
<hgroup>
<h1>{{ title | default: 'Game title' }}</h1>
<p>{{ additional | default: 'Additional name' }}</p>
</hgroup>
<ul class="link">
{% for link in links %}
<li>
<a href="{{ link.href }}">{{ link.text }}</a>
</li>
{% endfor %}
</ul>
</nav>
</div>

2
source/templates/hippie/partials/gate-list.liquid
View file

@ -10,7 +10,7 @@
<ul class="portal__list"> <ul class="portal__list">
{% for link in links %} {% for link in links %}
<li> <li>
<a href="{{ link.href }}"><img src="{{ link.img }}" width="16" height="16" alt="icon"/>{{ link.name }}</a> <a href="{{ link.href }}"><img src="{{ link.img }}" width="16" height="16"/>{{ link.name }}</a>
</li> </li>
{% endfor %} {% endfor %}
</ul> </ul>

2
source/templates/hippie/partials/placeholder-flag.liquid
View file

@ -1,7 +1,7 @@
{% assign height = width | divided_by: 1.6 %} {% assign height = width | divided_by: 1.6 %}
{% if type == 'svg' or type == '' %} {% if type == 'svg' or type == '' %}
<svg id="{{ id }}" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px" width="100%" height="100%" viewbox="0 0 1920 1200" preserveaspectratio="xMinYMax slice"> <svg version="1.1" id="{{ id }}" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px" width="100%" height="100%" viewbox="0 0 1920 1200" preserveaspectratio="xMinYMax slice">
{% comment %}<defs> {% comment %}<defs>
<filter id="turb3"> <filter id="turb3">
<feColorMatrix type="saturate" values="1" /> <feColorMatrix type="saturate" values="1" />