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. */
  const NAMEN = { spicy: 'Spicy Media', admin: 'DogFather', manager: 'Manager',
    scout: 'Scout', creator: 'Creator' };
  const rollenName = (r) => NAMEN[r] || r || '';
  const SPEICHER = 'dfw.rolle';
  let gewaehlt = null;

  /* AUF DER ZWEITEN ADRESSE GIBT ES KEINE KACHELN (10.09.2026).

     Dort fuehrt genau eine Sorte Zugang hinein, also ist nichts zu
     waehlen -- jene Wand liefert die Reihe erst gar nicht mit.

     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);
    if (zuletzt && NAMEN[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; }
    }
  }
})();