DogFatherGit/dogfather-universe
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Uhr: Stunden rot, Minuten silber, Sekunden babyblau -- alle drei als Reihen

Browse Source 
Wunsch Filipe: "stunden soll rot sein, minuten schwarz/silber und die
sekunden babyblau. die punkte herum sollen eine mischung von rot
schwarz und babyblau sein. ich will auch dass die stunden und minuten
auch barren oder punkte sind und nicht so eine durchlaufende schleife."

ALLE DREI BAHNEN SIND JETZT REIHEN. Die Stunde bekommt zwoelf Balken
(ein Zifferblatt hat zwoelf), Minute und Sekunde sechzig. Die Glieder
sind verschieden lang -- Punkt (0,01 + runde Kappe), kurzer Balken
(1,7), langer Balken (5,5). Damit liest man die drei Bahnen auch dann
auseinander, wenn jemand Farben schlecht unterscheidet; Farbe allein
traegt eine Information nie.

VIER FUNDE BEIM NACHMESSEN, keiner davon war vorher sichtbar:

1. ABRUNDEN STATT RUNDEN. `Math.round` liess Minute und Stunde ab der
   HAELFTE einen Balken zu frueh aufleuchten: um 14:30 zeigte der
   Stundenring vier statt drei Balken, der Minutenring ab Sekunde 30
   einen zu viel. Die Uhr war damit die halbe Zeit ueber falsch --
   und ausgerechnet zur vollen Stunde, wo man hinsieht, richtig.
   Nachgerechnet: 10:30 -> 11, 14:30 -> 3, 23:59 -> 12, 00:00 -> 1.

2. DIE PERLENKOEPFE TRUGEN DIE ALTE ZUORDNUNG. Die drei Boegen waren
   getauscht, die drei Koepfe nicht: ein roter Kopf sass auf der
   blauen Sekundenreihe, ein silberner auf den roten Stundenbalken.
   Das sah nach einem Winkelfehler aus, obwohl alle drei auf die
   Zehntelgrad genau standen (354 / 161,9 / 343,0 bei 23:26:59,
   gemessen). Wer eine Farbe tauscht, tauscht sie an ALLEN Stellen:
   Bogen, Kopf, Schein, Kranz.

3. DER SCHEIN LAG DREIFACH UEBEREINANDER. Jeder Ring liegt dreimal im
   SVG (Schatten, Hauptlage, Kante); `.uhr__stunde` traf alle drei.
   Das rote Leuchten lief dadurch bis ueber die Ziffern, obwohl in der
   Regel nur 1,8 px stehen -- genau das Verschwommene, das Filipe nicht
   will. Jetzt `.uhr__ring > …`: nur die Hauptlage leuchtet, Schatten
   und Kante bleiben hart.

4. ZWEI TOTE FARBSCHICHTEN in heim.css (Sekunde rot / Minute blau /
   Stunde bronze). Sie wurden vom spaeteren Satz ueberschrieben und
   waren unsichtbar -- aber wer die Datei von oben liest, haelt sie
   fuer die geltende Regel und aendert die falsche Stelle. Entfernt
   statt stehengelassen: EINE Stelle entscheidet ueber eine Farbe.

Ausserdem: Der Kometenschweif ist raus (HTML und CSS, nicht
ausgeblendet). Eine Reihe zeigt ihre Richtung durch das letzte Glied;
ohne eigenes Muster haette er einen vollen Ring quer ueber die Punkte
gezogen. Der Punktkranz aussen mischt jetzt Rot, Babyblau und ein sehr
dunkles Blau im 18-Grad-Takt -- das Dunkel ist kein Loch, sonst zerfiele
der Ring aus dem Augenwinkel in zwei Haelften.

Gedaempft bleibt Pflicht: Die Sekunde laeuft dauernd und bekommt das
ruhigste Babyblau, die Stunde bewegt sich kaum und darf die kraeftigste
Farbe tragen. Die Auslieferungskennung ist auf allen 19 Seiten
hochgesetzt, sonst kaeme keine der Aenderungen an.

Geprueft: pruef-start-ansicht (alles in Ordnung), pruef-css-klassen
(alles in Ordnung), Segmentzahlen und Perlenwinkel im Browser
nachgemessen, Bildschirmfoto bei vierfacher Aufloesung.

Co-Authored-By: Claude Opus 5 <[email protected]>
This commit is contained in:
DogFatherGit
2026-09-08 23:30:56 +02:00
co-authored by Claude Opus 5
parent e04d7afea7
commit 12c40256f7
21 changed files with 400 additions and 374 deletions
Download Patch File Download Diff File Expand all files Collapse all files
workspace/assets/js/start.js
+41 -44
View File
@@ -379,24 +379,6 @@
for (const welcher of ['sekunde', 'minute', 'stunde']) {
lagen[welcher] = [...document.querySelectorAll(`[data-ring="${welcher}"]`)];
}
/* DER SCHWEIF (08.09.2026): die letzten Grad vor der Spitze, heller.
Gerechnet, nicht geschaetzt. Ein Kreis mit Umfang U, Fortschritt
a (0..1) und Schweiflaenge s soll ein Segment von (a*U - s) bis
a*U zeigen. Mit `dasharray: s, U-s` beginnt das sichtbare Stueck
bei (U - offset), also gilt
U - offset = a*U - s -> offset = U*(1-a) + s
Die Laenge wird bei kurzen Boegen mitgekuerzt: Am Anfang einer
Minute ist der Bogen selbst noch kuerzer als der Schweif, und ein
Schweif ohne Bogen darunter haenge sonst am Ende des Kreises --
sichtbar als heller Strich bei zwoelf Uhr, wo nichts sein darf. */
const SCHWEIF = { sekunde: 30, minute: 26, stunde: 22 }; // Bogenlaenge
const spuren = {};
for (const welcher of ['sekunde', 'minute', 'stunde']) {
spuren[welcher] = document.querySelector(`[data-spur="${welcher}"]`);
}
/* DIE SEKUNDE IST EINE PUNKTREIHE (08.09.2026).
@@ -415,13 +397,19 @@
gebaut: n Paare aus Punkt und Luecke, dahinter eine Luecke ueber
den ganzen Rest. Sechzig Zahlenpaare einmal je Sekunde sind
nichts -- die Alternative waeren sechzig Elemente im Dokument. */
const SEK_PUNKTE = 60;
const punktMuster = (U, n) => {
const schritt = U / SEK_PUNKTE;
/* Wie viele Glieder hat welche Bahn, und wie lang ist eines?
Die Sekunde bekommt PUNKTE (Laenge nahe null, runde Kappe), Minute
und Stunde BALKEN -- je langsamer, desto laenger das Glied. So
liest man die drei auch ohne Farbe auseinander. */
const GLIEDER = { sekunde: 60, minute: 60, stunde: 12 };
const GLIED_LAENGE = { sekunde: 0.01, minute: 1.7, stunde: 5.5 };
const punktMuster = (U, n, gesamt, laenge) => {
const schritt = U / gesamt;
if (n <= 0) return `0 ${U}`;
/* 0.01 statt 0: Manche Browser zeichnen eine Strichlaenge von
exakt null gar nicht, auch mit runder Kappe. */
const paar = `0.01 ${(schritt - 0.01).toFixed(3)} `;
const paar = `${laenge} ${(schritt - laenge).toFixed(3)} `;
/* DIE REIHENFOLGE ENTSCHEIDET, OB DER REST EINE LUECKE IST.
In `dasharray` wechseln sich Strich und Luecke ab, beginnend
@@ -446,30 +434,39 @@
const setze = (welcher, anteil) => {
const U = UMFANG[welcher];
if (welcher === 'sekunde') {
/* Der erste Punkt gehoert der Sekunde 0 -- deshalb n = sk + 1:
Bei 0 Sekunden leuchtet einer, bei 59 alle sechzig. Ein Ring,
der bei null voellig leer ist, sieht eine Sekunde lang aus wie
ein Ladefehler. */
const n = Math.round(anteil * SEK_PUNKTE) + 1;
const muster = punktMuster(U, Math.min(n, SEK_PUNKTE));
for (const el of lagen[welcher]) {
el.style.strokeDasharray = muster;
el.style.strokeDashoffset = '0';
}
return;
/* ALLE DREI BAHNEN SIND REIHEN (08.09.2026).
Filipe: "ich will auch dass die stunden und minuten auch barren
oder punkte sind und nicht so eine durchlaufende schleife."
Ein durchgehender Bogen zeigt einen Stand, eine Reihe zeigt
SCHRITTE -- und Zeit besteht aus Schritten. Die Stunde bekommt
zwoelf Balken (ein Zifferblatt hat zwoelf), Minute und Sekunde
sechzig. Das erste Glied gehoert dem Wert 0: Bei 0 Sekunden
leuchtet eines, bei 59 alle sechzig. Ein Ring, der bei null
voellig leer ist, sieht eine Sekunde lang aus wie ein
Ladefehler. */
const gesamt = GLIEDER[welcher];
/* ABRUNDEN, NICHT RUNDEN -- der Unterschied ist ein ganzer Balken.
`Math.round` haette bei Minute und Stunde ab der HAELFTE
aufgerundet: Um 14:30 lief der Stundenring auf 2 + 0,5 = 2,5,
gerundet 3, plus eins = VIER Balken -- obwohl erst die dritte
Stunde laeuft. Dasselbe im Minutenring ab Sekunde 30. Die Uhr
war damit die halbe Zeit ueber einen Balken zu weit, und zwar
gerade dann nicht, wenn man hinsieht (zur vollen Stunde stimmte
sie). Nachgerechnet, nicht geschaetzt: 10:30 -> 11 Balken,
14:30 -> 3, 23:59 -> 12, 00:00 -> 1.
Bei der Sekunde macht es keinen Unterschied (sk ist ganz), bei
den anderen beiden ist es der ganze Unterschied. */
const n = Math.min(Math.floor(anteil * gesamt) + 1, gesamt);
const muster = punktMuster(U, n, gesamt, GLIED_LAENGE[welcher]);
for (const el of lagen[welcher]) {
el.style.strokeDasharray = muster;
el.style.strokeDashoffset = '0';
}
const wert = String(U * (1 - anteil));
for (const el of lagen[welcher]) el.style.strokeDashoffset = wert;
const spur = spuren[welcher];
if (!spur) return;
const s = Math.min(SCHWEIF[welcher], U * anteil);
if (s <= 0.5) { spur.style.opacity = '0'; return; } /* nichts zu zeigen */
spur.style.opacity = '';
spur.style.strokeDasharray = `${s} ${U - s}`;
spur.style.strokeDashoffset = String(U * (1 - anteil) + s);
};
/* Der Nullpunkt der eigenen Uhr -- siehe unten bei den Koepfen. */