dogfather-universe/workspace/assets/js/anleitung.js

/* =====================================================================
   anleitung.js — die Einweisung je Rolle (Etappe 1)

   ---------------------------------------------------------------------
   DIE KARTEN ENTSTEHEN AUS ZWEI QUELLEN, UND DAS IST DER PUNKT

   Der Server liefert je Kachel die STUFE und drei Sätze. Name, Symbol,
   Farbe und Adresse kommen aus `window.Bereiche` — derselben Liste, aus
   der die Startseite ihre Kacheln baut.

   Deshalb sieht eine Karte hier aus wie die echte Kachel, und zwar
   dauerhaft: Wird eine Kachel umbenannt oder bekommt sie eine andere
   Farbe, ändert sich die Karte mit. Stünde der Name in der Datenbank,
   wäre die Anleitung ab diesem Tag eine Beschreibung von etwas, das es
   nicht mehr gibt — und niemandem würde es auffallen.

   Verbunden wird über `Bereiche.schluesselVonZiel`.
   ===================================================================== */
(() => {
  '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;
  };
  const $ = (id) => document.getElementById(id);

  async function hole(pfad, einst = {}) {
    const a = await fetch(pfad, { credentials: 'same-origin', ...einst });
    /* Abgemeldet heißt zurück zur Anmeldung — nicht eine leere Seite
       mit einer Fehlermeldung, die niemand einordnen kann. */
    if (a.status === 401) { location.assign('/workspace/'); throw new Error('abgemeldet'); }
    return a;
  }

  /* =====================================================================
     DIE KACHELN DIESER ROLLE — abgeleitet, nicht abgeschrieben
     ===================================================================== */
  function kachelnFuer(rolle) {
    const B = window.Bereiche;
    const nach = new Map();
    if (!B || !Array.isArray(B.GRUPPEN)) return nach;
    for (const gruppe of B.GRUPPEN) {
      for (const k of (gruppe.bereiche || [])) {
        if (Array.isArray(k.rollen) && !k.rollen.includes(rolle)) continue;
        const schluessel = B.schluesselVonZiel(k.ziel);
        if (schluessel) nach.set(schluessel, k);
      }
    }
    return nach;
  }

  /* =====================================================================
     EINE KARTE
     ===================================================================== */
  function karteBauen(eintrag, kachel, stufe) {
    const karte = el('article', 'an-karte');
    if (kachel.ton !== undefined && kachel.ton !== null) {
      karte.dataset.ton = String(kachel.ton);
    }

    const kopf = el('div', 'an-karte__kopf');
    const zeichen = el('span', 'an-karte__zeichen');
    zeichen.append(window.Bereiche.zeichenBauen(kachel.zeichen, 'an-karte__svg'));
    kopf.append(zeichen);

    const namen = el('div', 'an-karte__namen');
    namen.append(el('h3', 'an-karte__name', kachel.name));
    /* DIE STUFE STEHT ALS WORT DA, nicht nur als Farbe. Wer Farben
       schlecht unterscheidet, läse sonst eine Karte ohne Stufe — und
       die Stufe ist das Einzige, was diese Seite überhaupt sortiert. */
    namen.append(el('span', 'an-karte__stufe', stufe.name));
    kopf.append(namen);
    karte.append(kopf);

    const zeilen = el('dl', 'an-karte__zeilen');
    const zeile = (schild, text) => {
      if (!text) return;
      zeilen.append(el('dt', 'an-karte__schild', schild));
      zeilen.append(el('dd', 'an-karte__text', text));
    };
    zeile('Wozu', eintrag.wozu);
    zeile('Was du hier tust', eintrag.tust);
    zeile('Merke', eintrag.merke);
    karte.append(zeilen);

    const weg = el('a', 'an-karte__weg', 'Zur Kachel');
    /* MIT dem Zusatz hinter dem Fragezeichen. `bereich.html?b=live` und
       `bereich.html?b=technik` sind dieselbe Seite und verschiedene
       Kacheln; ohne den Zusatz landeten fünf Karten am selben Ort. */
    weg.href = kachel.ziel;
    karte.append(weg);
    return karte;
  }

  /* =====================================================================
     EIN STUFENBLOCK — aufklappbar, Muss offen
     ===================================================================== */
  function stufeBauen(stufe, eintraege, kacheln) {
    const block = el('section', 'an-stufe');
    block.dataset.stufe = stufe.schluessel;

    /* <details> und kein nachgebautes Aufklappen: Es bringt Tastatur,
       Vorlesen und die Suche des Browsers mit. Jeder Nachbau vergisst
       davon mindestens eines. */
    const falte = el('details', 'an-stufe__falte');
    falte.open = !!stufe.offen;
    const griff = el('summary', 'an-stufe__griff');
    griff.append(el('span', 'an-stufe__titel', stufe.titel));
    griff.append(el('span', 'an-stufe__zahl', String(eintraege.length)));
    falte.append(griff);

    if (stufe.unter) falte.append(el('p', 'an-stufe__unter', stufe.unter));

    const gitter = el('div', 'an-stufe__gitter');
    let gebaut = 0;
    for (const e of eintraege) {
      const kachel = kacheln.get(e.kachel);
      /* EINE KARTE OHNE KACHEL WIRD NICHT GEZEIGT.
         Sie hätte keinen Namen, kein Symbol und keinen Weg — ein
         Kasten, der nichts tut. Dass das überhaupt nicht vorkommen
         darf, prüft pruef-anleitung.mjs in beide Richtungen; hier
         still zu übergehen ist die richtige Vorsicht, nicht die
         Prüfung. */
      if (!kachel) continue;
      gitter.append(karteBauen(e, kachel, stufe));
      gebaut++;
    }
    /* Die Zahl am Griff muss das zeigen, was wirklich dasteht. */
    griff.lastChild.textContent = String(gebaut);
    if (!gebaut) return null;

    falte.append(gitter);
    block.append(falte);
    return block;
  }

  /* =====================================================================
     DER FILTER
     ===================================================================== */
  function filterBauen(stufen, auswahl) {
    const leiste = $('filter');
    leiste.replaceChildren();
    const machen = (wert, text) => {
      const knopf = el('button', 'an-filter__knopf', text);
      knopf.type = 'button';
      knopf.dataset.wert = wert;
      knopf.setAttribute('aria-pressed', String(auswahl === wert));
      knopf.addEventListener('click', () => setzen(wert));
      leiste.append(knopf);
    };
    machen('alle', 'Alles');
    for (const s of stufen) machen(s.schluessel, s.name);

    function setzen(wert) {
      for (const k of leiste.querySelectorAll('.an-filter__knopf')) {
        k.setAttribute('aria-pressed', String(k.dataset.wert === wert));
      }
      for (const b of $('stufen').querySelectorAll('.an-stufe')) {
        const dran = wert === 'alle' || b.dataset.stufe === wert;
        b.hidden = !dran;
        /* EINE GEFILTERTE STUFE WIRD AUFGEKLAPPT. Wer auf „Muss"
           drückt und dann einen zugeklappten Kasten sieht, hat einen
           Knopf gedrückt, der scheinbar nichts getan hat. */
        if (dran && wert !== 'alle') {
          const f = b.querySelector('.an-stufe__falte');
          if (f) f.open = true;
        }
      }
    }
  }

  /* =====================================================================
     AUFBAUEN
     ===================================================================== */
  function zeigen(d) {
    $('ohne-fassung').hidden = true;
    $('fassung').hidden = false;

    $('leitgedanke').textContent = d.leitgedanke || '';
    $('leitgedanke').hidden = !d.leitgedanke;

    $('saetze').replaceChildren(
      ...(d.saetze || []).map((t) => el('li', 'an-saetze__zeile', t)));

    /* ==================================================================
       DIE GANZE ZEILE IST DER KNOPF, NICHT NUR DAS WORT (06.10.2026)

       Zuerst war nur der Name verlinkt. Gemessen mit
       mess-anleitung.mjs bei 412 px: 20 Pixel hoch — die halbe
       Hausgröße für etwas, das ein Daumen treffen soll, und das
       ausgerechnet auf der Seite, die für Leute gebaut ist, die zum
       ersten Mal hier sind und auf dem Handy sitzen.

       Jetzt umschließt der Verweis Name UND Text. Das ist auch die
       ehrlichere Form: Der ganze Schritt ist eine Sache, nicht ein
       Stichwort mit Erklärung daneben.

       Ohne Ziel bleibt es ein `div` — „Installieren“ ist ein Knopf in
       der Kopfleiste, keine Seite. Ein Verweis ohne Ziel wäre genau
       der tote Knopf, den der Rollen-Rundgang sucht.
       ================================================================== */
    $('schritte').replaceChildren(
      ...(d.schritte || []).map((s) => {
        const li = el('li', 'an-schritt');
        const rumpf = s.ziel ? el('a', 'an-schritt__rumpf') : el('div', 'an-schritt__rumpf');
        if (s.ziel) rumpf.href = s.ziel;
        rumpf.append(el('span', 'an-schritt__name', s.titel));
        rumpf.append(el('span', 'an-schritt__text', s.text));
        li.append(rumpf);
        return li;
      }));

    const kacheln = kachelnFuer(d.rolle);
    const stufen = $('stufen');
    stufen.replaceChildren();
    for (const s of (d.stufen || [])) {
      const eintraege = (d.karten || []).filter((k) => k.stufe === s.schluessel);
      const block = stufeBauen(s, eintraege, kacheln);
      if (block) stufen.append(block);
    }
    filterBauen(d.stufen || [], 'alle');

    const liste = (id, blockId, zeilen, bau) => {
      const ziel = $(id);
      ziel.replaceChildren(...zeilen.map(bau));
      $(blockId).hidden = !zeilen.length;
    };
    liste('nicht', 'nicht-block', d.nicht || [], (z) => {
      const li = el('li', 'an-nicht__zeile');
      li.append(el('span', 'an-nicht__was', z.titel));
      li.append(el('span', 'an-nicht__wer', z.text));
      return li;
    });
    liste('takt', 'takt-block', d.takt || [], (z) => {
      const teil = document.createDocumentFragment();
      teil.append(el('dt', 'an-takt__wann', z.titel));
      teil.append(el('dd', 'an-takt__was', z.text));
      return teil;
    });
    liste('fragen', 'fragen-block', d.fragen || [], (z) => {
      const falte = el('details', 'an-frage');
      falte.append(el('summary', 'an-frage__frage', z.titel));
      falte.append(el('p', 'an-frage__antwort', z.text));
      return falte;
    });
  }

  function ohneFassung(d) {
    $('fassung').hidden = true;
    const p = $('ohne-fassung');
    p.textContent = d.satz || 'Für diese Rolle gibt es keine Einweisung.';
    p.hidden = false;
  }

  function melde(grund) {
    $('ladefehler-grund').textContent = grund || '';
    $('ladefehler').hidden = false;
  }

  async function laden() {
    $('ladefehler').hidden = true;
    let a;
    try { a = await hole(BASIS); } catch { melde('Keine Verbindung.'); return; }
    if (a.status === 404) {
      melde('Diese Seite gibt es auf dieser Adresse nicht.');
      return;
    }
    if (!a.ok) { melde('Der Server hat nicht geantwortet.'); return; }
    const d = await a.json();
    if (!d.hat_fassung) { ohneFassung(d); return; }
    zeigen(d);
  }

  $('nochmal').addEventListener('click', () => { laden().catch(() => {}); });
  laden().catch(() => melde('Unerwarteter Fehler.'));
})();