Sascha/perinco-Pulse
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects 1 Releases Wiki Activity

feat(pixel): 8-Bit-Handwerker laeuft einmal pro Minute durch die Seitenleiste

Browse Source 
Im Theme "Pixel Art" laeuft eine kleine Figur ueber die Steinmauer der
Seitenleiste, macht einen Huepfer und verschwindet wieder nach links.
Auftritt alle 60 Sekunden, der erste nach 6 Sekunden.

Die Figur ist eine eigene Zeichnung - gruene Muetze, Schutzbrille,
Latzhose - und steht als Pixelraster 14 x 16 direkt im Code, ohne
Bilddatei. Bewusst kein Sprite aus einem kommerziellen Spiel: solche
Figuren und Grafiken sind geschuetzt und gehoeren nicht in eine
produktiv genutzte Anwendung.

Technik wie bei den Wetter-Ebenen: ein Canvas genau ueber der
Seitenleiste, ohne Klickfang, unter den Dialogen, per ResizeObserver an
die ein- und ausklappbare Breite gebunden. Zwischen zwei Auftritten
laeuft ein Timer statt eines Animationsframes. Bei "Bewegung reduzieren"
und unterhalb der Tabletbreite bleibt alles aus.

Rueckbau: diesen Commit reverten, oder die Datei loeschen und die eine
Zeile in lib/theme.tsx entfernen.

Co-Authored-By: Claude Opus 5 (1M context) <noreply@anthropic.com>
This commit is contained in:
schakal00783
2026-09-18 12:10:19 +02:00
co-authored by Claude Opus 5
parent 3b818bd1c6
commit d9d46fea6a
3 changed files with 261 additions and 1 deletions
Download Patch File Download Diff File Expand all files Collapse all files
README.md
+12 -1
View File
@@ -91,18 +91,29 @@ mindestens Vorgesetzter ist.
Sieben Farbwelten, jede in hell und dunkel, gespeichert am Benutzer
(`pulse_users.theme`, `theme_mode`) und vor dem ersten Bild gesetzt (Inline-Skript
in `index.html`). Sie kommen 1:1 aus dem perinco CRM; drei bringen Bewegung mit:
in `index.html`). Sie kommen 1:1 aus dem perinco CRM; vier bringen Bewegung mit:
| Theme | Bewegung | Wo |
| --- | --- | --- |
| Rainy | Nieselregen mit Aufprall, Wetterleuchten in den Wolken der Kopfleiste | `src/components/layout/RainyWeather.tsx`, `.rainy-flash` |
| Snow | Schneefall, der sich unten zu einer Decke sammelt; alle 4 Minuten fährt ein Räumfahrzeug durch | `src/components/layout/SnowWeather.tsx` |
| Aura | hell: Sonnenstrahlen, dunkel: Mond mit Sternen; ziehende Wolken und **schaukelnde Hügel in der Seitenleiste** (`@keyframes aura-hills`, nur hell) | `src/components/layout/AuraSky.tsx`, `src/index.css` |
| Pixel Art | einmal pro Minute läuft ein 8-Bit-Handwerker über die Steinmauer der Seitenleiste, hüpft und geht wieder | `src/components/layout/PixelRunner.tsx` |
Die Animationen hängen am `ThemeProvider`, liegen über der Oberfläche, fangen
keine Klicks ab und bleiben unter Dialogen. Bei „Bewegung reduzieren“ im
Betriebssystem bleiben sie alle aus.
**Die Figur im Pixel-Theme** ist eine eigene Zeichnung – grüne Mütze, Schutzbrille,
Latzhose – und steht als Pixelraster (14 × 16) direkt in der Komponente, ohne
Bilddatei. Bewusst kein Sprite aus einem kommerziellen Spiel: solche Figuren und
Grafiken sind geschützt. Sie läuft von links herein, hüpft und geht wieder nach
links hinaus; Boden ist die Unterkante der Menüliste, also die freie Mauer über
*Einstellungen*. Nur ab Tablet-Breite, nicht bei „Bewegung reduzieren“.
**Rückbau:** `git revert <Commit>` – oder die Datei löschen und die Zeile
`{palette === 'pixel' && <PixelRunner />}` samt Import aus `src/lib/theme.tsx`
entfernen. Sonst hängt nichts daran.
Ein neues Theme braucht vier Stellen: Farbblock in `src/index.css`, Eintrag in
`THEME_PALETTES` samt Beschriftung (`src/types.ts`), die Freigabeliste im
Inline-Skript von `index.html` und die Prüfung in `server/src/routes/auth.js`