martin/musicmouse
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

Clock: bubbles on the cards' side while a countdown is showing

Browse Source 
With countdown cards the watch moves left and covers roughly 6-49% of the
width, where the plain field's bubbles would rise behind it.

Co-Authored-By: Claude Opus 5.5 <noreply@anthropic.com>
This commit is contained in:
Martin Bauer
2026-10-08 17:48:02 +02:00
parent 701e90153c
commit 13d14c00aa
1 changed files with 20 additions and 4 deletions
Download Patch File Download Diff File Expand all files Collapse all files

24
web/src/components/ClockOverlay.tsx
View File

@@ -19,9 +19,9 @@ import { SKIN } from "../lib/skins";
import { SHOW_DECORATIVE_ANIMATIONS } from "../lib/theme";
import { Drift, type DriftField } from "./Drift";
/** Beside the watch only, never behind it: on a 1080p kiosk the watch covers roughly
* 28-72% of the width, and a bubble rising behind it would drag the watch into every
* frame the Pi redraws. */
/** Beside the watch only, never behind it: a bubble rising behind it would drag the
* watch into every frame the Pi redraws. On a 1080p kiosk the watch covers roughly
* 28-72% of the width when it is alone... */
const BUBBLES: DriftField = [
[5, 14, 0.5, 9, 0],
[12, 22, 0.5, 12, -3],
@@ -33,6 +33,19 @@ const BUBBLES: DriftField = [
[95, 18, 0.5, 13, -9],
];
/** ...and 6-49% when countdown cards share the screen, so then they all rise on the
* cards' side. The cards are cheap to redraw (no backdrop blur under `?pi=1`). */
const BUBBLES_WITH_CARDS: DriftField = [
[52, 14, 0.5, 9, 0],
[57, 22, 0.5, 12, -3],
[64, 10, 0.5, 8, -6],
[70, 16, 0.5, 11, -2],
[77, 24, 0.5, 14, -5],
[84, 12, 0.5, 10, -7],
[90, 12, 0.5, 9, -1],
[96, 18, 0.5, 13, -9],
];
/** The four colours every ring of the dial cycles through, starting at 12. */
const HUES = ["205", "175", "245", "pink"] as const;
@@ -62,7 +75,10 @@ export function ClockOverlay({ visible, clock, onClose }: Props) {
aria-label="Uhr"
>
{visible && SHOW_DECORATIVE_ANIMATIONS && (
<Drift field={BUBBLES} bubbleColor={(alpha) => `oklch(90% 0.02 var(--hue) / ${alpha})`} />
<Drift
field={countdowns.length > 0 ? BUBBLES_WITH_CARDS : BUBBLES}
bubbleColor={(alpha) => `oklch(90% 0.02 var(--hue) / ${alpha})`}
/>
)}
{clock && clock.school_day !== null && <SchoolDayBadge clock={clock} />}