From 245227d7e90ee095bf1a3a43eb5af17440efb34c Mon Sep 17 00:00:00 2001 From: sthag Date: Sun, 15 Mar 2026 11:32:59 +0100 Subject: [PATCH 01/51] feat: Reflect new table styles Add examples to components. --- source/screens/demo/components.liquid | 28 +++++++++++++++++++++------ source/style/hippie-style | 2 +- 2 files changed, 23 insertions(+), 7 deletions(-) diff --git a/source/screens/demo/components.liquid b/source/screens/demo/components.liquid index ca72d3f..7e14f0d 100644 --- a/source/screens/demo/components.liquid +++ b/source/screens/demo/components.liquid @@ -190,11 +190,11 @@ order: 3 
// table // caption // colgroup // col // tbody // thead // tfoot // tr // td // th

<table>

Varianten

- 
table.width_full.fix>(thead>tr>th.cell_pre[scope="col"]+th[scope="col"]*3)+tbody>tr>td.cell_pre+td*3
+ 
table.width_full.fix>(thead>tr>th.pre[scope="col"]+th[scope="col"]*3)+tbody>tr>td.pre+td*3
- + @@ -202,19 +202,19 @@ order: 3 - + - + - + @@ -244,7 +244,7 @@ order: 3
Kopfzeile A B
VorspalteVorspalte Eine
11 erweiterte
22 TabelleStreifen
- 
table.width_full.fix>(thead>tr>th[scope="col"]*3)+(tbody>tr>td*2+td.txt_right)+tfoot>tr>th[colspan="2"]+td.txt_right
+ 
table>(thead>tr>th[scope="col"]*3)+(tbody>tr>td*2+td.txt_right)+tfoot>tr>th[colspan="2"]+td.txt_right
@@ -278,6 +278,22 @@ order: 3
Die Verteilung der Zellen ist hier von ihrem Inhalt abhängig.
+ 
table>tr>td+td.ellipsis+td[style="width: 50%"]
+ + + + + + +
IndexZelle mit viel Inhalt der nicht umbricht und eingeschränkt wird.Zelle mit Angabe der Breite.
+ 
table.flexible>tr>td+td.truncate.ellipsis+td
+ + + + + + +
IndexZelle mit viel Inhalt der nicht umbricht und eingeschränkt wird.Zelle mit Angabe der Breite.

Formulare

diff --git a/source/style/hippie-style b/source/style/hippie-style index b4c5632..89db97c 160000 --- a/source/style/hippie-style +++ b/source/style/hippie-style @@ -1 +1 @@ -Subproject commit b4c56320060548dacde62639876c6aee72b297ea +Subproject commit 89db97c35876e4f354b86bcb7fa90e2c9da937f5 From d5335635692d016348210e1086e6129b02aef466 Mon Sep 17 00:00:00 2001 From: sthag Date: Sun, 15 Mar 2026 12:25:23 +0100 Subject: [PATCH 02/51] feat: Change - to _ for selector names --- source/code/hippie/app.js | 2 +- source/screens/demo/components.liquid | 6 +++--- source/screens/demo/examples/game/intro.liquid | 2 +- source/screens/demo/examples/start.liquid | 4 ++-- source/style/hippie-style | 2 +- source/style/modules/_start.scss | 2 +- source/style/modules/ui/_frame_module.scss | 10 +++++----- source/style/modules/ui/_new_module.scss | 2 +- source/style/ui.scss | 2 +- 9 files changed, 16 insertions(+), 16 deletions(-) diff --git a/source/code/hippie/app.js b/source/code/hippie/app.js index 50efe38..7cda8b6 100644 --- a/source/code/hippie/app.js +++ b/source/code/hippie/app.js @@ -69,7 +69,7 @@ function HippieFade(toggleElement, initState) { const fragment = document.createDocumentFragment(); const overlay = document.createElement('div'); - overlay.id = 'mouse-overlay'; + overlay.id = 'mouse_overlay'; if (initState) { overlay.classList.add('active'); diff --git a/source/screens/demo/components.liquid b/source/screens/demo/components.liquid index 7e14f0d..2ea1d8d 100644 --- a/source/screens/demo/components.liquid +++ b/source/screens/demo/components.liquid @@ -221,8 +221,8 @@ order: 3 - 
table.width_full.stripe.fix.free>tr>td*3
- + 
table.width_full.striped.fix.free>tr>td*3
+
@@ -278,7 +278,7 @@ order: 3
Tabelle
- 
table>tr>td+td.ellipsis+td[style="width: 50%"]
+ 
table.width_full.fix>tr>td+td.ellipsis+td[style="width: 50%"]
diff --git a/source/screens/demo/examples/game/intro.liquid b/source/screens/demo/examples/game/intro.liquid index ac1de27..93988bd 100644 --- a/source/screens/demo/examples/game/intro.liquid +++ b/source/screens/demo/examples/game/intro.liquid @@ -39,7 +39,7 @@ tags:

This needs to be seen and acknowledged.
So an interaction must be made to continue.

-
+
Hello World!

Only left mouse click or any key

diff --git a/source/screens/demo/examples/start.liquid b/source/screens/demo/examples/start.liquid index e11d3f8..4c68c5a 100644 --- a/source/screens/demo/examples/start.liquid +++ b/source/screens/demo/examples/start.liquid @@ -9,7 +9,7 @@ tags: {% block body %}
- + @@ -65,7 +65,7 @@ tags: return base + '?' + params.toString(); } - document.getElementById('www-search').addEventListener('submit', function (e) { + document.getElementById('www_search').addEventListener('submit', function (e) { e.preventDefault(); const query = document.getElementById('qrySearch').value.trim(); diff --git a/source/style/hippie-style b/source/style/hippie-style index 89db97c..eb4349f 160000 --- a/source/style/hippie-style +++ b/source/style/hippie-style @@ -1 +1 @@ -Subproject commit 89db97c35876e4f354b86bcb7fa90e2c9da937f5 +Subproject commit eb4349f9e5fc118d05385c81c7b553252c98f211 diff --git a/source/style/modules/_start.scss b/source/style/modules/_start.scss index 031f7f7..564e8a3 100644 --- a/source/style/modules/_start.scss +++ b/source/style/modules/_start.scss @@ -5,7 +5,7 @@ @extend .sec_main_center; } - #www-search { + #www_search { input[type="text"] { flex: 1; padding: hippie.$padding_basic; diff --git a/source/style/modules/ui/_frame_module.scss b/source/style/modules/ui/_frame_module.scss index 91182ad..9742af3 100755 --- a/source/style/modules/ui/_frame_module.scss +++ b/source/style/modules/ui/_frame_module.scss @@ -9,7 +9,7 @@ } .body_frame { - @extend %flex-column; + @extend %flex_column; background-color: hippie.$color_back_basic; @@ -27,7 +27,7 @@ } main { - @extend %flex-row; + @extend %flex_row; flex: 1; @@ -53,7 +53,7 @@ } section { - @extend %flex-column; + @extend %flex_column; gap: 0; } } @@ -66,12 +66,12 @@ } #cli { - @extend %flex-column; + @extend %flex_column; background-color: black; #line { - @extend %flex-row; + @extend %flex_row; } #prompt { diff --git a/source/style/modules/ui/_new_module.scss b/source/style/modules/ui/_new_module.scss index 4e36346..bc4fbcf 100755 --- a/source/style/modules/ui/_new_module.scss +++ b/source/style/modules/ui/_new_module.scss @@ -6,7 +6,7 @@ $module_top_height: 32px; $body_top_space: $module_top_height + hippie.$space_basic; .body_new { - @extend %flex-column; + @extend %flex_column; padding: $body_top_space hippie.$space_basic hippie.$space_basic; } diff --git a/source/style/ui.scss b/source/style/ui.scss index 1266a3a..8663bfc 100644 --- a/source/style/ui.scss +++ b/source/style/ui.scss @@ -178,7 +178,7 @@ $space_gui_half: hippie.$space_half; background-color: hippie.$color_back_basic; transition: background-color 4s; - &:hover > .mouse-overlay { + &:hover > .mouse_overlay { background-color: transparent !important; transition: background-color hippie.$duration_basic hippie.$timing_basic 0s !important; } From e9c383b41e50eb6b35afb52c24bd07571da5d7b1 Mon Sep 17 00:00:00 2001 From: sthag Date: Tue, 17 Mar 2026 00:45:27 +0100 Subject: [PATCH 03/51] feat: Update table screen - Move logic for rows to cloneRow function - Add random selection of type to loop - Refine row types - Add event for group toggle --- source/screens/demo/examples/ui/table.liquid | 187 ++++++++++++------- source/style/hippie-style | 2 +- 2 files changed, 125 insertions(+), 64 deletions(-) diff --git a/source/screens/demo/examples/ui/table.liquid b/source/screens/demo/examples/ui/table.liquid index 96e72ea..900a84b 100755 --- a/source/screens/demo/examples/ui/table.liquid +++ b/source/screens/demo/examples/ui/table.liquid @@ -62,12 +62,13 @@ tags:
- - + + {% comment %}{% endcomment %} - + - {% comment %}{% endcomment %} @@ -130,14 +131,44 @@ tags: - - + + + + - @@ -226,6 +228,7 @@ tags: tbodyPosition.addEventListener('click', (event) => { const rows = tbodyPosition.querySelectorAll('tr'); const rowTarget = event.target.closest('tr'); + const groupTarget = event.target.closest('[name="group"]'); if (rowTarget && event.button === 0) { for (row of rows) { @@ -234,32 +237,33 @@ tags: rowTarget.classList.add('active'); } + + if (groupTarget && event.button === 0) { + console.log('group'); + let currentRow = groupTarget.closest('tr').nextElementSibling; + + while (currentRow && !currentRow.classList.contains('footer')) { + currentRow.classList.toggle('di_none'); + currentRow = currentRow.nextElementSibling; + } + } }); for (let i = 0; i < 256; i++) { - const clone = cloneRow(); - const tr = clone.querySelector('tr'); - const th = clone.querySelector('th'); - const td = clone.querySelectorAll('td'); + const t = Math.random(); + let type = undefined; - const j = i % placeholderNames.length; - const k = randomIntFrom(0, placeholderContents.length - 1); - const amount = randomIntFrom(1, 100); - const price = randomFloatFrom(1, 10000, 2); - const sum = amount * price; + if (t < .2) { + type = 'default'; + } else if (t >= .2 && t < .4) { + type = 'text'; + } else if (t >= .4 && t < .5) { + type = 'group'; + } else { + type = 'article'; + } - tr.setAttribute('data-id', i); - th.textContent = i + 1; - td[2].textContent = getRandomFormattedString(); - td[3].textContent = placeholderNames[j]; - // td[2].innerHTML = replaceLineBreaks(placeholderContents[k]); - td[4].firstElementChild.textContent = placeholderContents[k]; - td[5].firstElementChild.value = amount; - td[5].firstElementChild.style.width = '4em'; - td[7].textContent = currencyEuro.format(price); - td[8].textContent = currencyEuro.format(sum); - - tbodyPosition.appendChild(clone); + tbodyPosition.appendChild(cloneRow(i, type)); } const selectNum = document.getElementById('sltNum'); @@ -377,11 +381,51 @@ tags: console.debug('Drop'); }); - function cloneRow(type = 'default') { - type = 'row' + capitalizeFirstLetter(type); + function cloneRow(index, type = 'article') { + const id = 'row' + capitalizeFirstLetter(type); - const rowFragment = document.getElementById(type).content; - // TODO: Datenübergabe ergänzen und direkt hier in die Node aufnehmen + const rowFragment = document.getElementById(id).content; + const tr = rowFragment.querySelector('tr'); + const th = rowFragment.querySelector('th'); + const td = rowFragment.querySelectorAll('td'); + + const j = index % placeholderNames.length; + const k = randomIntFrom(0, placeholderContents.length - 1); + const l = Math.random() > .2; + const amount = randomIntFrom(1, 100); + const price = randomFloatFrom(1, 10000, 2); + const sum = amount * price; + + tr.setAttribute('data-id', index); + th.textContent = index + 1; + td[0].querySelector('[name="active"]').checked = l; + // td[2].innerHTML = replaceLineBreaks(placeholderContents[k]); + + switch (type) { + case 'default': + td[2].firstElementChild.style.width = '9ch'; + td[3].firstElementChild.style.width = '6ch'; + td[4].firstElementChild.textContent = placeholderContents[k]; + td[5].firstElementChild.value = amount; + td[5].firstElementChild.style.width = '4em'; + td[7].firstElementChild.style.width = '8ch'; + td[8].textContent = currencyEuro.format(sum); + break; + case 'article': + td[2].textContent = getRandomFormattedString(); + td[3].textContent = placeholderNames[j]; + td[4].firstElementChild.textContent = placeholderContents[k]; + td[5].firstElementChild.value = amount; + td[5].firstElementChild.style.width = '4em'; + td[7].textContent = currencyEuro.format(price); + td[8].textContent = currencyEuro.format(sum); + break; + case 'text': + td[2].firstElementChild.textContent = placeholderContents[k]; + break; + default: + console.debug('No matching type found.'); + } return document.importNode(rowFragment, true); } @@ -395,5 +439,22 @@ tags: th.textContent = i + 1; } } + + function toggleGroup(headerRow) { + // Get the toggle icon + const icon = headerRow.querySelector('.toggle-icon'); + + // Get all rows after this header + let currentRow = headerRow.nextElementSibling; + + // Toggle visibility of group rows until next header + while (currentRow && !currentRow.classList.contains('group-header')) { + currentRow.classList.toggle('hidden'); + currentRow = currentRow.nextElementSibling; + } + + // Toggle the icon rotation + icon.classList.toggle('collapsed'); + } {% endblock %} \ No newline at end of file diff --git a/source/style/hippie-style b/source/style/hippie-style index eb4349f..b42c8cd 160000 --- a/source/style/hippie-style +++ b/source/style/hippie-style @@ -1 +1 @@ -Subproject commit eb4349f9e5fc118d05385c81c7b553252c98f211 +Subproject commit b42c8cdd7e29aff34a108266a72a1be603145984 From 65041f65b33f0a0777661821048f688447522adc Mon Sep 17 00:00:00 2001 From: sthag Date: Tue, 17 Mar 2026 01:13:33 +0100 Subject: [PATCH 04/51] feat: Update ui table styles --- source/screens/demo/examples/ui/table.liquid | 10 +++++----- source/style/hippie-style | 2 +- 2 files changed, 6 insertions(+), 6 deletions(-) diff --git a/source/screens/demo/examples/ui/table.liquid b/source/screens/demo/examples/ui/table.liquid index 900a84b..570d1dc 100755 --- a/source/screens/demo/examples/ui/table.liquid +++ b/source/screens/demo/examples/ui/table.liquid @@ -36,20 +36,20 @@ tags: {% comment %}TODO: Auswahl für ziehbares Element hinzufügen{% endcomment %} -
Index @@ -80,7 +81,7 @@ tags: + + +
+
- - + + - + - + diff --git a/source/style/hippie-style b/source/style/hippie-style index b42c8cd..43f66d8 160000 --- a/source/style/hippie-style +++ b/source/style/hippie-style @@ -1 +1 @@ -Subproject commit b42c8cdd7e29aff34a108266a72a1be603145984 +Subproject commit 43f66d8178c7225931d6358d1f37797461a0a94d From 88c7974d5c2464f79fd2a759ab7ea31597193702 Mon Sep 17 00:00:00 2001 From: sthag Date: Sat, 21 Mar 2026 10:39:29 +0100 Subject: [PATCH 05/51] feat: Add style block to default template --- source/screens/demo/examples/10print.liquid | 4 +--- source/templates/hippie/default.liquid | 2 ++ 2 files changed, 3 insertions(+), 3 deletions(-) diff --git a/source/screens/demo/examples/10print.liquid b/source/screens/demo/examples/10print.liquid index 9ee9246..8ed878e 100644 --- a/source/screens/demo/examples/10print.liquid +++ b/source/screens/demo/examples/10print.liquid @@ -5,8 +5,7 @@ tags: --- {% layout 'hippie/simple.liquid' %} -{% block head %} -{{ block.super -}} +{% block style %} +{% endblock %} + +{% block body %} + +
Canvas element not supported.
+ +
+ A +
+{% endblock %} + +{% block script %} + +{% endblock %} \ No newline at end of file From 8fe884aad6d7150fa3a7db4ebd7d2c3a8e1aaa75 Mon Sep 17 00:00:00 2001 From: sthag Date: Sat, 28 Mar 2026 19:21:59 +0100 Subject: [PATCH 18/51] feat: Change matrix Add change function and test in console. --- source/screens/demo/examples/matrix.liquid | 41 +++++++++++++++++++--- 1 file changed, 37 insertions(+), 4 deletions(-) diff --git a/source/screens/demo/examples/matrix.liquid b/source/screens/demo/examples/matrix.liquid index 1e2c266..5685600 100644 --- a/source/screens/demo/examples/matrix.liquid +++ b/source/screens/demo/examples/matrix.liquid @@ -56,16 +56,19 @@ tags: const cEl = document.getElementById('container'); let createId = undefined; + let changeId = undefined; let holdId = undefined; let cleanId = undefined; let createInterval = 300; - let holdInterval = 5000; + let changeInterval = 300; + let holdInterval = 1000; let cleanInterval = 1000; let bodyHeight = Math.max(document.body.offsetHeight, document.body.clientHeight, 0); let glyphY = parseInt(window.getComputedStyle(glyphEl).top); let glyphW = glyphEl.offsetWidth; let glyphH = glyphEl.offsetHeight; let maxHeight = bodyHeight - glyphY - 2 * 16; + let index = 0; cEl.style.display = 'none'; @@ -226,17 +229,47 @@ tags: } // containerTrail(0, cEl); - window.addEventListener("load", canvasTrail); + // window.addEventListener("load", canvasTrail); + + /** + * Change glyph + */ + console.log("init", changeInterval); + changeId = setInterval(change, changeInterval); + + function change() { + clearInterval(holdId); + let char = characters.charAt(Math.floor(Math.random() * characters.length)); + console.log(index, char); + + index++; + + if (index > 10) { + clearInterval(changeId); + index = 0; + changeInterval = randomIntFrom(100, 1000, 2); + console.clear(); + console.log("hold", holdInterval); + + holdId = setTimeout(() => { + holdInterval = randomIntFrom(1000, 10000, 3); + + console.log("change", changeInterval); + changeId = setInterval(change, changeInterval); + }, holdInterval); + } + } function randomBetween(min, max) { return (Math.random() * (max - min) + min).toFixed(2); } - function randomIntFrom(min, max) { + function randomIntFrom(min, max, pos = 0) { + pos = Math.pow(10, pos); min = Math.ceil(min); max = Math.floor(max); - return Math.floor(Math.random() * (max - min + 1) + min); + return Math.floor((Math.random() * (max - min + 1) + min) / pos) * pos; } {% endblock %} \ No newline at end of file From c1633e0bc9ae8a70e8b7661446d294426e07a9d3 Mon Sep 17 00:00:00 2001 From: sthag Date: Sat, 28 Mar 2026 19:44:07 +0100 Subject: [PATCH 19/51] feat: Change matrix - Use blocks for now - Hold and clean for line - Only one line for now --- source/screens/demo/examples/matrix.liquid | 294 ++++++--------------- 1 file changed, 83 insertions(+), 211 deletions(-) diff --git a/source/screens/demo/examples/matrix.liquid b/source/screens/demo/examples/matrix.liquid index 5685600..8306978 100644 --- a/source/screens/demo/examples/matrix.liquid +++ b/source/screens/demo/examples/matrix.liquid @@ -7,255 +7,127 @@ tags: {% block style %} {% endblock %} {% block body %} - -
Canvas element not supported.
- -
- A -
+ {% endblock %} {% block script %} + + +{% endblock %} + +{%- block script %} +{{ block.super -}} + +{% endblock %} \ No newline at end of file diff --git a/source/style/modules/_game.scss b/source/style/modules/_game.scss index 1c24812..7ad3f4d 100644 --- a/source/style/modules/_game.scss +++ b/source/style/modules/_game.scss @@ -29,7 +29,7 @@ $steps: (0, 14.28, 28.57, 42.85, 57.14, 71.43, 100); animation: fadeColor 16s infinite linear; } -.body_game { +.body_menu { @extend .h_full_view; background-color: hotpink; @@ -71,4 +71,155 @@ $steps: (0, 14.28, 28.57, 42.85, 57.14, 71.43, 100); left: 0; border-radius: hippie.$radius_basic; } +} + +.body_tfw { + @extend .h_full_view; + + display: flex; + flex-flow: column nowrap; + + 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; + text-transform: uppercase; + } + + .success { + color: hippie.basic_color(alpha); + } + + & > 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; + } + } + + & > 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; + } + + & > 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 { + & > *:not(:last-child) { + margin-bottom: hippie.$space_basic; + } + + input:not([type="checkbox"], [type="range"]) { + @extend .input_io; + } + } + + 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; + } + } + } } \ No newline at end of file From 19577eca8cc64a94e783bec101032621ac7a6a41 Mon Sep 17 00:00:00 2001 From: sthag Date: Sat, 4 Apr 2026 09:21:34 +0200 Subject: [PATCH 24/51] feat: Change game structure - New template - Rename screens - New partial for menu - New data file for menu content - Separate styles --- source/data/menu.json | 18 ++ source/screens/demo/examples/game/menu.liquid | 15 +- .../examples/game/{fpv.liquid => mwo.liquid} | 7 +- .../examples/game/{new.liquid => tfw.liquid} | 10 +- source/style/modules/_game.scss | 197 +----------------- source/style/modules/game/_mwo.scss | 48 +++++ source/style/modules/game/_tfw.scss | 155 ++++++++++++++ source/style/ui.scss | 2 + source/templates/hippie/game.liquid | 15 ++ .../hippie/partials/game-menu.liquid | 15 ++ 10 files changed, 261 insertions(+), 221 deletions(-) create mode 100644 source/data/menu.json rename source/screens/demo/examples/game/{fpv.liquid => mwo.liquid} (96%) rename source/screens/demo/examples/game/{new.liquid => tfw.liquid} (94%) create mode 100644 source/style/modules/game/_mwo.scss create mode 100644 source/style/modules/game/_tfw.scss create mode 100644 source/templates/hippie/game.liquid create mode 100644 source/templates/hippie/partials/game-menu.liquid diff --git a/source/data/menu.json b/source/data/menu.json new file mode 100644 index 0000000..f437630 --- /dev/null +++ b/source/data/menu.json @@ -0,0 +1,18 @@ +[ + { + "text": "New", + "href": "#new" + }, + { + "text": "Continue", + "href": "#continue" + }, + { + "text": "Settings", + "href": "#options" + }, + { + "text": "Leave", + "href": "/" + } +] \ No newline at end of file diff --git a/source/screens/demo/examples/game/menu.liquid b/source/screens/demo/examples/game/menu.liquid index 34e00e7..c29a2ed 100644 --- a/source/screens/demo/examples/game/menu.liquid +++ b/source/screens/demo/examples/game/menu.liquid @@ -7,20 +7,7 @@ tags: {% layout 'hippie/simple.liquid' %} {% block body %} -
- -
+{% render 'hippie/partials/game-menu.liquid', links: menu %}
{% brand 'brand', 'last' %}

Marke

diff --git a/source/screens/demo/examples/game/fpv.liquid b/source/screens/demo/examples/game/mwo.liquid similarity index 96% rename from source/screens/demo/examples/game/fpv.liquid rename to source/screens/demo/examples/game/mwo.liquid index a4c61a6..ccce96e 100644 --- a/source/screens/demo/examples/game/fpv.liquid +++ b/source/screens/demo/examples/game/mwo.liquid @@ -1,10 +1,10 @@ --- -title: FPV +title: MWO tags: - game --- -{% assign bodyClass = 'body_fpv' -%} -{% layout 'hippie/simple.liquid' %} +{% assign bodyClass = 'body_mwo' -%} +{% layout 'hippie/game.liquid' %} {% block links %} {{ block.super -}} @@ -83,5 +83,4 @@ tags: canvas.height = window.innerHeight; }); - {% endblock %} \ No newline at end of file diff --git a/source/screens/demo/examples/game/new.liquid b/source/screens/demo/examples/game/tfw.liquid similarity index 94% rename from source/screens/demo/examples/game/new.liquid rename to source/screens/demo/examples/game/tfw.liquid index a799fef..4736098 100644 --- a/source/screens/demo/examples/game/new.liquid +++ b/source/screens/demo/examples/game/tfw.liquid @@ -1,8 +1,10 @@ --- title: TFW +tags: +- game --- {% assign bodyClass = 'body_tfw' -%} -{% layout 'hippie/simple.liquid' %} +{% layout 'hippie/game.liquid' %} {% block body %}
@@ -106,12 +108,6 @@ title: TFW {% endblock %} -{% block assets %} - - - -{% endblock %} - {%- block script %} {{ block.super -}} + + +{% endblock %} diff --git a/source/templates/hippie/partials/game-menu.liquid b/source/templates/hippie/partials/game-menu.liquid new file mode 100644 index 0000000..c59d802 --- /dev/null +++ b/source/templates/hippie/partials/game-menu.liquid @@ -0,0 +1,15 @@ +
+ +
From a67a36decb4d32dfb047f5f4fbcbb06209e3a573 Mon Sep 17 00:00:00 2001 From: sthag Date: Sat, 4 Apr 2026 09:59:43 +0200 Subject: [PATCH 25/51] fix: randomFloatFrom now correctly stays in range --- source/code/hippie/app.js | 6 ++++-- 1 file changed, 4 insertions(+), 2 deletions(-) diff --git a/source/code/hippie/app.js b/source/code/hippie/app.js index 2b46f36..e9b5dd3 100644 --- a/source/code/hippie/app.js +++ b/source/code/hippie/app.js @@ -1,3 +1,5 @@ +/* jshint strict: false */ + // TODO: Inhalte angleichen nach Zusammenfassung von app.js und function.js. // Benennung und Beschreibungen verbessern. @@ -424,10 +426,10 @@ function randomIntFrom(min, max, pos = 0) { return Math.floor((Math.random() * (max - min + 1) + min) / pos) * pos; } -function randomFloatFrom(min, max, dec = 0) { +function randomFloatFrom(min, max, dec = 1) { dec = Math.pow(10, dec); - return Math.round((Math.random() * (max - min + 1) + min) * dec) / dec; + return Math.round((Math.random() * (max - min) + min) * dec) / dec; } /** From afcb06a8088498b6e69f95d0d98edb854706b7b8 Mon Sep 17 00:00:00 2001 From: sthag Date: Sat, 4 Apr 2026 10:22:04 +0200 Subject: [PATCH 26/51] feat: Change styles for game --- source/screens/demo/examples/game/tfw.liquid | 47 ++++++++-------- source/style/modules/game/_tfw.scss | 58 +++++++++++++++----- 2 files changed, 68 insertions(+), 37 deletions(-) diff --git a/source/screens/demo/examples/game/tfw.liquid b/source/screens/demo/examples/game/tfw.liquid index 4736098..8dfb6b6 100644 --- a/source/screens/demo/examples/game/tfw.liquid +++ b/source/screens/demo/examples/game/tfw.liquid @@ -21,17 +21,20 @@ tags:
-
-
+
+
@@ -47,17 +50,15 @@ tags:
- - @@ -75,16 +76,12 @@ tags: - + - + @@ -92,7 +89,9 @@ tags:
-

King Of Kings

+
+

King Of Kings

+

A hijacked medium mech dubbed the "Rat King" ...

Collect Rat King residue.

@@ -112,7 +111,7 @@ tags: {{ block.super -}} diff --git a/source/style/modules/game/_tfw.scss b/source/style/modules/game/_tfw.scss index 8931705..6e92dde 100644 --- a/source/style/modules/game/_tfw.scss +++ b/source/style/modules/game/_tfw.scss @@ -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 { From e698161a2d9c2192441899f881cfd5a0fe87a34d Mon Sep 17 00:00:00 2001 From: sthag Date: Sat, 4 Apr 2026 11:11:32 +0200 Subject: [PATCH 27/51] refactor: Improve for...of --- source/code/hippie/app.js | 10 +++++----- source/screens/demo/examples/ui/table.liquid | 4 ++-- 2 files changed, 7 insertions(+), 7 deletions(-) diff --git a/source/code/hippie/app.js b/source/code/hippie/app.js index e9b5dd3..e68fa40 100644 --- a/source/code/hippie/app.js +++ b/source/code/hippie/app.js @@ -192,13 +192,13 @@ function composeMail(tag, name, prov, suffix, text, topic) { el.innerHTML = elContent + text; el.setAttribute('href', 'mailto:' + mailString + topic); } else { - const els = document.getElementsByClassName(tag.slice(1)); + const elements = document.getElementsByClassName(tag.slice(1)); - for (let el of els) { - const elContent = el.innerHTML; + for (const element of elements) { + const content = element.innerHTML; - el.innerHTML = elContent + text; - el.setAttribute('href', 'mailto:' + mailString + topic); + element.innerHTML = content + text; + element.setAttribute('href', 'mailto:' + mailString + topic); } } } diff --git a/source/screens/demo/examples/ui/table.liquid b/source/screens/demo/examples/ui/table.liquid index bd0bbbb..fbd5d74 100755 --- a/source/screens/demo/examples/ui/table.liquid +++ b/source/screens/demo/examples/ui/table.liquid @@ -231,7 +231,7 @@ tags: const groupTarget = event.target.closest('[name="group"]'); if (rowTarget && event.button === 0) { - for (row of rows) { + for (const row of rows) { row.classList.remove('active'); } @@ -296,7 +296,7 @@ tags: const cells = content.querySelectorAll('th:first-child'); const isHidden = cells[0].classList.contains('di_none'); - for (cell of cells) { + for (const cell of cells) { if (isHidden) { cell.classList.remove('di_none'); } else { From aa408774699c02b50c3d7cab06f70a6af9c47f1e Mon Sep 17 00:00:00 2001 From: sthag Date: Sat, 4 Apr 2026 11:17:54 +0200 Subject: [PATCH 28/51] feat: Add a menu class to game Use event delegation and the data-action attribute. --- source/screens/demo/examples/game/tfw.liquid | 47 ++++++++++++++------ 1 file changed, 34 insertions(+), 13 deletions(-) diff --git a/source/screens/demo/examples/game/tfw.liquid b/source/screens/demo/examples/game/tfw.liquid index 8dfb6b6..983aaa6 100644 --- a/source/screens/demo/examples/game/tfw.liquid +++ b/source/screens/demo/examples/game/tfw.liquid @@ -113,25 +113,44 @@ tags: const menu = document.querySelector('body > header'); const placeholder = document.querySelectorAll('.background'); - menu.addEventListener('click', (event) => { - const buttons = menu.querySelectorAll('button'); - const buttonTarget = event.target.closest('button'); - - if (buttonTarget && event.button === 0) { - for (button of buttons) { - button.classList.remove('active'); - } - - buttonTarget.classList.add('active'); + class Menu { + constructor(element) { + // this._elem = element; + element.addEventListener('click', this.onClick.bind(this)); // Bind to get the clicked element and not the DOM element of the class } - }); + + escape() { + console.log('escape'); + } + + previous() { + console.log('previous'); + } + + quest() { + console.log('quest'); + } + + onClick(event) { + console.debug(event.target); + const action = event.target.dataset.action; + const siblings = event.target.parentElement.querySelectorAll('button'); + + if (action && event.button === 0) { + for (const sibling of siblings) { + sibling.classList.remove('active'); + } + + event.target.classList.add('active'); + this[action](); + } + }; + } 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), @@ -139,5 +158,7 @@ tags: filter: 'grayscale(' + grayscale + ') hue-rotate(' + hue + 'deg)' }); }); + + new Menu(menu); {% endblock %} \ No newline at end of file From ba96b889da5689effb469dc49613db079efc82b6 Mon Sep 17 00:00:00 2001 From: sthag Date: Sat, 4 Apr 2026 11:31:52 +0200 Subject: [PATCH 29/51] refactor: Mouse button of event --- source/screens/demo/examples/ui/table.liquid | 6 ++++-- 1 file changed, 4 insertions(+), 2 deletions(-) diff --git a/source/screens/demo/examples/ui/table.liquid b/source/screens/demo/examples/ui/table.liquid index fbd5d74..4c25154 100755 --- a/source/screens/demo/examples/ui/table.liquid +++ b/source/screens/demo/examples/ui/table.liquid @@ -230,7 +230,9 @@ tags: const rowTarget = event.target.closest('tr'); const groupTarget = event.target.closest('[name="group"]'); - if (rowTarget && event.button === 0) { + if (event.button !== 0) return; + + if (rowTarget) { for (const row of rows) { row.classList.remove('active'); } @@ -238,7 +240,7 @@ tags: rowTarget.classList.add('active'); } - if (groupTarget && event.button === 0) { + if (groupTarget) { console.log('group'); let currentRow = groupTarget.closest('tr').nextElementSibling; From 019e25945edc195d687fa2cb17aafe724f90b49f Mon Sep 17 00:00:00 2001 From: sthag Date: Sat, 4 Apr 2026 12:12:21 +0200 Subject: [PATCH 30/51] feat: Change menu for game - Add next and previous behaviour - Separate views, directions and actions --- source/screens/demo/examples/game/tfw.liquid | 60 +++++++++++++------- 1 file changed, 40 insertions(+), 20 deletions(-) diff --git a/source/screens/demo/examples/game/tfw.liquid b/source/screens/demo/examples/game/tfw.liquid index 983aaa6..c97595f 100644 --- a/source/screens/demo/examples/game/tfw.liquid +++ b/source/screens/demo/examples/game/tfw.liquid @@ -9,17 +9,17 @@ tags: {% block body %}
- - - - - - - - - - - + + + + + + + + + + +
@@ -115,7 +115,7 @@ tags: class Menu { constructor(element) { - // this._elem = element; + this._element = element; element.addEventListener('click', this.onClick.bind(this)); // Bind to get the clicked element and not the DOM element of the class } @@ -123,27 +123,47 @@ tags: console.log('escape'); } - previous() { - console.log('previous'); - } - quest() { console.log('quest'); } onClick(event) { - console.debug(event.target); const action = event.target.dataset.action; - const siblings = event.target.parentElement.querySelectorAll('button'); + const view = event.target.dataset.view; + const direction = event.target.dataset.direction; + const siblings = this._element.querySelectorAll('button[data-view]'); - if (action && event.button === 0) { + if (event.button !== 0) return; + + if (direction) { + const current = this._element.querySelector('.active'); + let view = undefined; + console.log(direction, current); + + if (current === null) return; + + view = direction === 'next' ? current.nextElementSibling : current.previousElementSibling; + + current.classList.remove('active'); + + if (view.dataset.view) { + view.classList.add('active'); + } else { + view = direction === 'next' ? siblings[0] : siblings[siblings.length - 1]; + view.classList.add('active'); + } + } + + if (view) { for (const sibling of siblings) { sibling.classList.remove('active'); } event.target.classList.add('active'); - this[action](); + this[view](); } + + if (action) this[action](); }; } From 46491f8df745df27438c308bbb132ebea4d36807 Mon Sep 17 00:00:00 2001 From: sthag Date: Sat, 4 Apr 2026 13:03:59 +0200 Subject: [PATCH 31/51] feat: Change game screen and menu class - Add default option - Add init and changeView - Change style to be more specific - Rename constants and variables --- source/screens/demo/examples/game/tfw.liquid | 66 ++++++++++++++------ source/style/modules/game/_tfw.scss | 14 ++--- 2 files changed, 54 insertions(+), 26 deletions(-) diff --git a/source/screens/demo/examples/game/tfw.liquid b/source/screens/demo/examples/game/tfw.liquid index c97595f..ca55174 100644 --- a/source/screens/demo/examples/game/tfw.liquid +++ b/source/screens/demo/examples/game/tfw.liquid @@ -21,8 +21,8 @@ tags: -
-
+
+
+
+
{% endblock %} {%- block script %} @@ -114,44 +116,70 @@ tags: const placeholder = document.querySelectorAll('.background'); class Menu { - constructor(element) { + 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'); } - quest() { - console.log('quest'); + #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; - const siblings = this._element.querySelectorAll('button[data-view]'); if (event.button !== 0) return; if (direction) { - const current = this._element.querySelector('.active'); - let view = undefined; - console.log(direction, current); + const currentBtn = this._element.querySelector('.active'); + let newButton, newView = undefined; - if (current === null) return; + if (currentBtn === null) return; - view = direction === 'next' ? current.nextElementSibling : current.previousElementSibling; - - current.classList.remove('active'); - - if (view.dataset.view) { - view.classList.add('active'); + if (direction === 'next') { + newButton = currentBtn.nextElementSibling; + newView = currentBtn.nextElementSibling.dataset.view; } else { - view = direction === 'next' ? siblings[0] : siblings[siblings.length - 1]; - view.classList.add('active'); + 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) { @@ -159,8 +187,8 @@ tags: sibling.classList.remove('active'); } + this.changeView(view); event.target.classList.add('active'); - this[view](); } if (action) this[action](); diff --git a/source/style/modules/game/_tfw.scss b/source/style/modules/game/_tfw.scss index 6e92dde..289d22b 100644 --- a/source/style/modules/game/_tfw.scss +++ b/source/style/modules/game/_tfw.scss @@ -9,12 +9,6 @@ display: flex; flex-flow: column nowrap; - .flex_auto { - display: flex; - flex: auto; - min-height: 0; - } - th, .important, .subtle, @@ -78,12 +72,18 @@ } } - & > div { + .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; From d5dfacb9a9072523098d49080a3a4d86b3b48715 Mon Sep 17 00:00:00 2001 From: sthag Date: Sat, 4 Apr 2026 13:57:48 +0200 Subject: [PATCH 32/51] chore: Resolve problems - Missing labels - Deprecated attributes - Missing attribute alt - Redundant info --- CHANGELOG.md | 104 +++++++++--------- source/screens/demo/basics.liquid | 6 +- source/screens/demo/examples/ui/table.liquid | 32 +++--- .../hippie/partials/gate-list.liquid | 2 +- .../hippie/partials/placeholder-flag.liquid | 2 +- 5 files changed, 73 insertions(+), 73 deletions(-) diff --git a/CHANGELOG.md b/CHANGELOG.md index 2c9dd37..4e82455 100644 --- a/CHANGELOG.md +++ b/CHANGELOG.md @@ -1,52 +1,52 @@ -| Commit | Version | Description | -| :--- | :----: | :--- | -| 6095870ce33fd3775718a1de3d33f604fd0630ab | 0.4.2 | Javascript again | -| 50a1a6d9257b272e076c2e3b5bac39c7d17b2793 | 0.5.0 | Changes to content | -| e2bbe9273a292a3806de1599f752258a2721d067 | 0.5.1 | | -| 3d4eef5eb0a1632b43e1e3372e38a70cd4b58914 | 0.5.2 | | -| 371cb450f81cd0d692c9005952af35ec066e01e1 | 0.6.0 | New es6 coding standard | -| 175816c3595d783e7d8b48f5336fbdd54dae145b | 0.6.1 | | -| 67e3cc1eca359bc2b927b8e971ccd7ba71f4c5a2 | 0.6.2 | | -| abeb843718988fab978de7c75d6d45806f5d35a7 | 0.6.3 | | -| 4401761a6bec9db19293353942479aea7bb8ead1 | 0.6.4 | | -| 83464a1cf4ba3efc6382eafb6f68f106c6650161 | 0.6.5 | | -| 6f95393409b502fef9ad9677b3c1ed1fe07ecc28 | 0.6.6 | | -| 63b54f2749ed5a4d9a7a53c27540e7d6f8dff63d | 0.6.7 | | -| 830037f5e5237d33ad66fe89ba45167a62d87829 | 0.6.8 | | -| d205031fff29ee4d48251e30b17090143ae5458c | 0.7.0 | switched to style submodule usage | -| d18254b61d87eb3d09d17b93783117dad7d13686 | 0.7.1 | | -| 9b9b0cb1c631273f574d3cd7618bd799f561db6c | 0.7.2 | | -| 11b30671d4948dfd30b7da14fe7295f386b54257 | 0.7.3 | | -| 767b3024fa3bbededab2a8d665b4b35b55854a1c | 0.7.4 | | -| 5c3cda58b147f16e1b9fdf1ed7b5499651df943d | 0.8.0 | changes to license file and submodule update | -| 8567604ea6b129ded8b0e6108362a30d039235a7 | 0.8.1 | | -| b2ea5b01aa47783b5f797310e16f1897e1839eb9 | 0.9.0 | Requirements updated and new nunjucks variables | -| df064b8a942f00dd3277a9dde696e91324dfd166 | 0.9.1 | | -| d812ed62084c90d4fac18b6c56a6dd3bf9bd7cba | 0.9.2 | | -| 84957f75a017d5d06a32874282d9eb9f3d537534 | 0.9.3 | | -| 489786aadc30bb589be769fe627389611c4f71f5 | 0.9.4 | | -| 003a1159231241140a262ae67bb1236978b22ec0 | 0.9.5 | | -| 731c19dd61215b8f373af9100ad5c23f19a4c2a3 | 0.9.6 | | -| dd5ff43e1695d2de0b5a0a9614c1f31ad7e7b85b | 0.9.7 | | -| dde26ec45eeb8d28a986093b8b5b29d8165e5a11 | 0.9.8 | | -| 06ba1113929183f51e8501d440c950e4b4d9f0d2 | 0.9.9 | | -| 827e6c1cde0aa4ca65e6c170174eae91da9aa4c9 | 0.9.10 | | -| 202729f9ba098b5ff07f6af43acce7a67007cd1b | 0.9.11 | | -| d22828400125f8572cfbe6243e2521ffab519adf | 0.9.12 | | -| bf1a6ca7421a0385f664f864a82850f0805522c0 | 0.9.13 | | -| 32215de810546f6ebd7f552816fc5bf3281a0a13 | 0.9.14 | | -| f7dd7c93e3a06bc430fcf4e12f4be3d3b1aa29c6 | 0.10.0 | Added card and portal modules | -| f54dbe92d912b9e7553a3a2263b009ed05017b0b | 0.10.1 | | -| 6b217b6ebbfcfa2f3e14bdf41e21bb36f88050a5 | 0.10.2 | | -| 534115ff282de4648c294ae78fe768d79e23d379 | 0.10.3 | | -| f7a5481fd2e1d1c96f7e9d82eb2c3db9483b5784 | 0.10.4 | | -| 31e896462e7693a4a6ba10d52657caf919e7f482 | 0.10.5 | | -| 778d7d14d5e8d4dbcce2f9cb996afbc4d7accf27 | 0.11.0 | logPerf without JQuery | -| 1d7f2eb839472524d73f395365ffb43e8fc5d115 | 0.12.0 | Migration to new home | -| 69c04c32349d3d11820da933ed2bbd648fabb040 | 0.12.1 | | -| 9415d4d9573a4f2a4e1c479c74c59abe3a69cd57 | 0.12.2 | | -| 6e7615b44d9ef26ade73a00102878804272cf717 | 0.12.3 | | -| b6ec313f26dde6b379da16edb65de082c6ca9b65 | 0.12.4 | | -| e856e5311439d5a64478f7cda79998476ebdfe33 | 0.12.5 | | -| ef9d665849f370b2284ae8d985d9625b5083fe37 | 0.13.0 | Introduced 11ty | -| 3358e1858bc764e520dad65cc614c842b4f66245 | 0.13.1 | | \ No newline at end of file +| Commit | Version | Description | +|:-----------------------------------------|:-------:|:------------------------------------------------| +| 6095870ce33fd3775718a1de3d33f604fd0630ab | 0.4.2 | Javascript again | +| 50a1a6d9257b272e076c2e3b5bac39c7d17b2793 | 0.5.0 | Changes to content | +| e2bbe9273a292a3806de1599f752258a2721d067 | 0.5.1 | | +| 3d4eef5eb0a1632b43e1e3372e38a70cd4b58914 | 0.5.2 | | +| 371cb450f81cd0d692c9005952af35ec066e01e1 | 0.6.0 | New es6 coding standard | +| 175816c3595d783e7d8b48f5336fbdd54dae145b | 0.6.1 | | +| 67e3cc1eca359bc2b927b8e971ccd7ba71f4c5a2 | 0.6.2 | | +| abeb843718988fab978de7c75d6d45806f5d35a7 | 0.6.3 | | +| 4401761a6bec9db19293353942479aea7bb8ead1 | 0.6.4 | | +| 83464a1cf4ba3efc6382eafb6f68f106c6650161 | 0.6.5 | | +| 6f95393409b502fef9ad9677b3c1ed1fe07ecc28 | 0.6.6 | | +| 63b54f2749ed5a4d9a7a53c27540e7d6f8dff63d | 0.6.7 | | +| 830037f5e5237d33ad66fe89ba45167a62d87829 | 0.6.8 | | +| d205031fff29ee4d48251e30b17090143ae5458c | 0.7.0 | switched to style submodule usage | +| d18254b61d87eb3d09d17b93783117dad7d13686 | 0.7.1 | | +| 9b9b0cb1c631273f574d3cd7618bd799f561db6c | 0.7.2 | | +| 11b30671d4948dfd30b7da14fe7295f386b54257 | 0.7.3 | | +| 767b3024fa3bbededab2a8d665b4b35b55854a1c | 0.7.4 | | +| 5c3cda58b147f16e1b9fdf1ed7b5499651df943d | 0.8.0 | changes to license file and submodule update | +| 8567604ea6b129ded8b0e6108362a30d039235a7 | 0.8.1 | | +| b2ea5b01aa47783b5f797310e16f1897e1839eb9 | 0.9.0 | Requirements updated and new nunjucks variables | +| df064b8a942f00dd3277a9dde696e91324dfd166 | 0.9.1 | | +| d812ed62084c90d4fac18b6c56a6dd3bf9bd7cba | 0.9.2 | | +| 84957f75a017d5d06a32874282d9eb9f3d537534 | 0.9.3 | | +| 489786aadc30bb589be769fe627389611c4f71f5 | 0.9.4 | | +| 003a1159231241140a262ae67bb1236978b22ec0 | 0.9.5 | | +| 731c19dd61215b8f373af9100ad5c23f19a4c2a3 | 0.9.6 | | +| dd5ff43e1695d2de0b5a0a9614c1f31ad7e7b85b | 0.9.7 | | +| dde26ec45eeb8d28a986093b8b5b29d8165e5a11 | 0.9.8 | | +| 06ba1113929183f51e8501d440c950e4b4d9f0d2 | 0.9.9 | | +| 827e6c1cde0aa4ca65e6c170174eae91da9aa4c9 | 0.9.10 | | +| 202729f9ba098b5ff07f6af43acce7a67007cd1b | 0.9.11 | | +| d22828400125f8572cfbe6243e2521ffab519adf | 0.9.12 | | +| bf1a6ca7421a0385f664f864a82850f0805522c0 | 0.9.13 | | +| 32215de810546f6ebd7f552816fc5bf3281a0a13 | 0.9.14 | | +| f7dd7c93e3a06bc430fcf4e12f4be3d3b1aa29c6 | 0.10.0 | Added card and portal modules | +| f54dbe92d912b9e7553a3a2263b009ed05017b0b | 0.10.1 | | +| 6b217b6ebbfcfa2f3e14bdf41e21bb36f88050a5 | 0.10.2 | | +| 534115ff282de4648c294ae78fe768d79e23d379 | 0.10.3 | | +| f7a5481fd2e1d1c96f7e9d82eb2c3db9483b5784 | 0.10.4 | | +| 31e896462e7693a4a6ba10d52657caf919e7f482 | 0.10.5 | | +| 778d7d14d5e8d4dbcce2f9cb996afbc4d7accf27 | 0.11.0 | logPerf without JQuery | +| 1d7f2eb839472524d73f395365ffb43e8fc5d115 | 0.12.0 | Migration to new home | +| 69c04c32349d3d11820da933ed2bbd648fabb040 | 0.12.1 | | +| 9415d4d9573a4f2a4e1c479c74c59abe3a69cd57 | 0.12.2 | | +| 6e7615b44d9ef26ade73a00102878804272cf717 | 0.12.3 | | +| b6ec313f26dde6b379da16edb65de082c6ca9b65 | 0.12.4 | | +| e856e5311439d5a64478f7cda79998476ebdfe33 | 0.12.5 | | +| ef9d665849f370b2284ae8d985d9625b5083fe37 | 0.13.0 | Introduced 11ty | +| 3358e1858bc764e520dad65cc614c842b4f66245 | 0.13.1 | | \ No newline at end of file diff --git a/source/screens/demo/basics.liquid b/source/screens/demo/basics.liquid index f1c8560..d607592 100644 --- a/source/screens/demo/basics.liquid +++ b/source/screens/demo/basics.liquid @@ -208,7 +208,7 @@ order: 2
Fahne
{% comment %}// TODO: Durch Platzhalter ersetzten und Prozentangaben ermöglichen{% endcomment %} - Flag @@ -243,7 +243,7 @@ order: 2

Textebene

Verweise

-

Ein wesentlicher Bestandteil von Hypertext sind Verweise +

- diff --git a/source/screens/demo/examples/ui/table.liquid b/source/screens/demo/examples/ui/table.liquid index 4c25154..54b12ff 100755 --- a/source/screens/demo/examples/ui/table.liquid +++ b/source/screens/demo/examples/ui/table.liquid @@ -25,7 +25,7 @@ tags:
- @@ -62,26 +62,26 @@ tags:
- - + + {% comment %}{% endcomment %} - + - + @@ -105,11 +105,11 @@ tags: - +
## # Number NameDescriptionDescription Amount Unit Price Sum
Type
+ Scorched Earth -
... Available
+ Location name -
... AvailableActive quests (Max.: 4)
-
- 		King Of Kings Active
-
- 		Garage Days Pt. 1 Complete
- + - - + - @@ -131,13 +131,13 @@ tags: - + @@ -314,7 +314,7 @@ tags: const clone = cloneRow(); const viewportHeight = window.innerHeight; const elementActive = tbodyPosition.querySelector('tr.active'); - let elementNew = undefined; + let elementNew; let elementBound = undefined; if (elementActive) { diff --git a/source/templates/hippie/partials/gate-list.liquid b/source/templates/hippie/partials/gate-list.liquid index 8c5fdea..7ef18bd 100644 --- a/source/templates/hippie/partials/gate-list.liquid +++ b/source/templates/hippie/partials/gate-list.liquid @@ -10,7 +10,7 @@ diff --git a/source/templates/hippie/partials/placeholder-flag.liquid b/source/templates/hippie/partials/placeholder-flag.liquid index 6b6b048..0534104 100644 --- a/source/templates/hippie/partials/placeholder-flag.liquid +++ b/source/templates/hippie/partials/placeholder-flag.liquid @@ -1,7 +1,7 @@ {% assign height = width | divided_by: 1.6 %} {% if type == 'svg' or type == '' %} - + {% comment %} From 31457088dab86c3a968a91fa18b5e6da41ad0a1d Mon Sep 17 00:00:00 2001 From: sthag Date: Sun, 5 Apr 2026 11:04:30 +0200 Subject: [PATCH 33/51] fix: Resize behavior for clock Use option value instead of offset of elements. --- source/screens/demo/examples/clock.liquid | 10 +++++++--- 1 file changed, 7 insertions(+), 3 deletions(-) diff --git a/source/screens/demo/examples/clock.liquid b/source/screens/demo/examples/clock.liquid index 57cdd7c..c8535c6 100644 --- a/source/screens/demo/examples/clock.liquid +++ b/source/screens/demo/examples/clock.liquid @@ -61,6 +61,7 @@ tags: this.#resize(); window.addEventListener('resize', () => this.#resize()); + // console.debug(this); if (this.options.debug) { console.group('Clock'); console.info('\nOptions:', this.options, '\n\n'); @@ -77,13 +78,16 @@ tags: part.element.style.width = this.options.size + 'px'; } - part.element.width = part.element.offsetWidth; - part.element.height = part.element.offsetHeight; + // part.element.width = part.element.offsetWidth; + // part.element.height = part.element.offsetHeight; + part.element.width = this.options.size; + part.element.height = this.options.size; this.draw(); }); } + // TODO: Zuweisung von shapes zu parts anpassen draw() { // TODO: Nur geänderte Teile löschen this.parts.forEach(part => { @@ -303,7 +307,6 @@ tags: } #createContext(names) { - let parts = []; const wrap = document.createElement('div'); wrap.style.position = 'relative'; @@ -444,6 +447,7 @@ tags: clock.draw(); // TODO: Alternative mit requestAnimationFrame() + // TODO: Möglichkeit für Start/Stop wie bei TimeDisplay setInterval(() => { clock.update(); }, 1000); From 9fc463393ef0f01d56c1731fd6f98600b0083ecc Mon Sep 17 00:00:00 2001 From: sthag Date: Sun, 5 Apr 2026 12:15:38 +0200 Subject: [PATCH 34/51] feat: Change RandomPixelCanvas RandomPixelCanvas is now RandomPixelPlaceholder and can also output an img element. --- source/code/hippie/app.js | 53 +++++++++++++++++++++++++++++++-------- 1 file changed, 42 insertions(+), 11 deletions(-) diff --git a/source/code/hippie/app.js b/source/code/hippie/app.js index e68fa40..cbf1533 100644 --- a/source/code/hippie/app.js +++ b/source/code/hippie/app.js @@ -559,28 +559,59 @@ const delay = ms => new Promise(res => setTimeout(res, ms)); class RandomPixelCanvas { constructor(containerElement, options = {}) { this.container = containerElement; +class RandomPixelPlaceholder { + constructor(parent, options = {}) { + this.container = parent; 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.type = options.type || 'canvas'; // 'canvas' or 'img' + this.element = this.createElement(); - this.fillWithRandomPixels(); + this.addContextToElement(); } - createCanvas() { - const canvas = document.createElement('canvas'); - canvas.width = this.width; - canvas.height = this.height; - canvas.style.filter = this.filter; + createElement() { + if (this.type === 'img') { + const img = document.createElement('img'); + img.style.filter = this.filter; - this.container.appendChild(canvas); + this.container.appendChild(img); - return canvas; + return img; + } else { + 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'); + addContextToElement() { + if (this.type === 'img') { + // Create intermediate canvas + const canvas = document.createElement('canvas'); + canvas.width = this.width; + canvas.height = this.height; + + this.fillWithRandomPixels(canvas); + + // Convert canvas to image data URL and set as img src + this.element.src = canvas.toDataURL(); + this.element.width = this.width; + this.element.height = this.height; + } else { + this.fillWithRandomPixels(this.element); + } + } + + fillWithRandomPixels(canvas) { + const ctx = canvas.getContext('2d'); const imageData = ctx.createImageData(this.width, this.height); const data = imageData.data; From 167e35ae3371617bc57e5426ce4e3941c135780b Mon Sep 17 00:00:00 2001 From: sthag Date: Sun, 5 Apr 2026 12:17:17 +0200 Subject: [PATCH 35/51] fix: Duplicate styles --- source/style/modules/game/_tfw.scss | 14 ++------------ 1 file changed, 2 insertions(+), 12 deletions(-) diff --git a/source/style/modules/game/_tfw.scss b/source/style/modules/game/_tfw.scss index 289d22b..188660e 100644 --- a/source/style/modules/game/_tfw.scss +++ b/source/style/modules/game/_tfw.scss @@ -44,13 +44,13 @@ position: relative; overflow: hidden; - *:not(canvas) { + *:not(canvas, img) { z-index: map.get(hippie.$z-indexes, "content-bottom"); position: relative; color: white; } - canvas { + canvas, img { z-index: map.get(hippie.$z-indexes, "default"); position: absolute; top: 0; @@ -133,7 +133,6 @@ } td { - position: relative; height: 4em; vertical-align: top; @@ -143,15 +142,6 @@ 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; From 38274c127710039287e5016917b77ef5fa2d7a00 Mon Sep 17 00:00:00 2001 From: sthag Date: Sun, 5 Apr 2026 12:18:40 +0200 Subject: [PATCH 36/51] feat: Update game screen - Use new RandomPixelPlaceholder - Add first event for view --- source/screens/demo/examples/game/tfw.liquid | 52 ++++++++++++++------ source/style/modules/game/_tfw.scss | 5 ++ 2 files changed, 43 insertions(+), 14 deletions(-) diff --git a/source/screens/demo/examples/game/tfw.liquid b/source/screens/demo/examples/game/tfw.liquid index ca55174..1365630 100644 --- a/source/screens/demo/examples/game/tfw.liquid +++ b/source/screens/demo/examples/game/tfw.liquid @@ -25,8 +25,8 @@ tags:
Filter
- - + +
@@ -66,25 +66,29 @@ tags:
- +
+ + + - + - + +
Active quests (Max.: 4)
King Of Kings Active
Garage Days Pt. 1CompleteComplete
@@ -104,7 +108,9 @@ tags:
- + + +
@@ -203,6 +209,12 @@ tags: viewQuest.addEventListener('click', (event) => { const rows = viewQuest.querySelectorAll('tr'); const rowTarget = event.target.closest('tr'); + const rowSelection = event.target.closest('#questSelection tr'); + const rowActive = event.target.closest('#questActive tr:not(.complete)'); + const rowComplete = event.target.closest('#questActive tr.complete'); + const buttonAccept = viewQuest.querySelector('footer button[data-action=accept]'); + const buttonAbandon = viewQuest.querySelector('footer button[data-action=abandon]'); + const buttonClaim = viewQuest.querySelector('footer button[data-action=claim]'); if (event.button !== 0) return; @@ -213,8 +225,25 @@ tags: } rowTarget.classList.add('active'); - document.querySelector('.quest').style.opacity = 1; - document.querySelector('footer button[data-action=accept]').style.display = 'inline-block'; + viewQuest.querySelector('.quest').style.opacity = 1; + + if (rowSelection) { + buttonClaim.style.display = 'none'; + buttonAbandon.style.display = 'none'; + buttonAccept.style.display = 'inline-block'; + } + + if (rowActive) { + buttonAccept.style.display = 'none'; + buttonClaim.style.display = 'none'; + buttonAbandon.style.display = 'inline-block'; + } + + if (rowComplete) { + buttonAccept.style.display = 'none'; + buttonAbandon.style.display = 'none'; + buttonClaim.style.display = 'inline-block'; + } } }); From 1d4d5624d5599b4a75031ea7d177e892bbb11695 Mon Sep 17 00:00:00 2001 From: sthag Date: Sun, 19 Apr 2026 12:19:16 +0200 Subject: [PATCH 42/51] fix: Change aside elements --- source/style/hippie-style | 2 +- source/view/demo/basics.liquid | 2 +- source/view/demo/components.liquid | 2 +- 3 files changed, 3 insertions(+), 3 deletions(-) diff --git a/source/style/hippie-style b/source/style/hippie-style index 80a0dee..a66010a 160000 --- a/source/style/hippie-style +++ b/source/style/hippie-style @@ -1 +1 @@ -Subproject commit 80a0deedd5ec1858c2f9f201412da282462c3a99 +Subproject commit a66010a9ed535ad8ca5bbb7faed222861fc40ad4 diff --git a/source/view/demo/basics.liquid b/source/view/demo/basics.liquid index d607592..e32b6cc 100644 --- a/source/view/demo/basics.liquid +++ b/source/view/demo/basics.liquid @@ -561,7 +561,7 @@ order: 2

Änderungen

Werden Texte geändert, können solche Änderungen sichtbar gemacht werden. Somit können sie besser nachvollzogen werden.
Zum Beispiel eine Ergänzung von Inhalt.

-