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;

    const offen = daten.punkte.filter((p) => !p.meins).length;
    const alle = daten.punkte.length;

    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.`
        : 'Alle sechs beantwortet. Halte den Stand fest, dann hast du beim nächsten Mal '
          + 'einen Vergleich.';
      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.`
          : 'Geh die sechs Fragen noch einmal durch – es dauert zwei Minuten.');
      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.`;
      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;
      z.append(el('h3', 'e-punkt__titel', pt.titel));
      z.append(el('p', 'e-punkt__text', pt.text));
      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 };
        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.`;

    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;

    for (const pt of daten.punkte) {
      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',
        z.art === 'dauerhaft' ? `seit ${z.runden} Runden` : 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} 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 */ }
  })();
})();