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

/* ===================================================================
   Creator Workspace - Anmeldeseite
   Kein Framework, keine externen Abhängigkeiten.
   =================================================================== */
(() => {
  'use strict';

  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';
  }

  /* ---------- 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. */
        body: JSON.stringify({ rolle: gewaehlt || '', code: wert }),
        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;
      }

      // Bewusst keine Auskunft darüber, ob Rolle oder Code falsch war.
      melde(antwort.status === 429
        ? 'Zu viele Versuche. Bitte kurz warten.'
        : '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) => {
      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; }
    }
  }
})();