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

Bauplan Etappen 4 und 6: Kachelplatz, Aufstiegskarte, und das Alte raeumt ab

Browse Source 
Drei Dinge, die zusammengehoeren, weil sie alle denselben Satz aus
Kapitel 01 des Bauplans beantworten: Wer neu ist, soll nicht alles
gleich wichtig vorgesetzt bekommen.

1) DIE KACHEL STEHT BEIM TEAM OBEN (Kapitel 03)
Gemessen stand "Willkommen & Anleitung" bei einem Modi in der Gruppe
"Community" -- der FUENFTEN von sechs, hinter allen Brettern, die er
moderiert. Der Plan sagt dazu "zusaetzlich als erste Kachel in 'Fuer
dich', weil sie bei ihnen sonst weit unten steht".

Ich habe sie VERSCHOBEN statt verdoppelt, und das ist eine bewusste
Abweichung vom Wortlaut: Zwei Kacheln mit demselben Namen und
demselben Ziel hatte dieses Haus am 19.09. schon einmal (zweimal
"Chat"), und der Satz, der daraus wurde, steht seitdem im Quelltext --
"Zwei gleich benannte Wege zum selben Ort sind schlimmer als ein
fehlender". Das Ziel des Plans ist so erreicht, der Nebeneffekt bleibt
aus. Fuer die Community aendert sich nichts: Bei ihr ist "Community"
die erste Gruppe, dort steht sie schon vorne und breit.
Entschieden wird das an AUSSEN_ROLLEN, nicht an Rollennamen.

2) "NEU FUER DICH" BEIM AUFSTIEG (Kapitel 10, Etappe 6)
Erreicht ein Mitglied "Dabei" oder "Stamm", steht auf der Zentrale
einmal eine Karte mit dem, was jetzt geht, und einem Sprung auf die
passende Karte der Anleitung.

WAS JETZT GEHT, IST ABGELEITET -- aus TREFF_SCHREIBEN, derselben
Tafel, die es auch ENTSCHEIDET. Eine Liste im Code haette beim
naechsten neuen Brett entweder etwas versprochen, das die Person gar
nicht darf, oder verschwiegen, was sie duerfte.

Der Schluessel ist (Person, STUFE) und nicht (Person): Wer von Neu auf
Dabei steigt, bekommt die Karte, und Wochen spaeter beim Sprung auf
Stamm noch einmal, mit anderem Inhalt. Eine einzelne Spalte "schon
gesehen" haette den zweiten Aufstieg verschluckt -- und das waere
niemandem aufgefallen, es fehlt ja nur etwas.

Gemerkt wird beim ZEIGEN, nicht beim Wegklicken. Dieselbe Entscheidung
wie bei der Begruessung, aus demselben gemessenen Grund.

Dazu springt `anleitung.html?karte=<schluessel>` jetzt auf eine
bestimmte Karte. Erst beim Messen fiel auf, dass der Sprung ins Leere
ging, obwohl Karte und Abschnitt richtig waren: Unter den Karten
werden danach noch drei Abschnitte eingehaengt, und das sanfte
Scrollen zielte auf eine Hoehe, die sich dabei verschob. Der Sprung
steht jetzt ganz am Ende des Aufbaus.

3) DAS ABGELOESTE WILLKOMMEN IST WEG
willkommen.html ist seit heute frueh eine Weiterleitung. Der Unterbau
lief aber weiter: eine Schnittstelle, die jede Kachel einer Rolle
gleich ausfuehrlich erklaerte (genau das, was Kapitel 01 als Problem
beschreibt), dazu ein Skript und ein Stilblatt, die keine Seite mehr
lud. Entfernt: server/workspace-willkommen.js, assets/js/willkommen.js,
assets/css/willkommen.css und der Router in index.js.

Aufgefallen ist es, weil pruef-willkommen rot wurde und danach in ihre
Notbremse lief -- eine Pruefung, die eine zurueckgenommene Regel
verteidigt. Sie ist mitgegangen: Die inhaltlichen Fragen beantwortet
jetzt pruef-anleitung; hier bleibt die eine, die sonst niemand stellt
("verliert die alte Adresse jemanden?") plus der Nachweis, dass das
Alte wirklich fort ist. 15 Pruefungen statt der alten Fassung, und der
Rueckgang ist damit erklaert.

Nebenbefund: tools/kachel-regenbogen.mjs verwies auf pruef-willkommen
als Wache ueber den gerechneten CSS-Block. Die Datei hat ihn nie
angesehen -- die Wache ist pruef-kachelfarben. Zeiger berichtigt.

AUSSERDEM: .zeileneditor__weg war 34x34 und das einzige ungedeckte
Tippziel des Hauses (pruef-tippziele war deshalb rot). Er wirft eine
Zeile aus einem Eintrag. Auf Fingergeraeten jetzt 44x44, das Kreuz
mitgerechnet statt geraten. Der Knopf stammt aus einer anderen
Sitzung; ich habe ihn Filipe gemeldet und keine Antwort bekommen --
eine rote Pruefung, die liegen bleibt, wird nach dem zweiten Mal
weggeklickt, deshalb jetzt behoben statt weiter gemeldet.

GEPRUEFT
  pruef-anleitung     137 -> 166 (neu: Kachelplatz je Rolle mit
                      Gegenprobe aufs Agenturhaus, der ganze
                      Aufstiegsweg inkl. ZWEITEM Aufstieg, und die
                      Abnahme-Checkliste aus Kapitel 13 -- 14/29/29/34
                      Karten MIT ihrer Aufteilung 5/4/5, 7/7/15,
                      7/7/15, 8/7/19 und "Nicht deins")
  pruef-willkommen    neu gefasst, 15, gruen
  pruef-sackgassen    14, 145 Kacheln, 0 ins Leere
  pruef-start-ansicht gruen, keine Konsolenfehler
  pruef-rollen        454, gruen (das eine "nicht nachsehbar" ist das
                      Haus-Wechsel-Feld und war immer so)
  pruef-tippziele     13, jetzt 0 Fehlschlaege

Gegenproben gefahren: Umsortierung ausgebaut -> drei FEHL (und die
Meldung zeigte den alten Zustand, Gruppe 5 von 6). Datenbank vor der
Schemaaenderung gesichert (sicherungen/vor-aufstieg-20261006-172614.db,
integrity_check ok).

Im Browser nachgemessen (echte Anmeldung, 390 px, HTTPS-Vorbau):
Karte da, Satz richtig, drei Wege, 0 zu kleine Tippziele, Sprung
landet auf der richtigen Karte, Abschnitt aufgeklappt, im Bild -- und
beim zweiten Aufruf ist sie weg.

Co-Authored-By: Claude Opus 5 <[email protected]>
This commit is contained in:
DogFatherGit
2026-10-06 17:39:35 +02:00
co-authored by Claude Opus 5
parent f09a0c3456
commit 1f0ab7860a
62 changed files with 1598 additions and 1813 deletions
Download Patch File Download Diff File Expand all files Collapse all files
workspace/assets/css/anleitung.css
+9
View File
@@ -981,3 +981,12 @@ body[data-rundgang="ja"] [data-rundgang-ziel="ja"] .kachel[data-rundgang-muss="j
.an-stufe__zeile { grid-template-columns: auto 1fr; align-items: baseline; }
.an-stufe__kann, .an-stufe__wann { grid-column: 1 / -1; }
}
/* Die Karte, auf die „Neu für dich" gesprungen ist (06.10.2026).
Eine ruhige Umrandung für ein paar Sekunden — kein Blinken, kein
Leuchten: Sie beantwortet die Frage „welche war gemeint?" und
verschwindet dann wieder. */
.an-karte[data-gesucht="ja"] {
border-color: color-mix(in srgb, var(--akzent) 58%, transparent);
box-shadow: 0 0 0 1px color-mix(in srgb, var(--akzent) 28%, transparent);
}
workspace/assets/css/bereich.css
+22
View File
@@ -2939,6 +2939,28 @@ body[data-ton] .kopf-zeile::before {
.zeileneditor__weg { transition: none; }
}
/* AM FINGER GEMESSEN, NICHT AM BILDSCHIRM (06.10.2026).
34x34 ist mit der Maus bequem und mit dem Daumen zu klein --
pruef-tippziele hat genau diesen Knopf als einziges ungedecktes
Bedienelement des Hauses gemeldet. Und er ist nicht irgendeiner:
Er wirft eine Zeile aus dem Eintrag.
`pointer: coarse` und keine Breite: Die Frage ist nicht, wie breit
der Bildschirm ist, sondern womit jemand tippt. Dieselbe
Entscheidung wie bei den anderen Knoepfen des Hauses -- und sie
steht hier, direkt neben der Zahl, die sie korrigiert, statt in
einer gepflegten Liste in einer anderen Datei. */
@media (pointer: coarse) {
.zeileneditor__weg { min-width: 44px; min-height: 44px; }
/* Das Kreuz sitzt mit `left`/`top` fest -- es muss mitwandern,
sonst klebt es in der linken oberen Ecke der groesseren Flaeche.
Gerechnet statt geraten: (44 - 12) / 2 = 16 waagerecht,
44 / 2 - 0,8 = 21,2 senkrecht (halbe Strichstaerke). */
.zeileneditor__weg::before,
.zeileneditor__weg::after { left: 16px; top: 21.2px; }
}
.zeileneditor__fuss {
display: flex; align-items: center; gap: 10px;
margin-top: 7px;
workspace/assets/css/start.css
+81
View File
@@ -9482,3 +9482,84 @@ body[data-ton] .kopfleiste__rechts > *:hover {
@media (prefers-reduced-motion: reduce) {
.kachel[data-sendung="ja"] .kachel__link::after { animation: none; }
}
/* =====================================================================
„NEU FÜR DICH" — die Karte beim Aufstieg der Stufe (06.10.2026)
=====================================================================
Bauplan Kapitel 10. Sie erscheint im Leben eines Mitglieds genau
zweimal: beim Sprung auf „Dabei" und beim Sprung auf „Stamm".
SIE SIEHT AUS WIE DER GLOCKEN-HINWEIS DARÜBER und nicht wie etwas
Neues — gleiche Form, gleicher Rahmen, gleiche Kante in der
Hausfarbe. Zwei verschiedene Gestaltungen für zwei Kästen, die
nacheinander an derselben Stelle stehen können, wären zwei
Sprachen auf einem Bildschirm.
KEIN KONFETTI, KEIN LEUCHTEN, KEIN PULSIEREN. Es ist eine gute
Nachricht, kein Alarm — und was blinkt, liest man beim zweiten Mal
nicht mehr. Die Farbe trägt `--akzent`, in beiden Häusern die
jeweils eigene.
===================================================================== */
.aufstieg {
display: flex; align-items: center; gap: 16px; flex-wrap: wrap;
margin: 0 0 24px;
padding: 15px 20px;
background: rgba(255, 255, 255, .04);
border: 1px solid var(--rand);
border-left: 3px solid color-mix(in srgb, var(--akzent) 55%, transparent);
border-radius: 14px;
}
.aufstieg__text { flex: 1 1 280px; min-width: 0; max-width: 64ch; }
/* Eine Überschrift, keine Aufmachung: `h2` wegen der Gliederung für
Vorleseprogramme, aber in der Größe eines Feldschilds — der Satz
darunter ist die Nachricht, nicht die Zeile darüber. */
.aufstieg__titel {
margin: 0 0 4px;
font-size: .78rem; font-weight: 600; letter-spacing: .08em;
text-transform: uppercase;
color: var(--akzent);
}
.aufstieg__satz {
margin: 0;
color: var(--text);
font-size: 1rem; line-height: 1.55;
}
.aufstieg__wege { display: flex; flex-wrap: wrap; gap: 9px; margin: 12px 0 0; }
/* Mindestens 44 px hoch — ein Ziel, das man mit dem Daumen trifft. */
.aufstieg__weg {
display: inline-flex; align-items: center;
min-height: 44px; padding: 10px 16px;
border-radius: 999px;
border: 1px solid color-mix(in srgb, var(--akzent) 42%, transparent);
background: color-mix(in srgb, var(--akzent) 12%, transparent);
color: var(--akzent);
font-size: .92rem; text-decoration: none;
transition: background var(--tempo), border-color var(--tempo);
}
.aufstieg__weg:hover {
background: color-mix(in srgb, var(--akzent) 20%, transparent);
border-color: color-mix(in srgb, var(--akzent) 62%, transparent);
}
.aufstieg__zu {
flex: none;
min-height: 44px; padding: 10px 18px;
border-radius: 999px; border: 1px solid var(--rand);
background: transparent; color: var(--text-leise);
font: inherit; font-size: .92rem; cursor: pointer;
transition: border-color var(--tempo), color var(--tempo);
}
.aufstieg__zu:hover { border-color: var(--rand-hell); color: var(--text); }
/* Auf dem Handy untereinander und in voller Breite — nicht ein Knopf,
der sich mit dem Text 120 px teilt. */
@media (max-width: 560px) {
.aufstieg { gap: 13px; padding: 14px 16px; }
.aufstieg__zu { width: 100%; }
}
workspace/assets/css/willkommen.css
-336
View File
@@ -1,336 +0,0 @@
/* =====================================================================
willkommen.css — die persoenliche Einfuehrung
=====================================================================
Auftrag vom 21.09.2026, Abschnitte 7 und 8.
DIE SEITE IST EIN TEXT, KEIN ARMATURENBRETT. Wer sie oeffnet, ist
meist zum ersten Mal hier und weiss noch gar nicht, wonach er sucht.
Deshalb: eine Spalte, grosszuegige Zeilenhoehe, und die Kacheln
darunter als Liste mit Erklaerung -- nicht als zweites Kachelraster,
das wie die Startseite aussieht und doch etwas anderes tut.
Alle Farben kommen aus den Hausvariablen. Eine eigene Palette hier
waere die, die beim naechsten Farbwechsel stehen bleibt.
===================================================================== */
/* KEIN EIGENER BEHAELTER (berichtigt 21.09.2026).
Hier stand `.huelle { max-width: 54rem }` -- eine Klasse, die es im
ganzen Haus nicht gibt. Der Inhalt stand dadurch linksbuendig statt
mittig, ohne Sicherheitsrand an randlosen Geraeten. Die Seite nimmt
jetzt `.inhalt` wie jede andere; `befinden.html` ist das Vorbild,
weil sie ebenfalls eine Lese- und keine Rasterseite ist. */
/* ---------------------------------------------------------------------
DIE BEGRUESSUNG
---------------------------------------------------------------------
Der Name ist das Erste, was ein Mensch auf einer Seite sucht, die
"Willkommen" heisst. Er steht deshalb gross und allein. */
/* AUF EIGENER FLAECHE, NICHT AUF DEM BILD (berichtigt 21.09.2026).
------------------------------------------------------------------
Gemessen mit pruef-buehne: Kontrast 1.68:1 am Rechner, 2.23:1 am
Handy -- noetig sind 4.5. Der Text stand direkt auf dem
Buehnenbild, und dort ist ein heller Hund.
Die Hausregel steht in start.css neben dem Schleier und sagt es
schon: "Der Text braucht das nicht mehr -- er steht auf eigenen
Flaechen." Genau daran hielt sich diese Seite als einzige nicht. */
.w-gruss {
margin: 6px 0 28px;
padding: 20px 22px;
border: 1px solid var(--rand);
border-radius: var(--radius, 16px);
background: color-mix(in srgb, var(--flaeche) 94%, transparent);
}
.w-gruss__titel {
margin: 0;
font-size: clamp(1.5rem, 5.5vw, 2.1rem);
line-height: 1.22;
letter-spacing: -.01em;
}
/* Die Rolle als ruhige Marke darunter -- sie ordnet ein, ohne zu
ranghoeheln. Kein Grossbuchstaben-Schild, das wie ein Ausweis
aussieht. */
.w-gruss__rolle {
display: inline-block;
margin: 10px 0 0;
padding: 5px 12px;
border: 1px solid var(--rand);
border-radius: 999px;
background: color-mix(in srgb, var(--akzent) 10%, transparent);
color: var(--text-leise);
font-size: .84rem;
}
.w-gruss__was {
margin: 16px 0 0;
font-size: 1.08rem;
line-height: 1.5;
color: var(--text);
}
.w-gruss__dazu {
margin: 8px 0 0;
font-size: .96rem;
line-height: 1.62;
color: var(--text-leise);
max-width: 46rem;
}
/* ---------------------------------------------------------------------
DIE HINWEISE ZUR ROLLE
---------------------------------------------------------------------
Ein paar Saetze, die zu keiner einzelnen Kachel gehoeren. Sie stehen
VOR den Kacheln, weil sie erklaeren, wie man mit ihnen umgeht. */
.w-hinweise {
display: grid;
gap: 10px;
margin: 0 0 30px;
}
.w-hinweis {
padding: 14px 16px;
border: 1px solid var(--rand);
border-left: 3px solid color-mix(in srgb, var(--akzent) 60%, transparent);
border-radius: var(--radius-klein, 12px);
background: color-mix(in srgb, var(--flaeche) 90%, transparent);
}
.w-hinweis__titel {
margin: 0 0 5px;
font-size: .95rem;
font-weight: 600;
}
.w-hinweis__text {
margin: 0;
font-size: .9rem;
line-height: 1.58;
color: var(--text-leise);
}
/* ---------------------------------------------------------------------
WAS ES HIER GIBT
--------------------------------------------------------------------- */
/* Auch die Ueberschrift "Was es hier gibt" und ihr Satz standen frei
auf dem Bild -- sie waren die schlechteste gemessene Stelle. */
.w-bereiche {
padding: 16px 18px;
border: 1px solid var(--rand);
border-radius: var(--radius, 16px);
background: color-mix(in srgb, var(--flaeche) 90%, transparent);
}
.w-bereiche__titel {
margin: 0 0 4px;
font-size: 1.15rem;
}
.w-bereiche__satz {
margin: 0 0 20px;
font-size: .9rem;
color: var(--text-leise);
}
.w-gruppe { margin: 0 0 26px; }
.w-gruppe__titel {
margin: 0 0 10px;
font-size: .78rem;
font-weight: 600;
letter-spacing: .09em;
text-transform: uppercase;
color: var(--text-still);
}
/* EINE SPALTE, NICHT ZWEI. Zwei Spalten haetten hier eine Zeile je
Kachel erzwungen -- und genau die Erklaerung weggekuerzt, wegen der
es die Seite gibt. Ab Tablet duerfen es zwei sein, weil dann beide
Spalten breit genug fuer den langen Satz bleiben. */
.w-raster {
display: grid;
gap: 10px;
grid-template-columns: 1fr;
}
@media (min-width: 900px) {
.w-raster { grid-template-columns: 1fr 1fr; }
}
/* ---------------------------------------------------------------------
DIE KACHELN -- IN DEN FARBEN DER STARTSEITE (22.09.2026)
---------------------------------------------------------------------
Filipe: "die kacheln in der willkommens seite sollen die selben
farben haben wie in der startseite. mach das richtig ultra geil
bitte. die seite soll mega aussehen."
DIE FARBE WIRD NICHT NEU VERGEBEN, SONDERN GEERBT. Der Server
schickt `ton`, die Kachel traegt `data-ton="N"`, und `start.css`
macht daraus `--ton` -- dieselbe Zeile, aus der die Startseite ihre
Farbe nimmt. Eine eigene Tabelle hier waere die, die beim naechsten
Farbwechsel stehen bleibt; genau das ist am 19.09. elf Seiten
passiert.
DREI STELLEN TRAGEN DIE FARBE, und keine davon ist eine Flaeche:
das Zeichen, eine schmale Kante links, und ein ganz leiser Schimmer
in der oberen Ecke. Eine eingefaerbte Kachelflaeche waere bunt und
schlecht lesbar -- die Startseite macht es genauso.
--------------------------------------------------------------------- */
/* HIER STAND `--ton: var(--akzent)` ALS VORGABE -- und hat alles
kaputtgemacht (berichtigt 22.09.2026).
`[data-ton="N"] { --ton: … }` steht in start.css und hat dieselbe
Spezifitaet (0,1,0) wie diese Regel. willkommen.css laedt SPAETER,
also gewann die Vorgabe, und jede Kachel war blau. Gemessen: 0 von
14 Kacheln trugen die Farbe der Startseite.
Der Rueckfall gehoert deshalb an die VERWENDUNG (`var(--ton, …)`)
und nicht an die Deklaration -- dort greift er nur, wenn wirklich
nichts gesetzt ist. */
.w-kachel {
position: relative;
display: flex;
gap: 13px;
align-items: flex-start;
min-height: 44px;
padding: 15px 16px 15px 18px;
border: 1px solid var(--rand);
border-radius: var(--radius-klein, 12px);
overflow: hidden;
background:
/* Der Schimmer sitzt oben links, dort, wo auch das Zeichen steht --
so wirkt er wie Licht auf dem Zeichen und nicht wie ein Fleck. */
radial-gradient(70% 90% at 0% 0%,
color-mix(in srgb, var(--ton, var(--akzent)) 13%, transparent), transparent 70%),
color-mix(in srgb, var(--flaeche) 90%, transparent);
color: inherit;
text-decoration: none;
transition: border-color var(--tempo, .18s) ease,
background-color var(--tempo, .18s) ease,
transform var(--tempo, .18s) ease,
box-shadow var(--tempo, .18s) ease;
}
/* DIE KANTE LINKS -- als eigenes Element, nicht als `border-left`.
Ein farbiger Rahmenrand haette die Ecken mitgefaerbt und dabei
getreppt ausgesehen; so laeuft sie sauber durch. */
.w-kachel::before {
content: "";
position: absolute;
inset: 0 auto 0 0;
width: 3px;
background: linear-gradient(180deg,
var(--ton, var(--akzent)),
color-mix(in srgb, var(--ton, var(--akzent)) 35%, transparent));
}
.w-kachel:hover,
.w-kachel:focus-visible {
border-color: color-mix(in srgb, var(--ton, var(--akzent)) 55%, var(--rand));
background:
radial-gradient(70% 90% at 0% 0%,
color-mix(in srgb, var(--ton, var(--akzent)) 20%, transparent), transparent 72%),
color-mix(in srgb, var(--flaeche) 100%, transparent);
transform: translateY(-1px);
box-shadow: 0 8px 22px -16px color-mix(in srgb, var(--ton, var(--akzent)) 70%, transparent);
}
.w-kachel__zeichen {
flex: 0 0 auto;
display: grid;
place-items: center;
width: 36px;
height: 36px;
border-radius: 11px;
border: 1px solid color-mix(in srgb, var(--ton, var(--akzent)) 30%, transparent);
background: color-mix(in srgb, var(--ton, var(--akzent)) 16%, transparent);
color: var(--ton, var(--akzent));
}
.w-kachel__zeichen svg {
width: 19px;
height: 19px;
stroke: currentColor;
fill: none;
}
.w-kachel__text {
display: flex;
flex-direction: column;
gap: 3px;
min-width: 0; /* sonst sprengt ein langes Wort die Spalte */
}
.w-kachel__name {
font-size: .99rem;
font-weight: 600;
line-height: 1.3;
}
.w-kachel__unter {
font-size: .86rem;
color: var(--text-leise);
line-height: 1.4;
}
/* Der lange Satz ist bewusst etwas kleiner und ruhiger: Er ist die
Vertiefung, nicht die Ueberschrift. */
.w-kachel__lang {
margin-top: 6px;
padding-top: 6px;
border-top: 1px solid color-mix(in srgb, var(--rand) 70%, transparent);
font-size: .85rem;
line-height: 1.56;
color: var(--text-still);
}
/* DIE BREITE KACHEL bleibt auch hier breit -- sie ist auf der
Startseite doppelt so gross, und wer von dort kommt, sucht sie an
derselben Stelle. */
@media (min-width: 900px) {
.w-kachel[data-gross="ja"] { grid-column: span 2; }
}
/* ---------------------------------------------------------------------
DIE ZUSTAENDE
--------------------------------------------------------------------- */
.w-laedt,
.w-leer {
margin: 18px 0;
color: var(--text-leise);
font-size: .92rem;
line-height: 1.55;
}
/* ---------------------------------------------------------------------
KONTRASTMODUS UND BEWEGUNGSARMUT
---------------------------------------------------------------------
Im Kontrastmodus werden Fuellfarben ersetzt -- eine Kachel, die sich
nur durch ihren Hintergrund abhebt, verschwindet dort. Deshalb bekommt
sie eine echte Kante, die stehen bleibt. */
@media (forced-colors: active) {
.w-kachel,
.w-hinweis {
border: 1px solid CanvasText;
}
.w-kachel:hover,
.w-kachel:focus-visible {
outline: 2px solid Highlight;
outline-offset: 2px;
}
.w-kachel__zeichen {
border: 1px solid CanvasText;
}
}
@media (prefers-reduced-motion: reduce) {
.w-kachel { transition: none; }
.w-kachel:hover,
.w-kachel:focus-visible { transform: none; }
}
workspace/assets/js/anleitung.js
+59
View File
@@ -172,6 +172,13 @@
===================================================================== */
function karteBauen(eintrag, kachel, stufe) {
const karte = el('article', 'an-karte');
/* DER SCHLUESSEL BLEIBT AM ELEMENT STEHEN. Er kostet nichts und
ist der einzige Weg, eine bestimmte Karte spaeter wiederzufinden
-- „Neu fuer dich" auf der Zentrale springt darueber hierher.
Eine ID waere dafuer schlechter: Schluessel wie `chat:treff`
muessten dann in etwas umgerechnet werden, das als ID taugt,
und diese Umrechnung stuende an zwei Stellen. */
karte.dataset.kachel = String(eintrag.kachel || '');
if (kachel.ton !== undefined && kachel.ton !== null) {
karte.dataset.ton = String(kachel.ton);
}
@@ -258,6 +265,49 @@
return block;
}
/* =====================================================================
DER SPRUNG AUF EINE BESTIMMTE KARTE (06.10.2026)
`anleitung.html?karte=<schluessel>` -- benutzt von „Neu fuer dich"
auf der Zentrale (Bauplan Kapitel 10: „mit Sprung zur passenden
Karte").
ZUERST AUFKLAPPEN, DANN HINSCROLLEN. „Das kommt regelmaessig" und
„Nur bei Bedarf" sind zugeklappt; eine Karte, die darin liegt, hat
ohne diesen Schritt die Hoehe null, und man landet an einer ganz
anderen Stelle der Seite. Gemessen wird das nicht -- es ist der
Grund, warum die Reihenfolge hier so herum steht.
EIN ABSATZ ALS ANKER UND KEIN BLINKEN: Die Karte bekommt kurz
eine ruhige Umrandung, damit man sieht, welche gemeint war. Nach
ein paar Sekunden ist sie wieder wie die anderen.
GEHT DER SCHLUESSEL INS LEERE (die Karte gibt es fuer diese Rolle
nicht), passiert NICHTS. Die Seite ist dann einfach die Seite --
besser als eine Fehlermeldung ueber etwas, das den Leser nichts
angeht.
===================================================================== */
function springeZurKarte() {
let gesucht = '';
try { gesucht = new URLSearchParams(location.search).get('karte') || ''; }
catch { return; }
if (!gesucht) return;
const karte = document.querySelector(
`.an-karte[data-kachel="${CSS.escape(gesucht)}"]`);
if (!karte) return;
const falte = karte.closest('details');
if (falte) falte.open = true;
karte.dataset.gesucht = 'ja';
setTimeout(() => { delete karte.dataset.gesucht; }, 6000);
try {
karte.scrollIntoView({
behavior: matchMedia('(prefers-reduced-motion: reduce)').matches
? 'auto' : 'smooth',
block: 'center',
});
} catch { /* aeltere Browser: dann eben ohne */ }
}
/* =====================================================================
DER FILTER
===================================================================== */
@@ -423,6 +473,15 @@
return falte;
});
fehlendeZeigen(d);
/* GANZ ZUM SCHLUSS, UND NICHT GLEICH NACH DEN KARTEN.
Gemessen (mess-anleitung-crew, 06.10.2026): Der Sprung stand
zuerst direkt hinter den Karten -- die Karte war markiert, ihr
Abschnitt war aufgeklappt, und sie stand trotzdem NICHT im Bild.
Grund: Darunter werden danach noch „Nicht deins", „Dein
Rhythmus" und die Fragen eingehaengt. Das sanfte Scrollen zielte
auf eine Hoehe, die sich waehrenddessen verschob. */
springeZurKarte();
}
function ohneFassung(d) {
workspace/assets/js/aufstieg.js
+121
View File
@@ -0,0 +1,121 @@
/* =====================================================================
aufstieg.js — „Neu für dich" beim Aufstieg der Stufe (Etappe 6)
Bauplan Kapitel 10: „Erreicht ein Community-Mitglied die Stufe Dabei
oder Stamm, zeige auf der Startseite einmal die Karte ‚Neu für dich:
Du kannst jetzt …' mit Sprung zur passenden Karte."
---------------------------------------------------------------------
EIGENE DATEI, UND ZWAR AUS DEMSELBEN GRUND WIE rundgang.js
Sie läuft auf `start.html` — der meistbenutzten Seite des Hauses.
Geht hier etwas schief, darf davon nichts anderes betroffen sein:
eigenes `defer`, alles in `try`, und der Fehlerfall ist „nichts
tun". Der Server antwortet immer mit 200 (notfalls `zeigen: false`),
damit in der Konsole nichts Rotes steht.
Sie ist bewusst NICHT in rundgang.js gewandert, obwohl beides
„etwas, das einen auf der Zentrale begrüßt" ist: Der Rundgang
erscheint beim ERSTEN Anmelden, diese Karte Wochen später. Zwei
Anlässe, zwei Lebensdauern — in einer Datei wäre spätestens beim
nächsten Umbau unklar, welche Bedingung zu welcher gehört.
---------------------------------------------------------------------
WAS JETZT GEHT, STEHT NICHT HIER
Der Server leitet es aus derselben Tafel ab, die es auch
entscheidet, und schickt fertige Kacheln mit. Eine Liste in dieser
Datei wäre die, die beim nächsten neuen Brett jemandem etwas
verspricht, das er gar nicht darf.
---------------------------------------------------------------------
GEMERKT WIRD BEIM ZEIGEN, NICHT BEIM WEGKLICKEN
Dieselbe Entscheidung wie bei der Begrüßung, und aus demselben
gemessenen Grund: Wer die Seite schließt, ohne etwas anzuklicken,
hat die Karte trotzdem gesehen. Sonst kommt sie wieder. Und beim
übernächsten Mal auch.
===================================================================== */
(() => {
'use strict';
const BASIS = '/workspace/api/anleitung';
const el = (tag, klasse, text) => {
const k = document.createElement(tag);
if (klasse) k.className = klasse;
if (text !== undefined) k.textContent = text;
return k;
};
async function gesehenMerken() {
try {
await fetch(`${BASIS}/aufstieg/gesehen`, {
method: 'POST', credentials: 'same-origin',
});
} catch { /* Beim nächsten Mal eben noch einmal — kein Schaden. */ }
}
function bauen(d, platz) {
const kasten = el('section', 'aufstieg');
kasten.setAttribute('aria-labelledby', 'aufstieg-titel');
const text = el('div', 'aufstieg__text');
const titel = el('h2', 'aufstieg__titel', 'Neu für dich');
titel.id = 'aufstieg-titel';
text.append(titel);
text.append(el('p', 'aufstieg__satz',
`Du bist jetzt ${d.name}. Du kannst jetzt mehr als vorher.`));
/* DIE SPRÜNGE GEHEN AUF DIE KARTE, NICHT AUF DIE KACHEL.
Der Bauplan sagt „Sprung zur passenden Karte" — und das ist
auch das Richtige: Wer gerade erfährt, dass er etwas darf,
braucht zuerst die Erklärung, nicht das leere Formular.
Der Schlüssel wird mit derselben Funktion gerechnet, mit der
die Anleitung ihre Karten verbindet; eine zweite Rechnung hier
wäre die, die beim nächsten Fragezeichen in einer Adresse
danebenliegt. */
const B = window.Bereiche;
const wege = el('div', 'aufstieg__wege');
for (const k of (Array.isArray(d.kacheln) ? d.kacheln : [])) {
const schluessel = B && typeof B.schluesselVonZiel === 'function'
? B.schluesselVonZiel(k.ziel || '') : '';
if (!schluessel) continue;
const a = el('a', 'aufstieg__weg', k.name || 'Ansehen');
a.href = `anleitung.html?karte=${encodeURIComponent(schluessel)}`;
if (k.ton !== undefined && k.ton !== null) a.dataset.ton = String(k.ton);
wege.append(a);
}
/* KEIN LEERER KASTEN: Gibt es zu nichts einen Weg, bleibt die
Karte trotzdem stehen — nur ohne die Knopfreihe. Den Aufstieg
zu verschweigen, weil ein Verweis fehlt, wäre der schlechtere
Tausch. */
if (wege.childElementCount) text.append(wege);
const schliessen = el('button', 'aufstieg__zu', 'Alles klar');
schliessen.type = 'button';
schliessen.addEventListener('click', () => { kasten.remove(); });
kasten.append(text, schliessen);
platz.append(kasten);
}
async function pruefen() {
const platz = document.getElementById('aufstieg-platz');
if (!platz) return;
let a;
try { a = await fetch(`${BASIS}/aufstieg`, { credentials: 'same-origin' }); }
catch { return; }
if (!a.ok) return;
let d;
try { d = await a.json(); } catch { return; }
if (!d || d.zeigen !== true) return;
bauen(d, platz);
gesehenMerken();
}
try {
if (document.readyState === 'complete') pruefen();
else window.addEventListener('load', pruefen);
} catch { /* dann eben nicht */ }
})();
workspace/assets/js/willkommen.js
-137
View File
@@ -1,137 +0,0 @@
/* =====================================================================
willkommen.js — die persönliche Einführung
=====================================================================
Auftrag vom 21.09.2026, Abschnitte 7 und 8.
DIESE DATEI ENTHÄLT KEINEN EINZIGEN ROLLENNAMEN und keine Liste von
Kacheln. Beides kommt vom Server, der die Rechte ohnehin kennt.
Stünde es hier, stünde es in einer Datei, die jeder herunterlädt —
und wäre am Tag nach der nächsten Änderung falsch.
Die Seite ist damit für jede Rolle dieselbe Datei und trotzdem für
jeden ein anderer Text. Genau das verlangt Abschnitt 8.
===================================================================== */
(() => {
'use strict';
const $ = (id) => document.getElementById(id);
const el = (was, klasse, text) => {
const e = document.createElement(was);
if (klasse) e.className = klasse;
if (text !== undefined) e.textContent = text;
return e;
};
/* Ein Zeichen aus dem Vorrat der Startseite, damit dieselbe Kachel
hier dasselbe Bild trägt wie dort. Fehlt es, bleibt die Stelle
leer -- lieber kein Zeichen als ein falsches. */
function zeichen(name) {
if (!name || !window.Bereiche || !window.Bereiche.zeichenBauen) return null;
try { return window.Bereiche.zeichenBauen(name); } catch (e) { return null; }
}
function kachelBauen(k) {
const a = el('a', 'w-kachel');
a.href = k.ziel;
/* Der Farbton kommt vom Server und wird hier nur gesetzt --
`[data-ton="N"]` in start.css macht daraus `--ton`. Damit traegt
jede Kachel hier genau die Farbe, die sie auf der Startseite
auch hat, ohne dass diese Datei eine einzige Farbe kennt. */
if (k.ton !== null && k.ton !== undefined) a.dataset.ton = String(k.ton);
if (k.gross) a.dataset.gross = 'ja';
const z = zeichen(k.zeichen);
if (z) {
const huelle = el('span', 'w-kachel__zeichen');
huelle.setAttribute('aria-hidden', 'true');
huelle.append(z);
a.append(huelle);
}
const text = el('span', 'w-kachel__text');
text.append(el('span', 'w-kachel__name', k.name));
if (k.unter) text.append(el('span', 'w-kachel__unter', k.unter));
/* Der lange Satz nur, wo es einen gibt. Ein leerer Absatz unter
jeder Kachel wäre ein Raster aus Lücken. */
if (k.lang) text.append(el('span', 'w-kachel__lang', k.lang));
a.append(text);
return a;
}
async function bauen() {
const laedt = $('laedt');
try {
const antwort = await fetch('/workspace/api/willkommen');
if (!antwort.ok) {
/* DER DRITTE AUSGANG: nicht "nichts da", sondern "konnte nicht
nachsehen" -- mit einem Weg zurück. */
window.ladefehler?.({ nochmal: bauen });
if (laedt) laedt.hidden = true;
$('haupt')?.removeAttribute('aria-busy');
return;
}
const d = await antwort.json();
$('gruss').textContent = d.gruss || 'Willkommen!';
document.title = `Willkommen, ${d.name} · Team Dogi`;
if (d.rollentext) {
const r = $('rollentext');
r.textContent = d.rollentext;
r.hidden = false;
}
$('einleitung-was').textContent = d.einleitung?.was || '';
$('einleitung-dazu').textContent = d.einleitung?.dazu || '';
/* ---- Die Hinweise zur Rolle ---- */
const hk = $('hinweise');
const hinweise = d.hinweise || [];
if (hinweise.length) {
hk.replaceChildren();
for (const h of hinweise) {
const k = el('div', 'w-hinweis');
k.append(el('h2', 'w-hinweis__titel', h.titel));
k.append(el('p', 'w-hinweis__text', h.text));
hk.append(k);
}
hk.hidden = false;
}
/* ---- Die Kacheln, nach Gruppen ---- */
const ziel = $('gruppen');
ziel.replaceChildren();
const gruppen = d.gruppen || [];
if (!gruppen.length) {
/* KEIN LEERER BILDSCHIRM. Das kommt vor, wenn jemand gerade
erst angelegt wurde -- dann ist das kein Fehler, sondern ein
Zustand, und er gehört erklärt. */
ziel.append(el('p', 'w-leer',
'Für dich ist im Moment noch nichts freigeschaltet. '
+ 'Sag DogFather Bescheid — das ist schnell gemacht.'));
}
for (const g of gruppen) {
const abschnitt = el('section', 'w-gruppe');
abschnitt.append(el('h3', 'w-gruppe__titel', g.name));
const raster = el('div', 'w-raster');
for (const k of (g.kacheln || [])) raster.append(kachelBauen(k));
abschnitt.append(raster);
ziel.append(abschnitt);
}
const satz = $('bereiche-satz');
if (satz && d.kachelzahl) {
satz.textContent = d.kachelzahl + (d.kachelzahl === 1
? ' Bereich ist für dich freigeschaltet — und wofür er da ist. '
: ' Bereiche sind für dich freigeschaltet — und wofür sie da sind. ')
+ 'Tipp einen an, um hinzugehen.';
}
if (laedt) laedt.hidden = true;
$('haupt')?.removeAttribute('aria-busy');
} catch (f) {
window.ladefehler?.({ nochmal: bauen });
if (laedt) laedt.hidden = true;
$('haupt')?.removeAttribute('aria-busy');
}
}
bauen();
})();