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

/* ===================================================================
   Creator Workspace - Anmeldeseite
   Kein Framework, keine externen Abhängigkeiten.
   =================================================================== */
(() => {
  'use strict';
  /* Zählt die Fehlversuche DIESER Sitzung -- nur im Speicher,
     nirgends gespeichert. Ab dem zweiten kommt der Kachel-Hinweis. */
  let fehlversuche = 0;


  const $ = (id) => document.getElementById(id);
  const rollen = Array.from(document.querySelectorAll('.rolle'));
  const formular = $('formular');
  const code = $('code');
  const auge = $('auge');
  const fehler = $('fehler');
  const hinweis = $('hinweis');
  const knopf = $('knopf');
  const fuer = $('fuer');

  /* Die fuenfte Rolle stand hier nicht -- deshalb las man unter dem
     Codefeld "PERSOENLICHER ZUGANGSCODE · undefined" (07.09.2026).

     Eine zweite Namensliste im Browser neben der im Server
     (ROLLEN_NAME in workspace.js) ist genau die Stelle, die beim
     naechsten Mal wieder vergessen wird. Sie bleibt hier trotzdem: Die
     Anmeldeseite laeuft, BEVOR es eine Sitzung gibt, kann also nichts
     abfragen. Damit es auffaellt, faellt ein unbekannter Schluessel
     jetzt auf den Schluessel selbst zurueck statt auf `undefined` --
     "spicy" waere haesslich gewesen, aber sichtbar. */
  /* DER NAME STEHT IN DER KACHEL -- ES GIBT KEINE ZWEITE LISTE MEHR.

     Hier stand eine Zuordnung { spicy: 'Spicy Media', admin:
     'DogFather', ... }, und der Kommentar daneben nannte sie selbst
     "genau die Stelle, die beim naechsten Mal wieder vergessen wird".
     Das war sie: Beim Hinzufuegen der fuenften Rolle fehlte sie, und
     unter dem Codefeld stand "PERSOENLICHER ZUGANGSCODE · undefined".

     Zwei Gruende, sie jetzt ganz zu entfernen:

       1. ES GIBT SEIT DEM 10.09.2026 ZWEI ZUGANGSWAENDE mit
          verschiedenen Kacheln. Eine gemeinsame Liste haette die Namen
          BEIDER Waende enthalten muessen -- diese Datei wird aber an
          jeden ausgeliefert. Die Namen der einen Wand haetten damit
          auf der anderen im Quelltext gestanden.

       2. Der Name steht ohnehin schon da, sichtbar, in der Kachel. Ihn
          von dort zu lesen kann gar nicht veralten: Wer eine Kachel
          anlegt, schreibt den Namen genau einmal.

     Faellt der Text weg, bleibt der Schluessel stehen -- haesslich,
     aber sichtbar. Das war schon vorher die richtige Entscheidung. */
  const rollenName = (r) => rollen.find((b) => b.dataset.rolle === r)
    ?.querySelector('.rolle__name')?.textContent?.trim() || r || '';
  const SPEICHER = 'dfw.rolle';
  let gewaehlt = null;

  /* EINE WAND OHNE KACHELN IST MOEGLICH (10.09.2026).

     Am Vormittag gab es sie: Die zweite Zugangswand fuehrte nur eine
     Sorte Zugang herein, und eine Kachelreihe mit einem Eintrag waere
     eine Bedienhuerde gewesen. Am Nachmittag hat Filipe entschieden,
     dass dort drei Rollen stehen ("3 rollen. dogfather. rechte hand
     und modis") -- heute hat also wieder jede Wand ihre Reihe.

     DIESE ZEILE BLEIBT TROTZDEM, und das ist bewusst: Sie kostet drei
     Zeichen und beantwortet eine Frage, die dieses Skript sonst gar
     nicht stellt. Ohne sie bliebe `gewaehlt` auf einer kachellosen
     Wand ewig null, und der Anmeldeknopf antwortete auf jeden Druck
     mit "Bitte zuerst auswaehlen" -- vor einer Seite, auf der es
     nichts auszuwaehlen gibt. Kein Fehler im Protokoll, keine Meldung,
     nur eine Anmeldung, die nicht geht.

     Geprueft wird deshalb, OB es Kacheln gibt, statt sie
     vorauszusetzen. Ohne diese Zeile bliebe `gewaehlt` dort ewig null,
     und der Anmeldeknopf antwortete auf jeden Druck mit "Bitte zuerst
     auswaehlen, womit du dich anmeldest" -- vor einer Seite, auf der es
     nichts auszuwaehlen gibt. Die Anmeldung waere unbenutzbar gewesen,
     und zwar ohne Fehlermeldung im Protokoll. */
  const ohneKacheln = rollen.length === 0;

  /* ---------- Rolle wählen ------------------------------------------ */

  function waehle(rolle, fokus = false) {
    gewaehlt = rolle;
    rollen.forEach((b) => b.setAttribute('aria-checked', String(b.dataset.rolle === rolle)));
    fuer.textContent = `· ${rollenName(rolle)}`;
    fuer.hidden = false;
    melde('');
    try { localStorage.setItem(SPEICHER, rolle); } catch { /* Privater Modus */ }
    if (fokus) code.focus();
  }

  rollen.forEach((b) => {
    b.addEventListener('click', () => waehle(b.dataset.rolle, true));
    // Pfeiltasten wie bei echten Radio-Feldern
    b.addEventListener('keydown', (e) => {
      const i = rollen.indexOf(b);
      let ziel = null;
      if (e.key === 'ArrowDown' || e.key === 'ArrowRight') ziel = rollen[(i + 1) % rollen.length];
      if (e.key === 'ArrowUp' || e.key === 'ArrowLeft') ziel = rollen[(i - 1 + rollen.length) % rollen.length];
      if (!ziel) return;
      e.preventDefault();
      ziel.focus();
      waehle(ziel.dataset.rolle);
    });
  });

  // Zuletzt genutzte Rolle vorauswählen - spart bei täglicher Nutzung einen Klick.
  try {
    const zuletzt = localStorage.getItem(SPEICHER);
    /* Gefragt wird, ob es die Kachel HIER gibt -- der Speicher gilt je
       Adresse, aber eine Rolle kann verschwinden. Ohne diese Pruefung
       waere eine Rolle vorausgewaehlt, die es nicht mehr gibt. */
    if (zuletzt && rollen.some((b) => b.dataset.rolle === zuletzt)) waehle(zuletzt);
  } catch { /* egal */ }

  /* ---------- Code anzeigen / verbergen ------------------------------ */

  auge.addEventListener('click', () => {
    const sichtbar = code.type === 'text';
    code.type = sichtbar ? 'password' : 'text';
    auge.setAttribute('aria-pressed', String(!sichtbar));
    auge.setAttribute('aria-label', sichtbar ? 'Code anzeigen' : 'Code verbergen');
    code.focus();
  });

  /* ---------- Feststelltaste ----------------------------------------- */

  const pruefeFeststell = (e) => {
    if (typeof e.getModifierState !== 'function') return;
    hinweis.hidden = !e.getModifierState('CapsLock');
  };
  code.addEventListener('keyup', pruefeFeststell);
  code.addEventListener('keydown', pruefeFeststell);
  code.addEventListener('blur', () => { hinweis.hidden = true; });

  /* ---------- Rückmeldung -------------------------------------------- */

  function melde(text) { fehler.textContent = text; }

  function laden(an) {
    knopf.disabled = an;
    knopf.querySelector('.knopf__text').textContent = an ? 'Prüfe …' : 'Anmelden';
  }

  /* Die Altersfrage gibt es nur auf der Wand von Team Dogi. Ueberall
     sonst bleiben diese drei schlicht null. */
  const alterFrage = document.getElementById('alterfrage');
  const alterOk = document.getElementById('alter-ok');
  const alterZahl = document.getElementById('alter-zahl');

  /* ---------- Absenden ------------------------------------------------ */

  formular.addEventListener('submit', async (e) => {
    e.preventDefault();
    const wert = code.value.trim();

    if (!ohneKacheln && !gewaehlt) { melde('Bitte zuerst auswählen, womit du dich anmeldest.'); rollen[0].focus(); return; }
    if (!wert) { melde('Bitte den Zugangscode eingeben.'); code.focus(); return; }

    melde('');
    laden(true);

    try {
      const antwort = await fetch('/workspace/api/anmelden', {
        method: 'POST',
        headers: { 'Content-Type': 'application/json' },
        /* Ohne Kacheln geht ein leerer Rollenname mit. Der Server
           braucht ihn dort nicht: Er prueft den verborgenen Zugang
           VOR dem gewohnten Weg, und ein leerer Name faellt danach in
           dieselbe Antwort wie ein erfundener. */
        /* `alter_ok` geht nur mit, wenn die Frage ueberhaupt dasteht.
           Sonst waere es eine Behauptung ueber jemanden, der sie nie
           gesehen hat. */
        body: JSON.stringify({
          rolle: gewaehlt || '', code: wert,
          ...(alterFrage && !alterFrage.hidden ? { alter_ok: !!alterOk?.checked } : {}),
        }),
        credentials: 'same-origin',
      });

      if (antwort.ok) {
        const ziel = (await antwort.json().catch(() => ({}))).weiter || '/workspace';
        document.body.classList.add('oeffnet');
        setTimeout(() => { location.assign(ziel); }, 260);
        return;
      }

      // 404 heißt: Es gibt noch gar keine Gegenstelle. Das ist derzeit der
      // Normalfall - die Seite steht schon, der Login-Server wird noch gebaut.
      // Eine ehrliche Meldung ist hier besser als "Code stimmt nicht".
      if (antwort.status === 404) {
        melde('Der Zugang wird gerade eingerichtet – Anmelden ist noch nicht möglich.');
        return;
      }

      /* DAS ALTER IST NICHT DERSELBE FALL WIE EIN FALSCHER CODE.
         Wer hier landet, hat den richtigen Code -- bekaeme er
         "Zugangscode stimmt nicht", tippte er ihn immer wieder neu ein,
         und es wuerde nie besser. */
      if (antwort.status === 400) {
        const d = await antwort.json().catch(() => ({}));
        if (d.fehler === 'alter_offen') {
          if (alterFrage) {
            alterFrage.hidden = false;
            if (d.mindestalter && alterZahl) alterZahl.textContent = String(d.mindestalter);
            alterOk?.focus();
          }
          melde(`Bitte bestätige noch, dass du mindestens ${d.mindestalter || 18} Jahre alt bist.`);
          return;
        }
      }

      /* KEINE AUSKUNFT DARÜBER, OB ROLLE ODER CODE FALSCH WAR -- das
         bleibt so. Aber zwei Dinge waren unnötig hart:

         (1) „Bitte kurz warten" sind in Wahrheit bis zu ZEHN MINUTEN
             (VERSUCHE_FENSTER_MIN in workspace.js). Wer nach zwanzig
             Sekunden nachsieht und dieselbe Meldung liest, hält die
             Seite für kaputt. Eine Zahl beruhigt, ein Adjektiv nicht.

         (2) Ein RICHTIGER Code an der FALSCHEN Kachel fällt in
             dieselbe Absage wie ein erfundener -- der Server sucht nur
             unter den Personen der gewählten Rolle. Wer aus der
             Community kommt und auf „Modi" tippt (das klingt ja
             danach), tippt seinen richtigen Code dreimal Buchstabe für
             Buchstabe ein.

             Ab dem zweiten Fehlversuch kommt deshalb ein Hinweis auf
             die Kachel dazu -- ohne zu sagen, WELCHE die richtige
             wäre. Das verrät nichts und erspart die Schleife. */
      fehlversuche++;
      if (antwort.status === 429) {
        melde('Zu viele Versuche. In etwa 10 Minuten geht es wieder.');
      } else if (fehlversuche >= 2) {
        /* ==== EIN SATZ FÜR BEIDE WÄNDE (03.10.2026) ================

           VanVan im Support, Meldung #5, zweite Runde: „Man kann sich
           jetzt nur noch über die richtige Schaltfläche anmelden. Das
           funktioniert jetzt. Aber wenn man sich 2x versucht über den
           falschen Button anzumelden, dann kommt ein irreführender
           Text wo steht, dass die Auswahl oben nicht schuld ist."

           SIE HAT RECHT, UND DER GRUND IST MEINE EIGENE ÄNDERUNG.
           Hier stand bis eben ein eigener Satz für die Crew-Wand:
           „die Auswahl oben ist nicht schuld". Er stimmte am
           20.09.2026, weil es dort den STILLEN ZUGANG gab — die
           rechte Hand und die Modis kamen über die Codekennung
           herein, egal welche Kachel sie antippten. Der Satz
           verhinderte, dass sie alle Kacheln durchprobieren und sich
           dabei selbst aussperren.

           Mit genau diesem Bericht (#5, erste Runde) ist der stille
           Zugang WEGGEFALLEN. Nachgemessen in workspace.js: Die
           Kandidaten kommen aus `WHERE rolle = ?`, auf beiden Wänden.
           Die Kachel entscheidet seither überall — und der Satz sagte
           ab dem Moment das Gegenteil der Wahrheit, an der Stelle, an
           der jemand gerade nicht weiterkommt.

           Das ist die Sorte Fehler, die ein Umbau hinterlässt: Nicht
           der neue Code war falsch, sondern ein Satz drei Dateien
           weiter, dessen Voraussetzung er entfernt hat. Gefunden hat
           ihn kein Prüflauf, sondern VanVan beim Benutzen.

           EIN SATZ, KEINE ZWEI. Die Fallunterscheidung nach Wand ist
           damit weg: Es gibt nur noch eine Regel, also auch nur noch
           eine Auskunft. Der Hinweis auf die Bindestriche bleibt — er
           galt nie nur für eine Wand. */
        melde('Zugangscode stimmt nicht. Stimmt die Auswahl oben? '
          + 'Ein Code gehört immer zu genau einer davon – '
          + 'und achte auf die Bindestriche.');
      } else {
        melde('Zugangscode stimmt nicht.');
      }
      code.select();
    } catch {
      melde('Keine Verbindung zum Server. Bitte erneut versuchen.');
    } finally {
      laden(false);
    }
  });

  /* ---------- Sehr dezente Parallaxe ---------------------------------- */

  const ruhig = matchMedia('(prefers-reduced-motion: reduce)');
  const bild = document.querySelector('.buehne__bild');
  const grob = matchMedia('(pointer: coarse)');

  if (bild && !ruhig.matches && !grob.matches) {
    let ziel = { x: 0, y: 0 }, ist = { x: 0, y: 0 }, laeuft = false;

    addEventListener('pointermove', (e) => {
      /* ==== WAS MAN BEDIENEN WILL, STEHT STILL (30.09.2026) =======

         Die Parallaxe folgte dem Zeiger auch über der Anmeldekarte.
         Wer die Maus zum Codefeld führt, bewegt damit das Feld — bei
         zehn Pixeln keine Katastrophe, aber genau verkehrt herum.

         Über der Karte wird das Ziel nicht mehr nachgeführt. Die
         Annäherung läuft aus und hält an; verlässt man die Karte,
         geht es weiter. Das Bild lebt, die Bedienung steht.

         Gefunden über WebKit: `pruef-browser` konnte den Knopf nicht
         anklicken — der Zeiger bewegte das Ziel, das er treffen
         wollte, 53 Versuche über 30 Sekunden. Ein Wettlauf zwischen
         Maus und Karte ist auch für einen Menschen keiner, den er
         gewinnen soll. */
      if (e.target && e.target.closest && e.target.closest('.tafel')) return;
      ziel.x = (e.clientX / innerWidth - 0.5) * -10;   // max. 10 px
      ziel.y = (e.clientY / innerHeight - 0.5) * -6;
      if (!laeuft) { laeuft = true; requestAnimationFrame(schritt); }
    }, { passive: true });

    function schritt() {
      ist.x += (ziel.x - ist.x) * 0.06;
      ist.y += (ziel.y - ist.y) * 0.06;
      /* NICHT MEHR DIREKT AUF DAS BILD (06.09.2026), sondern als zwei
         Groessen am <body>. Der Grund: Seit die Anmeldekarte in der
         GEMALTEN Tafel des Motivs sitzt, muss sie jede Bewegung des
         Bildes mitmachen -- sonst rutscht der Neonrahmen unter ihr
         weg. Gemessen waren es bis zu 10 px, und das sieht man.
         Ueber die Variablen bewegen sich Bild UND Anker mit
         derselben Zahl; die Karte bleibt geklebt. */
      document.body.style.setProperty('--parallax-x', ist.x.toFixed(2) + 'px');
      document.body.style.setProperty('--parallax-y', ist.y.toFixed(2) + 'px');
      if (Math.abs(ziel.x - ist.x) > 0.05 || Math.abs(ziel.y - ist.y) > 0.05) {
        requestAnimationFrame(schritt);
      } else { laeuft = false; }
    }
  }
})();

/* =====================================================================
   DIE ALTERSFRAGE ERSCHEINT MIT DER COMMUNITY-KACHEL (15.09.2026)

   Sie steht auf der zweiten Zugangswand und nirgends sonst -- auf der
   Agenturwand gibt es sie gar nicht. Deshalb hier ueberall mit „?.“:
   Diese Datei laeuft auf beiden Waenden.

   UND DESHALB STEHT HIER AUCH KEIN DATEINAME (21.09.2026): "Diese
   Datei laeuft auf beiden Waenden" heisst, dass sie von beiden
   Adressen ausgeliefert wird -- ohne Anmeldung, fuer jeden im Netz
   lesbar. Ein Kommentar darin ist keine interne Notiz, sondern
   Veroeffentlichung. Wo welche Wand zuhause ist, steht in
   crew-adresse.js; dort wird es auch durchgesetzt.
   ===================================================================== */
(() => {
  const alterFrage = document.getElementById('alterfrage');
  if (!alterFrage) return;
  const alterOk = document.getElementById('alter-ok');

  /* Auf die Kachelreihe hoeren, nicht auf jede Kachel einzeln: Kommt
     morgen eine fuenfte dazu, ist sie automatisch dabei. */
  document.querySelector('.rollen')?.addEventListener('click', (e) => {
    const knopf = e.target.closest?.('.rolle');
    if (!knopf) return;
    const gast = knopf.dataset.rolle === 'gast';
    alterFrage.hidden = !gast;
    /* Wer die Kachel wechselt, soll nicht mit einem Haken dastehen, den
       er fuer etwas anderes gesetzt hat. */
    if (!gast && alterOk) alterOk.checked = false;
  });
})();