From c518672db076903c40b49cb387f514fc37ec5c95 Mon Sep 17 00:00:00 2001 From: sthag Date: Fri, 3 Apr 2026 12:35:36 +0200 Subject: [PATCH 01/11] feat: Demo config changed --- .eleventy.js | 5 +++-- source/screens/demo/index.liquid | 2 +- 2 files changed, 4 insertions(+), 3 deletions(-) diff --git a/.eleventy.js b/.eleventy.js index 522c4dd..0e51f7d 100644 --- a/.eleventy.js +++ b/.eleventy.js @@ -31,7 +31,8 @@ export default async function (eleventyConfig) { return (data) => `${data.page.filePathStem}.${data.page.outputFileExtension}`; }); - const demoPath = await hasFiles('source/screens') ? '/demo/' : '/'; + // TODO: Demo entfernen + const permalinkPath = await hasFiles('source/screens') ? '/demo/' : '/'; eleventyConfig.addGlobalData('hippie', { brand: 'hippie', @@ -44,7 +45,7 @@ export default async function (eleventyConfig) { mail: 'name@domain.tld', domain: 'https://domain.tld' }, - demoPath: demoPath, + permalink: permalinkPath, debugMode: true, legacyMode: false }); diff --git a/source/screens/demo/index.liquid b/source/screens/demo/index.liquid index a07c2d4..95aeefa 100644 --- a/source/screens/demo/index.liquid +++ b/source/screens/demo/index.liquid @@ -1,5 +1,5 @@ --- -permalink: "{{ hippie.demoPath }}" +permalink: "{{ hippie.permalink }}" title: Index --- {% assign pageId = page.fileSlug -%} From a1b5aa8c59ea52f06f0ac1fb47c47de7ad8f61ab Mon Sep 17 00:00:00 2001 From: sthag Date: Sat, 4 Apr 2026 08:17:56 +0200 Subject: [PATCH 02/11] feat: New game screen - Basic layout - Menu structure - First screen - Add RandomPixelCanvas class --- source/code/hippie/app.js | 56 +++++++ source/screens/demo/examples/game/menu.liquid | 4 +- source/screens/demo/examples/game/new.liquid | 146 +++++++++++++++++ source/style/modules/_game.scss | 153 +++++++++++++++++- 4 files changed, 356 insertions(+), 3 deletions(-) create mode 100644 source/screens/demo/examples/game/new.liquid diff --git a/source/code/hippie/app.js b/source/code/hippie/app.js index eb6eda9..2b46f36 100644 --- a/source/code/hippie/app.js +++ b/source/code/hippie/app.js @@ -554,6 +554,62 @@ function zeroFill(number, width) { // Retrieved 2026-03-08, License - CC BY-SA 4.0 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 // NOTE: Benutzt private Zuweisungen diff --git a/source/screens/demo/examples/game/menu.liquid b/source/screens/demo/examples/game/menu.liquid index 7852bdb..34e00e7 100644 --- a/source/screens/demo/examples/game/menu.liquid +++ b/source/screens/demo/examples/game/menu.liquid @@ -3,7 +3,7 @@ title: Menu tags: - game --- -{% assign bodyClass = 'body_game' -%} +{% assign bodyClass = 'body_menu' -%} {% layout 'hippie/simple.liquid' %} {% block body %} @@ -14,7 +14,7 @@ tags:

Additional name