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

/* =====================================================================
   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 */ }
})();