dogfather-universe/workspace/assets/js/treff-regeln.js

/* =====================================================================
   Die Zahlen im Regeltext (11.09.2026)

   Dieses Skript schreibt nichts dazu -- es setzt nur die Zahlen ein,
   die im Text stehen muessen: Fristen, Stufen, Mindestalter, wie lange
   jemand aus dem Team eine Pause geben darf.

   WARUM UEBERHAUPT EIN SKRIPT FUER FUENF ZAHLEN

   Weil sie sonst zweimal existieren wuerden: einmal als Regel im Code
   (DABEI_TAGE, STAMM_TAGE, MINDESTALTER ...) und einmal als Wort in
   der HTML-Datei. Beim naechsten Nachjustieren waere eine von beiden
   geaendert worden, und der Regeltext haette etwas anderes versprochen
   als der Server tut. Das faellt niemandem auf -- und wer es bemerkt,
   glaubt dem Text, nicht dem Verhalten.

   Ein Regeltext, der sich selbst widerspricht, ist ausserdem rechtlich
   das Gegenteil dessen, wofuer er da ist.

   WENN DIE ANTWORT AUSBLEIBT, bleibt "…" stehen. Das ist Absicht: Eine
   fehlende Zahl sieht man, eine falsche nicht.
   ===================================================================== */
(() => {
  const $ = (id) => document.getElementById(id);

  const melde = (t) => {
    const f = $('fehler');
    if (f) { f.textContent = t; f.hidden = !t; }
  };

  (async () => {
    let r;
    try {
      const a = await fetch('/workspace/api/treff/regeln', { credentials: 'same-origin' });
      if (a.status === 401) { location.assign('/workspace/'); return; }
      if (!a.ok) { melde('Die Zahlen konnten nicht geladen werden. Der Text gilt trotzdem.'); return; }
      r = await a.json();
    } catch {
      melde('Die Zahlen konnten nicht geladen werden. Der Text gilt trotzdem.');
      return;
    }

    /* Die drei Stufen -- aus der Antwort gebaut, nicht aus drei festen
       Zeilen. Wer eine vierte Stufe einbaut, bekommt sie hier von
       selbst; eine feste Liste haette sie unterschlagen, ohne dass
       irgendwo etwas rot wird. */
    const liste = $('stufen');
    if (liste && Array.isArray(r.stufen)) {
      const was = {
        neu: 'Lesen und bei Wünschen mitstimmen.',
        dabei: `Ab ${r.dabei_tage} Tagen: Du kannst im Rudel schreiben, `
          + 'Wünsche einstellen und dich bei „Mitmachen“ melden.',
        stamm: `Ab ${r.stamm_tage} Tagen und ${r.stamm_beitraege} eigenen Beiträgen: `
          + 'Du kannst Clips und Bilder einstellen – sie erscheinen, sobald '
          + 'jemand aus dem Team sie freigegeben hat.',
      };
      liste.textContent = '';
      for (const s of r.stufen) {
        const li = document.createElement('li');
        const stark = document.createElement('strong');
        stark.textContent = s.name;
        li.append(stark, ' – ', was[s.schluessel] || '');
        liste.append(li);
      }
    }

    if ($('alter')) {
      $('alter').textContent =
        `Mindestalter: ${r.mindestalter} Jahre. Wer jünger ist, hat hier nichts `
        + 'verloren – nicht weil wir es kompliziert machen wollen, sondern weil '
        + 'das Rudel zu einem Stream für Erwachsene gehört.';
    }

    /* WEN MAN ANSPRICHT -- mit dem Namen aus den Daten.

       Im HTML steht „jemandem aus dem Team". Das ist kein Platzhalter,
       sondern eine Fassung, die auch dann stimmt, wenn das Skript nicht
       laeuft -- ein Satz mit einem sichtbaren Loch darin waere
       schlechter als einer, der etwas allgemeiner ist. */
    if ($('kontakt-wem') && r.rolle_name) {
      $('kontakt-wem').textContent = `einem ${r.rolle_name}`;
    }

    if ($('ausschluss')) {
      $('ausschluss').textContent =
        `Ein ${r.rolle_name} kann eine Pause von bis zu ${r.pause_frist_tage} Tagen geben. `
        + 'Alles, was länger gilt, und jeder endgültige Ausschluss ist DogFathers '
        + 'Entscheidung. Jede dieser Entscheidungen wird mit Grund festgehalten – '
        + 'auch, damit man sie zurücknehmen kann.';
    }
  })();

  /* =====================================================================
     DIE SPRUNGLEISTE -- AUS DEN ABSCHNITTEN GEBAUT (22.09.2026)
     =====================================================================

     Filipe: „nicht sehr viele kacheln sondern eine riesige wo alles
     schön aussieht und richtig geil, übersichtlich"

     Die eine Flaeche loest das Zerstueckeln. Sie loest aber nicht das
     Finden: Eine lange Flaeche ohne Wegweiser ist nicht
     uebersichtlicher als sechs Kaesten, nur laenger. Deshalb oben eine
     Leiste mit allen Abschnitten.

     SIE WIRD GELESEN, NICHT GEPFLEGT. Die Eintraege kommen aus den
     Ueberschriften, die ohnehin dastehen. Eine Liste hier waere die,
     die beim siebten Abschnitt fehlt -- und niemand merkte es, weil
     die Seite ja funktioniert.

     DIE NUMMERN ENTSTEHEN HIER EBENFALLS: Ein Abschnitt ohne `id`
     bekommt eine, sonst kann man nicht auf ihn zeigen. Feste ids im
     HTML waeren dieselbe Pflegearbeit noch einmal.

     Keine Leiste bei weniger als zwei Abschnitten -- dann waere sie
     ein Wegweiser auf sich selbst. */
  (function sprungleiste() {
    const leiste = document.getElementById('regel-sprung');
    if (!leiste) return;
    const abschnitte = [...document.querySelectorAll('.regelflaeche .treff-abschnitt')];
    if (abschnitte.length < 2) { leiste.hidden = true; return; }
    for (const [i, a] of abschnitte.entries()) {
      const titel = a.querySelector('.treff-abschnitt__titel');
      if (!titel) continue;
      if (!a.id) a.id = `regel-${i + 1}`;
      const b = document.createElement('a');
      b.className = 'regelflaeche__sprung';
      b.href = `#${a.id}`;
      b.textContent = titel.textContent.trim();
      leiste.append(b);
    }
    /* WO STEHE ICH GERADE? Der Eintrag zum sichtbaren Abschnitt wird
       hervorgehoben. Ohne das ist die Leiste eine Liste von Links;
       mit ihr ist sie eine Standortanzeige.

       IntersectionObserver und kein Rechnen beim Rollen: Letzteres
       laeuft bei jedem Pixel und kostet auf einem Handy spuerbar
       Strom. Gibt es ihn nicht, bleibt die Leiste eine einfache
       Liste -- sie funktioniert dann nur ohne Hervorhebung. */
    if (!('IntersectionObserver' in window)) return;
    const zuId = new Map(abschnitte.map((a) => [a.id, leiste.querySelector(`[href="#${a.id}"]`)]));
    const beobachter = new IntersectionObserver((eintraege) => {
      for (const e of eintraege) {
        const link = zuId.get(e.target.id);
        if (link) link.dataset.hier = e.isIntersecting ? 'ja' : 'nein';
      }
    }, { rootMargin: '-45% 0px -45% 0px' });
    for (const a of abschnitte) beobachter.observe(a);
  })();
})();