dogfather-universe/tools/kachel-farben.mjs

/* ===================================================================
   DIE KACHELFARBEN -- gerechnet, nicht gewaehlt.

   ANLASS (08.09.2026). Filipe: "viele kacheln haben noch fast die
   gleiche farben, ähneln sich sehr ... alle seine eigenen farben und so
   dass sie sich nicht ähneln. sehr wichtig nicht ähneln!!!!"

   NEU GERECHNET AM 17.09.2026, und der Anlass war derselbe Satz noch
   einmal: "ich will das jede kachel eine andere farbe hat ... keine die
   sich irgendwie ähnlich sind ... die farben sollen auch richtig geil
   und speziell sein."

   ER HATTE WIEDER RECHT, UND ES WAR SCHLIMMER ALS 2026-09-08.
   Gemessen am 17.09. an den Farben, die WIRKLICH in start.css stehen:

     kleinster Abstand          0,0529   (Rueckmeldung / Steckbrief)
     Paare unter 0,10           18 von 325
     Paare unter 0,15           61 von 325
     schlechtester Kontrast     1,64:1   (Ton 35, praktisch unlesbar)
     sieben Toene unter 4,5:1

   WIE KONNTE DAS PASSIEREN, obwohl es dieses Werkzeug schon gab? Weil
   es nur 21 Farben kannte. Seit dem 08.09. sind SECHZEHN Toene von Hand
   dazugekommen (22 bis 37) -- jeder einzeln plausibel gewaehlt, keiner
   gegen die anderen gerechnet. Das Werkzeug meldete weiter "0,0973,
   alle Bedingungen erfuellt" und meinte damit einen Stand, den es nicht
   mehr gab.

   Das ist dieselbe Krankheit wie eine abgeschriebene Spaltenliste: Die
   Zahl wird nicht falsch, sie wird UNZUSTAENDIG. Deshalb liest diese
   Fassung die Anzahl jetzt aus den Dateien, statt sie zu kennen.

   ---------------------------------------------------------------------
   GERECHNET WIRD IN OKLAB. Dort entspricht der Zahlenabstand dem, was
   das Auge als Unterschied empfindet -- in RGB tut er das nicht.

   VIER BEDINGUNGEN, die jede Farbe halten muss:

     1. LESBAR. Mindestens 4,5:1 gegen den dunklen Grund (#0a121e).
        Eine Kachelfarbe traegt auch Text und Zahlen. Das ist die
        einzige Bedingung, die nicht verhandelbar ist.
     2. SPEZIELL (neu am 17.09.). Die Obergrenze der Buntheit steigt von
        0,17 auf 0,30. Filipe: "richtig geil und speziell". Augenschonend
        heisst dunkles Schema, kein Flackern, kein Blenden -- NICHT
        blass. Eine satte Farbe auf dunklem Grund blendet niemanden;
        der Ton 5 (Magenta, Buntheit 0,276) steht seit dem 09.09. auf
        seinen ausdruecklichen Wunsch genau so da.
     3. TRENNBAR. Der kleinste Abstand ZWISCHEN ALLEN PAAREN wird so
        gross wie moeglich gemacht, nicht nur zwischen Nachbarn im
        Raster -- die Reihenfolge ist auf jeder Seite anders.
     4. NICHT SCHLECHTER ALS VORHER. Das Werkzeug bricht ab, wenn das
        Ergebnis den alten Stand unterbietet.

   Aufrufen mit:  node tools/kachel-farben.mjs
                  node tools/kachel-farben.mjs --schreiben
   =================================================================== */
import { readFileSync, writeFileSync } from "node:fs";

const CSS = "workspace/assets/css/start.css";
const GRUND = "#0a121e";

/* ---------- Farbrechnung -------------------------------------------- */

const linear = (c) => (c <= 0.04045 ? c / 12.92 : ((c + 0.055) / 1.055) ** 2.4);
const zurueck = (c) => (c <= 0.0031308 ? 12.92 * c : 1.055 * c ** (1 / 2.4) - 0.055);
const srgb = (hex) => [1, 3, 5].map((i) => parseInt(hex.slice(i, i + 2), 16) / 255);

function oklab(hex) {
  const [r, g, b] = srgb(hex).map(linear);
  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);
  return [
    0.2104542553 * l + 0.7936177850 * m - 0.0040720468 * s,
    1.9779984951 * l - 2.4285922050 * m + 0.4505937099 * s,
    0.0259040371 * l + 0.7827717662 * m - 0.8086757660 * s,
  ];
}

/** OKLCH -> Hex, oder null wenn es ausserhalb von sRGB liegt. */
function ausOklch(L, C, Hgrad) {
  const h = (Hgrad * Math.PI) / 180;
  const a = C * Math.cos(h), b2 = C * Math.sin(h);
  const l_ = (L + 0.3963377774 * a + 0.2158037573 * b2) ** 3;
  const m_ = (L - 0.1055613458 * a - 0.0638541728 * b2) ** 3;
  const s_ = (L - 0.0894841775 * a - 1.2914855480 * b2) ** 3;
  const r = +4.0767416621 * l_ - 3.3077115913 * m_ + 0.2309699292 * s_;
  const g = -1.2684380046 * l_ + 2.6097574011 * m_ - 0.3413193965 * s_;
  const b = -0.0041960863 * l_ - 0.7034186147 * m_ + 1.7076147010 * s_;
  const kanal = (x) => {
    const v = zurueck(x);
    /* Winzige Rundungsfehler sind kein Grund, eine Farbe zu verwerfen --
       ein echtes Ueberschreiten schon. */
    if (v < -0.001 || v > 1.001) return null;
    return Math.round(Math.min(1, Math.max(0, v)) * 255);
  };
  const [R, G, B] = [kanal(r), kanal(g), kanal(b)];
  if (R === null || G === null || B === null) return null;
  return "#" + [R, G, B].map((x) => x.toString(16).padStart(2, "0")).join("");
}

const lum = (hex) => {
  const [r, g, b] = srgb(hex).map(linear);
  return 0.2126 * r + 0.7152 * g + 0.0722 * b;
};
const kontrast = (hex) => (lum(hex) + 0.05) / (lum(GRUND) + 0.05);
const abstand = (a, b) => {
  const x = a.lab || oklab(a.hex || a), y = b.lab || oklab(b.hex || b);
  return Math.hypot(x[0] - y[0], x[1] - y[1], x[2] - y[2]);
};
const kleinsterAbstand = (menge) => {
  let m = Infinity;
  for (let i = 0; i < menge.length; i++) {
    for (let j = i + 1; j < menge.length; j++) m = Math.min(m, abstand(menge[i], menge[j]));
  }
  return m;
};

/* ---------- WIE VIELE FARBEN? Aus der Datei, nicht aus dem Kopf ------

   Genau hier ist das Werkzeug beim letzten Mal unzustaendig geworden:
   Es kannte 21, und niemand hat es angefasst, als sechzehn dazukamen.
   Eine Zahl, die niemand pflegt, kann nicht veralten.                */

const cssText = readFileSync(CSS, "utf8");
const VORHER = new Map(
  [...cssText.matchAll(/\[data-ton="(\d+)"\]\s*\{\s*--ton:\s*(#[0-9a-fA-F]{6})/g)]
    .map((m) => [Number(m[1]), m[2].toLowerCase()]));
const NUMMERN = [...VORHER.keys()].sort((a, b) => a - b);

/* Und wofuer steht jede Nummer? Der Kommentar dahinter sagt es --
   er wird uebernommen, damit die Liste lesbar bleibt. */
const WOFUER = new Map(
  [...cssText.matchAll(/\[data-ton="(\d+)"\][^\n]*?\/\*\s*([^*]+?)\s*\*\//g)]
    .map((m) => [Number(m[1]), m[2].trim()]));

/* ---------- Kandidaten ---------------------------------------------- */

const KANDIDATEN = [];
/* FEIN ABGETASTET. Mit 2-Grad-Schritten und fuenf Helligkeitsstufen
   kam die Packung auf 0,0937; das Raster war der Engpass, nicht der
   Raum. Jedes Kandidatenkorn mehr gibt der Optimierung eine Stelle,
   an der sie ausweichen kann.

   Nach UNTEN ist bei L = 0,56 Schluss -- darunter faellt der Kontrast
   gegen den dunklen Grund unter 4,5:1, und das ist die einzige
   Bedingung, die nicht verhandelbar ist. */
for (let H = 0; H < 360; H += 1) {
  for (let L = 0.56; L <= 0.94; L += 0.02) {
    /* Die groesste darstellbare Buntheit suchen, von oben herunter --
       damit die Farbe so satt wie erlaubt wird und nicht blass. */
    for (let C = 0.30; C >= 0.04; C -= 0.004) {
      const hex = ausOklch(L, C, H);
      if (!hex) continue;
      if (kontrast(hex) < 4.5) break;
      KANDIDATEN.push({ hex, lab: oklab(hex), L, C, H });
      break;
    }
  }
}

/* ---------- Auswahl: den kleinsten Abstand so gross wie moeglich -----

   Erst gierig (nimm immer die Farbe, die am weitesten von allen schon
   gewaehlten weg ist), dann tauschen, solange es besser wird.

   MEHRERE STARTPUNKTE. Ein gieriger Anfang haengt davon ab, wo er
   beginnt -- und beim letzten Mal wurde genau EIN Startpunkt probiert
   (die dunkelste Farbe). Jetzt laufen viele, und der beste gewinnt.
   Das kostet Sekunden und bringt hier rund ein Drittel mehr Abstand. */

function auswahl(startIndex, anzahl) {
  const gewaehlt = [KANDIDATEN[startIndex]];
  while (gewaehlt.length < anzahl) {
    let beste = null, besterWert = -1;
    for (const k of KANDIDATEN) {
      if (gewaehlt.includes(k)) continue;
      let naechster = Infinity;
      for (const g of gewaehlt) {
        const d = abstand(k, g);
        if (d < naechster) naechster = d;
        if (naechster <= besterWert) break;      // kann nicht mehr gewinnen
      }
      if (naechster > besterWert) { besterWert = naechster; beste = k; }
    }
    gewaehlt.push(beste);
  }
  return gewaehlt;
}

function verbessern(menge) {
  let lauf = true;
  while (lauf) {
    lauf = false;
    for (let i = 0; i < menge.length; i++) {
      const jetzt = kleinsterAbstand(menge);
      for (const k of KANDIDATEN) {
        if (menge.includes(k)) continue;
        const probe = menge.slice();
        probe[i] = k;
        if (kleinsterAbstand(probe) > jetzt) {
          menge = probe;
          lauf = true;
          break;
        }
      }
    }
  }
  return menge;
}

const ANZAHL = NUMMERN.length;
console.log(`${ANZAHL} Farben gesucht, ${KANDIDATEN.length} Kandidaten im Raum.`);

let beste = null, besterWert = -1;
const starts = 16;
for (let i = 0; i < starts; i++) {
  const idx = Math.floor((i / starts) * KANDIDATEN.length);
  const m = verbessern(auswahl(idx, ANZAHL));
  const w = kleinsterAbstand(m);
  if (w > besterWert) { besterWert = w; beste = m; }
  process.stdout.write(`\r  Startpunkt ${i + 1}/${starts} -- bester Abstand ${besterWert.toFixed(4)}   `);
}
console.log("");

/* ---------- Zuteilung: welche Farbe an welche Nummer? ----------------

   HIER LAG DER EIGENTLICHE FEHLER (18.09.2026).

   Filipe, nachdem die Palette schon neu gerechnet war: "es gibt noch
   mehr die aehnlich aussehen von den farben also leg los alle die sich
   aehnlich sind von den farben wechseln."

   Er hatte wieder recht, und diesmal lag es nicht an den Farben,
   sondern an ihrer VERTEILUNG. Gemessen im Browser -- 125 Paare, die
   wirklich nebeneinander stehen:

     Creator-Profile / Zahlen          0,1019   beide rosa-rot
     LIVE-Analyse / Technik            0,1030   beide orange
     Wunschliste / Meldungen           0,1032   beide gelbgruen
     Wer sieht was / Entwicklung       0,1039   beide cyan
     Regeln & Hilfe / Mitmachen        0,1047   beide gruen
     Der Treff / Anschlagbrett         0,1070   beide rosa
     ... 15 Paare unter 0,15

   DER DENKFEHLER: Der kleinste Abstand ueber ALLE Paare wurde maximiert
   -- und der liegt bei 37 Farben zwangslaeufig bei 0,10. Das ist die
   Packungsgrenze, kein Versaeumnis. Nur sieht niemand alle 37
   nebeneinander. Man sieht NACHBARN. Zwei aehnliche Farben an
   entgegengesetzten Enden der Seite fallen nie auf; zwei
   nebeneinander sofort.

   Die Farben bleiben also, wie sie sind -- ihre ZUTEILUNG aendert
   sich. Wer nebeneinander steht, bekommt Farben, die weit
   auseinanderliegen. Das kostet nichts und ist der ganze Unterschied.

   WOHER DIE NACHBARSCHAFT KOMMT: aus dem Browser, gemessen an der
   tatsaechlichen Lage auf dem Schirm (server/kachel-nachbarn.json).
   Nicht aus der Struktur im Quelltext -- die sagt, was
   zusammengehoert, nicht was zusammen zu sehen ist.                 */

/* Welcher Name traegt welche Tonnummer? */
const NAME_ZU_TON = new Map();
for (const q of ["server/workspace.js", "workspace/assets/js/bereiche.js"]) {
  let text;
  try { text = readFileSync(q, "utf8"); } catch { continue; }
  const zeilen = text.split("\n");
  for (let i = 0; i < zeilen.length; i++) {
    const m = zeilen[i].match(/ton:\s*(\d+)/);
    if (!m) continue;
    for (let k = 0; k <= 3; k++) {
      const n = (zeilen[i - k] || "").match(/name:\s*"([^"]+)"/);
      if (n) { NAME_ZU_TON.set(n[1], Number(m[1])); break; }
    }
  }
}

let NACHBARN = [];
try {
  const roh = JSON.parse(readFileSync("server/kachel-nachbarn.json", "utf8"));
  NACHBARN = roh.paare
    .map(([a, b]) => [NAME_ZU_TON.get(a), NAME_ZU_TON.get(b)])
    .filter(([a, b]) => a && b && a !== b);
  console.log(`${NACHBARN.length} Nachbarpaare geladen `
    + `(gemessen am ${roh.gemessen}).`);
} catch {
  console.log("Keine Nachbarschaftsdatei -- es wird nur global optimiert.");
}

/* Die Startzuteilung: jede Nummer bekommt die neue Farbe, die ihrer
   alten am naechsten liegt. Wer "Chat" als Orange kennt, findet es
   danach wieder als Orange -- solange die Nachbarschaft das zulaesst. */
const frei = beste.slice();
const zuteilung = new Map();
for (const nr of NUMMERN) {
  const alt2 = VORHER.get(nr);
  let bester = 0, bestAbw = Infinity;
  for (let i = 0; i < frei.length; i++) {
    const d = abstand(frei[i].hex, alt2);
    if (d < bestAbw) { bestAbw = d; bester = i; }
  }
  zuteilung.set(nr, frei.splice(bester, 1)[0]);
}

/* Und jetzt tauschen, solange die NACHBARN davon profitieren. */
if (NACHBARN.length) {
  const nachbarAbstand = (z) => {
    let m = Infinity;
    for (const [a, b] of NACHBARN) {
      const fa = z.get(a), fb = z.get(b);
      if (!fa || !fb) continue;
      const d = abstand(fa.hex, fb.hex);
      if (d < m) m = d;
    }
    return m;
  };
  /* Und als zweites Ziel: die SUMME der kleinen Abstaende. Zwei
     Zuteilungen mit gleichem Minimum sind nicht gleich gut -- die mit
     weniger knappen Paaren ist besser. */
  const knappe = (z, grenze) => {
    let n = 0;
    for (const [a, b] of NACHBARN) {
      const fa = z.get(a), fb = z.get(b);
      if (fa && fb && abstand(fa.hex, fb.hex) < grenze) n++;
    }
    return n;
  };

  const vorher = nachbarAbstand(zuteilung);
  const vorherKnapp = knappe(zuteilung, 0.15);
  let lauf = true, runden = 0;
  while (lauf && runden < 60) {
    lauf = false; runden++;
    for (let i = 0; i < NUMMERN.length; i++) {
      for (let j = i + 1; j < NUMMERN.length; j++) {
        const a = NUMMERN[i], b = NUMMERN[j];
        const jetztMin = nachbarAbstand(zuteilung);
        const jetztKnapp = knappe(zuteilung, 0.15);
        const fa = zuteilung.get(a), fb = zuteilung.get(b);
        zuteilung.set(a, fb); zuteilung.set(b, fa);
        const neuMin = nachbarAbstand(zuteilung);
        const neuKnapp = knappe(zuteilung, 0.15);
        const besser = neuMin > jetztMin + 1e-9
          || (Math.abs(neuMin - jetztMin) < 1e-9 && neuKnapp < jetztKnapp);
        if (besser) { lauf = true; } else { zuteilung.set(a, fa); zuteilung.set(b, fb); }
      }
    }
  }
  console.log(`Nachbarn: kleinster Abstand ${vorher.toFixed(4)} -> `
    + `${nachbarAbstand(zuteilung).toFixed(4)} `
    + `· Paare unter 0,15: ${vorherKnapp} -> ${knappe(zuteilung, 0.15)} `
    + `(${runden} Runden)`);
}

/* ---------- Bericht -------------------------------------------------- */

const altListe = NUMMERN.map((n) => ({ hex: VORHER.get(n), lab: oklab(VORHER.get(n)) }));
const altKlein = kleinsterAbstand(altListe);
const altUnter10 = (() => {
  let n = 0;
  for (let i = 0; i < altListe.length; i++) {
    for (let j = i + 1; j < altListe.length; j++) if (abstand(altListe[i], altListe[j]) < 0.10) n++;
  }
  return n;
})();
const altKontrast = Math.min(...altListe.map((x) => kontrast(x.hex)));

const neuListe = NUMMERN.map((n) => zuteilung.get(n));
const neuUnter10 = (() => {
  let n = 0;
  for (let i = 0; i < neuListe.length; i++) {
    for (let j = i + 1; j < neuListe.length; j++) if (abstand(neuListe[i], neuListe[j]) < 0.10) n++;
  }
  return n;
})();
const neuKontrast = Math.min(...neuListe.map((x) => kontrast(x.hex)));
const paare = (ANZAHL * (ANZAHL - 1)) / 2;

console.log("");
console.log(`ALT:  kleinster Abstand ${altKlein.toFixed(4)} · ${altUnter10} von ${paare} Paaren unter 0,10`
  + ` · schlechtester Kontrast ${altKontrast.toFixed(2)}:1`);
console.log(`NEU:  kleinster Abstand ${besterWert.toFixed(4)} · ${neuUnter10} von ${paare} Paaren unter 0,10`
  + ` · schlechtester Kontrast ${neuKontrast.toFixed(2)}:1`);
console.log(`      Buntheit ${Math.min(...neuListe.map((x) => x.C)).toFixed(3)}`
  + ` bis ${Math.max(...neuListe.map((x) => x.C)).toFixed(3)}`
  + ` · Helligkeit ${Math.min(...neuListe.map((x) => x.L)).toFixed(2)}`
  + ` bis ${Math.max(...neuListe.map((x) => x.L)).toFixed(2)}`);

/* BEDINGUNG 4: nicht schlechter als vorher. Ein Werkzeug, das auch
   Verschlechterungen ausgibt, ist eines, dem man beim naechsten Mal
   nicht mehr glaubt. */
if (besterWert <= altKlein || neuKontrast < 4.5) {
  console.error("\nABBRUCH: Das Ergebnis waere nicht besser als der alte Stand.");
  process.exit(1);
}

const zeilen = NUMMERN.map((n) => {
  const f = zuteilung.get(n);
  const was = WOFUER.get(n) ? `   /* ${WOFUER.get(n)} */` : "";
  return `[data-ton="${n}"]`.padEnd(16) + `{ --ton: ${f.hex}; }${was}`;
});
console.log("\n" + zeilen.join("\n"));
console.log(`\n${ANZAHL} Farben, alle Bedingungen erfuellt.`);

if (process.argv.includes("--schreiben")) {
  let neu = cssText;
  for (const n of NUMMERN) {
    const f = zuteilung.get(n);
    neu = neu.replace(
      new RegExp(`(\\[data-ton="${n}"\\]\\s*\\{\\s*--ton:\\s*)#[0-9a-fA-F]{6}`),
      `$1${f.hex}`);
  }
  writeFileSync(CSS, neu);
  console.log(`\nIn ${CSS} eingetragen.`);
}