dogfather-universe/tools/kachel-regenbogen.mjs

/* =====================================================================
   DIE WILLKOMMENSKACHEL BEKOMMT ALLE FARBEN DES HAUSES (22.09.2026)
   ---------------------------------------------------------------------
   Filipe: „die farbe dieser kachel soll alle farben haben die es auf
   der ganze seite gibt, also nicht gemischt sondern ich will alle
   farben übelst geil in der kachel haben die kachel soll alle farben
   haben die wir benutzt haben. soll komplett farbig sein und ultra geil
   aussehen lass dir was einfallen und überrasch mich bitte."

   „NICHT GEMISCHT" IST DIE EIGENTLICHE ANSAGE.
   Ein Verlauf über alle Töne wäre ein Brei: Zwischen zwei Nachbarfarben
   entstehen Zwischentöne, die es im Haus gar nicht gibt, und die
   einzelne Farbe ist nicht mehr zu erkennen. Deshalb harte Kanten —
   jede Farbe bekommt ihren eigenen Streifen und bleibt sie selbst.
   Man kann die Kachel ablaufen und jede Kachel der Wand darin
   wiederfinden.

   WARUM DAS EIN WERKZEUG IST UND KEINE HANDARBEIT
   Die Liste der Farben steht nicht hier, sie wird ABGELEITET — aus
   denselben Kachellisten, die die Startseite baut (`bereicheFuer` /
   `zusatzBereicheFuer` über alle Rollen und beide Häuser), und die
   Farbwerte dazu aus `start.css`. Eine abgeschriebene Liste wäre die,
   die beim nächsten neuen Bereich vergessen wird — und dann hätte die
   Kachel „alle Farben" eben doch nicht alle.

   Kommt morgen eine Kachel dazu, genügt ein Lauf:
     node tools/kachel-regenbogen.mjs              nur zeigen
     node tools/kachel-regenbogen.mjs --schreiben  eintragen

   Und `pruef-willkommen` zählt nach, ob der Block noch zu den
   tatsächlich benutzten Tönen passt — sonst wäre „einmal gelaufen"
   dasselbe wie „von Hand gepflegt", nur unsichtbar.

   AUGENSCHONEND BLEIBT PFLICHT
   Die Töne werden nicht roh nebeneinandergelegt. Jeder wird mit dem
   dunklen Hausgrund gemischt, genau wie auf jeder anderen Kachel auch
   (dort: `color-mix(--ton 62%, --flaeche)`). Die Kachel ist dadurch
   voller Farbe und trotzdem so dunkel wie ihre Nachbarn — und der
   Lesesaum unten, der auf allen Kacheln liegt, hält den Text lesbar.
   Keine Bewegung, kein Flackern.
   ===================================================================== */

import { readFileSync, writeFileSync } from "node:fs";
import { fileURLToPath } from "node:url";
import { dirname, join } from "node:path";

const HIER = dirname(fileURLToPath(import.meta.url));
const CSS = join(HIER, "..", "workspace", "assets", "css", "start.css");
const ANFANG = "/* ---- ANFANG GERECHNET: kachel-regenbogen.mjs ---- */";
const ENDE = "/* ---- ENDE GERECHNET ---- */";

/* ---- Welche Töne werden wirklich benutzt? --------------------------- */
/* Dasselbe Verfahren wie in kachel-farben-entzerren.mjs. Es steht hier
   noch einmal und nicht in einer gemeinsamen Datei, weil beide
   Werkzeuge sonst voneinander abhängen — und das eine soll laufen
   können, auch wenn am anderen gerade gebaut wird. Was zählt, ist dass
   BEIDE ableiten statt abzuschreiben. */
async function benutzteToene() {
  const w = await import("../server/workspace.js");
  const rollen = ["admin", "hand", "linke", "modi", "gast",
    "manager", "scout", "creator", "spicy"];
  const toene = new Map();               /* ton -> Set(Kachelnamen) */
  for (const r of rollen) {
    for (const haus of ["crew", "agentur"]) {
      const p = { id: 1, rolle: r, name: "X", haus };
      let k = [];
      try {
        k = [...(w.bereicheFuer(p, haus) || []), ...(w.zusatzBereicheFuer(p, haus) || [])];
      } catch { continue; }
      for (const kachel of k) {
        if (!kachel || kachel.ton == null) continue;
        if (!toene.has(kachel.ton)) toene.set(kachel.ton, new Set());
        toene.get(kachel.ton).add(kachel.name);
      }
    }
  }
  return toene;
}

/* ---- Die Farbwerte dazu --------------------------------------------- */
function farbenAusCss(css) {
  const m = new Map();
  for (const t of css.matchAll(/\[data-ton="(\d+)"\]\s*\{\s*--ton:\s*(#[0-9a-fA-F]{6})/g)) {
    m.set(Number(t[1]), t[2].toLowerCase());
  }
  return m;
}

/* ---- Farbton für die Sortierung ------------------------------------- */
/* Sortiert wird nach Farbton, nicht nach Tonnummer. Die Nummern sind
   die Reihenfolge, in der Bereiche entstanden sind — nebeneinander
   ergäbe das ein Durcheinander. Nach Farbton sortiert läuft die Kachel
   einmal durch den Regenbogen, und genau das soll man sehen. */
function farbwinkel(hex) {
  const [r, g, b] = [1, 3, 5].map((i) => parseInt(hex.slice(i, i + 2), 16) / 255)
    .map((c) => (c <= 0.04045 ? c / 12.92 : ((c + 0.055) / 1.055) ** 2.4));
  const l = Math.cbrt(0.4122214708 * r + 0.5363325363 * g + 0.0514459929 * b);
  const m = Math.cbrt(0.2119034982 * r + 0.6806995451 * g + 0.1073969566 * b);
  const s = Math.cbrt(0.0883024619 * r + 0.2817188376 * g + 0.6299787005 * b);
  const A = 1.9779984951 * l - 2.4285922050 * m + 0.4505937099 * s;
  const B = 0.0259040371 * l + 0.7827717662 * m - 0.8086757660 * s;
  return (Math.atan2(B, A) * 180) / Math.PI;
}

/* ===================================================================== */
const css = readFileSync(CSS, "utf8");
const farben = farbenAusCss(css);
const benutzt = await benutzteToene();

const fehlend = [...benutzt.keys()].filter((t) => !farben.has(t));
if (fehlend.length) {
  console.error("\nKONNTE NICHT NACHSEHEN: Für " + fehlend.length + " benutzte"
    + " Töne steht keine Farbe in start.css.\n  Betroffen: " + fehlend.join(", ")
    + "\n  Ohne sie wäre die Kachel unvollständig, und niemand sähe es.");
  process.exit(2);
}
if (benutzt.size < 8) {
  console.error("\nKONNTE NICHT NACHSEHEN: nur " + benutzt.size + " benutzte"
    + " Töne gefunden.\n  Das sind zu wenige, um glaubhaft zu sein — vermutlich"
    + " hat sich der Aufbau\n  der Kachellisten geändert und die Ableitung"
    + " greift ins Leere.");
  process.exit(2);
}

const liste = [...benutzt.keys()]
  .map((t) => ({ ton: t, farbe: farben.get(t), wer: [...benutzt.get(t)].join(", ") }))
  .sort((a, b) => farbwinkel(a.farbe) - farbwinkel(b.farbe));

console.log(liste.length + " benutzte Töne, nach Farbwinkel sortiert:\n");
for (const e of liste) {
  console.log("  Ton " + String(e.ton).padStart(2) + "  " + e.farbe
    + "  " + String(Math.round(farbwinkel(e.farbe))).padStart(4) + " Grad   " + e.wer);
}

/* ---- Den Streifenverlauf bauen -------------------------------------- */
/* Jede Farbe bekommt genau denselben Anteil. Die Breite ist damit eine
   Rechnung aus der Anzahl, keine eingetragene Zahl — kommt eine Kachel
   dazu, rücken alle zusammen, und es bleibt lückenlos. */
const anteil = 100 / liste.length;
const streifen = liste.map((e, i) => {
  const von = (i * anteil).toFixed(3);
  const bis = ((i + 1) * anteil).toFixed(3);
  /* GEGEN EINEN DECKENDEN GRUND, NICHT GEGEN --flaeche.
     Erster Lauf nahm `var(--flaeche)` -- dieselbe Mischung wie auf
     jeder anderen Kachel. Am Bildschirm sahen die Baender dadurch
     milchig aus: --flaeche ist halbdurchsichtig (Alpha 0,89), und
     durch jedes Band schien das Buehnenbild. Auf einer einfarbigen
     Kachel faellt das nicht auf, bei 31 schmalen Streifen nebeneinander
     schon -- sie verlieren genau das, wofuer sie da sind.

     Diese eine Kachel deckt deshalb. Das ist auch inhaltlich richtig:
     Sie soll die Farben des Hauses ZEIGEN, nicht durch sie hindurch
     etwas anderes. */
  const f = `color-mix(in srgb, ${e.farbe} 72%, #070b14)`;
  return `      ${f} ${von}%,\n      ${f} ${bis}%`;
}).join(",\n");

const block = `${ANFANG}
/* ERZEUGT VON tools/kachel-regenbogen.mjs — NICHT VON HAND ÄNDERN.
   ${liste.length} Streifen, einer je benutztem Kachelton, sortiert nach
   Farbwinkel. Die Liste ist aus den Kachellisten abgeleitet; wer eine
   Kachel hinzufügt, lässt das Werkzeug erneut laufen. Die Prüfung
   pruef-willkommen zählt nach, ob beides noch zusammenpasst. */
.kachel[data-regenbogen="ja"] {
  background-image:
    /* 1. DER LESESAUM — er liegt ZUERST, also obenauf, und ist der
          Grund, warum diese Kachel bunt sein darf, ohne dass die
          Schrift leidet.

          STAERKER ALS AUF DEN ANDEREN KACHELN, und zwar gemessen:
          Mit den Werten der normalen Kachel (.90/.70/.24) kam der
          Text hier auf 4,45:1 -- fuenf Hundertstel unter der Grenze.
          Kein Wunder: Dort liegt EIN dunkler Ton unter der Schrift,
          hier liegen deckende Farbbaender. Ein heller Untergrund
          braucht einen dunkleren Saum, sonst ist die Kachel schoen
          und der Text weg. Gefunden hat das pruef-kachelfarben, nicht
          der Blick -- 4,45 gegen 4,50 sieht man nicht. */
    linear-gradient(to top,
      rgba(4, 6, 14, .95) 0%, rgba(4, 6, 14, .82) 26%,
      rgba(4, 6, 14, .32) 48%, transparent 66%),
    /* 2. DIE VIGNETTE — aussen dunkler als innen. Ohne sie wäre die
          Kachel eine Fläche, mit ihr ein Ausschnitt. */
    radial-gradient(120% 120% at 50% 45%, transparent 44%, rgba(3, 5, 12, .42) 100%),
    /* 3. EIN SCHRÄGER GLANZ quer über die Streifen. Er bindet die
          ${liste.length} Bänder zu einer Fläche zusammen — ohne ihn sieht es
          aus wie ein Farbmuster, mit ihm wie ein Gegenstand. */
    linear-gradient(104deg,
      rgba(255, 255, 255, .10) 0%,
      rgba(255, 255, 255, .02) 34%,
      rgba(0, 0, 0, .10) 68%,
      rgba(0, 0, 0, .26) 100%),
    /* 4. DIE FARBEN DES HAUSES, harte Kanten, kein Verlauf dazwischen.
          Jede Farbe bleibt sie selbst — genau das war die Ansage. */
    linear-gradient(100deg,
${streifen});
  background-size: 100% 100%, 100% 100%, 100% 100%, 100% 100%;
  /* Die Kante links trägt alle Farben mit, in derselben Reihenfolge —
     sonst wäre ausgerechnet der farbigste Streifen der Kachel einfarbig. */
  border-color: color-mix(in srgb, var(--ton) 38%, transparent);
}
${ENDE}`;

if (!process.argv.includes("--schreiben")) {
  console.log("\n--- so sähe der Block aus ---\n");
  console.log(block);
  console.log("\nNur gezeigt. Mit --schreiben wird es eingetragen.");
  process.exit(0);
}

let neu;
if (css.includes(ANFANG) && css.includes(ENDE)) {
  const a = css.indexOf(ANFANG);
  const e = css.indexOf(ENDE) + ENDE.length;
  neu = css.slice(0, a) + block + css.slice(e);
} else {
  neu = css.replace(/\s*$/, "\n\n") + block + "\n";
}
writeFileSync(CSS, neu, "utf8");
console.log("\nEingetragen in workspace/assets/css/start.css ("
  + liste.length + " Streifen).");