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

/* =====================================================================
   Wie geht's dir? (15.09.2026)

   Eine Seite, ein Zweck. Vorher führte die Kachel auf die
   Entwicklungsseite — also auf Namen und Beobachtungen über andere
   Menschen, während auf der Kachel „die Antworten sieht nur du" stand.

   ---------------------------------------------------------------------
   DREI DINGE, DIE DIESE SEITE ANDERS MACHT ALS EIN FRAGEBOGEN

   1. SIE SPEICHERT SOFORT. Kein „Absenden", das man vergessen kann.
      Jeder Klick steht. Der Knopf am Ende schließt nur die RUNDE ab —
      er trägt den Stand in den Verlauf ein.

   2. SIE FRAGT WIEDER. Nach vierzehn Tagen. Ein Befinden von vor drei
      Monaten ist keine Auskunft mehr, sondern ein Andenken.

   3. SIE ZEIGT DEN VERLAUF. Das Warnzeichen ist nicht ein einzelnes
      „da hakt es" — das ist ein schlechter Tag. Es ist dieselbe Antwort
      über mehrere Runden. Sehen kann das nur die Person selbst.
   ===================================================================== */
(() => {
  const $ = (id) => document.getElementById(id);
  const el = (t, k, text) => {
    const n = document.createElement(t);
    if (k) n.className = k;
    if (text !== undefined) n.textContent = text;
    return n;
  };
  const melde = (t) => { const f = $('fehler'); if (f) { f.textContent = t; f.hidden = !t; } };

  async function hole(pfad, optionen = {}) {
    const a = await fetch(pfad, { credentials: 'same-origin', ...optionen });
    if (a.status === 401) { location.assign('/workspace/'); throw new Error('abgemeldet'); }
    if (a.status === 404) { location.assign('/workspace/start.html'); throw new Error('unbekannt'); }
    return a;
  }

  let stufen = [];
  let daten = null;

  /* ---- Die vier Knöpfe zu einer Frage --------------------------------- */
  function knopfsatz(gewaehlt, beiKlick) {
    const reihe = el('div', 'e-wahl');
    for (const s of stufen) {
      const b = el('button', 'e-wahl__knopf');
      b.type = 'button';
      b.dataset.stufe = s.schluessel;
      b.setAttribute('aria-pressed', String(gewaehlt === s.schluessel));
      b.append(el('span', 'e-wahl__zeichen', s.zeichen));
      b.append(document.createTextNode(s.name));
      b.addEventListener('click', () => beiKlick(s.schluessel, b));
      reihe.append(b);
    }
    return reihe;
  }

  /* ---- Der Rhythmus --------------------------------------------------- */
  function takt() {
    const r = daten.rhythmus;
    const kasten = $('takt');
    const satz = $('takt-satz');
    const knopf = $('takt-knopf');
    kasten.hidden = false;

    /* ==== OFFEN HEISST: NOCH NICHT IN DIESER RUNDE BEANTWORTET =======

       Hier stand `!p.meins` -- also "es gibt ueberhaupt keine Antwort".
       Nach der ersten Runde ist das nie wieder der Fall: Die Antworten
       bleiben stehen. Damit war ab der zweiten Runde sofort alles
       "fertig", der Knopf stand da, und man konnte eine Runde
       abschliessen, ohne eine einzige Frage angesehen zu haben.

       `frisch` sagt, ob die Antwort NACH der letzten Runde gesetzt
       wurde. Vor der ersten Runde ist alles frisch. */
    const offen = daten.punkte.filter((p) => !p.frisch).length;
    const alle = daten.punkte.length;
    const gesamt = daten.fragen_gesamt || alle;

    /* WARUM NUR ACHT VON ZWOELF. Ohne diesen Satz sieht eine kurze
       Runde aus wie ein Katalog, aus dem etwas verschwunden ist. */
    const kurz = gesamt > alle
      ? ` Diese Runde sind ${alle} von ${gesamt} Fragen dran – `
        + `${daten.kern_anzahl} feste und ${daten.zusatz_anzahl} wechselnde. `
        + 'So bleibt jede Runde kurz, und über die Monate kommt trotzdem alles dran.'
      : '';

    if (!r.letzte) {
      satz.textContent = (offen
        ? `Noch ${offen} von ${alle} Fragen offen. Wenn du durch bist, halte den Stand fest – `
          + `dann siehst du beim nächsten Mal, was sich verändert hat.`
        /* GEZÄHLT STATT GESCHRIEBEN (17.09.2026): Der Block ist von sechs
           auf zwölf Fragen gewachsen, und dieser Satz stand danach falsch
           da. `alle` ist dieselbe Zahl, die eine Zeile höher schon steht. */
        : `Alle ${alle} beantwortet. Halte den Stand fest, dann hast du beim nächsten Mal `
          + `einen Vergleich.`) + kurz;
      kasten.dataset.lage = offen ? 'offen' : 'bereit';
    } else if (r.faellig) {
      satz.textContent = `Deine letzte Runde ist ${r.tage} Tage her. `
        + (offen
          ? `Noch ${offen} von ${alle} Fragen offen – was dasteht, ist die Antwort `
            + 'vom letzten Mal und zählt erst, wenn du sie bestätigst.'
          : `Alle ${alle} sind beantwortet. Halte den Stand fest.`)
        + kurz;
      kasten.dataset.lage = 'faellig';
    } else {
      const rest = daten.rhythmus_tage - r.tage;
      /* „Vor 0 Tagen" ist keine Zeitangabe, sondern eine Rechnung, die
         man laut vorliest. Drei Faelle, drei Saetze -- derselbe Grund,
         aus dem die Ampel nebenan drei hat. */
      const wann = r.tage === 0 ? 'Heute festgehalten.'
        : r.tage === 1 ? 'Gestern festgehalten.'
          : `Zuletzt vor ${r.tage} Tagen festgehalten.`;
      satz.textContent = `${wann} `
        + (rest <= 1 ? 'Morgen fragt die Seite wieder – '
          : `In ${rest} Tagen fragt die Seite wieder – `)
        + `du kannst aber jederzeit etwas ändern.`
        /* AUCH HIER. Der Hinweis stand erst nur in den beiden anderen
           Faellen -- ausgerechnet nicht in dem, den man am haeufigsten
           sieht. Wer dann acht Fragen zaehlt, wo zwoelf im Katalog
           stehen, haelt vier fuer verschwunden. */
        + kurz;
      kasten.dataset.lage = 'ruhig';
    }

    /* DER KNOPF ERSCHEINT NUR, WENN ER ETWAS TUN KANN. Ein Knopf, der
       "erst alle sechs beantworten" sagt, ist eine Absage mit
       Umweg -- der Satz darüber sagt es schon. */
    knopf.hidden = offen > 0;
  }

  /* ---- Die sechs Fragen ------------------------------------------------ */
  function fragen() {
    const ziel = $('fragen');
    ziel.textContent = '';
    ziel.setAttribute('aria-busy', 'false');

    for (const pt of daten.punkte) {
      const z = el('article', 'e-punkt e-punkt--meins');
      if (pt.meins) z.dataset.stufe = pt.meins.stufe;
      /* ALT, ABER SICHTBAR. Die Antwort vom letzten Mal stehen zu
         lassen ist richtig -- sie ist ja nicht falsch, nur alt, und
         meistens klickt man dasselbe wieder. Sie zu VERSCHWEIGEN waere
         falsch: Dann sieht eine unbeantwortete Frage genauso aus wie
         eine beantwortete. */
      /* NUR WENN WIRKLICH EINE RUNDE ANSTEHT.

         `frisch` ist "nach der letzten Runde gesetzt" -- und direkt
         NACH einer abgeschlossenen Runde ist das bei keiner Antwort
         der Fall: Man hat sie ja Sekunden vorher gesetzt, also VOR dem
         Abschluss. Ohne diese Bedingung stuende an jeder Frage "das
         war beim letzten Mal", unmittelbar nachdem man sie beantwortet
         hat. Das waere wahr und trotzdem irrefuehrend. */
      const braucht = daten.rhythmus?.faellig === true;
      if (braucht && pt.meins && !pt.frisch) z.dataset.alt = 'ja';
      z.append(el('h3', 'e-punkt__titel', pt.titel));
      /* Die fuenf festen tragen es offen. Wer sieht, dass eine Frage
         jedes Mal kommt, liest sie anders -- und merkt selbst, wenn
         sich die Antwort darauf bewegt. */
      if (pt.kern) z.append(el('span', 'e-punkt__marke', 'jede Runde'));
      z.append(el('p', 'e-punkt__text', pt.text));
      if (braucht && pt.meins && !pt.frisch) {
        z.append(el('p', 'e-punkt__alt',
          'Das war deine Antwort beim letzten Mal. Tipp sie an, wenn sie noch stimmt.'));
      }
      z.append(knopfsatz(pt.meins?.stufe || null, async (stufe, knopf) => {
        for (const b of knopf.parentElement.querySelectorAll('.e-wahl__knopf')) {
          b.setAttribute('aria-pressed', String(b === knopf));
        }
        z.dataset.stufe = stufe;
        const s = await hole(`/workspace/api/entwicklung/mich/${pt.schluessel}`, {
          method: 'PUT',
          headers: { 'Content-Type': 'application/json' },
          body: JSON.stringify({ stufe }),
        });
        if (!s.ok) { melde('Ging nicht.'); return; }
        melde('');
        /* Den Stand im Kopf mitführen, statt die ganze Seite neu zu
           holen: Ein Neuaufbau nach jedem Klick würde die Seite unter
           den Fingern springen lassen. */
        pt.meins = { ...(pt.meins || {}), stufe };
        /* Angetippt heisst frisch -- ab jetzt zaehlt sie fuer diese
           Runde. Der Hinweis darueber verschwindet damit auch. */
        pt.frisch = true;
        delete z.dataset.alt;
        z.querySelector('.e-punkt__alt')?.remove();
        takt();
      }));
      ziel.append(z);
    }
  }

  /* ---- Der Verlauf ----------------------------------------------------- */
  function verlauf() {
    const block = $('verlauf-block');
    const v = daten.verlauf || [];
    if (v.length < 2) {
      /* MIT EINER EINZIGEN RUNDE GIBT ES KEINEN VERLAUF. Eine Spalte
         allein sähe aus wie ein Muster und wäre keins. */
      block.hidden = true;
      return;
    }
    block.hidden = false;
    $('verlauf-satz').textContent =
      `Deine letzten ${v.length} Stände. Was zählt, ist nicht ein einzelnes Kreuz – `
      + `sondern dieselbe Antwort mehrmals hintereinander. `
      + 'Leere Felder heißen nicht „keine Antwort“, sondern „diese Frage war '
      + 'in der Runde nicht dran“.';

    const ziel = $('verlauf');
    ziel.textContent = '';

    /* Älteste links: Ein Verlauf liest sich von links nach rechts. */
    const runden = [...v].reverse();
    const kopf = el('div', 'b-verlauf__zeile b-verlauf__zeile--kopf');
    kopf.append(el('span', 'b-verlauf__frage', ''));
    for (const r of runden) {
      const d = new Date(r.runde);
      kopf.append(el('span', 'b-verlauf__datum',
        d.toLocaleDateString('de-DE', { day: '2-digit', month: '2-digit' })));
    }
    ziel.append(kopf);

    const name = {};
    for (const s of stufen) name[s.schluessel] = s;

    /* ==== DER VERLAUF ZEIGT JEDE FRAGE MIT GESCHICHTE ===============

       Hier stand `daten.punkte` -- also die Fragen DIESER Runde. Seit
       die Zusatzfragen wechseln (19.09.2026), waere das die falsche
       Liste: Eine Frage, die vor vier Wochen beantwortet wurde und
       diesmal pausiert, verschwaende aus dem Verlauf. Ihre Antwort
       hoert aber nicht auf zu gelten, weil sie gerade nicht dran ist --
       und eine verschwundene Zeile sieht aus, als haette es sie nie
       gegeben.

       Gezeigt wird deshalb, wozu es UEBERHAUPT Antworten gibt, in der
       Reihenfolge des Katalogs. */
    const mitGeschichte = new Set();
    for (const r of v) for (const k of Object.keys(r.antworten)) mitGeschichte.add(k);
    const zeilen = (daten.katalog || daten.punkte)
      .filter((pt) => mitGeschichte.has(pt.schluessel));

    for (const pt of zeilen) {
      const zeile = el('div', 'b-verlauf__zeile');
      zeile.append(el('span', 'b-verlauf__frage', pt.titel));
      for (const r of runden) {
        const stufe = r.antworten[pt.schluessel] || null;
        const p = el('span', 'b-verlauf__punkt', stufe ? name[stufe]?.zeichen || '·' : '·');
        p.dataset.stufe = stufe || 'leer';
        /* DAS ZEICHEN ALLEIN IST NICHT DIE AUSKUNFT -- der Name steht
           im Titel, damit auch ein Vorleseprogramm ihn ansagt. */
        p.title = stufe ? `${pt.titel}: ${name[stufe]?.name || stufe}` : 'keine Antwort';
        p.setAttribute('aria-label', p.title);
        zeile.append(p);
      }
      ziel.append(zeile);
    }
  }

  /* ---- Was dein Verlauf sagt --------------------------------------------

     Filipe: „mach mir auch eine analyse, mach eine perfektion draus.
     eine professionelle auch mit infos und so aus aller welt was tiktok
     angeht."

     GERECHNET HAT SIE DER SERVER, aus demselben Verlauf, der oben steht
     -- hier wird nur gezeichnet. Das ist kein Zufall: Der Verlauf darf
     das Haus nicht verlassen, und eine Auswertung im Browser hieße, ihn
     dorthin zu schicken, wo man ihn abgreifen kann.
     ==================================================================== */
  const ART = {
    dauerhaft: { marke: 'seit mehreren Runden', ton: 'hakt' },
    neu: { marke: 'neu in dieser Runde', ton: 'neu' },
    besser: { marke: 'hat sich gelöst', ton: 'besser' },
    traegt: { marke: 'trägt durchgehend', ton: 'gut' },
    ruhig: { marke: 'unauffällig', ton: 'still' },
    offen: { marke: 'noch nicht beantwortet', ton: 'still' },
  };

  function analyse() {
    const block = $('analyse-block');
    const a = daten.analyse;
    if (!a || !a.moeglich) {
      /* NOCH KEINE ZWEITE RUNDE: Dann steht hier nichts. Eine Deutung
         über einen einzigen Punkt wäre geraten, und geraten ist bei
         diesem Thema schlimmer als nichts. */
      block.hidden = true;
      return;
    }
    block.hidden = false;
    $('analyse-satz').textContent = a.satz;

    const ziel = $('analyse');
    ziel.textContent = '';

    /* DIE REIHENFOLGE IST DIE AUSSAGE: erst, was seit mehreren Runden
       hakt, dann das Neue, dann was sich gelöst hat, dann der Rest.
       Alphabetisch oder in Katalogreihenfolge müsste man suchen. */
    const rang = { dauerhaft: 0, neu: 1, besser: 2, traegt: 3, ruhig: 4, offen: 5 };
    const zeilen = [...a.zeilen].sort((x, y) => rang[x.art] - rang[y.art]);

    for (const z of zeilen) {
      const art = ART[z.art] || ART.ruhig;
      const k = el('article', 'b-analyse__zeile');
      k.dataset.ton = art.ton;

      const kopf = el('div', 'b-analyse__kopf');
      kopf.append(el('h3', 'b-analyse__titel', z.titel));
      kopf.append(el('span', 'b-analyse__marke',
        /* "MALE", NICHT "RUNDEN" (19.09.2026). Seit die Zusatzfragen
           wechseln, war eine Frage nicht in jeder Runde dran --
           "seit 2 Runden" waere dann eine Behauptung ueber eine Runde,
           in der gar nicht gefragt wurde. */
        z.art === 'dauerhaft' ? `die letzten ${z.male} Male` : art.marke));
      k.append(kopf);

      /* DIE EINORDNUNG -- der Teil, der sagt: du bist damit nicht
         allein. Sie steht bei JEDER Zeile, auch bei den guten: Wer nur
         dort etwas liest, wo es hakt, liest eine Mängelliste. */
      if (z.welt) k.append(el('p', 'b-analyse__welt', z.welt));
      if (z.hilft) {
        const h = el('p', 'b-analyse__hilft');
        h.append(el('span', 'b-analyse__hilft-marke', 'Was hilft'));
        h.append(document.createTextNode(z.hilft));
        k.append(h);
      }
      ziel.append(k);
    }

    /* WOHER DAS KOMMT, GEHÖRT DAZU. Ein Satz über „die Forschung“ ohne
       Quelle ist eine Behauptung -- und bei diesem Thema wäre das der
       Moment, an dem man der ganzen Seite nicht mehr glaubt. */
    const q = $('analyse-quelle');
    q.textContent = '';
    q.append(document.createTextNode(
      `Eingeordnet nach ${a.runden} ${a.runden === 1 ? 'Runde' : 'Runden'} von dir – `
      + 'und nach Untersuchungen zur Moderationsarbeit: '));
    const quellen = [
      ['University of Michigan: warum Moderatoren aufhören',
        'https://news.umich.edu/online-content-moderators-likely-to-experience-burnout-u-m-study-suggests/'],
      ['Discord: Anzeichen von Moderator-Burnout',
        'https://discord.com/safety/understanding-and-avoiding-moderator-burnout'],
      ['Rest of World: TikTok-Moderation in der Türkei',
        'https://restofworld.org/2025/tiktok-moderators-turkey/'],
    ];
    quellen.forEach(([name, url], i) => {
      if (i) q.append(document.createTextNode(' · '));
      const a2 = el('a', 'b-analyse__quelle-hin', name);
      a2.href = url;
      a2.target = '_blank';
      /* noopener: Ein fremdes Fenster darf das eigene nicht umlenken. */
      a2.rel = 'noopener noreferrer';
      q.append(a2);
    });
  }

  /* ---- Runde abschließen ----------------------------------------------- */
  $('takt-knopf')?.addEventListener('click', async (e) => {
    const k = e.currentTarget;
    k.disabled = true;
    try {
      const a = await hole('/workspace/api/befinden/runde',
        { method: 'POST', headers: { 'Content-Type': 'application/json' }, body: '{}' });
      const j = await a.json().catch(() => ({}));
      if (!a.ok) {
        melde(j.fehler === 'unvollstaendig'
          ? `Es fehlen noch ${j.offen} von ${j.gesamt} Fragen.`
          : 'Ging nicht.');
        return;
      }
      melde('Festgehalten. Beim nächsten Mal siehst du, was sich verändert hat.');
      await laden();
    } finally { k.disabled = false; }
  });

  async function laden() {
    const a = await hole('/workspace/api/befinden');
    if (!a.ok) { melde('Ging nicht.'); return; }
    daten = await a.json();
    stufen = daten.stufen || [];
    takt();
    fragen();
    verlauf();
    analyse();
  }

  (async () => {
    try {
      const a = await fetch('/workspace/api/ich', { credentials: 'same-origin' });
      if (a.ok) window.werZeigen?.(await a.json());
    } catch { /* der Kopf holt es sonst selbst */ }
    try { await laden(); } catch { /* umgeleitet */ }
  })();
})();