From 31457088dab86c3a968a91fa18b5e6da41ad0a1d Mon Sep 17 00:00:00 2001 From: sthag Date: Sun, 5 Apr 2026 11:04:30 +0200 Subject: [PATCH 1/5] 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 2/5] 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 3/5] 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 4/5] 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: