/* =====================================================================
DIE GIF-KISTE AUF DEM HANDY -- UND WAS PASSIERT, WENN MAN DRAUFTIPPT
=====================================================================
Filipe, 25.09.2026: „mach auch das mit den gifs fertig. eine
perfektion von perfektion bitte."
`pruef-gifs` misst den WEG (17 Pruefungen, alle gruen): hineinlegen,
anzeigen, verschicken, herausnehmen, und dass ein Creator nicht
herankommt. Was sie NICHT misst, ist das, was man sieht:
1. Wie die Kiste auf 390 px aussieht -- der Breite, auf der die
Modis tatsaechlich tippen. Eine Tafel, die am Rechner schoen
ist und auf dem Handy in einer Spalte klebt, ist auf dem
Handy kaputt, und keine Route merkt es.
2. Ob ein verschicktes GIF sich in der BILDSCHAU oeffnet (seit
gestern) -- und ob es dort noch laeuft. Ein GIF, das beim
Vergroessern zum Standbild wird, ist kein GIF mehr.
SIE PRUEFT NICHTS und meldet keinen Fehlschlag -- sie macht Bilder
und Zahlen, auf denen man nachsehen kann. Deshalb `mess-`.
EIGENE WEGWERF-DATENBANK in einem mktemp-Ordner: Es entstehen echte
GIFs und echte Nachrichten. In einem laufenden System waeren das
Testdaten, und die sind verboten.
Aufrufen mit: node server/mess-gifs-handy.mjs
===================================================================== */
import { mkdtempSync, rmSync, readFileSync } from "node:fs";
import { tmpdir } from "node:os";
import { join } from "node:path";
import { execFileSync } from "node:child_process";
import { request as httpAnfrage } from "node:http";
import { createServer as httpsServer } from "node:https";
const PORT = 5431, HP = 5432;
const CREW = "crew.dogfather-universe.com";
const ordner = mkdtempSync(join(tmpdir(), "ws-gifs-"));
process.env.WORKSPACE_DB = join(ordner, "workspace.db");
process.env.PORT = String(PORT);
process.env.SITE_ACCESS_SECRET = "lokaler-test";
process.env.SITE_PUBLIC_LAUNCH_AT = "2020-01-01T00:00:00+01:00";
const express = (await import("express")).default;
const ec = express.response.cookie;
express.response.cookie = function (n, w, o) {
return ec.call(this, n, w, { ...(o || {}), secure: false });
};
import { notbremse } from "./helfer-notbremse.mjs";
await import("./index.js");
notbremse(300_000, "mess-gifs-handy");
await new Promise((r) => setTimeout(r, 900));
process.on("uncaughtException", (f) => { console.error("ABSTURZ:", f); process.exit(7); });
process.on("unhandledRejection", (f) => { console.error("ABSTURZ (Versprechen):", f); process.exit(7); });
const { DatabaseSync } = await import("node:sqlite");
const { scryptSync, randomBytes, createHmac } = await import("node:crypto");
const d = new DatabaseSync(process.env.WORKSPACE_DB);
const jetzt = new Date().toISOString();
const sch = randomBytes(32).toString("hex");
d.prepare("INSERT INTO einstellungen (schluessel, wert, geaendert, von)"
+ " VALUES (?,?,?,NULL) ON CONFLICT(schluessel) DO NOTHING")
.run("code_kennung_schluessel", sch, jetzt);
const anlegen = (name, rolle, code) => {
const s = randomBytes(16).toString("hex");
const h = scryptSync(code, s, 64,
{ N: 32768, r: 8, p: 1, maxmem: 96 * 1024 * 1024 }).toString("hex");
return d.prepare("INSERT INTO personen"
+ " (name, rolle, code_hash, code_salt, code_n, code_kennung, aktiv, erstellt)"
+ " VALUES (?,?,?,?,?,?,1,?) RETURNING id")
.get(name, rolle, h, s, 32768,
createHmac("sha256", sch).update(code).digest("hex"), jetzt).id;
};
anlegen("Filipe", "admin", "CODE-DOGI-0001");
const idHand = anlegen("Rieke", "hand", "CODE-HAND-0001");
d.close();
const anfrage = (pfad, art, koerper, keks, typ) => new Promise((fertig, schief) => {
const a = httpAnfrage({
host: "127.0.0.1", port: PORT, path: pfad, method: art,
headers: {
Host: CREW,
...(koerper ? { "Content-Type": typ || "application/json" } : {}),
...(keks ? { Cookie: keks } : {}),
},
}, (r) => {
let t = ""; r.on("data", (x) => { t += x; });
r.on("end", () => fertig({ code: r.statusCode, kopf: r.headers, text: t }));
});
a.on("error", schief);
if (koerper) a.write(Buffer.isBuffer(koerper) ? koerper : JSON.stringify(koerper));
a.end();
});
const an = await anfrage("/workspace/api/anmelden", "POST",
{ rolle: "admin", code: "CODE-DOGI-0001" });
if (an.code !== 200) { console.log(`ABBRUCH: Anmeldung ${an.code}`); process.exit(2); }
const keks = (an.kopf["set-cookie"] || []).map((x) => x.split(";")[0]).join("; ");
/* ---- Ein gueltiges GIF -------------------------------------------
Dasselbe wie in `pruef-gifs`: ein 1x1-Bildpunkt, der den strengen
Kopfcheck des Servers besteht ("GIF89a"). Mein erster Versuch war
ein selbstgebautes Zweibild-GIF und wurde mit 415 abgelehnt -- die
Bytefolge war naeher am Wunsch als an der Norm. Wo es eine
funktionierende Vorlage im Haus gibt, wird sie benutzt und nicht
nachgebaut.
Fuer diese Messung reicht ein Standbild: Gefragt sind die GROESSEN
der Kiste, ihrer Kacheln und Knoepfe -- und ob die Bildschau
aufgeht. Ob die Einzelbilder danach weiterlaufen, entscheidet der
Browser und nicht diese Seite. */
const GIF = Buffer.from(
"R0lGODlhAQABAIAAAAAAAP///yH5BAEAAAAALAAAAAABAAEAAAIBRAA7", "base64");
/* Die Route nimmt den nackten Rumpf mit `x-dateiname` im Kopf --
nachgesehen in workspace-chat.js, nicht geraten (multipart wurde
mit 415 abgelehnt). */
const rein = await new Promise((fertig, schief) => {
const req = httpAnfrage({
host: "127.0.0.1", port: PORT, path: "/workspace/api/chat/gifs", method: "POST",
headers: {
Host: CREW, Cookie: keks,
"x-dateiname": encodeURIComponent("Winken.gif"),
"Content-Type": "application/octet-stream",
"Content-Length": GIF.length,
Origin: `https://${CREW}`, Referer: `https://${CREW}/workspace/chat.html`,
},
}, (r) => {
let x = ""; r.on("data", (c) => { x += c; });
r.on("end", () => fertig({ code: r.statusCode, text: x }));
});
req.on("error", schief);
req.write(GIF);
req.end();
});
console.log(`GIF in die Kiste: HTTP ${rein.code} ${rein.text.slice(0, 90)}`);
/* Ein Gespraech, in dem das GIF landen kann. */
const raum = await anfrage("/workspace/api/chat/direkt", "POST", { mit: idHand }, keks);
const raumId = JSON.parse(raum.text || "{}").raum_id;
console.log(`Gespraech: HTTP ${raum.code}, Raum ${raumId}`);
const schl = join(ordner, "b.key"), zert = join(ordner, "b.crt");
execFileSync("openssl", ["req", "-x509", "-newkey", "rsa:2048", "-nodes", "-keyout", schl,
"-out", zert, "-days", "2", "-subj", `/CN=${CREW}`, "-addext", `subjectAltName=DNS:${CREW}`],
{ stdio: "ignore" });
const vorbau = httpsServer({ key: readFileSync(schl), cert: readFileSync(zert) },
(von, nach) => {
const w = httpAnfrage({
host: "127.0.0.1", port: PORT, path: von.url, method: von.method,
headers: { ...von.headers, host: `${CREW}:${HP}` },
}, (a) => { nach.writeHead(a.statusCode || 502, a.headers); a.pipe(nach); });
von.pipe(w);
});
await new Promise((r) => vorbau.listen(HP, "127.0.0.1", r));
const pw = await import(
"file:///C:/Users/qciga/Documents/Obelix/Analyse/node_modules/playwright/index.mjs");
const browser = await pw.chromium.launch({
args: [`--host-resolver-rules=MAP ${CREW} 127.0.0.1`, "--ignore-certificate-errors"],
});
async function blicken(wie, breite, hoehe, mobil) {
const kontext = await browser.newContext({
viewport: { width: breite, height: hoehe },
deviceScaleFactor: mobil ? 2 : 1, isMobile: mobil, hasTouch: mobil,
});
await kontext.addCookies(keks.split("; ").map((k) => {
const [n, ...r] = k.split("=");
return { name: n, value: r.join("="), domain: CREW, path: "/" };
}));
const seite = await kontext.newPage();
const konsole = [];
seite.on("console", (e) => {
if (e.type() === "error" && !/favicon|ERR_CERT|net::ERR/i.test(e.text())) {
konsole.push(e.text().slice(0, 140));
}
});
await seite.goto(`https://${CREW}:${HP}/workspace/chat.html?raum=${raumId}`,
{ waitUntil: "networkidle" });
await seite.waitForTimeout(1500);
console.log(`\n=== ${wie} (${breite} x ${hoehe}) ===`);
/* ---- 1. Die Kiste aufmachen ----------------------------------- */
const knopf = seite.locator("#gif-auf").first();
const knopfDa = await knopf.count();
if (knopfDa) await knopf.click().catch(() => {});
await seite.waitForTimeout(700);
const kiste = await seite.evaluate(() => {
const tafel = document.getElementById("gif-tafel");
if (tafel && tafel.hidden) return { da: true, zu: true };
if (!tafel) return { da: false };
const r = tafel.getBoundingClientRect();
const st = getComputedStyle(tafel);
const kacheln = [...tafel.querySelectorAll("img")].map((b) => {
const k = b.getBoundingClientRect();
return { b: Math.round(k.width), h: Math.round(k.height), src: b.currentSrc || b.src };
});
const knoepfe = [...tafel.querySelectorAll("button")].map((b) => {
const k = b.getBoundingClientRect();
return { t: (b.textContent || b.getAttribute("aria-label") || "").trim().slice(0, 18),
b: Math.round(k.width), h: Math.round(k.height) };
});
return {
da: true,
links: Math.round(r.left), rechts: Math.round(r.right),
breite: Math.round(r.width), hoehe: Math.round(r.height),
ausDemBild: r.left < 0 || r.right > window.innerWidth,
spalten: st.gridTemplateColumns,
kacheln, knoepfe,
/* NUR AM FINGER STRENG. Die 44 px sind die Hausgroesse fuer
Beruehrziele -- am Rechner waere derselbe Massstab falsch:
Dort ist ein 28-px-Kreis in der Ecke einer Kachel richtig, und
ein Knopf von 44 px wuerde die halbe Kachel verdecken. Der
erste Anlauf dieser Messung hat am Rechner „ZU KLEIN" gemeldet
und damit zwei Stellen als Befund ausgegeben, die Absicht
sind. Eine Messung, die den Zusammenhang nicht kennt, erzeugt
Arbeit statt Erkenntnis. */
zuKlein: (matchMedia("(pointer: coarse)").matches
? knoepfe.filter((k) => k.h > 0 && k.h < 44).map((k) => `${k.t} ${k.h}px`)
: []),
};
});
console.log(` Knopf da: ${knopfDa ? "ja" : "NEIN"}`);
if (!kiste.da) console.log(" Tafel: NICHT GEFUNDEN");
else {
console.log(` Tafel ${kiste.breite}x${kiste.hoehe} px, links ${kiste.links}, `
+ `rechts ${kiste.rechts}${kiste.ausDemBild ? " STEHT AUS DEM BILD" : ""}`);
console.log(` Spalten ${kiste.spalten}`);
console.log(` Kacheln ${kiste.kacheln.map((k) => `${k.b}x${k.h}`).join(", ") || "keine"}`);
console.log(` Knoepfe ${kiste.knoepfe.map((k) => `"${k.t}" ${k.b}x${k.h}`).join(", ")}`);
if (kiste.zuKlein.length) console.log(` ZU KLEIN zum Tippen: ${kiste.zuKlein.join(", ")}`);
}
await seite.screenshot({ path: `server/mess-gifs-${wie}-kiste.png` }).catch(() => {});
/* ---- 2. Verschicken und in der Bildschau oeffnen --------------- */
const kachel = seite.locator("#gif-tafel .gif-kachel__knopf").first();
if (await kachel.count()) {
await kachel.click().catch(() => {});
await seite.waitForTimeout(1200);
}
const imVerlauf = await seite.evaluate(() => {
const bilder = [...document.querySelectorAll(".chat-nachricht img, .chat-anhang img")];
const g = bilder.find((b) => /\.gif|gifs\/|anhang/.test(b.currentSrc || b.src));
if (!g) return { da: false, wieviele: bilder.length };
const r = g.getBoundingClientRect();
return { da: true, b: Math.round(r.width), h: Math.round(r.height),
src: (g.currentSrc || g.src).slice(-40) };
});
console.log(` Im Verlauf: ${imVerlauf.da
? `${imVerlauf.b}x${imVerlauf.h} px (${imVerlauf.src})`
: `NICHT GEFUNDEN (${imVerlauf.wieviele} Bilder im Verlauf)`}`);
if (imVerlauf.da) {
await seite.locator(".chat-nachricht img, .chat-anhang img").first().click()
.catch(() => {});
await seite.waitForTimeout(900);
const schau = await seite.evaluate(() => {
const dlg = document.querySelector("dialog.bildschau");
if (!dlg) return { da: false };
/* und NICHT das erste ![]()
: Der Dialog traegt
oben ein Husky-Zeichen und an den Seiten zwei Figuren. Mein
erster Anlauf nahm und maass damit das
Logo -- die Meldung lautete "Mitte 174 von 640", und die
Bildschau sah kaputt aus, obwohl sie es nicht war. Ein
Messfehler, der wie ein Befund aussieht, kostet mehr Zeit als
gar keine Messung. */
/* `.bildschau__bild` und NICHT das erste ![]()
: Der Dialog
traegt oben ein Husky-Zeichen und an den Seiten zwei Figuren.
Der erste Anlauf nahm `querySelector("img")` und maass damit
das Logo -- die Meldung lautete „Mitte 174 von 640", und die
Bildschau sah kaputt aus, obwohl sie mittig stand. Ein
Messfehler, der wie ein Befund aussieht, kostet mehr Zeit als
gar keine Messung. */
const b = dlg.querySelector(".bildschau__bild");
const r = b?.getBoundingClientRect();
return {
da: true, offen: dlg.open === true,
bildSrc: (b?.currentSrc || b?.src || "").slice(-40),
bild: r ? `${Math.round(r.width)}x${Math.round(r.height)}` : "kein Bild",
istGif: /\.gif|gifs\/|anhang/.test(b?.currentSrc || b?.src || ""),
mitte: r ? Math.round(r.left + r.width / 2) : 0,
fensterMitte: Math.round(window.innerWidth / 2),
};
});
if (!schau.da) console.log(" Bildschau: GEHT NICHT AUF");
else {
console.log(` Bildschau offen=${schau.offen}, Bild ${schau.bild}, `
+ `GIF=${schau.istGif}, Mitte ${schau.mitte} (Fenster ${schau.fensterMitte})`);
await seite.screenshot({ path: `server/mess-gifs-${wie}-schau.png` }).catch(() => {});
}
}
if (konsole.length) console.log(` FEHLER IN DER KONSOLE: ${konsole.join(" | ")}`);
await kontext.close();
}
try {
await blicken("handy", 390, 844, true);
await blicken("rechner", 1280, 900, false);
} finally {
await browser.close();
vorbau.close();
try { rmSync(ordner, { recursive: true, force: true }); } catch { /* egal */ }
process.exit(0);
}