From 972a3e73daf3298f6a549cb7b81ae0b4b4eed089 Mon Sep 17 00:00:00 2001 From: M_Viper Date: Sat, 3 Oct 2026 14:20:38 +0000 Subject: [PATCH] Upload via GUI (138 Dateien) --- src/designs.css | 4 +- src/friends.js | 25 + src/index.html | 66 +- src/launcher.js | 1257 ++++---- src/main.js | 171 ++ src/preload.js | 8 + src/renderer.js | 114 +- src/skineditor.js | 2515 ++++++++++------- src/skins.js | 265 +- src/store.js | 3 +- src/styles.css | 1428 +++++----- .../aeromc-friends/aeromc-friends.php | 342 +-- .../aeromc-friends/includes/capes.php | 306 ++ 13 files changed, 3889 insertions(+), 2615 deletions(-) create mode 100644 wordpress-plugin/aeromc-friends/includes/capes.php diff --git a/src/designs.css b/src/designs.css index d97f4f3..ed874e4 100644 --- a/src/designs.css +++ b/src/designs.css @@ -73,7 +73,7 @@ :root:is([data-design="aero"],[data-design="lila"]) .tbtn:active{background:var(--surface2)} :root:is([data-design="aero"],[data-design="lila"]) .tbtn svg, :root:is([data-design="aero"],[data-design="lila"]) #btn-new svg,:root:is([data-design="aero"],[data-design="lila"]) #btn-import svg,:root:is([data-design="aero"],[data-design="lila"]) #btn-open-dir svg, -:root:is([data-design="aero"],[data-design="lila"]) #btn-console svg,:root:is([data-design="aero"],[data-design="lila"]) #btn-account svg,:root:is([data-design="aero"],[data-design="lila"]) #btn-settings svg, +:root:is([data-design="aero"],[data-design="lila"]) #btn-search svg,:root:is([data-design="aero"],[data-design="lila"]) #btn-console svg,:root:is([data-design="aero"],[data-design="lila"]) #btn-account svg,:root:is([data-design="aero"],[data-design="lila"]) #btn-settings svg, :root:is([data-design="aero"],[data-design="lila"]) .acct-av svg{color:var(--cyan-soft)} :root:is([data-design="aero"],[data-design="lila"]) .tbsep{background:var(--border)} :root:is([data-design="aero"],[data-design="lila"]) .search-wrap input{border-radius:999px;padding:5px 12px;width:150px} @@ -270,7 +270,7 @@ :root[data-design="minecraft"] .tbtn{color:#fff;border-radius:0;text-shadow:1px 1px 0 #1a1a1a;image-rendering:auto} :root[data-design="minecraft"] .tbtn:hover{background:rgba(0,0,0,.35);border-color:#fff} :root[data-design="minecraft"] .tbtn:active{background:rgba(0,0,0,.5)} -:root[data-design="minecraft"] .tbtn svg,:root[data-design="minecraft"] #btn-console svg,:root[data-design="minecraft"] .acct-av svg{color:#e6e6e6} +:root[data-design="minecraft"] #btn-search svg,:root[data-design="minecraft"] .tbtn svg,:root[data-design="minecraft"] #btn-console svg,:root[data-design="minecraft"] .acct-av svg{color:#e6e6e6} :root[data-design="minecraft"] #btn-new svg,:root[data-design="minecraft"] #btn-account svg{color:#7fd858} :root[data-design="minecraft"] #btn-import svg{color:#6db8ff} :root[data-design="minecraft"] #btn-open-dir svg{color:#f2c94c} diff --git a/src/friends.js b/src/friends.js index c29e487..4864349 100644 --- a/src/friends.js +++ b/src/friends.js @@ -200,7 +200,32 @@ async function sendReport(daten) { } } +// ---------- AeroMC-Umhänge ---------- +// Hochladen/Entfernen nur angemeldet; Abrufen ist öffentlich (auch für den Mod) +function uploadCape(uuid, image) { + return anfrage('/cape', { method: 'POST', body: { uuid, image } }); +} + +function removeCape(uuid) { + return anfrage('/cape/remove', { method: 'POST', body: { uuid } }); +} + +async function getCapes(uuids) { + try { + const liste = [...new Set((uuids || []).map((u) => String(u).replace(/-/g, '').toLowerCase()))].filter(Boolean); + if (!liste.length) return { ok: true, capes: {} }; + const { res, daten } = await roheAnfrage('/capes', { method: 'GET', body: { uuids: liste.join(',') } }); + // ältere Plugin-Fassung ohne Umhänge + if (res.status === 404) return { ok: false, fehlt: true, message: 'Der Server kennt noch keine Umhänge (Plugin „AeroMC Freunde“ 1.5.0 nötig).' }; + if (!res.ok) return { ok: false, message: (daten && daten.message) || `Fehler ${res.status}` }; + return { ok: true, capes: (daten && daten.capes) || {} }; + } catch (err) { + return { ok: false, message: 'Umhang-Server nicht erreichbar: ' + err.message }; + } +} + module.exports = { + BASIS_URL, uploadCape, removeCape, getCapes, heartbeat, getFriends, getRequests, getSentRequests, sendRequest, respond, cancelRequest, removeFriend, sendInvite, getInvites, dismissInvite, createShare, getShare, setzeZugangsHelfer, sendMessage, getMessages, getUnreadMessages, markMessagesRead, sendReport, diff --git a/src/index.html b/src/index.html index a3208fe..233b100 100644 --- a/src/index.html +++ b/src/index.html @@ -27,8 +27,9 @@ -
- +
+ +
@@ -445,6 +446,14 @@ Gilt für Mods aus Modrinth. Dauert die Suche länger als 20 Sekunden, startet Minecraft ohne Update. Abgeschaltete Mods bleiben abgeschaltet. + +
+
Umhänge
+ + Zeigt deinen eigenen Umhang und die anderer AeroMC-Spieler – in jeder Minecraft-Version und mit jedem Loader, ohne Mod. Gestalten im Skin-Fenster unter „Umhang“. Gilt ab dem nächsten Start. +
@@ -1249,6 +1258,26 @@

+
+
Umhang
+
+ +
+ AeroMC-Umhang (eigener, auch HD) +
+ – + + +
+
+
+ Den AeroMC-Umhang sehen im Spiel alle, die AeroMC nutzen oder den Mod „AeroMC Umhänge“ (Fabric/Quilt) installiert haben – dort hat er Vorrang vor dem offiziellen. +
@@ -1268,6 +1297,7 @@
+
@@ -1290,7 +1320,7 @@
-
+
Ebene
@@ -1300,6 +1330,30 @@
+
Optionen
@@ -1319,6 +1373,10 @@
+ +
+
+
diff --git a/src/launcher.js b/src/launcher.js index 55a61dd..4176080 100644 --- a/src/launcher.js +++ b/src/launcher.js @@ -1,627 +1,630 @@ -'use strict'; - -/* - * launcher.js – Vanilla-Start-Pipeline (Phase 2) - * ---------------------------------------------- - * Lädt Version-JSON, Client-JAR, Libraries, Natives und Assets herunter, - * wählt eine passende Java-Version und baut das Start-Kommando. - * - * Der eigentliche Prozess-Start ist an ein Konto gebunden (opts.auth): - * Ohne gültigen Microsoft-Login (Phase 3) wird alles vorbereitet, aber - * NICHT gestartet – wir bauen bewusst keinen Offline-/Crack-Bypass. - * - * Gemeinsame Spieldateien (versions/libraries/assets) liegen geteilt unter - * , damit mehrere Instanzen sie sich teilen (spart Platz). - */ - -const fs = require('fs'); -const path = require('path'); -const crypto = require('crypto'); -const { spawn, spawnSync } = require('child_process'); -const services = require('./services'); -const loaders = require('./loaders'); -const forge = require('./forge'); -const processwatchdog = require('./processwatchdog'); - -const UA = 'AeroMC-Launcher/0.2'; -const RESOURCES = 'https://resources.download.minecraft.net'; - -// --------------------------------------------------------------------------- -// kleine Helfer -// --------------------------------------------------------------------------- - -function ensureDir(d) { fs.mkdirSync(d, { recursive: true }); } - -function sha1File(file) { - try { - const h = crypto.createHash('sha1'); - h.update(fs.readFileSync(file)); - return h.digest('hex'); - } catch { return null; } -} - -async function fetchJson(url) { - const res = await fetch(url, { headers: { 'User-Agent': UA } }); - if (!res.ok) throw new Error('HTTP ' + res.status + ' bei ' + url); - return res.json(); -} - -// lädt eine Datei, überspringt sie bei passender sha1/Existenz -async function downloadIfNeeded(url, dest, sha1) { - if (fs.existsSync(dest)) { - if (!sha1 || sha1File(dest) === sha1) return { skipped: true, bytes: 0 }; - } - ensureDir(path.dirname(dest)); - const res = await fetch(url, { headers: { 'User-Agent': UA } }); - if (!res.ok) throw new Error('Download HTTP ' + res.status + ': ' + url); - const buf = Buffer.from(await res.arrayBuffer()); - fs.writeFileSync(dest, buf); - return { skipped: false, bytes: buf.length }; -} - -// begrenzte Parallelität für viele kleine Downloads (Assets) -async function runPool(items, worker, concurrency, onEach) { - let idx = 0, done = 0; - const total = items.length; - async function next() { - while (idx < total) { - const i = idx++; - await worker(items[i]); - done++; - if (onEach) onEach(done, total); - } - } - const runners = []; - for (let c = 0; c < Math.min(concurrency, total); c++) runners.push(next()); - await Promise.all(runners); -} - -// --------------------------------------------------------------------------- -// Regeln (Libraries & Argumente) -// --------------------------------------------------------------------------- - -const OS_NAME = 'windows'; - -function rulesAllow(rules) { - if (!rules || !rules.length) return true; - let action = 'disallow'; - for (const r of rules) { - let matches = true; - if (r.os && r.os.name && r.os.name !== OS_NAME) matches = false; - if (r.features) matches = false; // Demo-/Auflösungs-Features aus - if (matches) action = r.action; - } - return action === 'allow'; -} - -// --------------------------------------------------------------------------- -// Version-JSON -// --------------------------------------------------------------------------- - -async function getVersionJson(versionId, userDataDir, sharedDir) { - const dest = path.join(sharedDir, 'versions', versionId, versionId + '.json'); - if (fs.existsSync(dest)) { - try { return JSON.parse(fs.readFileSync(dest, 'utf8')); } catch { /* neu laden */ } - } - // URL aus dem Manifest suchen (bei Bedarf frisch laden, falls url fehlt) - let manifest = await services.getMcVersions(userDataDir); - let entry = (manifest.versions || []).find((v) => v.id === versionId); - if (!entry || !entry.url) { - manifest = await services.getMcVersions(userDataDir, 0); // erzwinge Refresh - entry = (manifest.versions || []).find((v) => v.id === versionId); - } - if (!entry || !entry.url) throw new Error('Version nicht im Mojang-Manifest gefunden: ' + versionId); - const vj = await fetchJson(entry.url); - ensureDir(path.dirname(dest)); - fs.writeFileSync(dest, JSON.stringify(vj)); - return vj; -} - -// --------------------------------------------------------------------------- -// Libraries + Natives -> Classpath -// --------------------------------------------------------------------------- - -async function prepareLibraries(vj, sharedDir, nativesDir, onProgress) { - const libDir = path.join(sharedDir, 'libraries'); - const classpath = []; - const libs = (vj.libraries || []).filter((l) => rulesAllow(l.rules)); - let i = 0; - for (const lib of libs) { - i++; - onProgress && onProgress({ phase: 'libraries', current: i, total: libs.length, detail: lib.name }); - - const dl = lib.downloads || {}; - // normales Artefakt -> Classpath - if (dl.artifact && dl.artifact.path) { - const dest = path.join(libDir, dl.artifact.path.replace(/\//g, path.sep)); - await downloadIfNeeded(dl.artifact.url, dest, dl.artifact.sha1); - classpath.push(dest); - } - // klassische Natives (vor 1.19) -> in nativesDir extrahieren - if (lib.natives && lib.natives[OS_NAME] && dl.classifiers) { - const key = lib.natives[OS_NAME].replace('${arch}', '64'); - const nat = dl.classifiers[key]; - if (nat) { - const dest = path.join(libDir, nat.path.replace(/\//g, path.sep)); - await downloadIfNeeded(nat.url, dest, nat.sha1); - await extractNatives(dest, nativesDir, lib.extract); - } - } - } - return classpath; -} - -function classpathArtifactKey(filePath, sharedDir) { - const libDir = path.join(sharedDir, 'libraries'); - const rel = path.relative(libDir, filePath); - if (rel.startsWith('..') || path.isAbsolute(rel)) return path.normalize(filePath).toLowerCase(); - - const parts = rel.split(path.sep); - if (parts.length < 4) return rel.replace(/\\/g, '/').toLowerCase(); - - const fileName = parts[parts.length - 1]; - const version = parts[parts.length - 2]; - const artifact = parts[parts.length - 3]; - const group = parts.slice(0, -3).join('/').toLowerCase(); - const base = fileName.replace(/\.[^.]+$/, ''); - const prefix = `${artifact}-${version}`; - const classifier = base.startsWith(prefix + '-') ? base.slice(prefix.length + 1).toLowerCase() : ''; - return `${group}:${artifact.toLowerCase()}:${classifier}`; -} - -function dedupeClasspath(classpath, sharedDir) { - const seen = new Set(); - const out = []; - for (const filePath of classpath) { - const key = classpathArtifactKey(filePath, sharedDir); - if (seen.has(key)) continue; - seen.add(key); - out.push(filePath); - } - return out; -} - -// entpackt eine Natives-JAR (ZIP) nach nativesDir (ohne externe Abhängigkeit) -async function extractNatives(jarPath, nativesDir, extractRule) { - ensureDir(nativesDir); - const exclude = (extractRule && extractRule.exclude) || ['META-INF/']; - const data = fs.readFileSync(jarPath); - // ZIP End-of-Central-Directory finden - let eocd = -1; - for (let i = data.length - 22; i >= 0 && i > data.length - 22 - 65536; i--) { - if (data.readUInt32LE(i) === 0x06054b50) { eocd = i; break; } - } - if (eocd < 0) return; - const count = data.readUInt16LE(eocd + 10); - let off = data.readUInt32LE(eocd + 16); - const zlib = require('zlib'); - for (let n = 0; n < count; n++) { - if (data.readUInt32LE(off) !== 0x02014b50) break; - const method = data.readUInt16LE(off + 10); - const compSize = data.readUInt32LE(off + 20); - const nameLen = data.readUInt16LE(off + 28); - const extraLen = data.readUInt16LE(off + 30); - const commentLen = data.readUInt16LE(off + 32); - const localOff = data.readUInt32LE(off + 42); - const name = data.toString('utf8', off + 46, off + 46 + nameLen); - off += 46 + nameLen + extraLen + commentLen; - - if (name.endsWith('/')) continue; - if (exclude.some((ex) => name.startsWith(ex))) continue; - - // lokalen Header lesen, um Datenoffset zu bestimmen - const lNameLen = data.readUInt16LE(localOff + 26); - const lExtraLen = data.readUInt16LE(localOff + 28); - const dataStart = localOff + 30 + lNameLen + lExtraLen; - const raw = data.subarray(dataStart, dataStart + compSize); - let out; - try { out = method === 0 ? raw : zlib.inflateRawSync(raw); } catch { continue; } - const target = path.join(nativesDir, path.basename(name)); - fs.writeFileSync(target, out); - } -} - -// --------------------------------------------------------------------------- -// Assets -// --------------------------------------------------------------------------- - -async function prepareAssets(vj, sharedDir, onProgress) { - const ai = vj.assetIndex; - if (!ai) return; - const indexFile = path.join(sharedDir, 'assets', 'indexes', ai.id + '.json'); - // Merker: einmal vollständig geprüfte Assets nicht erneut durchgehen (spart ~1,5 s pro Start) - const doneMark = path.join(sharedDir, 'assets', 'indexes', ai.id + '.complete'); - if (fs.existsSync(doneMark) && fs.existsSync(indexFile)) return; - - await downloadIfNeeded(ai.url, indexFile, ai.sha1); - const index = JSON.parse(fs.readFileSync(indexFile, 'utf8')); - const objects = index.objects || {}; - const entries = Object.values(objects); - const objDir = path.join(sharedDir, 'assets', 'objects'); - - await runPool(entries, async (o) => { - const sub = o.hash.slice(0, 2); - const dest = path.join(objDir, sub, o.hash); - if (fs.existsSync(dest)) return; - await downloadIfNeeded(`${RESOURCES}/${sub}/${o.hash}`, dest, o.hash); - }, 16, (done, total) => onProgress && onProgress({ phase: 'assets', current: done, total, detail: 'Assets' })); - - try { fs.writeFileSync(doneMark, new Date().toISOString()); } catch { /* egal */ } -} - -// --------------------------------------------------------------------------- -// Java-Auswahl -// --------------------------------------------------------------------------- - -function pickJava(vj, preferredPath) { - const required = (vj.javaVersion && vj.javaVersion.majorVersion) || 8; - let preferred = null; - if (preferredPath && preferredPath.trim()) { - const info = services.probeJava(preferredPath); - if (info) { - preferred = { path: preferredPath, major: info.major, forced: true }; - if (info.major === required) return preferred; - } - } - const jvms = services.scanJava(); - // Mod-Loader und Mods unterstützen neuere Java-Versionen nicht automatisch. - // Deshalb ausschließlich die von Mojang angegebene Major-Version verwenden. - const x64 = jvms.filter((j) => j.arch === 'x64'); - const exact = x64.find((j) => j.major === required); - if (exact) return { path: exact.path, major: exact.major }; - const fallback = preferred || x64[0] || jvms[0]; - return fallback ? { - path: fallback.path, - major: fallback.major, - forced: !!fallback.forced, - mismatch: required, - } : null; -} - -// --------------------------------------------------------------------------- -// Argumente -// --------------------------------------------------------------------------- - -function substitute(str, map) { - return str.replace(/\$\{([^}]+)\}/g, (m, k) => (k in map ? map[k] : m)); -} - -function collectArgs(argList, map) { - const out = []; - for (const a of argList || []) { - if (typeof a === 'string') { out.push(substitute(a, map)); continue; } - if (a && a.rules && !rulesAllow(a.rules)) continue; - const val = a && a.value; - if (typeof val === 'string') out.push(substitute(val, map)); - else if (Array.isArray(val)) val.forEach((v) => out.push(substitute(v, map))); - } - return out; -} - -// führt Vanilla-Version + Loader-Profil zusammen (mainClass + Argumente) -function mergeLoader(vj, lp) { - const merged = Object.assign({}, vj, { mainClass: lp.mainClass || vj.mainClass }); - merged.arguments = { - jvm: [...((vj.arguments && vj.arguments.jvm) || []), ...((lp.arguments && lp.arguments.jvm) || [])], - game: [...((vj.arguments && vj.arguments.game) || []), ...((lp.arguments && lp.arguments.game) || [])], - }; - return merged; -} - -function buildArgs(vj, ctx) { - const map = { - auth_player_name: ctx.auth.name, - version_name: vj.id, - library_directory: path.join(ctx.sharedDir, 'libraries'), - classpath_separator: path.delimiter, - game_directory: ctx.gameDir, - assets_root: path.join(ctx.sharedDir, 'assets'), - assets_index_name: vj.assets || (vj.assetIndex && vj.assetIndex.id) || 'legacy', - auth_uuid: ctx.auth.uuid, - auth_access_token: ctx.auth.accessToken, - clientid: ctx.auth.clientId || '', - auth_xuid: ctx.auth.xuid || '', - user_type: ctx.auth.userType || 'msa', - version_type: vj.type || 'release', - natives_directory: ctx.nativesDir, - launcher_name: 'AeroMC', - launcher_version: '0.2', - classpath: ctx.classpath.join(path.delimiter), - game_assets: path.join(ctx.sharedDir, 'assets', 'virtual', 'legacy'), - auth_session: 'token:' + ctx.auth.accessToken, - user_properties: '{}', - }; - - let jvm, game; - if (vj.arguments) { - jvm = collectArgs(vj.arguments.jvm, map); - game = collectArgs(vj.arguments.game, map); - } else { - // altes Format (< 1.13) - jvm = ['-Djava.library.path=' + ctx.nativesDir, '-cp', ctx.classpath.join(path.delimiter)]; - game = (vj.minecraftArguments || '').split(' ').filter(Boolean).map((a) => substitute(a, map)); - } - // RAM - jvm = ['-Xms' + ctx.minMemMb + 'M', '-Xmx' + ctx.maxMemMb + 'M', ...jvm]; - if (ctx.extraArgs) jvm = [...ctx.extraArgs.split(' ').filter(Boolean), ...jvm]; - - return [...jvm, vj.mainClass, ...game]; -} - -// --------------------------------------------------------------------------- -// Hauptfunktion -// --------------------------------------------------------------------------- - -/* - * opts: { versionId, gameDir, sharedDir, userDataDir, javaPath, minMemMb, maxMemMb, extraArgs, auth } - * auth: null (kein Login) ODER { name, uuid, accessToken, userType } - * onProgress: (evt) => void - */ -// true für Release-Versionen vor 1.20 (kein Quick Play). Snapshots und -// Unbekanntes gelten als neu – die meisten heutigen Snapshots sind > 1.20. -function vorQuickPlay(versionId) { - const m = /^1\.(\d+)(?:\.\d+)?(?:-(?:pre|rc)\d+)?$/.exec(String(versionId || '').trim()); - return !!m && Number(m[1]) < 20; -} - -async function prepareAndLaunch(opts, onProgress) { - const emit = (phase, extra) => onProgress && onProgress(Object.assign({ phase }, extra)); - - emit('version', { detail: 'Version-Daten laden …' }); - const vj = await getVersionJson(opts.versionId, opts.userDataDir, opts.sharedDir); - - const nativesDir = path.join(opts.sharedDir, 'versions', vj.id, 'natives'); - ensureDir(nativesDir); - - // Client-JAR - emit('client', { detail: 'Client herunterladen …' }); - const clientJar = path.join(opts.sharedDir, 'versions', vj.id, vj.id + '.jar'); - if (vj.downloads && vj.downloads.client) { - await downloadIfNeeded(vj.downloads.client.url, clientJar, vj.downloads.client.sha1); - } - - // Libraries + Natives - const classpath = await prepareLibraries(vj, opts.sharedDir, nativesDir, onProgress); - classpath.push(clientJar); - - // Assets - await prepareAssets(vj, opts.sharedDir, onProgress); - - // Java (VOR dem Loader – Forge-Prozessoren brauchen Java) - emit('java', { detail: 'Java wählen …' }); - let java = pickJava(vj, opts.javaPath); - // Nichts Passendes da? Dann darf der Launcher die richtige Fassung selbst - // holen – opts.ensureJava wird vom Hauptprozess gestellt. - if ((!java || java.mismatch) && opts.ensureJava) { - const benoetigt = (vj.javaVersion && vj.javaVersion.majorVersion) || 8; - emit('java', { detail: `Java ${benoetigt} wird geladen …` }); - try { - const geholt = await opts.ensureJava(benoetigt, (p) => emit('java', p)); - if (geholt && geholt.path) java = { path: geholt.path, major: geholt.major }; - } catch (err) { - emit('log', { line: '[Java] Automatischer Download fehlgeschlagen: ' + err.message + '\n' }); - } - } - if (!java) return { ok: false, message: 'Keine Java-Installation gefunden. Bitte in den Einstellungen Java festlegen.' }; - if (java.mismatch) { - return { - ok: false, - requiredJava: java.mismatch, - message: `Minecraft ${vj.id} benötigt Java ${java.mismatch}, gefunden wurde nur Java ${java.major || 'unbekannt'}. ` - + 'Bitte Auto-Java aktivieren oder eine passende Java-Installation auswählen.', - }; - } - - // Mod-Loader - let effectiveVj = vj; - const libDir = path.join(opts.sharedDir, 'libraries'); - - if (opts.loader === 'fabric' || opts.loader === 'quilt') { - emit('loader', { detail: opts.loader + ' vorbereiten …' }); - let lp; - // Profil zwischenspeichern: spart bei festgelegter Loader-Version die Netzabfrage - const cacheFile = opts.loaderVersion - ? path.join(opts.sharedDir, 'loaders', `${opts.loader}-${vj.id}-${opts.loaderVersion}.json`) - : null; - if (cacheFile && fs.existsSync(cacheFile)) { - try { lp = JSON.parse(fs.readFileSync(cacheFile, 'utf8')); } catch { lp = null; } - } - if (!lp) { - try { - const r = await loaders.resolveLoaderProfile(opts.loader, vj.id, opts.loaderVersion); - lp = r.profile; - const target = cacheFile - || path.join(opts.sharedDir, 'loaders', `${opts.loader}-${vj.id}-${r.loaderVersion}.json`); - try { ensureDir(path.dirname(target)); fs.writeFileSync(target, JSON.stringify(lp)); } catch { /* egal */ } - } catch (err) { return { ok: false, message: err.message }; } - } - const loaderLibs = lp.libraries || []; - let li = 0; - for (const lib of loaderLibs) { - li++; - onProgress && onProgress({ phase: 'loader', current: li, total: loaderLibs.length, detail: lib.name }); - const { relPath, url } = loaders.mavenToUrl(lib.url, lib.name); - const dest = path.join(libDir, relPath.replace(/\//g, path.sep)); - await downloadIfNeeded(url, dest, lib.sha1 || null); - classpath.unshift(dest); - } - effectiveVj = mergeLoader(vj, lp); - - } else if (opts.loader === 'forge' || opts.loader === 'neoforge') { - let lv = opts.loaderVersion; - if (!lv) { - const list = await loaders.listLoaderVersions(opts.loader, vj.id); - if (!list.length) return { ok: false, message: `Keine ${opts.loader}-Version für ${vj.id} gefunden.` }; - lv = list[0].version; - } - let fvj; - try { - fvj = await forge.installForge({ - loader: opts.loader, mcVersion: vj.id, loaderVersion: lv, - sharedDir: opts.sharedDir, javaPath: java.path, clientJar, - clientMappingsUrl: vj.downloads && vj.downloads.client_mappings && vj.downloads.client_mappings.url, - onProgress, - }); - } catch (err) { - return { ok: false, message: (opts.loader === 'forge' ? 'Forge' : 'NeoForge') + '-Installation fehlgeschlagen: ' + err.message }; - } - for (const lib of fvj.libraries || []) { - const art = lib.downloads && lib.downloads.artifact; - const rel = (art && art.path) || forge.mavenPath(lib.name); - classpath.unshift(path.join(libDir, rel.replace(/\//g, path.sep))); - } - effectiveVj = mergeLoader(vj, fvj); - - } else if (opts.loader === 'optifine') { - /* - * OptiFine hat keine öffentliche Installations-API (Downloads laufen bewusst - * über eine Werbeseite). AeroMC lädt hier nichts selbst herunter – der Nutzer - * hat den offiziellen Installer bereits einmal sichtbar laufen lassen (siehe - * optifine:setup/optifine:confirm in main.js), der dabei ein normales - * Versions-Profil unter /versions// abgelegt hat, - * genau wie Fabric/Forge es tun. Wir lesen es nur noch ein und mergen es. - */ - const ofId = opts.loaderVersion; - if (!ofId) { - return { ok: false, message: 'Für diese Instanz ist keine OptiFine-Version hinterlegt. Bitte im Bearbeiten-Dialog einrichten.' }; - } - const ofJsonPath = path.join(opts.sharedDir, 'versions', ofId, ofId + '.json'); - if (!fs.existsSync(ofJsonPath)) { - return { ok: false, message: `OptiFine-Profil "${ofId}" wurde nicht gefunden. Bitte die Einrichtung im Bearbeiten-Dialog wiederholen.` }; - } - let ofvj; - try { ofvj = JSON.parse(fs.readFileSync(ofJsonPath, 'utf8')); } - catch (err) { return { ok: false, message: 'OptiFine-Profil ist beschädigt: ' + err.message }; } - for (const lib of ofvj.libraries || []) { - const art = lib.downloads && lib.downloads.artifact; - const rel = (art && art.path) || forge.mavenPath(lib.name); - const dest = path.join(libDir, rel.replace(/\//g, path.sep)); - if (!fs.existsSync(dest) && art && art.url) { - await downloadIfNeeded(art.url, dest, art.sha1 || null); - } - classpath.unshift(dest); - } - effectiveVj = mergeLoader(vj, ofvj); - } - - const finalClasspath = dedupeClasspath(classpath, opts.sharedDir); - - // Ohne Login: alles vorbereitet, aber kein Start (kein Crack-Bypass) - if (!opts.auth) { - return { - ok: false, - needAuth: true, - prepared: true, - java, - requiredJava: (vj.javaVersion && vj.javaVersion.majorVersion) || 8, - message: 'Alles heruntergeladen und startklar ✔ – bitte oben rechts über „👤 Anmelden" mit deinem Microsoft-Konto einloggen, dann startet Minecraft.', - }; - } - - // Start - const args = buildArgs(effectiveVj, { - auth: opts.auth, - gameDir: opts.gameDir, - sharedDir: opts.sharedDir, - nativesDir, - classpath: finalClasspath, - minMemMb: opts.minMemMb || 2048, - maxMemMb: opts.maxMemMb || 4096, - extraArgs: opts.extraArgs || '', - }); - - // Fenstergröße bzw. maximiert starten (Minecraft-Argumente) - if (opts.mcMaximized) args.push('--fullscreen'); - else if (opts.mcWidth && opts.mcHeight) args.push('--width', String(opts.mcWidth), '--height', String(opts.mcHeight)); - // Direkt einem Server beitreten: ab 1.20 per Quick Play, davor über die - // älteren Startparameter --server/--port (z. B. für "Beitreten" bei Freunden) - if (opts.quickPlayServer) { - const adresse = String(opts.quickPlayServer).trim(); - if (vorQuickPlay(opts.versionId)) { - const m = /^(.*?)(?::(\d+))?$/.exec(adresse); - args.push('--server', m[1]); - if (m[2]) args.push('--port', m[2]); - } else { - args.push('--quickPlayMultiplayer', adresse); - } - } - - ensureDir(opts.gameDir); - - // Pre-Launch-Befehl (bricht bei Fehler ab) - if (opts.preLaunchCommand && opts.preLaunchCommand.trim()) { - emit('log', { line: '[Pre-Launch] ' + opts.preLaunchCommand + '\n' }); - const pr = spawnSync(opts.preLaunchCommand, { cwd: opts.gameDir, shell: true, encoding: 'utf8' }); - if (pr.stdout) emit('log', { line: pr.stdout }); - if (pr.stderr) emit('log', { line: pr.stderr }); - if (pr.status !== 0) return { ok: false, message: 'Pre-Launch-Befehl fehlgeschlagen (Exit ' + pr.status + ').' }; - } - - emit('launch', { detail: 'Starte Minecraft …' }); - let cmd = java.path; - let spawnArgs = args; - if (opts.wrapperCommand && opts.wrapperCommand.trim()) { - const w = opts.wrapperCommand.trim().split(/\s+/); - cmd = w[0]; - spawnArgs = [...w.slice(1), java.path, ...args]; - } - const child = spawn(cmd, spawnArgs, { cwd: opts.gameDir, detached: false }); - const shutdownWatchdog = opts.wrapperCommand && opts.wrapperCommand.trim() - ? null - : processwatchdog.createProcessWatchdog({ - isRunning: () => child.exitCode === null && child.signalCode === null, - kill: () => child.kill(), - onForce: (graceMs) => emit('log', { - line: `[Launcher] Regulärer Client-Shutdown war nach ${graceMs / 1000} Sekunden noch nicht beendet; ` - + 'verbliebenen Java-Prozess beendet.\n', - }), - onError: () => emit('log', { - line: '[Launcher] Der nach dem regulären Client-Shutdown verbliebene Java-Prozess konnte nicht beendet werden.\n', - }), - }); - child.stdout.on('data', (d) => { - emit('log', { line: d.toString() }); - if (shutdownWatchdog) shutdownWatchdog.feed(d, 'stdout'); - }); - child.stderr.on('data', (d) => { - emit('log', { line: d.toString() }); - if (shutdownWatchdog) shutdownWatchdog.feed(d, 'stderr'); - }); - // Ende genau einmal melden – 'exit' und 'error' können beide kommen - let beendetGemeldet = false; - const meldeEnde = (code, cleanShutdown) => { - if (beendetGemeldet) return; - beendetGemeldet = true; - emit('exit', { code, cleanShutdown: !!cleanShutdown }); - // Post-Exit-Befehl - if (opts.postExitCommand && opts.postExitCommand.trim()) { - emit('log', { line: '[Post-Exit] ' + opts.postExitCommand + '\n' }); - try { - const po = spawnSync(opts.postExitCommand, { cwd: opts.gameDir, shell: true, encoding: 'utf8' }); - if (po.stdout) emit('log', { line: po.stdout }); - if (po.stderr) emit('log', { line: po.stderr }); - } catch { /* egal */ } - } - }; - child.on('exit', (code) => { - // vor end() lesen: sawCleanShutdown wird zwar nicht von end()/clear() - // zurückgesetzt, aber so bleibt die Reihenfolge unabhängig von internen Details - const cleanShutdown = !!(shutdownWatchdog && shutdownWatchdog.sawCleanShutdown); - if (shutdownWatchdog) shutdownWatchdog.end(); - meldeEnde(shutdownWatchdog && shutdownWatchdog.forced ? 0 : code, cleanShutdown); - }); - // ohne diesen Listener würde ein Fehlstart (z. B. falscher Java-Pfad) als - // unbehandeltes 'error'-Ereignis den Hauptprozess beenden - child.on('error', (err) => { - if (shutdownWatchdog) shutdownWatchdog.end(); - emit('log', { line: '[Fehler] Minecraft konnte nicht gestartet werden: ' + err.message + '\n' }); - meldeEnde(-1, false); - }); - - return { ok: true, pid: child.pid, java }; -} - -module.exports = { - prepareAndLaunch, getVersionJson, buildArgs, pickJava, rulesAllow, prepareLibraries, prepareAssets, - downloadIfNeeded, extractNatives, mergeLoader, dedupeClasspath, classpathArtifactKey, -}; +'use strict'; + +/* + * launcher.js – Vanilla-Start-Pipeline (Phase 2) + * ---------------------------------------------- + * Lädt Version-JSON, Client-JAR, Libraries, Natives und Assets herunter, + * wählt eine passende Java-Version und baut das Start-Kommando. + * + * Der eigentliche Prozess-Start ist an ein Konto gebunden (opts.auth): + * Ohne gültigen Microsoft-Login (Phase 3) wird alles vorbereitet, aber + * NICHT gestartet – wir bauen bewusst keinen Offline-/Crack-Bypass. + * + * Gemeinsame Spieldateien (versions/libraries/assets) liegen geteilt unter + * , damit mehrere Instanzen sie sich teilen (spart Platz). + */ + +const fs = require('fs'); +const path = require('path'); +const crypto = require('crypto'); +const { spawn, spawnSync } = require('child_process'); +const services = require('./services'); +const loaders = require('./loaders'); +const forge = require('./forge'); +const processwatchdog = require('./processwatchdog'); + +const UA = 'AeroMC-Launcher/0.2'; +const RESOURCES = 'https://resources.download.minecraft.net'; + +// --------------------------------------------------------------------------- +// kleine Helfer +// --------------------------------------------------------------------------- + +function ensureDir(d) { fs.mkdirSync(d, { recursive: true }); } + +function sha1File(file) { + try { + const h = crypto.createHash('sha1'); + h.update(fs.readFileSync(file)); + return h.digest('hex'); + } catch { return null; } +} + +async function fetchJson(url) { + const res = await fetch(url, { headers: { 'User-Agent': UA } }); + if (!res.ok) throw new Error('HTTP ' + res.status + ' bei ' + url); + return res.json(); +} + +// lädt eine Datei, überspringt sie bei passender sha1/Existenz +async function downloadIfNeeded(url, dest, sha1) { + if (fs.existsSync(dest)) { + if (!sha1 || sha1File(dest) === sha1) return { skipped: true, bytes: 0 }; + } + ensureDir(path.dirname(dest)); + const res = await fetch(url, { headers: { 'User-Agent': UA } }); + if (!res.ok) throw new Error('Download HTTP ' + res.status + ': ' + url); + const buf = Buffer.from(await res.arrayBuffer()); + fs.writeFileSync(dest, buf); + return { skipped: false, bytes: buf.length }; +} + +// begrenzte Parallelität für viele kleine Downloads (Assets) +async function runPool(items, worker, concurrency, onEach) { + let idx = 0, done = 0; + const total = items.length; + async function next() { + while (idx < total) { + const i = idx++; + await worker(items[i]); + done++; + if (onEach) onEach(done, total); + } + } + const runners = []; + for (let c = 0; c < Math.min(concurrency, total); c++) runners.push(next()); + await Promise.all(runners); +} + +// --------------------------------------------------------------------------- +// Regeln (Libraries & Argumente) +// --------------------------------------------------------------------------- + +const OS_NAME = 'windows'; + +function rulesAllow(rules) { + if (!rules || !rules.length) return true; + let action = 'disallow'; + for (const r of rules) { + let matches = true; + if (r.os && r.os.name && r.os.name !== OS_NAME) matches = false; + if (r.features) matches = false; // Demo-/Auflösungs-Features aus + if (matches) action = r.action; + } + return action === 'allow'; +} + +// --------------------------------------------------------------------------- +// Version-JSON +// --------------------------------------------------------------------------- + +async function getVersionJson(versionId, userDataDir, sharedDir) { + const dest = path.join(sharedDir, 'versions', versionId, versionId + '.json'); + if (fs.existsSync(dest)) { + try { return JSON.parse(fs.readFileSync(dest, 'utf8')); } catch { /* neu laden */ } + } + // URL aus dem Manifest suchen (bei Bedarf frisch laden, falls url fehlt) + let manifest = await services.getMcVersions(userDataDir); + let entry = (manifest.versions || []).find((v) => v.id === versionId); + if (!entry || !entry.url) { + manifest = await services.getMcVersions(userDataDir, 0); // erzwinge Refresh + entry = (manifest.versions || []).find((v) => v.id === versionId); + } + if (!entry || !entry.url) throw new Error('Version nicht im Mojang-Manifest gefunden: ' + versionId); + const vj = await fetchJson(entry.url); + ensureDir(path.dirname(dest)); + fs.writeFileSync(dest, JSON.stringify(vj)); + return vj; +} + +// --------------------------------------------------------------------------- +// Libraries + Natives -> Classpath +// --------------------------------------------------------------------------- + +async function prepareLibraries(vj, sharedDir, nativesDir, onProgress) { + const libDir = path.join(sharedDir, 'libraries'); + const classpath = []; + const libs = (vj.libraries || []).filter((l) => rulesAllow(l.rules)); + let i = 0; + for (const lib of libs) { + i++; + onProgress && onProgress({ phase: 'libraries', current: i, total: libs.length, detail: lib.name }); + + const dl = lib.downloads || {}; + // normales Artefakt -> Classpath + if (dl.artifact && dl.artifact.path) { + const dest = path.join(libDir, dl.artifact.path.replace(/\//g, path.sep)); + await downloadIfNeeded(dl.artifact.url, dest, dl.artifact.sha1); + classpath.push(dest); + } + // klassische Natives (vor 1.19) -> in nativesDir extrahieren + if (lib.natives && lib.natives[OS_NAME] && dl.classifiers) { + const key = lib.natives[OS_NAME].replace('${arch}', '64'); + const nat = dl.classifiers[key]; + if (nat) { + const dest = path.join(libDir, nat.path.replace(/\//g, path.sep)); + await downloadIfNeeded(nat.url, dest, nat.sha1); + await extractNatives(dest, nativesDir, lib.extract); + } + } + } + return classpath; +} + +function classpathArtifactKey(filePath, sharedDir) { + const libDir = path.join(sharedDir, 'libraries'); + const rel = path.relative(libDir, filePath); + if (rel.startsWith('..') || path.isAbsolute(rel)) return path.normalize(filePath).toLowerCase(); + + const parts = rel.split(path.sep); + if (parts.length < 4) return rel.replace(/\\/g, '/').toLowerCase(); + + const fileName = parts[parts.length - 1]; + const version = parts[parts.length - 2]; + const artifact = parts[parts.length - 3]; + const group = parts.slice(0, -3).join('/').toLowerCase(); + const base = fileName.replace(/\.[^.]+$/, ''); + const prefix = `${artifact}-${version}`; + const classifier = base.startsWith(prefix + '-') ? base.slice(prefix.length + 1).toLowerCase() : ''; + return `${group}:${artifact.toLowerCase()}:${classifier}`; +} + +function dedupeClasspath(classpath, sharedDir) { + const seen = new Set(); + const out = []; + for (const filePath of classpath) { + const key = classpathArtifactKey(filePath, sharedDir); + if (seen.has(key)) continue; + seen.add(key); + out.push(filePath); + } + return out; +} + +// entpackt eine Natives-JAR (ZIP) nach nativesDir (ohne externe Abhängigkeit) +async function extractNatives(jarPath, nativesDir, extractRule) { + ensureDir(nativesDir); + const exclude = (extractRule && extractRule.exclude) || ['META-INF/']; + const data = fs.readFileSync(jarPath); + // ZIP End-of-Central-Directory finden + let eocd = -1; + for (let i = data.length - 22; i >= 0 && i > data.length - 22 - 65536; i--) { + if (data.readUInt32LE(i) === 0x06054b50) { eocd = i; break; } + } + if (eocd < 0) return; + const count = data.readUInt16LE(eocd + 10); + let off = data.readUInt32LE(eocd + 16); + const zlib = require('zlib'); + for (let n = 0; n < count; n++) { + if (data.readUInt32LE(off) !== 0x02014b50) break; + const method = data.readUInt16LE(off + 10); + const compSize = data.readUInt32LE(off + 20); + const nameLen = data.readUInt16LE(off + 28); + const extraLen = data.readUInt16LE(off + 30); + const commentLen = data.readUInt16LE(off + 32); + const localOff = data.readUInt32LE(off + 42); + const name = data.toString('utf8', off + 46, off + 46 + nameLen); + off += 46 + nameLen + extraLen + commentLen; + + if (name.endsWith('/')) continue; + if (exclude.some((ex) => name.startsWith(ex))) continue; + + // lokalen Header lesen, um Datenoffset zu bestimmen + const lNameLen = data.readUInt16LE(localOff + 26); + const lExtraLen = data.readUInt16LE(localOff + 28); + const dataStart = localOff + 30 + lNameLen + lExtraLen; + const raw = data.subarray(dataStart, dataStart + compSize); + let out; + try { out = method === 0 ? raw : zlib.inflateRawSync(raw); } catch { continue; } + const target = path.join(nativesDir, path.basename(name)); + fs.writeFileSync(target, out); + } +} + +// --------------------------------------------------------------------------- +// Assets +// --------------------------------------------------------------------------- + +async function prepareAssets(vj, sharedDir, onProgress) { + const ai = vj.assetIndex; + if (!ai) return; + const indexFile = path.join(sharedDir, 'assets', 'indexes', ai.id + '.json'); + // Merker: einmal vollständig geprüfte Assets nicht erneut durchgehen (spart ~1,5 s pro Start) + const doneMark = path.join(sharedDir, 'assets', 'indexes', ai.id + '.complete'); + if (fs.existsSync(doneMark) && fs.existsSync(indexFile)) return; + + await downloadIfNeeded(ai.url, indexFile, ai.sha1); + const index = JSON.parse(fs.readFileSync(indexFile, 'utf8')); + const objects = index.objects || {}; + const entries = Object.values(objects); + const objDir = path.join(sharedDir, 'assets', 'objects'); + + await runPool(entries, async (o) => { + const sub = o.hash.slice(0, 2); + const dest = path.join(objDir, sub, o.hash); + if (fs.existsSync(dest)) return; + await downloadIfNeeded(`${RESOURCES}/${sub}/${o.hash}`, dest, o.hash); + }, 16, (done, total) => onProgress && onProgress({ phase: 'assets', current: done, total, detail: 'Assets' })); + + try { fs.writeFileSync(doneMark, new Date().toISOString()); } catch { /* egal */ } +} + +// --------------------------------------------------------------------------- +// Java-Auswahl +// --------------------------------------------------------------------------- + +function pickJava(vj, preferredPath) { + const required = (vj.javaVersion && vj.javaVersion.majorVersion) || 8; + let preferred = null; + if (preferredPath && preferredPath.trim()) { + const info = services.probeJava(preferredPath); + if (info) { + preferred = { path: preferredPath, major: info.major, forced: true }; + if (info.major === required) return preferred; + } + } + const jvms = services.scanJava(); + // Mod-Loader und Mods unterstützen neuere Java-Versionen nicht automatisch. + // Deshalb ausschließlich die von Mojang angegebene Major-Version verwenden. + const x64 = jvms.filter((j) => j.arch === 'x64'); + const exact = x64.find((j) => j.major === required); + if (exact) return { path: exact.path, major: exact.major }; + const fallback = preferred || x64[0] || jvms[0]; + return fallback ? { + path: fallback.path, + major: fallback.major, + forced: !!fallback.forced, + mismatch: required, + } : null; +} + +// --------------------------------------------------------------------------- +// Argumente +// --------------------------------------------------------------------------- + +function substitute(str, map) { + return str.replace(/\$\{([^}]+)\}/g, (m, k) => (k in map ? map[k] : m)); +} + +function collectArgs(argList, map) { + const out = []; + for (const a of argList || []) { + if (typeof a === 'string') { out.push(substitute(a, map)); continue; } + if (a && a.rules && !rulesAllow(a.rules)) continue; + const val = a && a.value; + if (typeof val === 'string') out.push(substitute(val, map)); + else if (Array.isArray(val)) val.forEach((v) => out.push(substitute(v, map))); + } + return out; +} + +// führt Vanilla-Version + Loader-Profil zusammen (mainClass + Argumente) +function mergeLoader(vj, lp) { + const merged = Object.assign({}, vj, { mainClass: lp.mainClass || vj.mainClass }); + merged.arguments = { + jvm: [...((vj.arguments && vj.arguments.jvm) || []), ...((lp.arguments && lp.arguments.jvm) || [])], + game: [...((vj.arguments && vj.arguments.game) || []), ...((lp.arguments && lp.arguments.game) || [])], + }; + return merged; +} + +function buildArgs(vj, ctx) { + const map = { + auth_player_name: ctx.auth.name, + version_name: vj.id, + library_directory: path.join(ctx.sharedDir, 'libraries'), + classpath_separator: path.delimiter, + game_directory: ctx.gameDir, + assets_root: path.join(ctx.sharedDir, 'assets'), + assets_index_name: vj.assets || (vj.assetIndex && vj.assetIndex.id) || 'legacy', + auth_uuid: ctx.auth.uuid, + auth_access_token: ctx.auth.accessToken, + clientid: ctx.auth.clientId || '', + auth_xuid: ctx.auth.xuid || '', + user_type: ctx.auth.userType || 'msa', + version_type: vj.type || 'release', + natives_directory: ctx.nativesDir, + launcher_name: 'AeroMC', + launcher_version: '0.2', + classpath: ctx.classpath.join(path.delimiter), + game_assets: path.join(ctx.sharedDir, 'assets', 'virtual', 'legacy'), + auth_session: 'token:' + ctx.auth.accessToken, + user_properties: '{}', + }; + + let jvm, game; + if (vj.arguments) { + jvm = collectArgs(vj.arguments.jvm, map); + game = collectArgs(vj.arguments.game, map); + } else { + // altes Format (< 1.13) + jvm = ['-Djava.library.path=' + ctx.nativesDir, '-cp', ctx.classpath.join(path.delimiter)]; + game = (vj.minecraftArguments || '').split(' ').filter(Boolean).map((a) => substitute(a, map)); + } + // RAM + jvm = ['-Xms' + ctx.minMemMb + 'M', '-Xmx' + ctx.maxMemMb + 'M', ...jvm]; + if (ctx.extraArgs) jvm = [...ctx.extraArgs.split(' ').filter(Boolean), ...jvm]; + // AeroMC-Umhang-Agent (zeigt eigene Umhänge im Spiel, siehe agent/) + if (ctx.javaAgent) jvm = ['-javaagent:' + ctx.javaAgent, ...jvm]; + + return [...jvm, vj.mainClass, ...game]; +} + +// --------------------------------------------------------------------------- +// Hauptfunktion +// --------------------------------------------------------------------------- + +/* + * opts: { versionId, gameDir, sharedDir, userDataDir, javaPath, minMemMb, maxMemMb, extraArgs, auth } + * auth: null (kein Login) ODER { name, uuid, accessToken, userType } + * onProgress: (evt) => void + */ +// true für Release-Versionen vor 1.20 (kein Quick Play). Snapshots und +// Unbekanntes gelten als neu – die meisten heutigen Snapshots sind > 1.20. +function vorQuickPlay(versionId) { + const m = /^1\.(\d+)(?:\.\d+)?(?:-(?:pre|rc)\d+)?$/.exec(String(versionId || '').trim()); + return !!m && Number(m[1]) < 20; +} + +async function prepareAndLaunch(opts, onProgress) { + const emit = (phase, extra) => onProgress && onProgress(Object.assign({ phase }, extra)); + + emit('version', { detail: 'Version-Daten laden …' }); + const vj = await getVersionJson(opts.versionId, opts.userDataDir, opts.sharedDir); + + const nativesDir = path.join(opts.sharedDir, 'versions', vj.id, 'natives'); + ensureDir(nativesDir); + + // Client-JAR + emit('client', { detail: 'Client herunterladen …' }); + const clientJar = path.join(opts.sharedDir, 'versions', vj.id, vj.id + '.jar'); + if (vj.downloads && vj.downloads.client) { + await downloadIfNeeded(vj.downloads.client.url, clientJar, vj.downloads.client.sha1); + } + + // Libraries + Natives + const classpath = await prepareLibraries(vj, opts.sharedDir, nativesDir, onProgress); + classpath.push(clientJar); + + // Assets + await prepareAssets(vj, opts.sharedDir, onProgress); + + // Java (VOR dem Loader – Forge-Prozessoren brauchen Java) + emit('java', { detail: 'Java wählen …' }); + let java = pickJava(vj, opts.javaPath); + // Nichts Passendes da? Dann darf der Launcher die richtige Fassung selbst + // holen – opts.ensureJava wird vom Hauptprozess gestellt. + if ((!java || java.mismatch) && opts.ensureJava) { + const benoetigt = (vj.javaVersion && vj.javaVersion.majorVersion) || 8; + emit('java', { detail: `Java ${benoetigt} wird geladen …` }); + try { + const geholt = await opts.ensureJava(benoetigt, (p) => emit('java', p)); + if (geholt && geholt.path) java = { path: geholt.path, major: geholt.major }; + } catch (err) { + emit('log', { line: '[Java] Automatischer Download fehlgeschlagen: ' + err.message + '\n' }); + } + } + if (!java) return { ok: false, message: 'Keine Java-Installation gefunden. Bitte in den Einstellungen Java festlegen.' }; + if (java.mismatch) { + return { + ok: false, + requiredJava: java.mismatch, + message: `Minecraft ${vj.id} benötigt Java ${java.mismatch}, gefunden wurde nur Java ${java.major || 'unbekannt'}. ` + + 'Bitte Auto-Java aktivieren oder eine passende Java-Installation auswählen.', + }; + } + + // Mod-Loader + let effectiveVj = vj; + const libDir = path.join(opts.sharedDir, 'libraries'); + + if (opts.loader === 'fabric' || opts.loader === 'quilt') { + emit('loader', { detail: opts.loader + ' vorbereiten …' }); + let lp; + // Profil zwischenspeichern: spart bei festgelegter Loader-Version die Netzabfrage + const cacheFile = opts.loaderVersion + ? path.join(opts.sharedDir, 'loaders', `${opts.loader}-${vj.id}-${opts.loaderVersion}.json`) + : null; + if (cacheFile && fs.existsSync(cacheFile)) { + try { lp = JSON.parse(fs.readFileSync(cacheFile, 'utf8')); } catch { lp = null; } + } + if (!lp) { + try { + const r = await loaders.resolveLoaderProfile(opts.loader, vj.id, opts.loaderVersion); + lp = r.profile; + const target = cacheFile + || path.join(opts.sharedDir, 'loaders', `${opts.loader}-${vj.id}-${r.loaderVersion}.json`); + try { ensureDir(path.dirname(target)); fs.writeFileSync(target, JSON.stringify(lp)); } catch { /* egal */ } + } catch (err) { return { ok: false, message: err.message }; } + } + const loaderLibs = lp.libraries || []; + let li = 0; + for (const lib of loaderLibs) { + li++; + onProgress && onProgress({ phase: 'loader', current: li, total: loaderLibs.length, detail: lib.name }); + const { relPath, url } = loaders.mavenToUrl(lib.url, lib.name); + const dest = path.join(libDir, relPath.replace(/\//g, path.sep)); + await downloadIfNeeded(url, dest, lib.sha1 || null); + classpath.unshift(dest); + } + effectiveVj = mergeLoader(vj, lp); + + } else if (opts.loader === 'forge' || opts.loader === 'neoforge') { + let lv = opts.loaderVersion; + if (!lv) { + const list = await loaders.listLoaderVersions(opts.loader, vj.id); + if (!list.length) return { ok: false, message: `Keine ${opts.loader}-Version für ${vj.id} gefunden.` }; + lv = list[0].version; + } + let fvj; + try { + fvj = await forge.installForge({ + loader: opts.loader, mcVersion: vj.id, loaderVersion: lv, + sharedDir: opts.sharedDir, javaPath: java.path, clientJar, + clientMappingsUrl: vj.downloads && vj.downloads.client_mappings && vj.downloads.client_mappings.url, + onProgress, + }); + } catch (err) { + return { ok: false, message: (opts.loader === 'forge' ? 'Forge' : 'NeoForge') + '-Installation fehlgeschlagen: ' + err.message }; + } + for (const lib of fvj.libraries || []) { + const art = lib.downloads && lib.downloads.artifact; + const rel = (art && art.path) || forge.mavenPath(lib.name); + classpath.unshift(path.join(libDir, rel.replace(/\//g, path.sep))); + } + effectiveVj = mergeLoader(vj, fvj); + + } else if (opts.loader === 'optifine') { + /* + * OptiFine hat keine öffentliche Installations-API (Downloads laufen bewusst + * über eine Werbeseite). AeroMC lädt hier nichts selbst herunter – der Nutzer + * hat den offiziellen Installer bereits einmal sichtbar laufen lassen (siehe + * optifine:setup/optifine:confirm in main.js), der dabei ein normales + * Versions-Profil unter /versions// abgelegt hat, + * genau wie Fabric/Forge es tun. Wir lesen es nur noch ein und mergen es. + */ + const ofId = opts.loaderVersion; + if (!ofId) { + return { ok: false, message: 'Für diese Instanz ist keine OptiFine-Version hinterlegt. Bitte im Bearbeiten-Dialog einrichten.' }; + } + const ofJsonPath = path.join(opts.sharedDir, 'versions', ofId, ofId + '.json'); + if (!fs.existsSync(ofJsonPath)) { + return { ok: false, message: `OptiFine-Profil "${ofId}" wurde nicht gefunden. Bitte die Einrichtung im Bearbeiten-Dialog wiederholen.` }; + } + let ofvj; + try { ofvj = JSON.parse(fs.readFileSync(ofJsonPath, 'utf8')); } + catch (err) { return { ok: false, message: 'OptiFine-Profil ist beschädigt: ' + err.message }; } + for (const lib of ofvj.libraries || []) { + const art = lib.downloads && lib.downloads.artifact; + const rel = (art && art.path) || forge.mavenPath(lib.name); + const dest = path.join(libDir, rel.replace(/\//g, path.sep)); + if (!fs.existsSync(dest) && art && art.url) { + await downloadIfNeeded(art.url, dest, art.sha1 || null); + } + classpath.unshift(dest); + } + effectiveVj = mergeLoader(vj, ofvj); + } + + const finalClasspath = dedupeClasspath(classpath, opts.sharedDir); + + // Ohne Login: alles vorbereitet, aber kein Start (kein Crack-Bypass) + if (!opts.auth) { + return { + ok: false, + needAuth: true, + prepared: true, + java, + requiredJava: (vj.javaVersion && vj.javaVersion.majorVersion) || 8, + message: 'Alles heruntergeladen und startklar ✔ – bitte oben rechts über „👤 Anmelden" mit deinem Microsoft-Konto einloggen, dann startet Minecraft.', + }; + } + + // Start + const args = buildArgs(effectiveVj, { + auth: opts.auth, + gameDir: opts.gameDir, + sharedDir: opts.sharedDir, + nativesDir, + classpath: finalClasspath, + minMemMb: opts.minMemMb || 2048, + maxMemMb: opts.maxMemMb || 4096, + extraArgs: opts.extraArgs || '', + javaAgent: opts.javaAgent || '', + }); + + // Fenstergröße bzw. maximiert starten (Minecraft-Argumente) + if (opts.mcMaximized) args.push('--fullscreen'); + else if (opts.mcWidth && opts.mcHeight) args.push('--width', String(opts.mcWidth), '--height', String(opts.mcHeight)); + // Direkt einem Server beitreten: ab 1.20 per Quick Play, davor über die + // älteren Startparameter --server/--port (z. B. für "Beitreten" bei Freunden) + if (opts.quickPlayServer) { + const adresse = String(opts.quickPlayServer).trim(); + if (vorQuickPlay(opts.versionId)) { + const m = /^(.*?)(?::(\d+))?$/.exec(adresse); + args.push('--server', m[1]); + if (m[2]) args.push('--port', m[2]); + } else { + args.push('--quickPlayMultiplayer', adresse); + } + } + + ensureDir(opts.gameDir); + + // Pre-Launch-Befehl (bricht bei Fehler ab) + if (opts.preLaunchCommand && opts.preLaunchCommand.trim()) { + emit('log', { line: '[Pre-Launch] ' + opts.preLaunchCommand + '\n' }); + const pr = spawnSync(opts.preLaunchCommand, { cwd: opts.gameDir, shell: true, encoding: 'utf8' }); + if (pr.stdout) emit('log', { line: pr.stdout }); + if (pr.stderr) emit('log', { line: pr.stderr }); + if (pr.status !== 0) return { ok: false, message: 'Pre-Launch-Befehl fehlgeschlagen (Exit ' + pr.status + ').' }; + } + + emit('launch', { detail: 'Starte Minecraft …' }); + let cmd = java.path; + let spawnArgs = args; + if (opts.wrapperCommand && opts.wrapperCommand.trim()) { + const w = opts.wrapperCommand.trim().split(/\s+/); + cmd = w[0]; + spawnArgs = [...w.slice(1), java.path, ...args]; + } + const child = spawn(cmd, spawnArgs, { cwd: opts.gameDir, detached: false }); + const shutdownWatchdog = opts.wrapperCommand && opts.wrapperCommand.trim() + ? null + : processwatchdog.createProcessWatchdog({ + isRunning: () => child.exitCode === null && child.signalCode === null, + kill: () => child.kill(), + onForce: (graceMs) => emit('log', { + line: `[Launcher] Regulärer Client-Shutdown war nach ${graceMs / 1000} Sekunden noch nicht beendet; ` + + 'verbliebenen Java-Prozess beendet.\n', + }), + onError: () => emit('log', { + line: '[Launcher] Der nach dem regulären Client-Shutdown verbliebene Java-Prozess konnte nicht beendet werden.\n', + }), + }); + child.stdout.on('data', (d) => { + emit('log', { line: d.toString() }); + if (shutdownWatchdog) shutdownWatchdog.feed(d, 'stdout'); + }); + child.stderr.on('data', (d) => { + emit('log', { line: d.toString() }); + if (shutdownWatchdog) shutdownWatchdog.feed(d, 'stderr'); + }); + // Ende genau einmal melden – 'exit' und 'error' können beide kommen + let beendetGemeldet = false; + const meldeEnde = (code, cleanShutdown) => { + if (beendetGemeldet) return; + beendetGemeldet = true; + emit('exit', { code, cleanShutdown: !!cleanShutdown }); + // Post-Exit-Befehl + if (opts.postExitCommand && opts.postExitCommand.trim()) { + emit('log', { line: '[Post-Exit] ' + opts.postExitCommand + '\n' }); + try { + const po = spawnSync(opts.postExitCommand, { cwd: opts.gameDir, shell: true, encoding: 'utf8' }); + if (po.stdout) emit('log', { line: po.stdout }); + if (po.stderr) emit('log', { line: po.stderr }); + } catch { /* egal */ } + } + }; + child.on('exit', (code) => { + // vor end() lesen: sawCleanShutdown wird zwar nicht von end()/clear() + // zurückgesetzt, aber so bleibt die Reihenfolge unabhängig von internen Details + const cleanShutdown = !!(shutdownWatchdog && shutdownWatchdog.sawCleanShutdown); + if (shutdownWatchdog) shutdownWatchdog.end(); + meldeEnde(shutdownWatchdog && shutdownWatchdog.forced ? 0 : code, cleanShutdown); + }); + // ohne diesen Listener würde ein Fehlstart (z. B. falscher Java-Pfad) als + // unbehandeltes 'error'-Ereignis den Hauptprozess beenden + child.on('error', (err) => { + if (shutdownWatchdog) shutdownWatchdog.end(); + emit('log', { line: '[Fehler] Minecraft konnte nicht gestartet werden: ' + err.message + '\n' }); + meldeEnde(-1, false); + }); + + return { ok: true, pid: child.pid, java }; +} + +module.exports = { + prepareAndLaunch, getVersionJson, buildArgs, pickJava, rulesAllow, prepareLibraries, prepareAssets, + downloadIfNeeded, extractNatives, mergeLoader, dedupeClasspath, classpathArtifactKey, +}; diff --git a/src/main.js b/src/main.js index 20454c5..3f82268 100644 --- a/src/main.js +++ b/src/main.js @@ -1864,6 +1864,176 @@ ipcMain.handle('skin:currentData', async () => { } }); +// ---------- Umhänge (offiziell von Mojang + eigene AeroMC-Umhänge) ---------- +// Bilder immer als data:-Adresse in die Oberfläche (fremde Server schicken +// keine CORS-Kopfzeilen – die 3D-Ansicht dürfte sie sonst nicht laden) +async function bildAlsDataUri(url) { + const res = await fetch(url, { headers: { 'User-Agent': 'AeroMC-Launcher' } }); + if (!res.ok) throw new Error('HTTP ' + res.status); + const daten = Buffer.from(await res.arrayBuffer()); + if (daten.length > 6 * 1024 * 1024) throw new Error('Bild zu groß'); + return 'data:image/png;base64,' + daten.toString('base64'); +} + +// PNG mit Seitenverhältnis 2:1 (64×32 … 1024×512) – wie der Server es verlangt +function umhangPngAusBase64(base64) { + const daten = Buffer.from(String(base64 || ''), 'base64'); + if (daten.length < 33 || !daten.subarray(0, 8).equals(PNG_KENNUNG)) return null; + const breite = daten.readUInt32BE(16); + const hoehe = daten.readUInt32BE(20); + if (![64, 128, 256, 512, 1024].includes(breite) || breite !== 2 * hoehe) return null; + return daten; +} + +// Umhang eines beliebigen Spielers fürs Anzeigen: eigener AeroMC-Umhang hat +// Vorrang, sonst der offizielle aus Mojangs Profil. 5 Minuten gemerkt. +const umhangCache = new Map(); // uuid -> { dataUri, quelle, zeit } +async function umhangFuer(uuid) { + const id = String(uuid || '').replace(/-/g, '').toLowerCase(); + if (!/^[0-9a-f]{32}$/.test(id)) return null; + const gemerkt = umhangCache.get(id); + if (gemerkt && Date.now() - gemerkt.zeit < 5 * 60 * 1000) return gemerkt; + let ergebnis = { dataUri: null, quelle: null, zeit: Date.now() }; + try { + const aero = await friends.getCapes([id]); + const eintrag = aero.ok && aero.capes && aero.capes[id]; + if (eintrag && eintrag.url) ergebnis = { dataUri: await bildAlsDataUri(eintrag.url), quelle: 'aeromc', zeit: Date.now() }; + } catch { /* weiter mit Mojang */ } + if (!ergebnis.dataUri) { + try { + const res = await fetch('https://sessionserver.mojang.com/session/minecraft/profile/' + id, { headers: { 'User-Agent': 'AeroMC-Launcher' } }); + if (res.ok) { + const profil = await res.json(); + const eig = (profil.properties || []).find((p) => p.name === 'textures'); + const tex = eig ? JSON.parse(Buffer.from(eig.value, 'base64').toString('utf8')) : {}; + const cape = tex.textures && tex.textures.CAPE; + if (cape && cape.url) ergebnis = { dataUri: await bildAlsDataUri(skins.aufHttps(cape.url)), quelle: 'mojang', zeit: Date.now() }; + } + } catch { /* kein Umhang */ } + } + umhangCache.set(id, ergebnis); + return ergebnis; +} +ipcMain.handle('cape:forUuid', async (_e, uuid) => { + const r = await umhangFuer(uuid); + return r && r.dataUri ? { dataUri: r.dataUri, quelle: r.quelle } : null; +}); + +// Übersicht fürs Skin-Fenster: offizielle Umhänge + eigener AeroMC-Umhang +ipcMain.handle('cape:info', async () => { + const konto = aktivesFreundeKonto(); + const token = await aktivesToken(); + if (!konto || !token) return { ok: false, message: 'Kein angemeldetes Konto.' }; + const ergebnis = { ok: true, name: konto.username, offiziell: [], aeromc: null, aeromcFehler: '' }; + try { + const p = await skins.holeProfil(token); + if (p.ok) ergebnis.offiziell = p.capes || []; + } catch { /* ohne offizielle Liste weiter */ } + const aero = await friends.getCapes([konto.uuid]); + if (aero.ok) ergebnis.aeromc = aero.capes[String(konto.uuid).replace(/-/g, '').toLowerCase()] || null; + else { ergebnis.aeromcFehler = aero.message; ergebnis.aeromcFehlt = !!aero.fehlt; } + return ergebnis; +}); + +ipcMain.handle('cape:setOfficial', async (_e, capeId) => { + const token = await aktivesToken(); + if (!token) return { ok: false, message: 'Kein angemeldetes Konto.' }; + try { + const res = await skins.setzeUmhang(token, capeId || null); + if (res.ok) { umhangCache.clear(); broadcast('skin:changed', { quelle: 'umhang' }); } + return res; + } catch (err) { return { ok: false, message: 'Umhang konnte nicht gesetzt werden: ' + err.message }; } +}); + +// Der Umhang-Agent muss als echte Datei vorliegen (Java liest nicht aus app.asar): +// einmal nach userData kopieren, Dateiname mit Größe, damit ein Update ihn ersetzt. +// Rückgabe: "pfad=serveradresse" für -javaagent, oder '' wenn es nicht klappt. +function umhangAgent() { + try { + const quelle = path.join(__dirname, 'assets', 'agent', 'aeromc-capes.jar'); + const groesse = fs.statSync(quelle).size; + const ordner = path.join(app.getPath('userData'), 'agent'); + const ziel = path.join(ordner, `aeromc-capes-${groesse}.jar`); + if (!fs.existsSync(ziel) || fs.statSync(ziel).size !== groesse) { + fs.mkdirSync(ordner, { recursive: true }); + fs.writeFileSync(ziel, fs.readFileSync(quelle)); + for (const alt of fs.readdirSync(ordner)) { + if (alt !== path.basename(ziel) && /^aeromc-capes-\d+\.jar$/.test(alt)) { try { fs.unlinkSync(path.join(ordner, alt)); } catch { /* noch in Benutzung */ } } + } + } + return `${ziel}=${friends.BASIS_URL}`; + } catch (err) { + console.error('Umhang-Agent nicht verfügbar:', err.message); + return ''; + } +} + +// verständliche Meldung, wenn der Server das neue Plugin noch nicht hat +function umhangFehler(res) { + if (res && res.code === 'rest_no_route') return { ok: false, message: 'Der Server kennt noch keine Umhänge (Plugin „AeroMC Freunde“ 1.5.0 nötig).' }; + return res; +} + +ipcMain.handle('cape:upload', async (_e, base64) => { + const konto = aktivesFreundeKonto(); + if (!konto) return { ok: false, message: 'Kein angemeldetes Konto.' }; + if (!umhangPngAusBase64(base64)) return { ok: false, message: 'Ungültiger Umhang (PNG mit 64×32 bis 1024×512 Pixeln nötig).' }; + const res = await friends.uploadCape(konto.uuid, base64); + if (res.ok) { umhangCache.clear(); broadcast('skin:changed', { quelle: 'umhang' }); } + return res.ok ? { ok: true, cape: res.data && res.data.cape } : umhangFehler(res); +}); + +ipcMain.handle('cape:remove', async () => { + const konto = aktivesFreundeKonto(); + if (!konto) return { ok: false, message: 'Kein angemeldetes Konto.' }; + const res = await friends.removeCape(konto.uuid); + if (res.ok) { umhangCache.clear(); broadcast('skin:changed', { quelle: 'umhang' }); } + return res.ok ? res : umhangFehler(res); +}); + +// für den Editor: eigener Umhang, sonst der getragene offizielle +ipcMain.handle('cape:currentData', async () => { + const konto = aktivesFreundeKonto(); + if (!konto) return { ok: false, message: 'Kein angemeldetes Konto.' }; + umhangCache.delete(String(konto.uuid).replace(/-/g, '').toLowerCase()); + const r = await umhangFuer(konto.uuid); + if (!r || !r.dataUri) return { ok: false, keiner: true, message: 'Dein Konto hat noch keinen Umhang.' }; + return { ok: true, dataUri: r.dataUri, quelle: r.quelle }; +}); + +// Bild wählen: art 'umhang' = fertige Umhang-Datei (PNG), 'bild' = beliebiges Motiv zum Einsetzen +ipcMain.handle('cape:chooseFile', async (e, art) => { + const motiv = art === 'bild'; + const res = await dialog.showOpenDialog(BrowserWindow.fromWebContents(e.sender) || mainWindow, { + title: motiv ? 'Bild für den Umhang wählen' : 'Umhang-Datei öffnen', + properties: ['openFile'], + filters: motiv + ? [{ name: 'Bilder', extensions: ['png', 'jpg', 'jpeg', 'gif', 'webp', 'bmp'] }] + : [{ name: 'PNG-Bild', extensions: ['png'] }], + }); + if (res.canceled || !res.filePaths.length) return { ok: false, canceled: true }; + const pfad = res.filePaths[0]; + try { + const st = fs.statSync(pfad); + if (st.size > 15 * 1024 * 1024) return { ok: false, message: 'Die Datei ist zu groß (über 15 MB).' }; + const endung = path.extname(pfad).slice(1).toLowerCase().replace('jpg', 'jpeg'); + return { ok: true, pfad, dataUri: `data:image/${endung || 'png'};base64,` + fs.readFileSync(pfad).toString('base64') }; + } catch (err) { return { ok: false, message: 'Datei nicht lesbar: ' + err.message }; } +}); + +ipcMain.handle('cape:saveData', async (e, base64) => { + const daten = umhangPngAusBase64(base64); + if (!daten) return { ok: false, message: 'Ungültige Umhang-Daten.' }; + const res = await dialog.showSaveDialog(BrowserWindow.fromWebContents(e.sender) || mainWindow, { + title: 'Umhang speichern', + defaultPath: path.join(app.getPath('pictures'), 'umhang.png'), + filters: [{ name: 'PNG-Bild', extensions: ['png'] }], + }); + if (res.canceled || !res.filePath) return { ok: false, canceled: true }; + try { fs.writeFileSync(res.filePath, daten); return { ok: true, pfad: res.filePath }; } + catch (err) { return { ok: false, message: 'Speichern fehlgeschlagen: ' + err.message }; } +}); + ipcMain.handle('skin:readData', (_e, dateiPfad) => { const geprueft = skins.pruefeDatei(dateiPfad); if (!geprueft.ok) return geprueft; @@ -3602,6 +3772,7 @@ ipcMain.handle('instances:launch', async (_e, id, accountId, launchOpts) => { if (settings.autoModUpdates) modUpdates = await modUpdatesVorDemStart(id).catch(() => null); const opts = { + javaAgent: settings.aeromcCapes === false ? '' : umhangAgent(), versionId: inst.minecraft.version, loader: inst.minecraft.loader || 'vanilla', loaderVersion: inst.minecraft.loaderVersion || '', diff --git a/src/preload.js b/src/preload.js index c95c742..7bc32ed 100644 --- a/src/preload.js +++ b/src/preload.js @@ -159,6 +159,14 @@ contextBridge.exposeInMainWorld('api', { skinReadData: (pfad) => ipcRenderer.invoke('skin:readData', pfad), skinSaveData: (base64) => ipcRenderer.invoke('skin:saveData', base64), skinApplyData: (base64, variante) => ipcRenderer.invoke('skin:applyData', base64, variante), + capeInfo: () => ipcRenderer.invoke('cape:info'), + capeForUuid: (uuid) => ipcRenderer.invoke('cape:forUuid', uuid), + capeSetOfficial: (id) => ipcRenderer.invoke('cape:setOfficial', id), + capeUpload: (base64) => ipcRenderer.invoke('cape:upload', base64), + capeRemove: () => ipcRenderer.invoke('cape:remove'), + capeCurrentData: () => ipcRenderer.invoke('cape:currentData'), + capeChooseFile: (art) => ipcRenderer.invoke('cape:chooseFile', art), + capeSaveData: (base64) => ipcRenderer.invoke('cape:saveData', base64), authRemove: (id) => ipcRenderer.invoke('auth:remove', id), authLogin: () => ipcRenderer.invoke('auth:login'), authLogout: () => ipcRenderer.invoke('auth:logout'), diff --git a/src/renderer.js b/src/renderer.js index 340d099..3278232 100644 --- a/src/renderer.js +++ b/src/renderer.js @@ -1564,7 +1564,9 @@ async function applySkinBackground(uuidOverride) { // schmaler Alex-Skin mit breiten Armen falsch aus (grauer Streifen am Arm) let modell = s.bgSkinModel === 'slim' || s.bgSkinModel === 'classic' ? s.bgSkinModel : ''; if (!modell) { try { modell = await window.api.skinModelFor(uuid); } catch { modell = 'classic'; } } - const local = await renderSkin3D(`https://crafthead.net/skin/${uuid}`, s.bgSkinPose || 'walking', { modell }); + let umhang = null; + try { const r = await window.api.capeForUuid(uuid); umhang = r ? r.dataUri : null; } catch { /* ohne Umhang */ } + const local = await renderSkin3D(`https://crafthead.net/skin/${uuid}`, s.bgSkinPose || 'walking', { modell, umhang }); if (local) { root.style.setProperty('--bg-skin', `url("${local}")`); return; } // 2) Rückfall: externe Render-Dienste @@ -1711,6 +1713,7 @@ async function renderSkin3D(quelle, poseKey, opts = {}) { viewer.autoRotate = false; viewer.animation = null; pose.apply(viewer.playerObject); + if (opts.umhang) { try { await viewer.loadCape(opts.umhang); } catch { /* ohne Umhang */ } } viewer.render(); const data = canvas.toDataURL('image/png'); @@ -1740,6 +1743,7 @@ const ICONS_SVG = { export: '', trash: '', chart: '', + search: '', }; function svgIcon(name) { const p = ICONS_SVG[name]; @@ -1909,6 +1913,17 @@ function buildCard(inst) { return card; } +// Suchfeld in der Werkzeugleiste: standardmäßig nur eine Lupe +function sucheOeffnen() { + el('search-wrap').classList.add('offen'); + el('search').focus(); + el('search').select(); +} +function sucheSchliessen() { + el('search-wrap').classList.remove('offen'); + if (document.activeElement === el('search')) el('search').blur(); +} + function render() { const q = el('search').value.trim().toLowerCase(); const grid = el('grid'); @@ -2607,7 +2622,7 @@ function schliesseSkinViewer(bildId) { * Mausrad zoomt -- kommt von skinview3d selbst). Klappt das Rendern nicht, * wird stattdessen ein Hinweistext gezeigt. */ -async function zeigeSkinFigur(bildId, leerId, textur, leerText) { +async function zeigeSkinFigur(bildId, leerId, textur, leerText, umhang) { schliesseSkinViewer(bildId); const canvas = el(bildId); const leer = el(leerId); @@ -2644,6 +2659,7 @@ async function zeigeSkinFigur(bildId, leerId, textur, leerText) { viewer.autoRotate = false; viewer.animation = null; pose.apply(viewer.playerObject); + if (umhang) { try { await viewer.loadCape(umhang); } catch { /* ohne Umhang weiter */ } } viewer.controls.enableRotate = true; viewer.controls.enableZoom = true; viewer.controls.enablePan = false; @@ -2679,14 +2695,78 @@ async function openSkin() { // Armform zuerst setzen – davon hängt ab, wie die Figur gerendert wird if (p.variante) el('skin-variante').value = p.variante === 'slim' ? 'slim' : 'classic'; skinTexturAktuell = p.skinUrl || ''; + await ladeUmhangInfo(); await zeigeSkinFigur('skin-aktuell', 'skin-aktuell-leer', skinTexturAktuell, - 'Standard-Skin (keine eigene Datei hinterlegt)'); + 'Standard-Skin (keine eigene Datei hinterlegt)', skinUmhang); +} + +// ---------- Umhänge im Skin-Fenster ---------- +let skinUmhang = null; // data:-Adresse des angezeigten Umhangs (AeroMC vor offiziell) + +async function ladeUmhangInfo() { + const sel = el('skin-cape-offiziell'); + const info = await window.api.capeInfo(); + sel.innerHTML = ''; + if (!info.ok) { + el('skin-cape-aero').textContent = info.message || '–'; + el('skin-cape-remove').classList.add('hidden'); + skinUmhang = null; + return; + } + for (const c of info.offiziell) { + const o = document.createElement('option'); + o.value = c.id; + o.textContent = c.name; + if (c.aktiv) o.selected = true; + sel.appendChild(o); + } + sel.disabled = !info.offiziell.length; + sel.title = info.offiziell.length ? 'Nur Umhänge, die dein Konto bei Mojang besitzt' : 'Dein Konto besitzt keinen offiziellen Umhang'; + if (info.aeromc) { + el('skin-cape-aero').textContent = `Hochgeladen (${info.aeromc.width}×${info.aeromc.height})`; + el('skin-cape-remove').classList.remove('hidden'); + el('skin-cape-edit').textContent = 'Bearbeiten…'; + } else { + el('skin-cape-aero').textContent = info.aeromcFehlt ? 'Server noch nicht bereit' : info.aeromcFehler ? 'Umhang-Server nicht erreichbar' : 'Noch keiner'; + el('skin-cape-aero').title = info.aeromcFehler || ''; + el('skin-cape-remove').classList.add('hidden'); + el('skin-cape-edit').textContent = 'Gestalten…'; + } + const konto = await window.api.authStatus(); + const r = konto && konto.profile ? await window.api.capeForUuid(konto.profile.id) : null; + skinUmhang = r ? r.dataUri : null; +} + +async function waehleOffiziellenUmhang() { + const sel = el('skin-cape-offiziell'); + sel.disabled = true; + el('skin-cape-status').textContent = 'Umhang wird gesetzt …'; + const res = await window.api.capeSetOfficial(sel.value || null); + sel.disabled = false; + if (res.ok) { + el('skin-cape-status').textContent = sel.value ? '✔ Offizieller Umhang gesetzt.' : '✔ Kein offizieller Umhang mehr.'; + await ladeUmhangInfo(); + await zeigeSkinFigur('skin-aktuell', 'skin-aktuell-leer', skinTexturAktuell, 'Standard-Skin (keine eigene Datei hinterlegt)', skinUmhang); + } else { + el('skin-cape-status').textContent = '✖ ' + (res.message || 'Fehlgeschlagen.'); + } +} + +function entferneAeroUmhang() { + askConfirm('AeroMC-Umhang entfernen?', 'Dein eigener Umhang wird vom AeroMC-Umhang-Server gelöscht. Hast du ihn nicht als PNG gespeichert, ist er danach weg.', 'Entfernen', async () => { + const res = await window.api.capeRemove(); + el('skin-cape-status').textContent = res.ok ? '✔ AeroMC-Umhang entfernt.' : '✖ ' + (res.message || 'Fehlgeschlagen.'); + if (res.ok) { + await ladeUmhangInfo(); + await zeigeSkinFigur('skin-aktuell', 'skin-aktuell-leer', skinTexturAktuell, 'Standard-Skin (keine eigene Datei hinterlegt)', skinUmhang); + } + }); } // Armform gewechselt -> beide Figuren neu zeichnen async function skinVarianteGewechselt() { - if (skinTexturAktuell) await zeigeSkinFigur('skin-aktuell', 'skin-aktuell-leer', skinTexturAktuell, ''); - if (skinTexturNeu) await zeigeSkinFigur('skin-neu', 'skin-neu-leer', skinTexturNeu, ''); + if (skinTexturAktuell) await zeigeSkinFigur('skin-aktuell', 'skin-aktuell-leer', skinTexturAktuell, '', skinUmhang); + if (skinTexturNeu) await zeigeSkinFigur('skin-neu', 'skin-neu-leer', skinTexturNeu, '', skinUmhang); } async function waehleSkinDatei() { @@ -2697,7 +2777,7 @@ async function waehleSkinDatei() { gewaehlterSkin = res.pfad; el('skin-pfad').value = res.pfad; skinTexturNeu = res.dataUri || ''; - await zeigeSkinFigur('skin-neu', 'skin-neu-leer', skinTexturNeu, 'Vorschau nicht verfügbar'); + await zeigeSkinFigur('skin-neu', 'skin-neu-leer', skinTexturNeu, 'Vorschau nicht verfügbar', skinUmhang); el('skin-status').textContent = `${res.breite}×${res.hoehe} Pixel – sieht gut aus.`; el('skin-apply').disabled = false; } @@ -4918,6 +4998,7 @@ async function openSettings(pane) { el('s-friends').checked = s.friendsEnabled !== false; el('s-friends-server').checked = s.friendsShareServer !== false; el('s-auto-mod-updates').checked = !!s.autoModUpdates; + el('s-aeromc-capes').checked = s.aeromcCapes !== false; el('s-autostart').checked = !!s.autostart; el('s-auto-java').checked = s.autoJava !== false; el('s-autobackup').checked = !!s.autoBackupEnabled; @@ -5051,6 +5132,7 @@ async function saveSettings() { friendsEnabled: el('s-friends').checked, friendsShareServer: el('s-friends-server').checked, autoModUpdates: el('s-auto-mod-updates').checked, + aeromcCapes: el('s-aeromc-capes').checked, autostart: el('s-autostart').checked, autoJava: el('s-auto-java').checked, autoBackupEnabled: el('s-autobackup').checked, @@ -5527,6 +5609,18 @@ function wire() { // ohne Wrapper käme das Klick-Ereignis als Bereichsname an el('btn-settings').addEventListener('click', () => openSettings()); el('search').addEventListener('input', render); + el('btn-search').addEventListener('click', () => sucheOeffnen()); + el('search').addEventListener('keydown', (e) => { + if (e.key !== 'Escape') return; + // Esc gehört hier der Suche, nicht dem globalen Dialog-Schließen + e.stopPropagation(); + el('search').value = ''; + render(); + sucheSchliessen(); + }); + // leer verlassen = wieder zur Lupe; mit Suchbegriff bleibt das Feld offen, + // damit man sieht, dass die Liste gerade gefiltert ist + el('search').addEventListener('blur', () => { if (!el('search').value.trim()) sucheSchliessen(); }); el('btn-open-dir').addEventListener('click', () => { if (currentDetailId) window.api.openInstanceFolder(currentDetailId); @@ -5925,6 +6019,9 @@ function wire() { el('login-skin').addEventListener('click', openSkin); el('skin-pick').addEventListener('click', waehleSkinDatei); el('skin-variante').addEventListener('change', skinVarianteGewechselt); + el('skin-cape-offiziell').addEventListener('change', waehleOffiziellenUmhang); + el('skin-cape-edit').addEventListener('click', () => window.openSkinEditor({ modus: 'umhang', quelle: 'aktuell' })); + el('skin-cape-remove').addEventListener('click', entferneAeroUmhang); el('skin-apply').addEventListener('click', setzeSkin); // gewählte Datei (sonst der aktuelle Skin des Kontos) im Editor öffnen el('skin-editor').addEventListener('click', () => window.openSkinEditor(gewaehlterSkin @@ -6274,8 +6371,7 @@ function wire() { // der eine eigene Suche hat (Mods, Modpack-Katalog, Import …) if (strg && e.key.toLowerCase() === 'f' && !modalOffen) { e.preventDefault(); - el('search').focus(); - el('search').select(); + sucheOeffnen(); return; } // Strg+1 … Strg+5: Schnellstart-Instanz starten (nur im Hauptfenster) @@ -6535,7 +6631,7 @@ window.addEventListener('DOMContentLoaded', async () => { window.api.onSkinChanged((info) => { if (!POPOUT) refreshSkinBackground(); // im Editor gesetzt -> offenes Skin-Fenster zeigt sonst noch den alten Stand - if (POPOUT === 'skin' && info.quelle === 'editor' && !el('modal-skin').classList.contains('hidden')) openSkin(); + if (POPOUT === 'skin' && (info.quelle === 'editor' || info.quelle === 'umhang') && !el('modal-skin').classList.contains('hidden')) openSkin(); }); window.api.onInstancesChanged(() => { if (!POPOUT) reload(); }); try { showAuthHealth(await window.api.authHealth()); } catch { /* noch keine Prüfung */ } diff --git a/src/skineditor.js b/src/skineditor.js index b92a1ce..5219be4 100644 --- a/src/skineditor.js +++ b/src/skineditor.js @@ -1,983 +1,1532 @@ -'use strict'; - -/* - * skineditor.js – Pixel-Editor für Minecraft-Skins - * ------------------------------------------------- - * Ein Skin ist eine einzige 64×64-Textur. Jedes Körperteil hat darin zwei - * Bereiche: die Grundschicht (liegt direkt auf der Figur) und die 2. Schicht - * (eine etwas größere Hülle darüber – Haare, Jacke, Ärmel …). Die 2. Schicht - * darf durchsichtig sein und lässt die Figur dadurch plastischer wirken. - * - * Gemalt wird wahlweise auf der aufgeklappten Vorlage (2D) oder direkt auf der - * drehbaren Figur (3D). Beide Ansichten sind immer da – die gerade nicht - * gewählte steht klein rechts und ist ebenfalls bemalbar. - * - * Läuft im Popup-Fenster "skineditor" und nutzt die Helfer aus renderer.js - * (el, show, toast, askConfirm, POPOUT, SKIN_POSES). - */ - -(() => { - const N = 64; - - // Lage der Körperteile in der Textur. w/h/d = Breite/Höhe/Tiefe in Pixeln, - // base/over = linke obere Ecke des Bereichs der Grund- bzw. 2. Schicht. - const TEILE = [ - { key: 'head', name: 'Kopf', w: 8, h: 8, d: 8, base: [0, 0], over: [32, 0], spiegel: 'head' }, - { key: 'body', name: 'Körper', w: 8, h: 12, d: 4, base: [16, 16], over: [16, 32], spiegel: 'body' }, - { key: 'rightArm', name: 'Rechter Arm', w: 4, h: 12, d: 4, base: [40, 16], over: [40, 32], spiegel: 'leftArm', arm: true }, - { key: 'leftArm', name: 'Linker Arm', w: 4, h: 12, d: 4, base: [32, 48], over: [48, 48], spiegel: 'rightArm', arm: true }, - { key: 'rightLeg', name: 'Rechtes Bein', w: 4, h: 12, d: 4, base: [0, 16], over: [0, 32], spiegel: 'leftLeg' }, - { key: 'leftLeg', name: 'Linkes Bein', w: 4, h: 12, d: 4, base: [16, 48], over: [0, 48], spiegel: 'rightLeg' }, - ]; - const TEIL = Object.fromEntries(TEILE.map((t) => [t.key, t])); - const SEITE_NAME = { oben: 'oben', unten: 'unten', rechts: 'rechte Seite', vorne: 'vorne', links: 'linke Seite', hinten: 'hinten' }; - const SEITE_GEGENSTUECK = { rechts: 'links', links: 'rechts' }; - const SCHICHT_NAME = ['Grundschicht', '2. Schicht']; - - // Rechtecke [x, y, breite, höhe] der sechs Seiten eines Teils (Minecraft-Aufteilung: - // oben/unten in der ersten Reihe, darunter rechts | vorne | links | hinten) - function seiten(teil, schicht, slim) { - const w = teil.arm && slim ? 3 : teil.w; - const { h, d } = teil; - const [u, v] = schicht ? teil.over : teil.base; - return { - oben: [u + d, v, w, d], - unten: [u + d + w, v, w, d], - rechts: [u, v + d, d, h], - vorne: [u + d, v + d, w, h], - links: [u + d + w, v + d, d, h], - hinten: [u + 2 * d + w, v + d, w, h], - }; - } - - // Für jede Armform: Liste aller Flächen und eine Pixel→Fläche-Karte - const AUFTEILUNG = [false, true].map((slim) => { - const flaechen = []; - const karte = new Array(N * N).fill(null); - for (const teil of TEILE) { - for (const schicht of [0, 1]) { - for (const [seite, r] of Object.entries(seiten(teil, schicht, slim))) { - const f = { teil, schicht, seite, x: r[0], y: r[1], w: r[2], h: r[3] }; - flaechen.push(f); - for (let yy = 0; yy < f.h; yy++) for (let xx = 0; xx < f.w; xx++) karte[(f.y + yy) * N + f.x + xx] = f; - } - } - } - return { flaechen, karte }; - }); - - // ---------- Zustand ---------- - const ed = { - daten: new Uint8ClampedArray(N * N * 4), - slim: false, - werkzeug: 'stift', - vorPipette: 'stift', - farbe: '#3a6ea5', - schicht: 0, - zeigeAussen: true, - durchscheinen: true, - spiegeln: false, - modus: '2d', - undo: [], - redo: [], - geaendert: false, - hover: null, - strich: null, // { snap, letzter: [x,y] | null, letzterBild: [cx,cy] | null, geaendert } - viewer: null, - bereit: false, - zeichnenGeplant: false, - }; - const textur = document.createElement('canvas'); - textur.width = textur.height = N; - const texturCtx = textur.getContext('2d', { willReadFrequently: true }); - // Grundschicht als Schatten unter die 2. Schicht legen (Option "durchscheinen") - const schatten = document.createElement('canvas'); - schatten.width = schatten.height = N; - const schattenCtx = schatten.getContext('2d'); - // Hintergrund (Karomuster in den Flächen) je Armform einmal vorberechnet - const hintergrund = [null, null]; - - const aufteilung = () => AUFTEILUNG[ed.slim ? 1 : 0]; - const flaecheBei = (x, y) => (x < 0 || y < 0 || x >= N || y >= N ? null : aufteilung().karte[y * N + x]); - const dunkel = () => document.documentElement.getAttribute('data-theme') === 'dark'; - - function hexZuRgb(hex) { - const m = /^#?([0-9a-f]{6})$/i.exec(hex || ''); - if (!m) return [0, 0, 0]; - const n = parseInt(m[1], 16); - return [(n >> 16) & 255, (n >> 8) & 255, n & 255]; - } - const rgbZuHex = (r, g, b) => '#' + [r, g, b].map((v) => v.toString(16).padStart(2, '0')).join(''); - - // Pixel auf der gespiegelten Körperseite (rechter ↔ linker Arm/Bein, - // rechte ↔ linke Seite, waagerecht umgedreht) - function spiegelPixel(x, y) { - const f = flaecheBei(x, y); - if (!f) return null; - const partner = TEIL[f.teil.spiegel]; - const seite = SEITE_GEGENSTUECK[f.seite] || f.seite; - const r = seiten(partner, f.schicht, ed.slim)[seite]; - const fx = x - f.x; - const fy = y - f.y; - return [r[0] + (r[2] - 1 - fx), r[1] + fy]; - } - - // ---------- Daten ändern ---------- - function setzePixel(x, y, rgba) { - const i = (y * N + x) * 4; - const d = ed.daten; - if (d[i] === rgba[0] && d[i + 1] === rgba[1] && d[i + 2] === rgba[2] && d[i + 3] === rgba[3]) return false; - d[i] = rgba[0]; d[i + 1] = rgba[1]; d[i + 2] = rgba[2]; d[i + 3] = rgba[3]; - return true; - } - - function zielPixel(x, y) { - const liste = [[x, y]]; - if (ed.spiegeln) { - const s = spiegelPixel(x, y); - if (s && (s[0] !== x || s[1] !== y)) liste.push(s); - } - return liste; - } - - function malFarbe() { - if (ed.werkzeug === 'radierer') return [0, 0, 0, 0]; - return [...hexZuRgb(ed.farbe), 255]; - } - - // Einen Pixel mit dem aktuellen Werkzeug bearbeiten (Stift/Radierer) - function malePixel(x, y) { - const f = flaecheBei(x, y); - if (!f || f.schicht !== ed.schicht) return false; - let geaendert = false; - const rgba = malFarbe(); - for (const [px, py] of zielPixel(x, y)) if (setzePixel(px, py, rgba)) geaendert = true; - return geaendert; - } - - // Füllen: zusammenhängende gleichfarbige Pixel innerhalb derselben Fläche - function fuelle(x, y) { - const f = flaecheBei(x, y); - if (!f || f.schicht !== ed.schicht) return false; - const d = ed.daten; - const i0 = (y * N + x) * 4; - const alt = [d[i0], d[i0 + 1], d[i0 + 2], d[i0 + 3]]; - const neu = malFarbe(); - if (alt.every((v, k) => v === neu[k])) return false; - const gleich = (px, py) => { - const i = (py * N + px) * 4; - return d[i] === alt[0] && d[i + 1] === alt[1] && d[i + 2] === alt[2] && d[i + 3] === alt[3]; - }; - const gesehen = new Set(); - const stapel = [[x, y]]; - const treffer = []; - while (stapel.length) { - const [px, py] = stapel.pop(); - const k = py * N + px; - if (gesehen.has(k)) continue; - if (px < f.x || py < f.y || px >= f.x + f.w || py >= f.y + f.h) continue; - gesehen.add(k); - if (!gleich(px, py)) continue; - treffer.push([px, py]); - stapel.push([px + 1, py], [px - 1, py], [px, py + 1], [px, py - 1]); - } - let geaendert = false; - for (const [px, py] of treffer) for (const [zx, zy] of zielPixel(px, py)) if (setzePixel(zx, zy, neu)) geaendert = true; - return geaendert; - } - - function nimmFarbe(x, y) { - const i = (y * N + x) * 4; - const d = ed.daten; - if (d[i + 3] === 0) return false; - setzeFarbe(rgbZuHex(d[i], d[i + 1], d[i + 2])); - return true; - } - - // ---------- Striche, Rückgängig ---------- - function beginneStrich() { - ed.strich = { snap: ed.daten.slice(), letzter: null, letzterBild: null, geaendert: false }; - } - - function beendeStrich() { - const s = ed.strich; - ed.strich = null; - if (!s || !s.geaendert) return; - ed.undo.push(s.snap); - if (ed.undo.length > 100) ed.undo.shift(); - ed.redo = []; - ed.geaendert = true; - if (ed.werkzeug !== 'radierer') merkeFarbe(ed.farbe); - aktualisiereKnoepfe(); - } - - // Werkzeug auf einen Texturpixel anwenden (während eines Strichs) - function wendeAn(x, y) { - const s = ed.strich; - if (!s) return; - if (ed.werkzeug === 'pipette') { - nimmFarbe(x, y); - return; - } - if (ed.werkzeug === 'fuellen') { - if (s.letzter) return; // ein Klick = eine Füllung - s.letzter = [x, y]; - if (fuelle(x, y)) { s.geaendert = true; texturGeaendert(); } - return; - } - let geaendert = false; - // Lücken zwischen zwei Mausereignissen schließen (nur innerhalb der Vorlage - // sinnvoll, auf der Figur liegen benachbarte Pixel nicht nebeneinander) - const punkte = s.letzter && s.zweiD ? linie(s.letzter[0], s.letzter[1], x, y) : [[x, y]]; - for (const [px, py] of punkte) if (malePixel(px, py)) geaendert = true; - s.letzter = [x, y]; - if (geaendert) { s.geaendert = true; texturGeaendert(); } - } - - function linie(x0, y0, x1, y1) { - const punkte = []; - const dx = Math.abs(x1 - x0), sx = x0 < x1 ? 1 : -1; - const dy = -Math.abs(y1 - y0), sy = y0 < y1 ? 1 : -1; - let err = dx + dy; - for (;;) { - punkte.push([x0, y0]); - if (x0 === x1 && y0 === y1) break; - const e2 = 2 * err; - if (e2 >= dy) { err += dy; x0 += sx; } - if (e2 <= dx) { err += dx; y0 += sy; } - } - return punkte; - } - - function rueckgaengig() { - if (!ed.undo.length) return; - ed.redo.push(ed.daten.slice()); - ed.daten = ed.undo.pop(); - ed.geaendert = true; - texturGeaendert(); - aktualisiereKnoepfe(); - } - - function wiederholen() { - if (!ed.redo.length) return; - ed.undo.push(ed.daten.slice()); - ed.daten = ed.redo.pop(); - ed.geaendert = true; - texturGeaendert(); - aktualisiereKnoepfe(); - } - - // ganze Änderung (Laden, Leeren …) als ein Rückgängig-Schritt - function aenderung(fn) { - const snap = ed.daten.slice(); - fn(); - if (snap.every((v, i) => v === ed.daten[i])) return false; - ed.undo.push(snap); - if (ed.undo.length > 100) ed.undo.shift(); - ed.redo = []; - ed.geaendert = true; - texturGeaendert(); - aktualisiereKnoepfe(); - return true; - } - - // ---------- Farben ---------- - const FARB_SCHLUESSEL = 'aeromc-skin-farben'; - const STANDARD_FARBEN = ['#000000', '#ffffff', '#c69c6d', '#a87b4f', '#6b4a2f', '#3b2416', '#d32f2f', '#f9a825', - '#43a047', '#1e88e5', '#3949ab', '#8e24aa', '#00897b', '#757575', '#424242', '#ff8a65']; - let zuletzt = []; - try { zuletzt = JSON.parse(localStorage.getItem(FARB_SCHLUESSEL) || '[]'); } catch { zuletzt = []; } - if (!Array.isArray(zuletzt) || !zuletzt.length) zuletzt = STANDARD_FARBEN.slice(); - - function merkeFarbe(hex) { - zuletzt = [hex, ...zuletzt.filter((f) => f !== hex)].slice(0, 16); - try { localStorage.setItem(FARB_SCHLUESSEL, JSON.stringify(zuletzt)); } catch { /* egal */ } - zeigeZuletzt(); - } - - function zeigeZuletzt() { - const box = el('se-zuletzt'); - box.innerHTML = ''; - for (const f of zuletzt) { - const b = document.createElement('button'); - b.className = 'se-farbfeld' + (f === ed.farbe ? ' on' : ''); - b.style.background = f; - b.title = f; - b.addEventListener('click', () => setzeFarbe(f)); - box.appendChild(b); - } - } - - function setzeFarbe(hex) { - ed.farbe = hex.toLowerCase(); - el('se-farbe').value = ed.farbe; - el('se-hex').value = ed.farbe; - // nach dem Aufnehmen zurück zum vorherigen Werkzeug; mit dem Radierer - // ergibt eine neue Farbe keinen Sinn -> Stift - if (ed.werkzeug === 'pipette') waehleWerkzeug(ed.vorPipette === 'radierer' ? 'stift' : ed.vorPipette); - else if (ed.werkzeug === 'radierer') waehleWerkzeug('stift'); - zeigeZuletzt(); - } - - // ---------- Bedienelemente ---------- - function waehleWerkzeug(w) { - if (w === 'radierer' && ed.schicht === 0) w = 'stift'; - if (w === 'pipette' && ed.werkzeug !== 'pipette') ed.vorPipette = ed.werkzeug; - ed.werkzeug = w; - document.querySelectorAll('[data-se-tool]').forEach((b) => b.classList.toggle('on', b.dataset.seTool === w)); - for (const h of [el('se-2d'), el('se-3d')]) h.dataset.werkzeug = w; - } - - function waehleSchicht(s) { - ed.schicht = s; - document.querySelectorAll('[data-se-schicht]').forEach((b) => b.classList.toggle('on', Number(b.dataset.seSchicht) === s)); - // die 2. Schicht muss sichtbar sein, wenn man darauf malen will - if (s === 1 && !ed.zeigeAussen) { ed.zeigeAussen = true; el('se-aussen').checked = true; } - const radierer = document.querySelector('[data-se-tool="radierer"]'); - radierer.disabled = s === 0; - radierer.title = s === 0 - ? 'Radierer – nur in der 2. Schicht (die Grundschicht darf keine Löcher haben)' - : 'Radierer (E) – macht Pixel durchsichtig'; - if (s === 0 && ed.werkzeug === 'radierer') waehleWerkzeug('stift'); - el('se-durch').disabled = s === 0; - ed.hover = null; - texturGeaendert(); - } - - function waehleModus(m) { - ed.modus = m; - document.querySelectorAll('[data-se-modus]').forEach((b) => b.classList.toggle('on', b.dataset.seModus === m)); - const gross = el('se-buehne'); - const klein = el('se-mini'); - gross.appendChild(m === '2d' ? el('se-2d') : el('se-3d')); - klein.appendChild(m === '2d' ? el('se-3d') : el('se-2d')); - el('se-mini-titel').textContent = m === '2d' ? '3D-Vorschau' : 'Vorlage'; - zeigeInfo(); - passeGroessenAn(); - } - - function aktualisiereKnoepfe() { - el('se-undo').disabled = !ed.undo.length; - el('se-redo').disabled = !ed.redo.length; - } - - function zeigeInfo() { - const info = el('se-info'); - const h = ed.hover; - const f = h && flaecheBei(h[0], h[1]); - if (f) { - info.textContent = `${f.teil.name} · ${SEITE_NAME[f.seite]} · ${SCHICHT_NAME[f.schicht]} · Pixel ${h[0]}, ${h[1]}`; - return; - } - info.textContent = ed.modus === '3d' - ? 'Linke Maustaste malt · rechte Maustaste dreht · Mausrad zoomt · Alt+Klick nimmt Farbe auf' - : 'Linke Maustaste malt · Alt+Klick nimmt eine Farbe auf · abgedunkelte Bereiche gehören zur anderen Schicht'; - } - - function status(text) { el('se-status').textContent = text || ''; el('se-status').title = text || ''; } - - // ---------- Zeichnen ---------- - function texturGeaendert() { - texturCtx.putImageData(new ImageData(ed.daten, N, N), 0, 0); - // Schatten: Grundschicht-Pixel an die Stelle der zugehörigen 2. Schicht legen - const s = schattenCtx.createImageData(N, N); - for (const f of aufteilung().flaechen) { - if (f.schicht !== 1) continue; - const r = seiten(f.teil, 0, ed.slim)[f.seite]; - for (let yy = 0; yy < f.h; yy++) { - for (let xx = 0; xx < f.w; xx++) { - const q = ((r[1] + yy) * N + r[0] + xx) * 4; - const z = ((f.y + yy) * N + f.x + xx) * 4; - s.data[z] = ed.daten[q]; s.data[z + 1] = ed.daten[q + 1]; s.data[z + 2] = ed.daten[q + 2]; s.data[z + 3] = ed.daten[q + 3]; - } - } - } - schattenCtx.putImageData(s, 0, 0); - planeZeichnen(); - } - - function planeZeichnen() { - if (ed.zeichnenGeplant) return; - ed.zeichnenGeplant = true; - requestAnimationFrame(() => { - ed.zeichnenGeplant = false; - zeichne2D(); - zeichne3D(); - zeigeInfo(); - }); - } - - function hintergrundFuer(slim) { - const k = slim ? 1 : 0; - if (hintergrund[k] && hintergrund[k].dunkel === dunkel()) return hintergrund[k].canvas; - const c = document.createElement('canvas'); - c.width = c.height = N; - const g = c.getContext('2d'); - const img = g.createImageData(N, N); - const [a, b] = dunkel() ? [[58, 58, 64], [48, 48, 54]] : [[236, 236, 238], [218, 219, 223]]; - for (const f of AUFTEILUNG[k].flaechen) { - for (let yy = f.y; yy < f.y + f.h; yy++) { - for (let xx = f.x; xx < f.x + f.w; xx++) { - const farbe = (xx + yy) % 2 ? a : b; - const i = (yy * N + xx) * 4; - img.data[i] = farbe[0]; img.data[i + 1] = farbe[1]; img.data[i + 2] = farbe[2]; img.data[i + 3] = 255; - } - } - } - g.putImageData(img, 0, 0); - hintergrund[k] = { canvas: c, dunkel: dunkel() }; - return c; - } - - // sichtbare Textur für die 2D-Ansicht: ohne ungenutzte Bereiche und, falls - // ausgeblendet, ohne 2. Schicht - const sicht = document.createElement('canvas'); - sicht.width = sicht.height = N; - const sichtCtx = sicht.getContext('2d'); - - function zeichne2D() { - const canvas = el('se-2d-canvas'); - const k = Number(canvas.dataset.k) || 0; - if (!k) return; - const g = canvas.getContext('2d'); - g.setTransform(1, 0, 0, 1, 0, 0); - g.clearRect(0, 0, canvas.width, canvas.height); - g.imageSmoothingEnabled = false; - g.setTransform(k, 0, 0, k, 0, 0); - g.fillStyle = dunkel() ? '#1c1c1f' : '#c9ccd1'; - g.fillRect(0, 0, N, N); - g.drawImage(hintergrundFuer(ed.slim), 0, 0); - - if (ed.schicht === 1 && ed.durchscheinen) { - g.globalAlpha = 0.35; - g.drawImage(schatten, 0, 0); - g.globalAlpha = 1; - } - sichtCtx.clearRect(0, 0, N, N); - const img = sichtCtx.createImageData(N, N); - const karte = aufteilung().karte; - for (let i = 0; i < N * N; i++) { - const f = karte[i]; - if (!f || (f.schicht === 1 && !ed.zeigeAussen)) continue; - const q = i * 4; - img.data[q] = ed.daten[q]; img.data[q + 1] = ed.daten[q + 1]; img.data[q + 2] = ed.daten[q + 2]; img.data[q + 3] = ed.daten[q + 3]; - } - sichtCtx.putImageData(img, 0, 0); - g.drawImage(sicht, 0, 0); - - // andere Schicht abdunkeln - g.fillStyle = dunkel() ? 'rgba(20,20,22,.62)' : 'rgba(40,44,52,.45)'; - for (const f of aufteilung().flaechen) if (f.schicht !== ed.schicht) g.fillRect(f.x, f.y, f.w, f.h); - - const px = 1 / k; - // Pixelraster - if (k >= 6) { - g.strokeStyle = dunkel() ? 'rgba(255,255,255,.07)' : 'rgba(0,0,0,.08)'; - g.lineWidth = px; - g.beginPath(); - for (let i = 1; i < N; i++) { g.moveTo(i, 0); g.lineTo(i, N); g.moveTo(0, i); g.lineTo(N, i); } - g.stroke(); - } - // Flächenränder - g.lineWidth = 1.5 * px; - for (const f of aufteilung().flaechen) { - g.strokeStyle = f.schicht === ed.schicht - ? (dunkel() ? 'rgba(255,255,255,.45)' : 'rgba(0,0,0,.4)') - : (dunkel() ? 'rgba(255,255,255,.12)' : 'rgba(0,0,0,.12)'); - g.strokeRect(f.x, f.y, f.w, f.h); - } - // Mauszeiger und gespiegelter Partner - if (ed.hover) { - const [hx, hy] = ed.hover; - g.lineWidth = 2 * px; - g.strokeStyle = dunkel() ? '#ffffff' : '#000000'; - g.strokeRect(hx + px, hy + px, 1 - 2 * px, 1 - 2 * px); - if (ed.spiegeln) { - const s = spiegelPixel(hx, hy); - if (s && (s[0] !== hx || s[1] !== hy)) { - g.setLineDash([2 * px, 2 * px]); - g.strokeRect(s[0] + px, s[1] + px, 1 - 2 * px, 1 - 2 * px); - g.setLineDash([]); - } - } - } - } - - function zeichne3D() { - const v = ed.viewer; - if (!v || !v.skinTexture) return; - const g = v.skinCanvas.getContext('2d'); - if (v.skinCanvas.width !== N || v.skinCanvas.height !== N) { v.skinCanvas.width = N; v.skinCanvas.height = N; } - g.clearRect(0, 0, N, N); - g.drawImage(textur, 0, 0); - // Pixel unter der Maus hervorheben - if (ed.hover && ed.werkzeug !== 'pipette') { - const ziele = ed.spiegeln ? zielPixel(ed.hover[0], ed.hover[1]) : [ed.hover]; - for (const [hx, hy] of ziele) { - const i = (hy * N + hx) * 4; - const hell = ed.daten[i + 3] === 0 || (ed.daten[i] + ed.daten[i + 1] + ed.daten[i + 2]) < 380; - g.fillStyle = hell ? 'rgba(255,255,255,.75)' : 'rgba(0,0,0,.55)'; - g.fillRect(hx, hy, 1, 1); - } - } - v.skinTexture.needsUpdate = true; - v.playerObject.skin.setOuterLayerVisible(ed.zeigeAussen); - } - - // ---------- Größen ---------- - function passeGroessenAn() { - const h2 = el('se-2d'); - const c = el('se-2d-canvas'); - const platz = Math.min(h2.clientWidth, h2.clientHeight) - 8; - const s = Math.max(1, Math.floor(platz / N)); - const dpr = window.devicePixelRatio || 1; - c.style.width = c.style.height = (s * N) + 'px'; - c.width = c.height = Math.round(s * N * dpr); - c.dataset.k = String((s * N * dpr) / N); - const h3 = el('se-3d'); - if (ed.viewer && h3.clientWidth && h3.clientHeight) ed.viewer.setSize(h3.clientWidth, h3.clientHeight); - planeZeichnen(); - } - - // ---------- 2D-Eingabe ---------- - function texelAus2D(e) { - const c = el('se-2d-canvas'); - const r = c.getBoundingClientRect(); - const x = Math.floor(((e.clientX - r.left) / r.width) * N); - const y = Math.floor(((e.clientY - r.top) / r.height) * N); - return x >= 0 && y >= 0 && x < N && y < N ? [x, y] : null; - } - - function verbinde2D() { - const c = el('se-2d-canvas'); - c.addEventListener('pointerdown', (e) => { - if (e.button !== 0) return; - const t = texelAus2D(e); - if (!t) return; - e.preventDefault(); - try { c.setPointerCapture(e.pointerId); } catch { /* egal */ } - if (e.altKey) { nimmFarbe(t[0], t[1]); return; } - beginneStrich(); - ed.strich.zweiD = true; - wendeAn(t[0], t[1]); - }); - c.addEventListener('pointermove', (e) => { - const t = texelAus2D(e); - if (ed.strich && t) wendeAn(t[0], t[1]); - const neu = t && flaecheBei(t[0], t[1]) ? t : null; - if (String(neu) !== String(ed.hover)) { ed.hover = neu; planeZeichnen(); } - }); - const ende = () => beendeStrich(); - c.addEventListener('pointerup', ende); - c.addEventListener('pointercancel', ende); - c.addEventListener('pointerleave', () => { if (!ed.strich && ed.hover) { ed.hover = null; planeZeichnen(); } }); - } - - // ---------- 3D: Strahl gegen die Figur ---------- - // three.js' Raycaster wird von skinview3d nicht mitgeliefert – daher eigene - // Schnittprüfung Strahl/Dreieck (Möller–Trumbore) gegen die Quader der Figur. - function schnitt(o, d, a, b, c) { - const e1x = b.x - a.x, e1y = b.y - a.y, e1z = b.z - a.z; - const e2x = c.x - a.x, e2y = c.y - a.y, e2z = c.z - a.z; - const px = d.y * e2z - d.z * e2y, py = d.z * e2x - d.x * e2z, pz = d.x * e2y - d.y * e2x; - const det = e1x * px + e1y * py + e1z * pz; - if (Math.abs(det) < 1e-9) return null; - const inv = 1 / det; - const tx = o.x - a.x, ty = o.y - a.y, tz = o.z - a.z; - const u = (tx * px + ty * py + tz * pz) * inv; - if (u < 0 || u > 1) return null; - const qx = ty * e1z - tz * e1y, qy = tz * e1x - tx * e1z, qz = tx * e1y - ty * e1x; - const v = (d.x * qx + d.y * qy + d.z * qz) * inv; - if (v < 0 || u + v > 1) return null; - const t = (e2x * qx + e2y * qy + e2z * qz) * inv; - return t > 1e-6 ? { t, u, v } : null; - } - - // liefert den Texturpixel der getroffenen Schicht (0/1) oder null - function strahl(clientX, clientY, schicht) { - const v = ed.viewer; - if (!v) return null; - const r = v.canvas.getBoundingClientRect(); - if (!r.width || !r.height) return null; - const cam = v.camera; - const V3 = cam.position.constructor; - cam.updateMatrixWorld(); - const o = new V3().setFromMatrixPosition(cam.matrixWorld); - const nx = ((clientX - r.left) / r.width) * 2 - 1; - const ny = -((clientY - r.top) / r.height) * 2 + 1; - const d = new V3(nx, ny, 0.5).unproject(cam).sub(o).normalize(); - v.playerObject.updateMatrixWorld(true); - const ecken = [new V3(), new V3(), new V3()]; - let best = null; - for (const teil of v.playerObject.skin.getBodyParts()) { - if (!teil.visible) continue; - const mesh = schicht ? teil.outerLayer : teil.innerLayer; - if (!mesh || !mesh.visible) continue; - const geo = mesh.geometry; - const pos = geo.attributes.position; - const idx = geo.index; - const anzahl = idx ? idx.count : pos.count; - for (let i = 0; i < anzahl; i += 3) { - const ia = idx ? [idx.getX(i), idx.getX(i + 1), idx.getX(i + 2)] : [i, i + 1, i + 2]; - for (let k = 0; k < 3; k++) ecken[k].fromBufferAttribute(pos, ia[k]).applyMatrix4(mesh.matrixWorld); - const h = schnitt(o, d, ecken[0], ecken[1], ecken[2]); - if (h && (!best || h.t < best.t)) best = { t: h.t, b: [1 - h.u - h.v, h.u, h.v], ia, uv: geo.attributes.uv }; - } - } - if (!best) return null; - let U = 0, W = 0; - let uMin = 1, uMax = 0, vMin = 1, vMax = 0; - for (let k = 0; k < 3; k++) { - const u = best.uv.getX(best.ia[k]); - const w = best.uv.getY(best.ia[k]); - U += best.b[k] * u; W += best.b[k] * w; - uMin = Math.min(uMin, u); uMax = Math.max(uMax, u); vMin = Math.min(vMin, w); vMax = Math.max(vMax, w); - } - // Dreieck gehört zu genau einer Seitenfläche – Rundung an der Kante darf - // nicht in die Nachbarfläche rutschen - const x0 = Math.round(uMin * N), x1 = Math.round(uMax * N) - 1; - const y0 = Math.round((1 - vMax) * N), y1 = Math.round((1 - vMin) * N) - 1; - const x = Math.min(x1, Math.max(x0, Math.floor(U * N))); - const y = Math.min(y1, Math.max(y0, Math.floor((1 - W) * N))); - return { t: best.t, x, y }; - } - - // sichtbarer Pixel für die Pipette: erst die 2. Schicht (falls dort Farbe ist) - function sichtbarerPixel(cx, cy) { - if (ed.zeigeAussen) { - const a = strahl(cx, cy, 1); - if (a && ed.daten[(a.y * N + a.x) * 4 + 3] > 0) return [a.x, a.y]; - } - const b = strahl(cx, cy, 0); - return b ? [b.x, b.y] : null; - } - - function verbinde3D() { - const huelle = el('se-3d'); - const canvas = el('se-3d-canvas'); - // in der Einfangphase: trifft die Maus die Figur, malen wir und die - // Drehsteuerung von skinview3d bekommt das Ereignis gar nicht erst - huelle.addEventListener('pointerdown', (e) => { - if (e.button !== 0 || !ed.viewer) return; - if (e.altKey || ed.werkzeug === 'pipette') { - const t = sichtbarerPixel(e.clientX, e.clientY); - if (!t) return; - e.stopPropagation(); e.preventDefault(); - nimmFarbe(t[0], t[1]); - return; - } - const t = strahl(e.clientX, e.clientY, ed.schicht); - if (!t) return; - e.stopPropagation(); e.preventDefault(); - try { canvas.setPointerCapture(e.pointerId); } catch { /* egal */ } - beginneStrich(); - ed.strich.letzterBild = [e.clientX, e.clientY]; - wendeAn(t.x, t.y); - }, true); - canvas.addEventListener('pointermove', (e) => { - if (ed.strich) { - // Strecke seit dem letzten Ereignis in kleinen Schritten abtasten - const [ax, ay] = ed.strich.letzterBild || [e.clientX, e.clientY]; - const schritte = Math.max(1, Math.ceil(Math.hypot(e.clientX - ax, e.clientY - ay) / 2)); - for (let i = 1; i <= schritte; i++) { - const t = strahl(ax + ((e.clientX - ax) * i) / schritte, ay + ((e.clientY - ay) * i) / schritte, ed.schicht); - if (t) wendeAn(t.x, t.y); - } - ed.strich.letzterBild = [e.clientX, e.clientY]; - } - if (e.buttons && !ed.strich) return; // dreht gerade - const t = strahl(e.clientX, e.clientY, ed.schicht); - const neu = t ? [t.x, t.y] : null; - if (String(neu) !== String(ed.hover)) { ed.hover = neu; planeZeichnen(); } - }); - const ende = () => beendeStrich(); - canvas.addEventListener('pointerup', ende); - canvas.addEventListener('pointercancel', ende); - canvas.addEventListener('pointerleave', () => { if (!ed.strich && ed.hover) { ed.hover = null; planeZeichnen(); } }); - } - - async function erzeugeViewer() { - if (ed.viewer || typeof skinview3d === 'undefined') { - if (typeof skinview3d === 'undefined') el('se-3d-leer').textContent = '3D-Ansicht nicht verfügbar'; - return; - } - const h = el('se-3d'); - const viewer = new skinview3d.SkinViewer({ - canvas: el('se-3d-canvas'), - width: h.clientWidth || 300, - height: h.clientHeight || 300, - skin: textur, - model: ed.slim ? 'slim' : 'default', - }); - await new Promise((resolve) => { - const check = (n) => { - if ((viewer.playerObject && viewer.playerObject.skin && viewer.playerObject.skin.map) || n > 150) resolve(); - else setTimeout(() => check(n + 1), 40); - }; - check(0); - }); - viewer.fov = 36; - viewer.zoom = 0.78; - viewer.autoRotate = false; - viewer.animation = null; - // leicht abgespreizte Arme/Beine, damit man auch an die Innenseiten kommt - const p = viewer.playerObject; - p.rotation.set(0, -0.35, 0); - p.skin.leftArm.rotation.set(0, 0, 0.2); - p.skin.rightArm.rotation.set(0, 0, -0.2); - p.skin.leftLeg.rotation.set(0, 0, 0.06); - p.skin.rightLeg.rotation.set(0, 0, -0.06); - viewer.controls.enableRotate = true; - viewer.controls.enableZoom = true; - viewer.controls.enablePan = false; - // rechte Maustaste dreht immer – auch wenn man gerade auf die Figur zeigt - viewer.controls.mouseButtons = { LEFT: 0, MIDDLE: 1, RIGHT: 0 }; - ed.viewer = viewer; - el('se-3d-leer').classList.add('hidden'); - passeGroessenAn(); - } - - async function setzeArmform(slim) { - ed.slim = !!slim; - el('se-variante').value = ed.slim ? 'slim' : 'classic'; - ed.hover = null; - if (ed.viewer) { - await ed.viewer.loadSkin(textur, { model: ed.slim ? 'slim' : 'default' }); - } - texturGeaendert(); - } - - // ---------- Laden / Vorlage ---------- - function vorlage() { - const d = new Uint8ClampedArray(N * N * 4); - const farben = { head: '#c69c6d', body: '#2f9e9e', rightArm: '#c69c6d', leftArm: '#c69c6d', rightLeg: '#3b3f9e', leftLeg: '#3b3f9e' }; - for (const f of AUFTEILUNG[ed.slim ? 1 : 0].flaechen) { - if (f.schicht !== 0) continue; - const [r, g, b] = hexZuRgb(farben[f.teil.key]); - for (let yy = f.y; yy < f.y + f.h; yy++) { - for (let xx = f.x; xx < f.x + f.w; xx++) { - const i = (yy * N + xx) * 4; - d[i] = r; d[i + 1] = g; d[i + 2] = b; d[i + 3] = 255; - } - } - } - return d; - } - - function ladeBild(dataUri) { - return new Promise((resolve, reject) => { - const img = new Image(); - img.onload = () => { - if (img.width !== N || (img.height !== N && img.height !== N / 2)) { - reject(new Error(`Ein Skin muss 64×64 oder 64×32 Pixel groß sein (diese Datei: ${img.width}×${img.height}).`)); - return; - } - const c = document.createElement('canvas'); - c.width = c.height = N; - const g = c.getContext('2d', { willReadFrequently: true }); - g.drawImage(img, 0, 0); - const daten = g.getImageData(0, 0, N, N).data; - if (img.height === N / 2) { - // alte 64×32-Skins: linker Arm und linkes Bein sind dort gespiegelte - // Kopien der rechten – wie Minecraft es selbst macht - const karte = AUFTEILUNG[0].karte; - for (let i = 0; i < N * N / 2; i++) { - const f = karte[i]; - if (!f || f.schicht !== 0 || (f.teil.key !== 'rightArm' && f.teil.key !== 'rightLeg')) continue; - const partner = TEIL[f.teil.spiegel]; - const seite = SEITE_GEGENSTUECK[f.seite] || f.seite; - const r = seiten(partner, 0, false)[seite]; - const x = i % N, y = Math.floor(i / N); - const z = ((r[1] + (y - f.y)) * N + r[0] + (r[2] - 1 - (x - f.x))) * 4; - for (let k = 0; k < 4; k++) daten[z + k] = daten[i * 4 + k]; - } - } - resolve(daten); - }; - img.onerror = () => reject(new Error('Bild konnte nicht gelesen werden.')); - img.src = dataUri; - }); - } - - async function uebernimmDaten(daten, variante, text) { - if (variante) await setzeArmform(variante === 'slim'); - aenderung(() => { ed.daten = new Uint8ClampedArray(daten); }); - ed.geaendert = false; - texturGeaendert(); - status(text || ''); - } - - function wennVerwerfenOk(aktion) { - if (!ed.geaendert) { aktion(); return; } - askConfirm('Änderungen verwerfen?', 'Der Skin im Editor hat ungespeicherte Änderungen. Trotzdem fortfahren?', 'Verwerfen', aktion); - } - - async function ladeAktuellen() { - status('Aktueller Skin wird geladen …'); - const res = await window.api.skinCurrentData(); - if (!res.ok) { - if (res.standard) { - await uebernimmDaten(vorlage(), res.variante, 'Dein Konto nutzt den Standard-Skin – hier ist eine leere Vorlage zum Loslegen.'); - } else { - status('✖ ' + (res.message || 'Skin konnte nicht geladen werden.')); - } - return; - } - try { - await uebernimmDaten(await ladeBild(res.dataUri), res.variante, `Skin von ${res.name || 'deinem Konto'} geladen.`); - } catch (err) { status('✖ ' + err.message); } - } - - async function ladeDatei(pfad, variante) { - const res = pfad ? await window.api.skinReadData(pfad) : await window.api.skinChoose(); - if (res.canceled) return; - if (!res.ok) { status('✖ ' + (res.message || 'Datei konnte nicht geladen werden.')); return; } - try { - await uebernimmDaten(await ladeBild(res.dataUri), variante, `${(res.pfad || pfad || '').split(/[\\/]/).pop()} geladen.`); - } catch (err) { status('✖ ' + err.message); } - } - - // ---------- Speichern / Übernehmen ---------- - function alsBase64() { - const c = document.createElement('canvas'); - c.width = c.height = N; - c.getContext('2d').putImageData(new ImageData(ed.daten, N, N), 0, 0); - return c.toDataURL('image/png').split(',')[1]; - } - - // Minecraft zeigt durchsichtige Pixel der Grundschicht schwarz an - function loecherInGrundschicht() { - let n = 0; - for (const f of aufteilung().flaechen) { - if (f.schicht !== 0) continue; - for (let yy = f.y; yy < f.y + f.h; yy++) for (let xx = f.x; xx < f.x + f.w; xx++) if (ed.daten[(yy * N + xx) * 4 + 3] < 255) n++; - } - return n; - } - - function loecherHinweis() { - const n = loecherInGrundschicht(); - return n ? ` Hinweis: ${n} durchsichtige Pixel in der Grundschicht erscheinen im Spiel schwarz.` : ''; - } - - async function speichere() { - const res = await window.api.skinSaveData(alsBase64()); - if (res.canceled) return; - if (!res.ok) { status('✖ ' + (res.message || 'Speichern fehlgeschlagen.')); return; } - ed.geaendert = false; - status('✔ Gespeichert: ' + res.pfad.split(/[\\/]/).pop() + '.' + loecherHinweis()); - } - - async function uebernimm() { - const btn = el('se-uebernehmen'); - btn.disabled = true; - status('Wird hochgeladen …'); - try { - const res = await window.api.skinApplyData(alsBase64(), ed.slim ? 'slim' : 'classic'); - if (res.ok) { - ed.geaendert = false; - status('✔ Skin gesetzt. Im Spiel kann es einen Moment dauern.' + loecherHinweis()); - toast('Skin geändert.'); - } else { - status('✖ ' + (res.message || 'Fehlgeschlagen.')); - } - } finally { - btn.disabled = false; - } - } - - // ---------- Öffnen ---------- - let verdrahtet = false; - - function verdrahte() { - if (verdrahtet) return; - verdrahtet = true; - document.querySelectorAll('[data-se-tool]').forEach((b) => b.addEventListener('click', () => waehleWerkzeug(b.dataset.seTool))); - document.querySelectorAll('[data-se-schicht]').forEach((b) => b.addEventListener('click', () => waehleSchicht(Number(b.dataset.seSchicht)))); - document.querySelectorAll('[data-se-modus]').forEach((b) => b.addEventListener('click', () => waehleModus(b.dataset.seModus))); - el('se-farbe').addEventListener('input', () => setzeFarbe(el('se-farbe').value)); - el('se-hex').addEventListener('change', () => { - let v = el('se-hex').value.trim(); - if (!v.startsWith('#')) v = '#' + v; - if (/^#[0-9a-f]{6}$/i.test(v)) setzeFarbe(v); - else el('se-hex').value = ed.farbe; - }); - el('se-aussen').addEventListener('change', () => { - ed.zeigeAussen = el('se-aussen').checked; - if (!ed.zeigeAussen && ed.schicht === 1) waehleSchicht(0); - planeZeichnen(); - }); - el('se-durch').addEventListener('change', () => { ed.durchscheinen = el('se-durch').checked; planeZeichnen(); }); - el('se-spiegeln').addEventListener('change', () => { ed.spiegeln = el('se-spiegeln').checked; planeZeichnen(); }); - el('se-leeren').addEventListener('click', () => { - askConfirm('2. Schicht leeren?', 'Alle Pixel der 2. Schicht werden durchsichtig. Mit Strg+Z lässt sich das rückgängig machen.', 'Leeren', () => { - const geaendert = aenderung(() => { - for (const f of aufteilung().flaechen) { - if (f.schicht !== 1) continue; - for (let yy = f.y; yy < f.y + f.h; yy++) for (let xx = f.x; xx < f.x + f.w; xx++) setzePixel(xx, yy, [0, 0, 0, 0]); - } - }); - status(geaendert ? '2. Schicht geleert.' : 'Die 2. Schicht war schon leer.'); - }); - }); - el('se-variante').addEventListener('change', () => setzeArmform(el('se-variante').value === 'slim')); - el('se-undo').addEventListener('click', rueckgaengig); - el('se-redo').addEventListener('click', wiederholen); - el('se-neu').addEventListener('click', () => wennVerwerfenOk(() => uebernimmDaten(vorlage(), null, 'Neue Vorlage – leg los!'))); - el('se-laden').addEventListener('click', () => wennVerwerfenOk(ladeAktuellen)); - el('se-oeffnen').addEventListener('click', () => wennVerwerfenOk(() => ladeDatei(null, null))); - el('se-speichern').addEventListener('click', speichere); - el('se-uebernehmen').addEventListener('click', uebernimm); - - document.addEventListener('keydown', (e) => { - if (el('modal-skineditor').classList.contains('hidden')) return; - if (!el('modal-confirm').classList.contains('hidden')) return; - const a = document.activeElement; - if (a && (['INPUT', 'TEXTAREA', 'SELECT'].includes(a.tagName) && a.type !== 'checkbox')) return; - const strg = e.ctrlKey || e.metaKey; - const k = e.key.toLowerCase(); - if (strg && k === 'z' && !e.shiftKey) { e.preventDefault(); rueckgaengig(); return; } - if (strg && (k === 'y' || (k === 'z' && e.shiftKey))) { e.preventDefault(); wiederholen(); return; } - if (strg || e.altKey) return; - const werkzeug = { b: 'stift', e: 'radierer', i: 'pipette', g: 'fuellen' }[k]; - if (werkzeug) { e.preventDefault(); waehleWerkzeug(werkzeug); return; } - if (k === 'm') { e.preventDefault(); el('se-spiegeln').click(); return; } - if (k === 'l') { e.preventDefault(); waehleSchicht(ed.schicht ? 0 : 1); } - }); - - verbinde2D(); - verbinde3D(); - new ResizeObserver(() => passeGroessenAn()).observe(el('se-buehne')); - new ResizeObserver(() => passeGroessenAn()).observe(el('se-mini')); - // Hell/Dunkel gewechselt -> Hintergrund neu - new MutationObserver(() => planeZeichnen()).observe(document.documentElement, { attributes: true, attributeFilter: ['data-theme'] }); - } - - async function openSkinEditor(p = {}) { - if (POPOUT !== 'skineditor') { window.api.popoutOpen('skineditor', p); return; } - verdrahte(); - show('modal-skineditor'); - if (!ed.bereit) { - ed.bereit = true; - el('se-farbe').value = ed.farbe; - el('se-hex').value = ed.farbe; - zeigeZuletzt(); - waehleWerkzeug('stift'); - waehleSchicht(0); - aktualisiereKnoepfe(); - ed.daten = vorlage(); - texturGeaendert(); - waehleModus('2d'); - await erzeugeViewer(); - texturGeaendert(); - } - const variante = p.variante === 'slim' || p.variante === 'classic' ? p.variante : null; - if (p.pfad) wennVerwerfenOk(() => ladeDatei(p.pfad, variante)); - else if (p.quelle === 'aktuell') wennVerwerfenOk(ladeAktuellen); - else if (variante && !ed.geaendert) await setzeArmform(variante === 'slim'); - } - - window.openSkinEditor = openSkinEditor; - // für Tests - window.__skinEditor = { ed, strahl, spiegelPixel, seiten, AUFTEILUNG }; -})(); +'use strict'; + +/* + * skineditor.js – Pixel-Editor für Minecraft-Skins und Umhänge + * ------------------------------------------------------------- + * Ein Skin ist eine einzige 64×64-Textur. Jedes Körperteil hat darin zwei + * Bereiche: die Grundschicht (liegt direkt auf der Figur) und die 2. Schicht + * (eine etwas größere Hülle darüber – Haare, Jacke, Ärmel …). Die 2. Schicht + * darf durchsichtig sein und lässt die Figur dadurch plastischer wirken. + * + * Ein Umhang ist eine Textur im Verhältnis 2:1 – normal 64×32, als HD bis + * 1024×512. Dieselbe Datei trägt auch die Elytra. Eigene Umhänge landen auf + * dem AeroMC-Umhang-Server (Mojang nimmt keine eigenen Umhänge an). + * + * Gemalt wird auf der aufgeklappten Vorlage (2D) oder direkt auf der drehbaren + * Figur (3D); die jeweils andere Ansicht steht klein rechts und ist ebenfalls + * bemalbar. Skin und Umhang sind getrennte "Dokumente" mit eigener Größe und + * eigenem Rückgängig-Verlauf – Werkzeuge, Farben und Spiegeln teilen sie sich. + * + * Läuft im Popup-Fenster "skineditor" und nutzt die Helfer aus renderer.js + * (el, show, toast, askConfirm, POPOUT). + */ + +(() => { + const N = 64; + + // Lage der Körperteile in der Textur. w/h/d = Breite/Höhe/Tiefe in Pixeln, + // base/over = linke obere Ecke des Bereichs der Grund- bzw. 2. Schicht. + const TEILE = [ + { key: 'head', name: 'Kopf', w: 8, h: 8, d: 8, base: [0, 0], over: [32, 0], spiegel: 'head' }, + { key: 'body', name: 'Körper', w: 8, h: 12, d: 4, base: [16, 16], over: [16, 32], spiegel: 'body' }, + { key: 'rightArm', name: 'Rechter Arm', w: 4, h: 12, d: 4, base: [40, 16], over: [40, 32], spiegel: 'leftArm', arm: true }, + { key: 'leftArm', name: 'Linker Arm', w: 4, h: 12, d: 4, base: [32, 48], over: [48, 48], spiegel: 'rightArm', arm: true }, + { key: 'rightLeg', name: 'Rechtes Bein', w: 4, h: 12, d: 4, base: [0, 16], over: [0, 32], spiegel: 'leftLeg' }, + { key: 'leftLeg', name: 'Linkes Bein', w: 4, h: 12, d: 4, base: [16, 48], over: [0, 48], spiegel: 'rightLeg' }, + ]; + const TEIL = Object.fromEntries(TEILE.map((t) => [t.key, t])); + const SEITE_NAME = { oben: 'oben', unten: 'unten', rechts: 'rechte Seite', vorne: 'vorne', links: 'linke Seite', hinten: 'hinten' }; + const SEITE_GEGENSTUECK = { rechts: 'links', links: 'rechts' }; + const SCHICHT_NAME = ['Grundschicht', '2. Schicht']; + + // Rechtecke [x, y, breite, höhe] der sechs Seiten eines Teils (Minecraft-Aufteilung: + // oben/unten in der ersten Reihe, darunter rechts | vorne | links | hinten) + function seiten(teil, schicht, slim) { + const w = teil.arm && slim ? 3 : teil.w; + const { h, d } = teil; + const [u, v] = schicht ? teil.over : teil.base; + return { + oben: [u + d, v, w, d], + unten: [u + d + w, v, w, d], + rechts: [u, v + d, d, h], + vorne: [u + d, v + d, w, h], + links: [u + d + w, v + d, d, h], + hinten: [u + 2 * d + w, v + d, w, h], + }; + } + + // Für jede Armform: Liste aller Flächen und eine Pixel→Fläche-Karte + const AUFTEILUNG = [false, true].map((slim) => { + const flaechen = []; + const karte = new Array(N * N).fill(null); + for (const teil of TEILE) { + for (const schicht of [0, 1]) { + for (const [seite, r] of Object.entries(seiten(teil, schicht, slim))) { + const f = { teil, schicht, seite, x: r[0], y: r[1], w: r[2], h: r[3] }; + flaechen.push(f); + for (let yy = 0; yy < f.h; yy++) for (let xx = 0; xx < f.w; xx++) karte[(f.y + yy) * N + f.x + xx] = f; + } + } + } + return { flaechen, karte }; + }); + + // ---------- Umhang: Flächen in Einheiten der 64×32-Vorlage (×k für HD) ---------- + const UMHANG_STUFEN = [64, 128, 256, 512, 1024]; + const UMHANG_FLAECHEN = [ + { name: 'Außenseite', x: 1, y: 1, w: 10, h: 16 }, + { name: 'Innenseite', x: 12, y: 1, w: 10, h: 16 }, + { name: 'Oberkante', x: 1, y: 0, w: 10, h: 1 }, + { name: 'Unterkante', x: 11, y: 0, w: 10, h: 1 }, + { name: 'Rechte Kante', x: 0, y: 1, w: 1, h: 16, spiegel: 'Linke Kante' }, + { name: 'Linke Kante', x: 11, y: 1, w: 1, h: 16, spiegel: 'Rechte Kante' }, + // die Elytra nutzt dieselbe Datei: ein Flügel als Quader 10×20×2 ab (22, 0) + { name: 'Elytra oben', x: 24, y: 0, w: 10, h: 2, elytra: true }, + { name: 'Elytra unten', x: 34, y: 0, w: 10, h: 2, elytra: true }, + { name: 'Elytra rechte Kante', x: 22, y: 2, w: 2, h: 20, elytra: true, spiegel: 'Elytra linke Kante' }, + { name: 'Elytra außen', x: 24, y: 2, w: 10, h: 20, elytra: true }, + { name: 'Elytra linke Kante', x: 34, y: 2, w: 2, h: 20, elytra: true, spiegel: 'Elytra rechte Kante' }, + { name: 'Elytra innen', x: 36, y: 2, w: 10, h: 20, elytra: true }, + ]; + const umhangAufteilungen = new Map(); // Breite -> { flaechen, karte } + function umhangLayout(w) { + if (umhangAufteilungen.has(w)) return umhangAufteilungen.get(w); + const k = w / 64; + const h = w / 2; + const flaechen = UMHANG_FLAECHEN.map((f) => ({ ...f, umhang: true, x: f.x * k, y: f.y * k, w: f.w * k, h: f.h * k })); + const karte = new Int16Array(w * h).fill(-1); + flaechen.forEach((f, i) => { + for (let yy = 0; yy < f.h; yy++) karte.fill(i, (f.y + yy) * w + f.x, (f.y + yy) * w + f.x + f.w); + }); + const ergebnis = { flaechen, karte }; + umhangAufteilungen.set(w, ergebnis); + return ergebnis; + } + + // ---------- Dokumente ---------- + function neuesDok(art, w, h) { + return { art, w, h, daten: new Uint8ClampedArray(w * h * 4), undo: [], redo: [], geaendert: false }; + } + const skinDok = neuesDok('skin', N, N); + const umhangDok = neuesDok('umhang', 64, 32); + // Rückgängig-Verlauf je Dokument auf ~64 MB begrenzen (HD-Umhänge sind groß) + const maxUndo = (d) => Math.max(10, Math.min(100, Math.floor(64e6 / (d.w * d.h * 4)))); + const schnappschuss = (d) => ({ w: d.w, h: d.h, daten: d.daten.slice() }); + + // ---------- Zustand ---------- + const ed = { + slim: false, + werkzeug: 'stift', + vorPipette: 'stift', + farbe: '#3a6ea5', + schicht: 0, + zeigeAussen: true, + durchscheinen: true, + spiegeln: false, + pinsel: 1, + elytra: false, + modus: '2d', + hover: null, + strich: null, // { dok, snap, letzter: [x,y] | null, letzterBild: [cx,cy] | null, geaendert } + viewer: null, + bereit: false, + zeichnenGeplant: false, + }; + const dok = () => (ed.modus === 'umhang' ? umhangDok : skinDok); + + const textur = document.createElement('canvas'); + textur.width = textur.height = N; + const texturCtx = textur.getContext('2d', { willReadFrequently: true }); + const umhangTextur = document.createElement('canvas'); + umhangTextur.width = 64; + umhangTextur.height = 32; + // Grundschicht als Schatten unter die 2. Schicht legen (Option "durchscheinen") + const schatten = document.createElement('canvas'); + schatten.width = schatten.height = N; + const schattenCtx = schatten.getContext('2d'); + // Hintergrund (Karomuster in den Flächen) je Armform einmal vorberechnet + const hintergrund = [null, null]; + + const aufteilung = () => AUFTEILUNG[ed.slim ? 1 : 0]; + const dunkel = () => document.documentElement.getAttribute('data-theme') === 'dark'; + + function flaecheBei(x, y) { + const d = dok(); + if (x < 0 || y < 0 || x >= d.w || y >= d.h) return null; + if (d.art === 'umhang') { + const L = umhangLayout(d.w); + const i = L.karte[y * d.w + x]; + return i < 0 ? null : L.flaechen[i]; + } + return aufteilung().karte[y * N + x]; + } + const darfMalen = (f) => !!f && (f.umhang || f.schicht === ed.schicht); + + function hexZuRgb(hex) { + const m = /^#?([0-9a-f]{6})$/i.exec(hex || ''); + if (!m) return [0, 0, 0]; + const n = parseInt(m[1], 16); + return [(n >> 16) & 255, (n >> 8) & 255, n & 255]; + } + const rgbZuHex = (r, g, b) => '#' + [r, g, b].map((v) => v.toString(16).padStart(2, '0')).join(''); + + // Pixel auf der gespiegelten Seite: beim Skin rechter ↔ linker Arm/Bein und + // rechte ↔ linke Seite, beim Umhang innerhalb der Fläche bzw. Kante ↔ Kante + function spiegelPixel(x, y) { + const f = flaecheBei(x, y); + if (!f) return null; + const fx = x - f.x; + const fy = y - f.y; + if (f.umhang) { + const p = f.spiegel ? umhangLayout(dok().w).flaechen.find((g) => g.name === f.spiegel) : f; + return [p.x + (p.w - 1 - fx), p.y + fy]; + } + const partner = TEIL[f.teil.spiegel]; + const seite = SEITE_GEGENSTUECK[f.seite] || f.seite; + const r = seiten(partner, f.schicht, ed.slim)[seite]; + return [r[0] + (r[2] - 1 - fx), r[1] + fy]; + } + + // ---------- Daten ändern ---------- + function setzePixel(x, y, rgba) { + const d = dok(); + const i = (y * d.w + x) * 4; + const p = d.daten; + if (p[i] === rgba[0] && p[i + 1] === rgba[1] && p[i + 2] === rgba[2] && p[i + 3] === rgba[3]) return false; + p[i] = rgba[0]; p[i + 1] = rgba[1]; p[i + 2] = rgba[2]; p[i + 3] = rgba[3]; + return true; + } + + function zielPixel(x, y) { + const liste = [[x, y]]; + if (ed.spiegeln) { + const s = spiegelPixel(x, y); + if (s && (s[0] !== x || s[1] !== y)) liste.push(s); + } + return liste; + } + + // Pinsel (nur beim Umhang größer als 1): Quadrat um den Pixel, beschnitten auf die Fläche + function pinselPunkte(x, y, f) { + const p = dok().art === 'umhang' ? ed.pinsel : 1; + if (p <= 1) return [[x, y]]; + const o = Math.floor((p - 1) / 2); + const punkte = []; + for (let yy = Math.max(f.y, y - o); yy < Math.min(f.y + f.h, y - o + p); yy++) { + for (let xx = Math.max(f.x, x - o); xx < Math.min(f.x + f.w, x - o + p); xx++) punkte.push([xx, yy]); + } + return punkte; + } + + function malFarbe() { + if (ed.werkzeug === 'radierer') return [0, 0, 0, 0]; + return [...hexZuRgb(ed.farbe), 255]; + } + + // Einen Pixel (samt Pinsel und Spiegelung) mit Stift oder Radierer bearbeiten + function malePixel(x, y) { + const f = flaecheBei(x, y); + if (!darfMalen(f)) return false; + let geaendert = false; + const rgba = malFarbe(); + for (const [bx, by] of pinselPunkte(x, y, f)) { + for (const [px, py] of zielPixel(bx, by)) if (setzePixel(px, py, rgba)) geaendert = true; + } + return geaendert; + } + + // Füllen: zusammenhängende gleichfarbige Pixel innerhalb derselben Fläche + function fuelle(x, y) { + const f = flaecheBei(x, y); + if (!darfMalen(f)) return false; + const d = dok(); + const p = d.daten; + const i0 = (y * d.w + x) * 4; + const alt = [p[i0], p[i0 + 1], p[i0 + 2], p[i0 + 3]]; + const neu = malFarbe(); + if (alt.every((v, k) => v === neu[k])) return false; + const gleich = (px, py) => { + const i = (py * d.w + px) * 4; + return p[i] === alt[0] && p[i + 1] === alt[1] && p[i + 2] === alt[2] && p[i + 3] === alt[3]; + }; + const gesehen = new Uint8Array(d.w * d.h); + const stapel = [[x, y]]; + const treffer = []; + while (stapel.length) { + const [px, py] = stapel.pop(); + if (px < f.x || py < f.y || px >= f.x + f.w || py >= f.y + f.h) continue; + const k = py * d.w + px; + if (gesehen[k]) continue; + gesehen[k] = 1; + if (!gleich(px, py)) continue; + treffer.push([px, py]); + stapel.push([px + 1, py], [px - 1, py], [px, py + 1], [px, py - 1]); + } + let geaendert = false; + for (const [px, py] of treffer) for (const [zx, zy] of zielPixel(px, py)) if (setzePixel(zx, zy, neu)) geaendert = true; + return geaendert; + } + + function nimmFarbe(x, y) { + const d = dok(); + const i = (y * d.w + x) * 4; + if (d.daten[i + 3] === 0) return false; + setzeFarbe(rgbZuHex(d.daten[i], d.daten[i + 1], d.daten[i + 2])); + return true; + } + + // ---------- Striche, Rückgängig ---------- + function merkeRueckgaengig(d, vorher) { + d.undo.push(vorher); + while (d.undo.length > maxUndo(d)) d.undo.shift(); + d.redo = []; + d.geaendert = true; + } + + function beginneStrich() { + ed.strich = { dok: dok(), snap: schnappschuss(dok()), letzter: null, letzterBild: null, geaendert: false }; + } + + function beendeStrich() { + const s = ed.strich; + ed.strich = null; + if (!s || !s.geaendert) return; + merkeRueckgaengig(s.dok, s.snap); + if (ed.werkzeug !== 'radierer') merkeFarbe(ed.farbe); + aktualisiereKnoepfe(); + } + + // Werkzeug auf einen Texturpixel anwenden (während eines Strichs) + function wendeAn(x, y) { + const s = ed.strich; + if (!s || s.dok !== dok()) return; + if (ed.werkzeug === 'pipette') { + nimmFarbe(x, y); + return; + } + if (ed.werkzeug === 'fuellen') { + if (s.letzter) return; // ein Klick = eine Füllung + s.letzter = [x, y]; + if (fuelle(x, y)) { s.geaendert = true; texturGeaendert(); } + return; + } + let geaendert = false; + // Lücken zwischen zwei Mausereignissen schließen (nur innerhalb der Vorlage + // sinnvoll, auf der Figur liegen benachbarte Pixel nicht nebeneinander) + const punkte = s.letzter && s.zweiD ? linie(s.letzter[0], s.letzter[1], x, y) : [[x, y]]; + for (const [px, py] of punkte) if (malePixel(px, py)) geaendert = true; + s.letzter = [x, y]; + if (geaendert) { s.geaendert = true; texturGeaendert(); } + } + + function linie(x0, y0, x1, y1) { + const punkte = []; + const dx = Math.abs(x1 - x0), sx = x0 < x1 ? 1 : -1; + const dy = -Math.abs(y1 - y0), sy = y0 < y1 ? 1 : -1; + let err = dx + dy; + for (;;) { + punkte.push([x0, y0]); + if (x0 === x1 && y0 === y1) break; + const e2 = 2 * err; + if (e2 >= dy) { err += dy; x0 += sx; } + if (e2 <= dx) { err += dx; y0 += sy; } + } + return punkte; + } + + function stelleHer(d, sn) { + const andereGroesse = sn.w !== d.w || sn.h !== d.h; + d.w = sn.w; d.h = sn.h; d.daten = sn.daten; + d.geaendert = true; + if (andereGroesse) nachGroessenwechsel(); + texturGeaendert(); + aktualisiereKnoepfe(); + } + + function rueckgaengig() { + const d = dok(); + if (!d.undo.length || ed.strich) return; + d.redo.push(schnappschuss(d)); + stelleHer(d, d.undo.pop()); + } + + function wiederholen() { + const d = dok(); + if (!d.redo.length || ed.strich) return; + d.undo.push(schnappschuss(d)); + stelleHer(d, d.redo.pop()); + } + + // ganze Änderung (Laden, Leeren, Größe …) als ein Rückgängig-Schritt + function aenderung(fn) { + const d = dok(); + const vorher = schnappschuss(d); + fn(); + const gleich = vorher.w === d.w && vorher.h === d.h && vorher.daten.every((v, i) => v === d.daten[i]); + if (gleich) return false; + merkeRueckgaengig(d, vorher); + if (vorher.w !== d.w) nachGroessenwechsel(); + texturGeaendert(); + aktualisiereKnoepfe(); + return true; + } + + // ---------- Farben ---------- + const FARB_SCHLUESSEL = 'aeromc-skin-farben'; + const STANDARD_FARBEN = ['#000000', '#ffffff', '#c69c6d', '#a87b4f', '#6b4a2f', '#3b2416', '#d32f2f', '#f9a825', + '#43a047', '#1e88e5', '#3949ab', '#8e24aa', '#00897b', '#757575', '#424242', '#ff8a65']; + let zuletzt = []; + try { zuletzt = JSON.parse(localStorage.getItem(FARB_SCHLUESSEL) || '[]'); } catch { zuletzt = []; } + if (!Array.isArray(zuletzt) || !zuletzt.length) zuletzt = STANDARD_FARBEN.slice(); + + function merkeFarbe(hex) { + zuletzt = [hex, ...zuletzt.filter((f) => f !== hex)].slice(0, 16); + try { localStorage.setItem(FARB_SCHLUESSEL, JSON.stringify(zuletzt)); } catch { /* egal */ } + zeigeZuletzt(); + } + + function zeigeZuletzt() { + const box = el('se-zuletzt'); + box.innerHTML = ''; + for (const f of zuletzt) { + const b = document.createElement('button'); + b.className = 'se-farbfeld' + (f === ed.farbe ? ' on' : ''); + b.style.background = f; + b.title = f; + b.addEventListener('click', () => setzeFarbe(f)); + box.appendChild(b); + } + } + + function setzeFarbe(hex) { + ed.farbe = hex.toLowerCase(); + el('se-farbe').value = ed.farbe; + el('se-hex').value = ed.farbe; + // nach dem Aufnehmen zurück zum vorherigen Werkzeug; mit dem Radierer + // ergibt eine neue Farbe keinen Sinn -> Stift + if (ed.werkzeug === 'pipette') waehleWerkzeug(ed.vorPipette === 'radierer' ? 'stift' : ed.vorPipette); + else if (ed.werkzeug === 'radierer') waehleWerkzeug('stift'); + zeigeZuletzt(); + } + + // ---------- Bedienelemente ---------- + const radiererGesperrt = () => dok().art === 'skin' && ed.schicht === 0; + + function waehleWerkzeug(w) { + if (w === 'radierer' && radiererGesperrt()) w = 'stift'; + if (w === 'pipette' && ed.werkzeug !== 'pipette') ed.vorPipette = ed.werkzeug; + ed.werkzeug = w; + document.querySelectorAll('[data-se-tool]').forEach((b) => b.classList.toggle('on', b.dataset.seTool === w)); + for (const h of [el('se-2d'), el('se-3d'), el('se-u2d')]) h.dataset.werkzeug = w; + } + + function aktualisiereRadierer() { + const radierer = document.querySelector('[data-se-tool="radierer"]'); + const gesperrt = radiererGesperrt(); + radierer.disabled = gesperrt; + radierer.title = gesperrt + ? 'Radierer – nur in der 2. Schicht (die Grundschicht darf keine Löcher haben)' + : 'Radierer (E) – macht Pixel durchsichtig'; + if (gesperrt && ed.werkzeug === 'radierer') waehleWerkzeug('stift'); + } + + function waehleSchicht(s) { + ed.schicht = s; + document.querySelectorAll('[data-se-schicht]').forEach((b) => b.classList.toggle('on', Number(b.dataset.seSchicht) === s)); + // die 2. Schicht muss sichtbar sein, wenn man darauf malen will + if (s === 1 && !ed.zeigeAussen) { ed.zeigeAussen = true; el('se-aussen').checked = true; } + aktualisiereRadierer(); + el('se-durch').disabled = s === 0; + ed.hover = null; + texturGeaendert(); + } + + const MINI_TITEL = { '2d': '3D-Vorschau', '3d': 'Vorlage', umhang: '3D-Vorschau (Rücken)' }; + const TIPP = { + skin: 'Beide Ansichten sind bemalbar. Die 2. Schicht liegt wie eine Hülle über der Figur – lässt man Pixel darin frei, wirken Haare, Kapuzen oder Ärmel plastisch.', + umhang: 'Auch die Figur ist bemalbar. Eigene Umhänge liegen auf dem AeroMC-Umhang-Server – im Spiel sehen sie Spieler mit dem AeroMC-Umhang-Mod. Die Datei trägt auch die Elytra.', + }; + + function waehleModus(m) { + const warUmhang = ed.modus === 'umhang'; + if (ed.strich) beendeStrich(); + ed.modus = m; + ed.hover = null; + document.querySelectorAll('[data-se-modus]').forEach((b) => b.classList.toggle('on', b.dataset.seModus === m)); + const gross = el('se-buehne'); + const klein = el('se-mini'); + const ablage = el('se-ablage'); + if (m === 'umhang') { + gross.appendChild(el('se-u2d')); + klein.appendChild(el('se-3d')); + ablage.appendChild(el('se-2d')); + } else { + gross.appendChild(m === '2d' ? el('se-2d') : el('se-3d')); + klein.appendChild(m === '2d' ? el('se-3d') : el('se-2d')); + ablage.appendChild(el('se-u2d')); + } + el('se-mini-titel').textContent = MINI_TITEL[m]; + const umhang = m === 'umhang'; + el('se-gruppe-ebene').classList.toggle('hidden', umhang); + el('se-gruppe-umhang').classList.toggle('hidden', !umhang); + el('se-laden').textContent = umhang ? 'Aktuellen Umhang laden' : 'Aktuellen Skin laden'; + el('se-laden').title = umhang ? 'Deinen AeroMC-Umhang bzw. den getragenen offiziellen Umhang laden' : 'Den Skin deines angemeldeten Kontos laden'; + el('se-neu').title = umhang ? 'Mit einer einfachen Umhang-Vorlage beginnen' : 'Mit einer leeren Vorlage beginnen'; + el('se-uebernehmen').textContent = umhang ? 'Als Umhang übernehmen' : 'Als Skin übernehmen'; + el('se-tipp').innerHTML = umhang ? TIPP.umhang : TIPP.skin; + aktualisiereRadierer(); + aktualisiereKnoepfe(); + if (warUmhang !== umhang) zeigeUmhangAufFigur(umhang); + texturGeaendert(); + passeGroessenAn(); + } + + function aktualisiereKnoepfe() { + el('se-undo').disabled = !dok().undo.length; + el('se-redo').disabled = !dok().redo.length; + } + + function zeigeInfo() { + const info = el('se-info'); + const h = ed.hover; + const f = h && flaecheBei(h[0], h[1]); + if (f) { + info.textContent = f.umhang + ? `Umhang · ${f.name} · Pixel ${h[0]}, ${h[1]}` + : `${f.teil.name} · ${SEITE_NAME[f.seite]} · ${SCHICHT_NAME[f.schicht]} · Pixel ${h[0]}, ${h[1]}`; + return; + } + if (ed.modus === 'umhang') { + info.textContent = `${umhangDok.w}×${umhangDok.h} · Linke Maustaste malt · Mausrad zoomt · rechte Maustaste verschiebt · Alt+Klick nimmt Farbe auf`; + } else { + info.textContent = ed.modus === '3d' + ? 'Linke Maustaste malt · rechte Maustaste dreht · Mausrad zoomt · Alt+Klick nimmt Farbe auf' + : 'Linke Maustaste malt · Alt+Klick nimmt eine Farbe auf · abgedunkelte Bereiche gehören zur anderen Schicht'; + } + } + + function status(text) { el('se-status').textContent = text || ''; el('se-status').title = text || ''; } + + // ---------- Zeichnen ---------- + function texturGeaendert() { + if (dok().art === 'umhang') { + if (umhangTextur.width !== umhangDok.w || umhangTextur.height !== umhangDok.h) { + umhangTextur.width = umhangDok.w; + umhangTextur.height = umhangDok.h; + } + umhangTextur.getContext('2d').putImageData(new ImageData(umhangDok.daten, umhangDok.w, umhangDok.h), 0, 0); + planeZeichnen(); + return; + } + texturCtx.putImageData(new ImageData(skinDok.daten, N, N), 0, 0); + // Schatten: Grundschicht-Pixel an die Stelle der zugehörigen 2. Schicht legen + const s = schattenCtx.createImageData(N, N); + const p = skinDok.daten; + for (const f of aufteilung().flaechen) { + if (f.schicht !== 1) continue; + const r = seiten(f.teil, 0, ed.slim)[f.seite]; + for (let yy = 0; yy < f.h; yy++) { + for (let xx = 0; xx < f.w; xx++) { + const q = ((r[1] + yy) * N + r[0] + xx) * 4; + const z = ((f.y + yy) * N + f.x + xx) * 4; + s.data[z] = p[q]; s.data[z + 1] = p[q + 1]; s.data[z + 2] = p[q + 2]; s.data[z + 3] = p[q + 3]; + } + } + } + schattenCtx.putImageData(s, 0, 0); + planeZeichnen(); + } + + function planeZeichnen() { + if (ed.zeichnenGeplant) return; + ed.zeichnenGeplant = true; + requestAnimationFrame(() => { + ed.zeichnenGeplant = false; + if (ed.modus === 'umhang') zeichneUmhang2D(); + else zeichne2D(); + zeichne3D(); + zeigeInfo(); + }); + } + + function hintergrundFuer(slim) { + const k = slim ? 1 : 0; + if (hintergrund[k] && hintergrund[k].dunkel === dunkel()) return hintergrund[k].canvas; + const c = document.createElement('canvas'); + c.width = c.height = N; + const g = c.getContext('2d'); + const img = g.createImageData(N, N); + const [a, b] = dunkel() ? [[58, 58, 64], [48, 48, 54]] : [[236, 236, 238], [218, 219, 223]]; + for (const f of AUFTEILUNG[k].flaechen) { + for (let yy = f.y; yy < f.y + f.h; yy++) { + for (let xx = f.x; xx < f.x + f.w; xx++) { + const farbe = (xx + yy) % 2 ? a : b; + const i = (yy * N + xx) * 4; + img.data[i] = farbe[0]; img.data[i + 1] = farbe[1]; img.data[i + 2] = farbe[2]; img.data[i + 3] = 255; + } + } + } + g.putImageData(img, 0, 0); + hintergrund[k] = { canvas: c, dunkel: dunkel() }; + return c; + } + + // sichtbare Textur für die 2D-Ansicht: ohne ungenutzte Bereiche und, falls + // ausgeblendet, ohne 2. Schicht + const sicht = document.createElement('canvas'); + sicht.width = sicht.height = N; + const sichtCtx = sicht.getContext('2d'); + + function zeichne2D() { + const canvas = el('se-2d-canvas'); + const k = Number(canvas.dataset.k) || 0; + if (!k) return; + const g = canvas.getContext('2d'); + g.setTransform(1, 0, 0, 1, 0, 0); + g.clearRect(0, 0, canvas.width, canvas.height); + g.imageSmoothingEnabled = false; + g.setTransform(k, 0, 0, k, 0, 0); + g.fillStyle = dunkel() ? '#1c1c1f' : '#c9ccd1'; + g.fillRect(0, 0, N, N); + g.drawImage(hintergrundFuer(ed.slim), 0, 0); + + if (ed.schicht === 1 && ed.durchscheinen) { + g.globalAlpha = 0.35; + g.drawImage(schatten, 0, 0); + g.globalAlpha = 1; + } + sichtCtx.clearRect(0, 0, N, N); + const img = sichtCtx.createImageData(N, N); + const karte = aufteilung().karte; + const p = skinDok.daten; + for (let i = 0; i < N * N; i++) { + const f = karte[i]; + if (!f || (f.schicht === 1 && !ed.zeigeAussen)) continue; + const q = i * 4; + img.data[q] = p[q]; img.data[q + 1] = p[q + 1]; img.data[q + 2] = p[q + 2]; img.data[q + 3] = p[q + 3]; + } + sichtCtx.putImageData(img, 0, 0); + g.drawImage(sicht, 0, 0); + + // andere Schicht abdunkeln + g.fillStyle = dunkel() ? 'rgba(20,20,22,.62)' : 'rgba(40,44,52,.45)'; + for (const f of aufteilung().flaechen) if (f.schicht !== ed.schicht) g.fillRect(f.x, f.y, f.w, f.h); + + const px = 1 / k; + // Pixelraster + if (k >= 6) { + g.strokeStyle = dunkel() ? 'rgba(255,255,255,.07)' : 'rgba(0,0,0,.08)'; + g.lineWidth = px; + g.beginPath(); + for (let i = 1; i < N; i++) { g.moveTo(i, 0); g.lineTo(i, N); g.moveTo(0, i); g.lineTo(N, i); } + g.stroke(); + } + // Flächenränder + g.lineWidth = 1.5 * px; + for (const f of aufteilung().flaechen) { + g.strokeStyle = f.schicht === ed.schicht + ? (dunkel() ? 'rgba(255,255,255,.45)' : 'rgba(0,0,0,.4)') + : (dunkel() ? 'rgba(255,255,255,.12)' : 'rgba(0,0,0,.12)'); + g.strokeRect(f.x, f.y, f.w, f.h); + } + // Mauszeiger und gespiegelter Partner + if (ed.hover) { + const [hx, hy] = ed.hover; + g.lineWidth = 2 * px; + g.strokeStyle = dunkel() ? '#ffffff' : '#000000'; + g.strokeRect(hx + px, hy + px, 1 - 2 * px, 1 - 2 * px); + if (ed.spiegeln) { + const s = spiegelPixel(hx, hy); + if (s && (s[0] !== hx || s[1] !== hy)) { + g.setLineDash([2 * px, 2 * px]); + g.strokeRect(s[0] + px, s[1] + px, 1 - 2 * px, 1 - 2 * px); + g.setLineDash([]); + } + } + } + } + + // ---------- Umhang-Vorlage (2D) mit Zoom und Verschieben ---------- + const ansicht = { zoom: 1, mx: 0.5, my: 0.5 }; // Mittelpunkt als Anteil der Textur + let karoMuster = null; + let karoDunkel = null; + + function umhangTransform() { + const c = el('se-u2d-canvas'); + const d = umhangDok; + const basis = Math.min(c.width / d.w, c.height / d.h) * 0.96; + const s = basis * ansicht.zoom; + return { s, ox: c.width / 2 - ansicht.mx * d.w * s, oy: c.height / 2 - ansicht.my * d.h * s }; + } + + function einpassen() { + ansicht.zoom = 1; ansicht.mx = 0.5; ansicht.my = 0.5; + planeZeichnen(); + } + + function zeichneUmhang2D() { + const c = el('se-u2d-canvas'); + if (!c.width || !c.height) return; + const g = c.getContext('2d'); + const d = umhangDok; + const L = umhangLayout(d.w); + const dpr = window.devicePixelRatio || 1; + const { s, ox, oy } = umhangTransform(); + g.setTransform(1, 0, 0, 1, 0, 0); + g.clearRect(0, 0, c.width, c.height); + g.fillStyle = dunkel() ? '#1c1c1f' : '#c9ccd1'; + g.fillRect(ox, oy, d.w * s, d.h * s); + // Karomuster in den Flächen (Durchsichtiges sichtbar machen) + if (!karoMuster || karoDunkel !== dunkel()) { + const kc = document.createElement('canvas'); + kc.width = kc.height = 16; + const kg = kc.getContext('2d'); + const [a, b] = dunkel() ? ['#3a3a40', '#303036'] : ['#ececee', '#dadbdf']; + kg.fillStyle = a; kg.fillRect(0, 0, 16, 16); + kg.fillStyle = b; kg.fillRect(0, 0, 8, 8); kg.fillRect(8, 8, 8, 8); + karoMuster = g.createPattern(kc, 'repeat'); + karoDunkel = dunkel(); + } + g.fillStyle = karoMuster; + for (const f of L.flaechen) g.fillRect(ox + f.x * s, oy + f.y * s, f.w * s, f.h * s); + g.imageSmoothingEnabled = false; + g.drawImage(umhangTextur, ox, oy, d.w * s, d.h * s); + // Elytra-Bereich leicht abgedunkelt, solange der Umhang gezeigt wird + if (!ed.elytra) { + g.fillStyle = dunkel() ? 'rgba(20,20,22,.35)' : 'rgba(40,44,52,.2)'; + for (const f of L.flaechen) if (f.elytra) g.fillRect(ox + f.x * s, oy + f.y * s, f.w * s, f.h * s); + } + // Pixelraster nur, wenn die Pixel groß genug sind (sichtbarer Ausschnitt) + if (s >= 6 * dpr) { + const x0 = Math.max(0, Math.floor(-ox / s)), x1 = Math.min(d.w, Math.ceil((c.width - ox) / s)); + const y0 = Math.max(0, Math.floor(-oy / s)), y1 = Math.min(d.h, Math.ceil((c.height - oy) / s)); + g.strokeStyle = dunkel() ? 'rgba(255,255,255,.07)' : 'rgba(0,0,0,.08)'; + g.lineWidth = 1; + g.beginPath(); + for (let i = x0; i <= x1; i++) { const x = Math.round(ox + i * s) + 0.5; g.moveTo(x, oy + y0 * s); g.lineTo(x, oy + y1 * s); } + for (let i = y0; i <= y1; i++) { const y = Math.round(oy + i * s) + 0.5; g.moveTo(ox + x0 * s, y); g.lineTo(ox + x1 * s, y); } + g.stroke(); + } + // Flächenränder und Beschriftung + g.lineWidth = 1.5 * dpr; + g.font = `${Math.round(11 * dpr)}px "Segoe UI", sans-serif`; + g.textBaseline = 'top'; + for (const f of L.flaechen) { + g.strokeStyle = dunkel() ? 'rgba(255,255,255,.45)' : 'rgba(0,0,0,.4)'; + g.strokeRect(ox + f.x * s, oy + f.y * s, f.w * s, f.h * s); + if (f.w * s > 80 * dpr && f.h * s > 24 * dpr) { + g.fillStyle = dunkel() ? 'rgba(255,255,255,.55)' : 'rgba(0,0,0,.5)'; + g.fillText(f.name, ox + f.x * s + 4 * dpr, oy + f.y * s + 3 * dpr); + } + } + // Pinsel unter der Maus (+ gespiegelt) + if (ed.hover) { + const f = flaecheBei(ed.hover[0], ed.hover[1]); + if (f) { + g.lineWidth = 2 * dpr; + g.strokeStyle = dunkel() ? '#ffffff' : '#000000'; + const rahmen = (punkte) => { + let ax = Infinity, ay = Infinity, bx = -Infinity, by = -Infinity; + for (const [x, y] of punkte) { ax = Math.min(ax, x); ay = Math.min(ay, y); bx = Math.max(bx, x); by = Math.max(by, y); } + if (ax !== Infinity) g.strokeRect(ox + ax * s, oy + ay * s, (bx - ax + 1) * s, (by - ay + 1) * s); + }; + const punkte = ed.werkzeug === 'pipette' || ed.werkzeug === 'fuellen' ? [ed.hover] : pinselPunkte(ed.hover[0], ed.hover[1], f); + rahmen(punkte); + if (ed.spiegeln) { + const gesp = punkte.map(([x, y]) => spiegelPixel(x, y)).filter(Boolean); + g.setLineDash([4 * dpr, 4 * dpr]); + rahmen(gesp); + g.setLineDash([]); + } + } + } + } + + function zeichne3D() { + const v = ed.viewer; + if (!v) return; + if (ed.modus === 'umhang') { + if (!v.capeTexture || v.capeCanvas.width !== umhangDok.w || v.capeCanvas.height !== umhangDok.h) return; + const g = v.capeCanvas.getContext('2d'); + g.clearRect(0, 0, umhangDok.w, umhangDok.h); + g.drawImage(umhangTextur, 0, 0); + if (ed.hover && ed.werkzeug !== 'pipette') { + const f = flaecheBei(ed.hover[0], ed.hover[1]); + if (f) { + const punkte = ed.werkzeug === 'fuellen' ? [ed.hover] : pinselPunkte(ed.hover[0], ed.hover[1], f); + g.fillStyle = 'rgba(255,255,255,.6)'; + for (const [x, y] of punkte) for (const [px, py] of zielPixel(x, y)) g.fillRect(px, py, 1, 1); + } + } + v.capeTexture.needsUpdate = true; + return; + } + if (!v.skinTexture) return; + const g = v.skinCanvas.getContext('2d'); + if (v.skinCanvas.width !== N || v.skinCanvas.height !== N) { v.skinCanvas.width = N; v.skinCanvas.height = N; } + g.clearRect(0, 0, N, N); + g.drawImage(textur, 0, 0); + // Pixel unter der Maus hervorheben + if (ed.hover && ed.werkzeug !== 'pipette') { + const ziele = ed.spiegeln ? zielPixel(ed.hover[0], ed.hover[1]) : [ed.hover]; + for (const [hx, hy] of ziele) { + const i = (hy * N + hx) * 4; + const p = skinDok.daten; + const hell = p[i + 3] === 0 || (p[i] + p[i + 1] + p[i + 2]) < 380; + g.fillStyle = hell ? 'rgba(255,255,255,.75)' : 'rgba(0,0,0,.55)'; + g.fillRect(hx, hy, 1, 1); + } + } + v.skinTexture.needsUpdate = true; + v.playerObject.skin.setOuterLayerVisible(ed.zeigeAussen); + } + + // ---------- Größen ---------- + function passeGroessenAn() { + const dpr = window.devicePixelRatio || 1; + const h2 = el('se-2d'); + if (h2.clientWidth) { + const c = el('se-2d-canvas'); + const platz = Math.min(h2.clientWidth, h2.clientHeight) - 8; + const s = Math.max(1, Math.floor(platz / N)); + c.style.width = c.style.height = (s * N) + 'px'; + c.width = c.height = Math.round(s * N * dpr); + c.dataset.k = String((s * N * dpr) / N); + } + const hu = el('se-u2d'); + if (hu.clientWidth) { + const c = el('se-u2d-canvas'); + c.style.width = hu.clientWidth + 'px'; + c.style.height = hu.clientHeight + 'px'; + c.width = Math.round(hu.clientWidth * dpr); + c.height = Math.round(hu.clientHeight * dpr); + } + const h3 = el('se-3d'); + if (ed.viewer && h3.clientWidth && h3.clientHeight) ed.viewer.setSize(h3.clientWidth, h3.clientHeight); + planeZeichnen(); + } + + // ---------- 2D-Eingabe (Skin) ---------- + function texelAus2D(e) { + const c = el('se-2d-canvas'); + const r = c.getBoundingClientRect(); + const x = Math.floor(((e.clientX - r.left) / r.width) * N); + const y = Math.floor(((e.clientY - r.top) / r.height) * N); + return x >= 0 && y >= 0 && x < N && y < N ? [x, y] : null; + } + + function verbinde2D() { + const c = el('se-2d-canvas'); + c.addEventListener('pointerdown', (e) => { + if (e.button !== 0 || ed.modus === 'umhang') return; + const t = texelAus2D(e); + if (!t) return; + e.preventDefault(); + try { c.setPointerCapture(e.pointerId); } catch { /* egal */ } + if (e.altKey) { nimmFarbe(t[0], t[1]); return; } + beginneStrich(); + ed.strich.zweiD = true; + wendeAn(t[0], t[1]); + }); + c.addEventListener('pointermove', (e) => { + if (ed.modus === 'umhang') return; + const t = texelAus2D(e); + if (ed.strich && t) wendeAn(t[0], t[1]); + const neu = t && flaecheBei(t[0], t[1]) ? t : null; + if (String(neu) !== String(ed.hover)) { ed.hover = neu; planeZeichnen(); } + }); + const ende = () => beendeStrich(); + c.addEventListener('pointerup', ende); + c.addEventListener('pointercancel', ende); + c.addEventListener('pointerleave', () => { if (!ed.strich && ed.hover) { ed.hover = null; planeZeichnen(); } }); + } + + // ---------- 2D-Eingabe (Umhang): malen, zoomen, verschieben ---------- + function bildpunkt(e) { + const c = el('se-u2d-canvas'); + const r = c.getBoundingClientRect(); + const dpr = c.width / (r.width || 1); + return [(e.clientX - r.left) * dpr, (e.clientY - r.top) * dpr]; + } + + function texelAusUmhang(e) { + const [px, py] = bildpunkt(e); + const { s, ox, oy } = umhangTransform(); + const x = Math.floor((px - ox) / s); + const y = Math.floor((py - oy) / s); + return x >= 0 && y >= 0 && x < umhangDok.w && y < umhangDok.h ? [x, y] : null; + } + + function verbindeUmhang2D() { + const c = el('se-u2d-canvas'); + let schieben = null; // { x, y, mx, my } + c.addEventListener('contextmenu', (e) => e.preventDefault()); + c.addEventListener('pointerdown', (e) => { + e.preventDefault(); + try { c.setPointerCapture(e.pointerId); } catch { /* egal */ } + if (e.button === 1 || e.button === 2) { + const [px, py] = bildpunkt(e); + schieben = { x: px, y: py, mx: ansicht.mx, my: ansicht.my }; + return; + } + if (e.button !== 0) return; + const t = texelAusUmhang(e); + if (!t) return; + if (e.altKey) { nimmFarbe(t[0], t[1]); return; } + beginneStrich(); + ed.strich.zweiD = true; + wendeAn(t[0], t[1]); + }); + c.addEventListener('pointermove', (e) => { + if (schieben) { + const [px, py] = bildpunkt(e); + const { s } = umhangTransform(); + ansicht.mx = Math.min(1, Math.max(0, schieben.mx - (px - schieben.x) / (umhangDok.w * s))); + ansicht.my = Math.min(1, Math.max(0, schieben.my - (py - schieben.y) / (umhangDok.h * s))); + planeZeichnen(); + return; + } + const t = texelAusUmhang(e); + if (ed.strich && t) wendeAn(t[0], t[1]); + const neu = t && flaecheBei(t[0], t[1]) ? t : null; + if (String(neu) !== String(ed.hover)) { ed.hover = neu; planeZeichnen(); } + }); + const ende = () => { schieben = null; beendeStrich(); }; + c.addEventListener('pointerup', ende); + c.addEventListener('pointercancel', ende); + c.addEventListener('pointerleave', () => { if (!ed.strich && ed.hover) { ed.hover = null; planeZeichnen(); } }); + // Mausrad zoomt um die Mausposition + c.addEventListener('wheel', (e) => { + e.preventDefault(); + const [px, py] = bildpunkt(e); + const vorher = umhangTransform(); + const tx = (px - vorher.ox) / vorher.s; + const ty = (py - vorher.oy) / vorher.s; + const groesster = Math.max(8, umhangDok.w / 8); + ansicht.zoom = Math.min(groesster, Math.max(1, ansicht.zoom * (e.deltaY < 0 ? 1.2 : 1 / 1.2))); + const { s } = umhangTransform(); + ansicht.mx = Math.min(1, Math.max(0, (c.width / 2 + tx * s - px) / (umhangDok.w * s))); + ansicht.my = Math.min(1, Math.max(0, (c.height / 2 + ty * s - py) / (umhangDok.h * s))); + planeZeichnen(); + }, { passive: false }); + } + + // ---------- 3D: Strahl gegen die Figur ---------- + // three.js' Raycaster wird von skinview3d nicht mitgeliefert – daher eigene + // Schnittprüfung Strahl/Dreieck (Möller–Trumbore) gegen die Quader der Figur. + function schnitt(o, d, a, b, c) { + const e1x = b.x - a.x, e1y = b.y - a.y, e1z = b.z - a.z; + const e2x = c.x - a.x, e2y = c.y - a.y, e2z = c.z - a.z; + const px = d.y * e2z - d.z * e2y, py = d.z * e2x - d.x * e2z, pz = d.x * e2y - d.y * e2x; + const det = e1x * px + e1y * py + e1z * pz; + if (Math.abs(det) < 1e-9) return null; + const inv = 1 / det; + const tx = o.x - a.x, ty = o.y - a.y, tz = o.z - a.z; + const u = (tx * px + ty * py + tz * pz) * inv; + if (u < 0 || u > 1) return null; + const qx = ty * e1z - tz * e1y, qy = tz * e1x - tx * e1z, qz = tx * e1y - ty * e1x; + const v = (d.x * qx + d.y * qy + d.z * qz) * inv; + if (v < 0 || u + v > 1) return null; + const t = (e2x * qx + e2y * qy + e2z * qz) * inv; + return t > 1e-6 ? { t, u, v } : null; + } + + function sichtbareMeshes(objekt) { + const liste = []; + objekt.traverse((m) => { if (m.isMesh) liste.push(m); }); + return liste.filter((m) => { for (let o = m; o; o = o.parent) if (o.visible === false) return false; return true; }); + } + + /* + * Texturpixel unter dem Mauspunkt. ziel: 0/1 = Skin-Schicht, 'umhang' = Umhang + * bzw. Elytra (die Figur selbst verdeckt dabei, man malt nicht durch sie hindurch). + */ + function strahl(clientX, clientY, ziel) { + const v = ed.viewer; + if (!v) return null; + const r = v.canvas.getBoundingClientRect(); + if (!r.width || !r.height) return null; + const cam = v.camera; + const V3 = cam.position.constructor; + cam.updateMatrixWorld(); + const o = new V3().setFromMatrixPosition(cam.matrixWorld); + const nx = ((clientX - r.left) / r.width) * 2 - 1; + const ny = -((clientY - r.top) / r.height) * 2 + 1; + const d = new V3(nx, ny, 0.5).unproject(cam).sub(o).normalize(); + v.playerObject.updateMatrixWorld(true); + const teile = v.playerObject.skin.getBodyParts().filter((t) => t.visible); + let ziele; + let verdecker = []; + if (ziel === 'umhang') { + const p = v.playerObject; + ziele = sichtbareMeshes(p.backEquipment === 'elytra' ? p.elytra : p.cape); + verdecker = teile.map((t) => t.innerLayer).filter((m) => m && m.visible); + } else { + ziele = teile.map((t) => (ziel ? t.outerLayer : t.innerLayer)).filter((m) => m && m.visible); + } + const ecken = [new V3(), new V3(), new V3()]; + let best = null; + const pruefe = (mesh, istZiel) => { + const geo = mesh.geometry; + const pos = geo.attributes.position; + const idx = geo.index; + const anzahl = idx ? idx.count : pos.count; + for (let i = 0; i < anzahl; i += 3) { + const ia = idx ? [idx.getX(i), idx.getX(i + 1), idx.getX(i + 2)] : [i, i + 1, i + 2]; + for (let k = 0; k < 3; k++) ecken[k].fromBufferAttribute(pos, ia[k]).applyMatrix4(mesh.matrixWorld); + const h = schnitt(o, d, ecken[0], ecken[1], ecken[2]); + if (h && (!best || h.t < best.t)) best = { t: h.t, b: [1 - h.u - h.v, h.u, h.v], ia, uv: geo.attributes.uv, istZiel }; + } + }; + for (const m of ziele) pruefe(m, true); + for (const m of verdecker) pruefe(m, false); + if (!best || !best.istZiel) return null; + const W_ = ziel === 'umhang' ? umhangDok.w : N; + const H_ = ziel === 'umhang' ? umhangDok.h : N; + let U = 0, W = 0; + let uMin = 1, uMax = 0, vMin = 1, vMax = 0; + for (let k = 0; k < 3; k++) { + const u = best.uv.getX(best.ia[k]); + const w = best.uv.getY(best.ia[k]); + U += best.b[k] * u; W += best.b[k] * w; + uMin = Math.min(uMin, u); uMax = Math.max(uMax, u); vMin = Math.min(vMin, w); vMax = Math.max(vMax, w); + } + // Dreieck gehört zu genau einer Seitenfläche – Rundung an der Kante darf + // nicht in die Nachbarfläche rutschen + const x0 = Math.round(uMin * W_), x1 = Math.round(uMax * W_) - 1; + const y0 = Math.round((1 - vMax) * H_), y1 = Math.round((1 - vMin) * H_) - 1; + const x = Math.min(x1, Math.max(x0, Math.floor(U * W_))); + const y = Math.min(y1, Math.max(y0, Math.floor((1 - W) * H_))); + return { t: best.t, x, y }; + } + + const zielAktuell = () => (ed.modus === 'umhang' ? 'umhang' : ed.schicht); + + // sichtbarer Pixel für die Pipette: erst die 2. Schicht (falls dort Farbe ist) + function sichtbarerPixel(cx, cy) { + if (ed.modus === 'umhang') { + const u = strahl(cx, cy, 'umhang'); + return u ? [u.x, u.y] : null; + } + if (ed.zeigeAussen) { + const a = strahl(cx, cy, 1); + if (a && skinDok.daten[(a.y * N + a.x) * 4 + 3] > 0) return [a.x, a.y]; + } + const b = strahl(cx, cy, 0); + return b ? [b.x, b.y] : null; + } + + function verbinde3D() { + const huelle = el('se-3d'); + const canvas = el('se-3d-canvas'); + // in der Einfangphase: trifft die Maus die Figur, malen wir und die + // Drehsteuerung von skinview3d bekommt das Ereignis gar nicht erst + huelle.addEventListener('pointerdown', (e) => { + if (e.button !== 0 || !ed.viewer) return; + if (e.altKey || ed.werkzeug === 'pipette') { + const t = sichtbarerPixel(e.clientX, e.clientY); + if (!t) return; + e.stopPropagation(); e.preventDefault(); + nimmFarbe(t[0], t[1]); + return; + } + const t = strahl(e.clientX, e.clientY, zielAktuell()); + if (!t) return; + e.stopPropagation(); e.preventDefault(); + try { canvas.setPointerCapture(e.pointerId); } catch { /* egal */ } + beginneStrich(); + ed.strich.letzterBild = [e.clientX, e.clientY]; + wendeAn(t.x, t.y); + }, true); + canvas.addEventListener('pointermove', (e) => { + if (ed.strich) { + // Strecke seit dem letzten Ereignis in kleinen Schritten abtasten + const [ax, ay] = ed.strich.letzterBild || [e.clientX, e.clientY]; + const schritte = Math.max(1, Math.ceil(Math.hypot(e.clientX - ax, e.clientY - ay) / 2)); + for (let i = 1; i <= schritte; i++) { + const t = strahl(ax + ((e.clientX - ax) * i) / schritte, ay + ((e.clientY - ay) * i) / schritte, zielAktuell()); + if (t) wendeAn(t.x, t.y); + } + ed.strich.letzterBild = [e.clientX, e.clientY]; + } + if (e.buttons && !ed.strich) return; // dreht gerade + const t = strahl(e.clientX, e.clientY, zielAktuell()); + const neu = t ? [t.x, t.y] : null; + if (String(neu) !== String(ed.hover)) { ed.hover = neu; planeZeichnen(); } + }); + const ende = () => beendeStrich(); + canvas.addEventListener('pointerup', ende); + canvas.addEventListener('pointercancel', ende); + canvas.addEventListener('pointerleave', () => { if (!ed.strich && ed.hover) { ed.hover = null; planeZeichnen(); } }); + } + + async function erzeugeViewer() { + if (ed.viewer || typeof skinview3d === 'undefined') { + if (typeof skinview3d === 'undefined') el('se-3d-leer').textContent = '3D-Ansicht nicht verfügbar'; + return; + } + const h = el('se-3d'); + const viewer = new skinview3d.SkinViewer({ + canvas: el('se-3d-canvas'), + width: h.clientWidth || 300, + height: h.clientHeight || 300, + skin: textur, + model: ed.slim ? 'slim' : 'default', + }); + await new Promise((resolve) => { + const check = (n) => { + if ((viewer.playerObject && viewer.playerObject.skin && viewer.playerObject.skin.map) || n > 150) resolve(); + else setTimeout(() => check(n + 1), 40); + }; + check(0); + }); + viewer.fov = 36; + viewer.zoom = 0.78; + viewer.autoRotate = false; + viewer.animation = null; + // leicht abgespreizte Arme/Beine, damit man auch an die Innenseiten kommt + const p = viewer.playerObject; + p.rotation.set(0, -0.35, 0); + p.skin.leftArm.rotation.set(0, 0, 0.2); + p.skin.rightArm.rotation.set(0, 0, -0.2); + p.skin.leftLeg.rotation.set(0, 0, 0.06); + p.skin.rightLeg.rotation.set(0, 0, -0.06); + viewer.controls.enableRotate = true; + viewer.controls.enableZoom = true; + viewer.controls.enablePan = false; + // rechte Maustaste dreht immer – auch wenn man gerade auf die Figur zeigt + viewer.controls.mouseButtons = { LEFT: 0, MIDDLE: 1, RIGHT: 0 }; + ed.viewer = viewer; + el('se-3d-leer').classList.add('hidden'); + if (ed.modus === 'umhang') await zeigeUmhangAufFigur(true); + passeGroessenAn(); + } + + // Umhang auf der Figur zeigen (Rücken zur Kamera) bzw. wieder abnehmen + async function zeigeUmhangAufFigur(an) { + const v = ed.viewer; + if (!v) return; + const p = v.playerObject; + if (an) { + texturGeaendert(); + await v.loadCape(umhangTextur, { backEquipment: ed.elytra ? 'elytra' : 'cape' }); + p.rotation.set(0, Math.PI - 0.5, 0); + } else { + v.resetCape(); + p.rotation.set(0, -0.35, 0); + } + planeZeichnen(); + } + + // nach einer Größenänderung des Umhangs: Auswahl, Ansicht und Figur anpassen + function nachGroessenwechsel() { + el('se-u-groesse').value = String(umhangDok.w); + einpassen(); + if (ed.viewer && ed.modus === 'umhang') zeigeUmhangAufFigur(true); + } + + async function setzeArmform(slim) { + ed.slim = !!slim; + el('se-variante').value = ed.slim ? 'slim' : 'classic'; + ed.hover = null; + if (ed.viewer) { + await ed.viewer.loadSkin(textur, { model: ed.slim ? 'slim' : 'default' }); + } + texturGeaendert(); + } + + // ---------- Vorlagen ---------- + function vorlage() { + const d = new Uint8ClampedArray(N * N * 4); + const farben = { head: '#c69c6d', body: '#2f9e9e', rightArm: '#c69c6d', leftArm: '#c69c6d', rightLeg: '#3b3f9e', leftLeg: '#3b3f9e' }; + for (const f of AUFTEILUNG[ed.slim ? 1 : 0].flaechen) { + if (f.schicht !== 0) continue; + const [r, g, b] = hexZuRgb(farben[f.teil.key]); + for (let yy = f.y; yy < f.y + f.h; yy++) { + for (let xx = f.x; xx < f.x + f.w; xx++) { + const i = (yy * N + xx) * 4; + d[i] = r; d[i + 1] = g; d[i + 2] = b; d[i + 3] = 255; + } + } + } + return d; + } + + function umhangVorlage(w) { + const h = w / 2; + const d = new Uint8ClampedArray(w * h * 4); + const farbe = (f) => (f.name.includes('außen') || f.name === 'Außenseite' ? [176, 46, 38] + : f.name.includes('innen') || f.name === 'Innenseite' ? [122, 31, 26] : [142, 37, 31]); + for (const f of umhangLayout(w).flaechen) { + const [r, g, b] = farbe(f); + for (let yy = f.y; yy < f.y + f.h; yy++) { + for (let xx = f.x; xx < f.x + f.w; xx++) { + const i = (yy * w + xx) * 4; + d[i] = r; d[i + 1] = g; d[i + 2] = b; d[i + 3] = 255; + } + } + } + return d; + } + + // ---------- Laden ---------- + function ladeImg(dataUri) { + return new Promise((resolve, reject) => { + const img = new Image(); + img.onload = () => resolve(img); + img.onerror = () => reject(new Error('Bild konnte nicht gelesen werden.')); + img.src = dataUri; + }); + } + + async function ladeBild(dataUri) { + const img = await ladeImg(dataUri); + if (img.width !== N || (img.height !== N && img.height !== N / 2)) { + throw new Error(`Ein Skin muss 64×64 oder 64×32 Pixel groß sein (diese Datei: ${img.width}×${img.height}).`); + } + const c = document.createElement('canvas'); + c.width = c.height = N; + const g = c.getContext('2d', { willReadFrequently: true }); + g.drawImage(img, 0, 0); + const daten = g.getImageData(0, 0, N, N).data; + if (img.height === N / 2) { + // alte 64×32-Skins: linker Arm und linkes Bein sind dort gespiegelte + // Kopien der rechten – wie Minecraft es selbst macht + const karte = AUFTEILUNG[0].karte; + for (let i = 0; i < N * N / 2; i++) { + const f = karte[i]; + if (!f || f.schicht !== 0 || (f.teil.key !== 'rightArm' && f.teil.key !== 'rightLeg')) continue; + const partner = TEIL[f.teil.spiegel]; + const seite = SEITE_GEGENSTUECK[f.seite] || f.seite; + const r = seiten(partner, 0, false)[seite]; + const x = i % N, y = Math.floor(i / N); + const z = ((r[1] + (y - f.y)) * N + r[0] + (r[2] - 1 - (x - f.x))) * 4; + for (let k = 0; k < 4; k++) daten[z + k] = daten[i * 4 + k]; + } + } + return daten; + } + + /* + * Umhang-Datei einlesen. Erkannt werden das übliche Format 2:1 (64×32, HD …) + * sowie die alten Formate 22:17 und 46:22. Ergebnis immer im 2:1-Format mit + * einer der Größen 64×32 … 1024×512 (größere Dateien werden verkleinert). + */ + async function ladeUmhangBild(dataUri) { + const img = await ladeImg(dataUri); + let k; + if (img.width === 2 * img.height) k = img.width / 64; + else if (17 * img.width === 22 * img.height) k = img.width / 22; + else if (11 * img.width === 23 * img.height) k = img.width / 46; + else throw new Error(`Das ist kein Umhang-Format (Seitenverhältnis 2:1 nötig, diese Datei: ${img.width}×${img.height}).`); + const ziel = UMHANG_STUFEN.reduce((best, w) => (Math.abs(w / 64 - k) < Math.abs(best / 64 - k) ? w : best), 64); + const kz = ziel / 64; + const c = document.createElement('canvas'); + c.width = ziel; + c.height = ziel / 2; + const g = c.getContext('2d', { willReadFrequently: true }); + g.imageSmoothingEnabled = kz < k; + g.imageSmoothingQuality = 'high'; + g.drawImage(img, 0, 0, img.width * (kz / k), img.height * (kz / k)); + return { w: ziel, h: ziel / 2, daten: g.getImageData(0, 0, ziel, ziel / 2).data }; + } + + async function uebernimmDaten(daten, variante, text) { + if (variante) await setzeArmform(variante === 'slim'); + const d = skinDok; + if (dok() !== d) return; + aenderung(() => { d.daten = new Uint8ClampedArray(daten); }); + d.geaendert = false; + texturGeaendert(); + status(text || ''); + } + + function uebernimmUmhang(neu, text) { + const d = umhangDok; + if (dok() !== d) return; + aenderung(() => { d.w = neu.w; d.h = neu.h; d.daten = new Uint8ClampedArray(neu.daten); }); + d.geaendert = false; + texturGeaendert(); + status(text || ''); + } + + function wennVerwerfenOk(aktion) { + if (!dok().geaendert) { aktion(); return; } + const was = dok().art === 'umhang' ? 'Der Umhang' : 'Der Skin'; + askConfirm('Änderungen verwerfen?', `${was} im Editor hat ungespeicherte Änderungen. Trotzdem fortfahren?`, 'Verwerfen', aktion); + } + + async function ladeAktuellen() { + status('Aktueller Skin wird geladen …'); + const res = await window.api.skinCurrentData(); + if (!res.ok) { + if (res.standard) { + await uebernimmDaten(vorlage(), res.variante, 'Dein Konto nutzt den Standard-Skin – hier ist eine leere Vorlage zum Loslegen.'); + } else { + status('✖ ' + (res.message || 'Skin konnte nicht geladen werden.')); + } + return; + } + try { + await uebernimmDaten(await ladeBild(res.dataUri), res.variante, `Skin von ${res.name || 'deinem Konto'} geladen.`); + } catch (err) { status('✖ ' + err.message); } + } + + async function ladeAktuellenUmhang() { + status('Aktueller Umhang wird geladen …'); + const res = await window.api.capeCurrentData(); + if (!res.ok) { + if (res.keiner) uebernimmUmhang({ w: umhangDok.w, h: umhangDok.h, daten: umhangVorlage(umhangDok.w) }, 'Dein Konto hat noch keinen Umhang – hier ist eine Vorlage zum Loslegen.'); + else status('✖ ' + (res.message || 'Umhang konnte nicht geladen werden.')); + return; + } + try { + const neu = await ladeUmhangBild(res.dataUri); + uebernimmUmhang(neu, res.quelle === 'aeromc' + ? `Dein AeroMC-Umhang geladen (${neu.w}×${neu.h}).` + : `Dein offizieller Umhang geladen (${neu.w}×${neu.h}) – als Vorlage für einen eigenen.`); + } catch (err) { status('✖ ' + err.message); } + } + + async function ladeDatei(pfad, variante) { + const res = pfad ? await window.api.skinReadData(pfad) : await window.api.skinChoose(); + if (res.canceled) return; + if (!res.ok) { status('✖ ' + (res.message || 'Datei konnte nicht geladen werden.')); return; } + try { + await uebernimmDaten(await ladeBild(res.dataUri), variante, `${(res.pfad || pfad || '').split(/[\\/]/).pop()} geladen.`); + } catch (err) { status('✖ ' + err.message); } + } + + async function ladeUmhangDatei() { + const res = await window.api.capeChooseFile('umhang'); + if (res.canceled) return; + if (!res.ok) { status('✖ ' + (res.message || 'Datei konnte nicht geladen werden.')); return; } + try { + const neu = await ladeUmhangBild(res.dataUri); + uebernimmUmhang(neu, `${res.pfad.split(/[\\/]/).pop()} geladen (${neu.w}×${neu.h}).`); + } catch (err) { status('✖ ' + err.message); } + } + + // beliebiges Motiv auf die Außenseite setzen (füllt sie ganz, Ränder werden beschnitten) + async function bildEinsetzen() { + const res = await window.api.capeChooseFile('bild'); + if (res.canceled) return; + if (!res.ok) { status('✖ ' + (res.message || 'Bild konnte nicht geladen werden.')); return; } + try { + const img = await ladeImg(res.dataUri); + const d = umhangDok; + const f = umhangLayout(d.w).flaechen.find((x) => x.name === 'Außenseite'); + const c = document.createElement('canvas'); + c.width = f.w; + c.height = f.h; + const g = c.getContext('2d', { willReadFrequently: true }); + g.imageSmoothingEnabled = true; + g.imageSmoothingQuality = 'high'; + const faktor = Math.max(f.w / img.width, f.h / img.height); + const bw = img.width * faktor, bh = img.height * faktor; + g.drawImage(img, (f.w - bw) / 2, (f.h - bh) / 2, bw, bh); + const px = g.getImageData(0, 0, f.w, f.h).data; + aenderung(() => { + for (let yy = 0; yy < f.h; yy++) { + d.daten.set(px.subarray(yy * f.w * 4, (yy + 1) * f.w * 4), ((f.y + yy) * d.w + f.x) * 4); + } + }); + status(`Bild auf die Außenseite gesetzt (${f.w}×${f.h} Pixel).` + (d.w < 256 ? ' Tipp: Für feine Motive oben eine HD-Größe wählen und das Bild erneut einsetzen.' : '')); + } catch (err) { status('✖ ' + err.message); } + } + + // Umhang auf eine andere Größe umrechnen (größer: Pixel bleiben scharf) + function skaliereUmhang(neuW) { + const d = umhangDok; + if (neuW === d.w) return; + const quelle = document.createElement('canvas'); + quelle.width = d.w; + quelle.height = d.h; + quelle.getContext('2d').putImageData(new ImageData(d.daten, d.w, d.h), 0, 0); + const ziel = document.createElement('canvas'); + ziel.width = neuW; + ziel.height = neuW / 2; + const g = ziel.getContext('2d', { willReadFrequently: true }); + g.imageSmoothingEnabled = neuW < d.w; + g.imageSmoothingQuality = 'high'; + g.drawImage(quelle, 0, 0, neuW, neuW / 2); + const daten = new Uint8ClampedArray(g.getImageData(0, 0, neuW, neuW / 2).data); + aenderung(() => { d.w = neuW; d.h = neuW / 2; d.daten = daten; }); + status(`Umhang auf ${neuW}×${neuW / 2} umgestellt.` + (neuW > 64 ? ' Mit Mausrad hineinzoomen, rechte Maustaste verschiebt.' : '')); + } + + // ---------- Speichern / Übernehmen ---------- + function alsBase64() { + const d = dok(); + const c = document.createElement('canvas'); + c.width = d.w; + c.height = d.h; + c.getContext('2d').putImageData(new ImageData(d.daten, d.w, d.h), 0, 0); + return c.toDataURL('image/png').split(',')[1]; + } + + // Minecraft zeigt durchsichtige Pixel der Grundschicht schwarz an + function loecherInGrundschicht() { + let n = 0; + for (const f of aufteilung().flaechen) { + if (f.schicht !== 0) continue; + for (let yy = f.y; yy < f.y + f.h; yy++) for (let xx = f.x; xx < f.x + f.w; xx++) if (skinDok.daten[(yy * N + xx) * 4 + 3] < 255) n++; + } + return n; + } + + function loecherHinweis() { + const n = loecherInGrundschicht(); + return n ? ` Hinweis: ${n} durchsichtige Pixel in der Grundschicht erscheinen im Spiel schwarz.` : ''; + } + + async function speichere() { + const umhang = dok().art === 'umhang'; + const res = umhang ? await window.api.capeSaveData(alsBase64()) : await window.api.skinSaveData(alsBase64()); + if (res.canceled) return; + if (!res.ok) { status('✖ ' + (res.message || 'Speichern fehlgeschlagen.')); return; } + dok().geaendert = false; + status('✔ Gespeichert: ' + res.pfad.split(/[\\/]/).pop() + '.' + (umhang ? '' : loecherHinweis())); + } + + async function uebernimm() { + const btn = el('se-uebernehmen'); + const umhang = dok().art === 'umhang'; + btn.disabled = true; + status(umhang ? 'Umhang wird hochgeladen …' : 'Wird hochgeladen …'); + try { + const res = umhang + ? await window.api.capeUpload(alsBase64()) + : await window.api.skinApplyData(alsBase64(), ed.slim ? 'slim' : 'classic'); + if (res.ok) { + dok().geaendert = false; + if (umhang) { + status('✔ Umhang hochgeladen. Im Launcher sofort sichtbar – im Spiel bei Spielern mit dem AeroMC-Umhang-Mod.'); + toast('Umhang gespeichert.'); + } else { + status('✔ Skin gesetzt. Im Spiel kann es einen Moment dauern.' + loecherHinweis()); + toast('Skin geändert.'); + } + } else { + status('✖ ' + (res.message || 'Fehlgeschlagen.')); + } + } finally { + btn.disabled = false; + } + } + + // ---------- Öffnen ---------- + let verdrahtet = false; + + function verdrahte() { + if (verdrahtet) return; + verdrahtet = true; + document.querySelectorAll('[data-se-tool]').forEach((b) => b.addEventListener('click', () => waehleWerkzeug(b.dataset.seTool))); + document.querySelectorAll('[data-se-schicht]').forEach((b) => b.addEventListener('click', () => waehleSchicht(Number(b.dataset.seSchicht)))); + document.querySelectorAll('[data-se-modus]').forEach((b) => b.addEventListener('click', () => waehleModus(b.dataset.seModus))); + el('se-farbe').addEventListener('input', () => setzeFarbe(el('se-farbe').value)); + el('se-hex').addEventListener('change', () => { + let v = el('se-hex').value.trim(); + if (!v.startsWith('#')) v = '#' + v; + if (/^#[0-9a-f]{6}$/i.test(v)) setzeFarbe(v); + else el('se-hex').value = ed.farbe; + }); + el('se-aussen').addEventListener('change', () => { + ed.zeigeAussen = el('se-aussen').checked; + if (!ed.zeigeAussen && ed.schicht === 1) waehleSchicht(0); + planeZeichnen(); + }); + el('se-durch').addEventListener('change', () => { ed.durchscheinen = el('se-durch').checked; planeZeichnen(); }); + el('se-spiegeln').addEventListener('change', () => { ed.spiegeln = el('se-spiegeln').checked; planeZeichnen(); }); + el('se-leeren').addEventListener('click', () => { + askConfirm('2. Schicht leeren?', 'Alle Pixel der 2. Schicht werden durchsichtig. Mit Strg+Z lässt sich das rückgängig machen.', 'Leeren', () => { + const geaendert = aenderung(() => { + for (const f of aufteilung().flaechen) { + if (f.schicht !== 1) continue; + for (let yy = f.y; yy < f.y + f.h; yy++) for (let xx = f.x; xx < f.x + f.w; xx++) setzePixel(xx, yy, [0, 0, 0, 0]); + } + }); + status(geaendert ? '2. Schicht geleert.' : 'Die 2. Schicht war schon leer.'); + }); + }); + el('se-variante').addEventListener('change', () => setzeArmform(el('se-variante').value === 'slim')); + // Umhang + el('se-u-groesse').addEventListener('change', () => skaliereUmhang(Number(el('se-u-groesse').value))); + el('se-u-pinsel').addEventListener('change', () => { ed.pinsel = Number(el('se-u-pinsel').value) || 1; planeZeichnen(); }); + el('se-u-bild').addEventListener('click', bildEinsetzen); + el('se-u-einpassen').addEventListener('click', einpassen); + el('se-u-elytra').addEventListener('change', () => { + ed.elytra = el('se-u-elytra').checked; + if (ed.viewer && ed.modus === 'umhang') ed.viewer.playerObject.backEquipment = ed.elytra ? 'elytra' : 'cape'; + planeZeichnen(); + }); + el('se-undo').addEventListener('click', rueckgaengig); + el('se-redo').addEventListener('click', wiederholen); + el('se-neu').addEventListener('click', () => wennVerwerfenOk(() => { + if (dok().art === 'umhang') uebernimmUmhang({ w: umhangDok.w, h: umhangDok.h, daten: umhangVorlage(umhangDok.w) }, 'Neue Umhang-Vorlage – leg los!'); + else uebernimmDaten(vorlage(), null, 'Neue Vorlage – leg los!'); + })); + el('se-laden').addEventListener('click', () => wennVerwerfenOk(dok().art === 'umhang' ? ladeAktuellenUmhang : ladeAktuellen)); + el('se-oeffnen').addEventListener('click', () => wennVerwerfenOk(() => (dok().art === 'umhang' ? ladeUmhangDatei() : ladeDatei(null, null)))); + el('se-speichern').addEventListener('click', speichere); + el('se-uebernehmen').addEventListener('click', uebernimm); + + document.addEventListener('keydown', (e) => { + if (el('modal-skineditor').classList.contains('hidden')) return; + if (!el('modal-confirm').classList.contains('hidden')) return; + const a = document.activeElement; + if (a && (['INPUT', 'TEXTAREA', 'SELECT'].includes(a.tagName) && a.type !== 'checkbox')) return; + const strg = e.ctrlKey || e.metaKey; + const k = e.key.toLowerCase(); + if (strg && k === 'z' && !e.shiftKey) { e.preventDefault(); rueckgaengig(); return; } + if (strg && (k === 'y' || (k === 'z' && e.shiftKey))) { e.preventDefault(); wiederholen(); return; } + if (strg || e.altKey) return; + const werkzeug = { b: 'stift', e: 'radierer', i: 'pipette', g: 'fuellen' }[k]; + if (werkzeug) { e.preventDefault(); waehleWerkzeug(werkzeug); return; } + if (k === 'm') { e.preventDefault(); el('se-spiegeln').click(); return; } + if (k === 'l' && ed.modus !== 'umhang') { e.preventDefault(); waehleSchicht(ed.schicht ? 0 : 1); return; } + if (k === '0' && ed.modus === 'umhang') { e.preventDefault(); einpassen(); } + }); + + verbinde2D(); + verbindeUmhang2D(); + verbinde3D(); + new ResizeObserver(() => passeGroessenAn()).observe(el('se-buehne')); + new ResizeObserver(() => passeGroessenAn()).observe(el('se-mini')); + // Hell/Dunkel gewechselt -> Hintergrund neu + new MutationObserver(() => planeZeichnen()).observe(document.documentElement, { attributes: true, attributeFilter: ['data-theme'] }); + } + + async function openSkinEditor(p = {}) { + if (POPOUT !== 'skineditor') { window.api.popoutOpen('skineditor', p); return; } + verdrahte(); + show('modal-skineditor'); + if (!ed.bereit) { + ed.bereit = true; + el('se-farbe').value = ed.farbe; + el('se-hex').value = ed.farbe; + zeigeZuletzt(); + waehleWerkzeug('stift'); + waehleSchicht(0); + skinDok.daten = vorlage(); + umhangDok.daten = umhangVorlage(64); + waehleModus('2d'); + await erzeugeViewer(); + texturGeaendert(); + } + const variante = p.variante === 'slim' || p.variante === 'classic' ? p.variante : null; + if (p.modus === 'umhang') { + if (ed.modus !== 'umhang') waehleModus('umhang'); + if (p.quelle === 'aktuell') wennVerwerfenOk(ladeAktuellenUmhang); + return; + } + if (ed.modus === 'umhang' && (p.pfad || p.quelle)) waehleModus('2d'); + if (p.pfad) wennVerwerfenOk(() => ladeDatei(p.pfad, variante)); + else if (p.quelle === 'aktuell') wennVerwerfenOk(ladeAktuellen); + else if (variante && !skinDok.geaendert) await setzeArmform(variante === 'slim'); + } + + window.openSkinEditor = openSkinEditor; + // für Tests + window.__skinEditor = { ed, skinDok, umhangDok, strahl, spiegelPixel, seiten, AUFTEILUNG, umhangLayout, waehleModus, skaliereUmhang, ansicht }; +})(); diff --git a/src/skins.js b/src/skins.js index d4d10d9..cb2b5b9 100644 --- a/src/skins.js +++ b/src/skins.js @@ -1,121 +1,144 @@ -'use strict'; - -/* - * skins.js – Skin und Umhang über die Minecraft-Dienste ändern - * ------------------------------------------------------------- - * Der Launcher hält bereits gültige Zugangsdaten des angemeldeten Kontos. - * Damit lässt sich der Skin direkt setzen, ohne Umweg über den Browser. - * - * Verwendete Wege (api.minecraftservices.com): - * POST /minecraft/profile/skins Skin hochladen (Datei oder Adresse) - * DELETE /minecraft/profile/skins/active Skin zurücksetzen (Standard-Steve/Alex) - * GET /minecraft/profile aktuelles Profil samt Skin-Adresse - */ - -const fs = require('fs'); -const path = require('path'); - -const API = 'https://api.minecraftservices.com'; -const UA = 'AeroMC-Launcher'; - -// Minecraft nimmt nur PNG, und die Vorlagen sind 64x64 bzw. 64x32 -const MAX_BYTES = 512 * 1024; - -function pruefeDatei(dateiPfad) { - if (!dateiPfad || !fs.existsSync(dateiPfad)) return { ok: false, message: 'Datei nicht gefunden.' }; - if (!/\.png$/i.test(dateiPfad)) return { ok: false, message: 'Minecraft nimmt nur PNG-Dateien.' }; - const st = fs.statSync(dateiPfad); - if (!st.isFile()) return { ok: false, message: 'Das ist keine Datei.' }; - if (st.size > MAX_BYTES) return { ok: false, message: 'Die Datei ist zu groß (über 512 KB).' }; - - // PNG-Kennung und Maße aus dem Kopf lesen, bevor wir sie hochschicken - const kopf = Buffer.alloc(33); - const fd = fs.openSync(dateiPfad, 'r'); - try { fs.readSync(fd, kopf, 0, 33, 0); } finally { fs.closeSync(fd); } - - const PNG = Buffer.from([0x89, 0x50, 0x4e, 0x47, 0x0d, 0x0a, 0x1a, 0x0a]); - if (!kopf.subarray(0, 8).equals(PNG)) return { ok: false, message: 'Die Datei ist kein gültiges PNG.' }; - - const breite = kopf.readUInt32BE(16); - const hoehe = kopf.readUInt32BE(20); - // 64x64 ist heute üblich, 64x32 sind die alten Skins - if (!(breite === 64 && (hoehe === 64 || hoehe === 32))) { - return { ok: false, message: `Ein Skin muss 64×64 (oder 64×32) Pixel groß sein – diese Datei ist ${breite}×${hoehe}.` }; - } - return { ok: true, breite, hoehe }; -} - -function fehlerText(status) { - if (status === 401) return 'Die Anmeldung ist abgelaufen. Bitte das Konto neu verbinden.'; - if (status === 403) return 'Minecraft lehnt die Änderung ab. Hat das Konto Minecraft Java Edition?'; - if (status === 429) return 'Zu viele Änderungen in kurzer Zeit. Bitte einen Moment warten.'; - return 'Minecraft-Dienste antworten mit HTTP ' + status + '.'; -} - -/* - * Skin setzen. - * variante: 'classic' (breite Arme) oder 'slim' (schmale Arme, Alex) - */ -async function setzeSkin(accessToken, dateiPfad, variante) { - const geprueft = pruefeDatei(dateiPfad); - if (!geprueft.ok) return geprueft; - - const form = new FormData(); - form.append('variant', variante === 'slim' ? 'slim' : 'classic'); - const daten = fs.readFileSync(dateiPfad); - form.append('file', new Blob([daten], { type: 'image/png' }), path.basename(dateiPfad)); - - const res = await fetch(API + '/minecraft/profile/skins', { - method: 'POST', - headers: { Authorization: 'Bearer ' + accessToken, 'User-Agent': UA }, - body: form, - }); - if (!res.ok) return { ok: false, message: fehlerText(res.status) }; - - let profil = null; - try { profil = await res.json(); } catch { /* Antwort ohne Rumpf ist auch in Ordnung */ } - return { ok: true, variante: variante === 'slim' ? 'slim' : 'classic', profil }; -} - -// Skin auf den Standard zurücksetzen -async function setzeSkinZurueck(accessToken) { - const res = await fetch(API + '/minecraft/profile/skins/active', { - method: 'DELETE', - headers: { Authorization: 'Bearer ' + accessToken, 'User-Agent': UA }, - }); - if (!res.ok) return { ok: false, message: fehlerText(res.status) }; - return { ok: true }; -} - -/* - * Aktuelles Profil abrufen – liefert die Adresse des aktiven Skins, - * damit die Oberfläche vorher/nachher zeigen kann. - */ -/* - * Mojang liefert Skin-Adressen bis heute als "http://textures.minecraft.net/…". - * Die Oberfläche lässt nach ihrer Sicherheitsrichtlinie nur https zu, das Bild - * würde also blockiert. textures.minecraft.net beantwortet dieselbe Adresse - * auch über https – daher heben wir sie an. - */ -function aufHttps(url) { - const s = String(url || ''); - return s.startsWith('http://') ? 'https://' + s.slice('http://'.length) : s; -} - -async function holeProfil(accessToken) { - const res = await fetch(API + '/minecraft/profile', { - headers: { Authorization: 'Bearer ' + accessToken, 'User-Agent': UA, Accept: 'application/json' }, - }); - if (!res.ok) return { ok: false, message: fehlerText(res.status) }; - const daten = await res.json(); - const aktiv = (daten.skins || []).find((s) => s.state === 'ACTIVE') || null; - return { - ok: true, - name: daten.name, - id: daten.id, - skinUrl: aktiv ? aufHttps(aktiv.url) : '', - variante: aktiv ? String(aktiv.variant || '').toLowerCase() : '', - }; -} - -module.exports = { setzeSkin, setzeSkinZurueck, holeProfil, pruefeDatei, aufHttps }; +'use strict'; + +/* + * skins.js – Skin und Umhang über die Minecraft-Dienste ändern + * ------------------------------------------------------------- + * Der Launcher hält bereits gültige Zugangsdaten des angemeldeten Kontos. + * Damit lässt sich der Skin direkt setzen, ohne Umweg über den Browser. + * + * Verwendete Wege (api.minecraftservices.com): + * POST /minecraft/profile/skins Skin hochladen (Datei oder Adresse) + * DELETE /minecraft/profile/skins/active Skin zurücksetzen (Standard-Steve/Alex) + * GET /minecraft/profile aktuelles Profil samt Skin-Adresse + */ + +const fs = require('fs'); +const path = require('path'); + +const API = 'https://api.minecraftservices.com'; +const UA = 'AeroMC-Launcher'; + +// Minecraft nimmt nur PNG, und die Vorlagen sind 64x64 bzw. 64x32 +const MAX_BYTES = 512 * 1024; + +function pruefeDatei(dateiPfad) { + if (!dateiPfad || !fs.existsSync(dateiPfad)) return { ok: false, message: 'Datei nicht gefunden.' }; + if (!/\.png$/i.test(dateiPfad)) return { ok: false, message: 'Minecraft nimmt nur PNG-Dateien.' }; + const st = fs.statSync(dateiPfad); + if (!st.isFile()) return { ok: false, message: 'Das ist keine Datei.' }; + if (st.size > MAX_BYTES) return { ok: false, message: 'Die Datei ist zu groß (über 512 KB).' }; + + // PNG-Kennung und Maße aus dem Kopf lesen, bevor wir sie hochschicken + const kopf = Buffer.alloc(33); + const fd = fs.openSync(dateiPfad, 'r'); + try { fs.readSync(fd, kopf, 0, 33, 0); } finally { fs.closeSync(fd); } + + const PNG = Buffer.from([0x89, 0x50, 0x4e, 0x47, 0x0d, 0x0a, 0x1a, 0x0a]); + if (!kopf.subarray(0, 8).equals(PNG)) return { ok: false, message: 'Die Datei ist kein gültiges PNG.' }; + + const breite = kopf.readUInt32BE(16); + const hoehe = kopf.readUInt32BE(20); + // 64x64 ist heute üblich, 64x32 sind die alten Skins + if (!(breite === 64 && (hoehe === 64 || hoehe === 32))) { + return { ok: false, message: `Ein Skin muss 64×64 (oder 64×32) Pixel groß sein – diese Datei ist ${breite}×${hoehe}.` }; + } + return { ok: true, breite, hoehe }; +} + +function fehlerText(status) { + if (status === 401) return 'Die Anmeldung ist abgelaufen. Bitte das Konto neu verbinden.'; + if (status === 403) return 'Minecraft lehnt die Änderung ab. Hat das Konto Minecraft Java Edition?'; + if (status === 429) return 'Zu viele Änderungen in kurzer Zeit. Bitte einen Moment warten.'; + return 'Minecraft-Dienste antworten mit HTTP ' + status + '.'; +} + +/* + * Skin setzen. + * variante: 'classic' (breite Arme) oder 'slim' (schmale Arme, Alex) + */ +async function setzeSkin(accessToken, dateiPfad, variante) { + const geprueft = pruefeDatei(dateiPfad); + if (!geprueft.ok) return geprueft; + + const form = new FormData(); + form.append('variant', variante === 'slim' ? 'slim' : 'classic'); + const daten = fs.readFileSync(dateiPfad); + form.append('file', new Blob([daten], { type: 'image/png' }), path.basename(dateiPfad)); + + const res = await fetch(API + '/minecraft/profile/skins', { + method: 'POST', + headers: { Authorization: 'Bearer ' + accessToken, 'User-Agent': UA }, + body: form, + }); + if (!res.ok) return { ok: false, message: fehlerText(res.status) }; + + let profil = null; + try { profil = await res.json(); } catch { /* Antwort ohne Rumpf ist auch in Ordnung */ } + return { ok: true, variante: variante === 'slim' ? 'slim' : 'classic', profil }; +} + +// Skin auf den Standard zurücksetzen +async function setzeSkinZurueck(accessToken) { + const res = await fetch(API + '/minecraft/profile/skins/active', { + method: 'DELETE', + headers: { Authorization: 'Bearer ' + accessToken, 'User-Agent': UA }, + }); + if (!res.ok) return { ok: false, message: fehlerText(res.status) }; + return { ok: true }; +} + +/* + * Aktuelles Profil abrufen – liefert die Adresse des aktiven Skins, + * damit die Oberfläche vorher/nachher zeigen kann. + */ +/* + * Mojang liefert Skin-Adressen bis heute als "http://textures.minecraft.net/…". + * Die Oberfläche lässt nach ihrer Sicherheitsrichtlinie nur https zu, das Bild + * würde also blockiert. textures.minecraft.net beantwortet dieselbe Adresse + * auch über https – daher heben wir sie an. + */ +function aufHttps(url) { + const s = String(url || ''); + return s.startsWith('http://') ? 'https://' + s.slice('http://'.length) : s; +} + +async function holeProfil(accessToken) { + const res = await fetch(API + '/minecraft/profile', { + headers: { Authorization: 'Bearer ' + accessToken, 'User-Agent': UA, Accept: 'application/json' }, + }); + if (!res.ok) return { ok: false, message: fehlerText(res.status) }; + const daten = await res.json(); + const aktiv = (daten.skins || []).find((s) => s.state === 'ACTIVE') || null; + return { + ok: true, + name: daten.name, + id: daten.id, + skinUrl: aktiv ? aufHttps(aktiv.url) : '', + variante: aktiv ? String(aktiv.variant || '').toLowerCase() : '', + // offizielle Umhänge, die dieses Konto besitzt (Migrator, MINECON …) + capes: (daten.capes || []).map((c) => ({ + id: c.id, + name: c.alias || 'Umhang', + url: aufHttps(c.url), + aktiv: c.state === 'ACTIVE', + })), + }; +} + +/* + * Offiziellen Umhang wählen (nur einer, den das Konto besitzt) bzw. mit + * capeId = null keinen tragen. Gilt im Spiel für alle Spieler. + */ +async function setzeUmhang(accessToken, capeId) { + const res = await fetch(API + '/minecraft/profile/capes/active', capeId + ? { + method: 'PUT', + headers: { Authorization: 'Bearer ' + accessToken, 'User-Agent': UA, 'Content-Type': 'application/json' }, + body: JSON.stringify({ capeId }), + } + : { method: 'DELETE', headers: { Authorization: 'Bearer ' + accessToken, 'User-Agent': UA } }); + if (!res.ok) return { ok: false, message: fehlerText(res.status) }; + return { ok: true }; +} + +module.exports = { setzeSkin, setzeSkinZurueck, holeProfil, pruefeDatei, aufHttps, setzeUmhang }; diff --git a/src/store.js b/src/store.js index 2de0f7e..b59377c 100644 --- a/src/store.js +++ b/src/store.js @@ -78,7 +78,8 @@ const DEFAULT_SETTINGS = { desktopNotifications: true, // Windows-Meldung bei fertigem Hintergrund-Download/-Backup friendsEnabled: true, friendsShareServer: true, // Freunde sehen, auf welchem Server man spielt (für "Beitreten") - autoModUpdates: false, // vor jedem Start Mods über Modrinth aktualisieren + autoModUpdates: false, + aeromcCapes: true, // AeroMC-Umhänge im Spiel anzeigen (Umhang-Agent beim Start) // vor jedem Start Mods über Modrinth aktualisieren schnellstart: {}, // Strg+1 … Strg+5 -> Instanz-ID ({ "1": "Survival", … }) autoWorldBackup: true, // nach jeder Spielsitzung die zuletzt gespielte Welt sichern (letzte 5 Stände) // Freundesystem: eigene Online-Meldung + auffindbar für Anfragen friendNicknames: {}, // rein lokal: uuid -> eigener Spitzname für einen Freund diff --git a/src/styles.css b/src/styles.css index aebec80..73ceea6 100644 --- a/src/styles.css +++ b/src/styles.css @@ -1,706 +1,722 @@ -/* AeroMC – heller MultiMC-Native-Look */ -:root{ - --win:#f0f0f0; --area:#e2e2e2; --bar:#e9eaed; - --border:#c4c7cc; --border2:#d6d8dc; - --text:#1c1c1c; --dim:#6b7280; - --sel:#dce8f6; --sel-br:#3a6ea5; --link:#2c5aa0; --accent:#3a6ea5; - --danger:#c0392b; --play:#3a9c3a; - --font:"Segoe UI",Tahoma,system-ui,sans-serif; - --mono:Consolas,"Cascadia Mono",monospace; -} -*{box-sizing:border-box} -html,body{margin:0;height:100%;font-family:var(--font);font-size:12px;color:var(--text);background:var(--win)} -body{display:grid;grid-template-rows:auto auto 1fr auto;grid-template-columns:minmax(0,1fr);height:100vh;overflow:hidden} -.hidden{display:none!important} -.mono{font-family:var(--mono);font-size:12px} -.spacer{flex:1} -.opt,.hint{color:var(--dim)} -[data-ic] svg,.ic svg{width:16px;height:16px} - -/* ===================== DUNKLER MODUS (native, dunkelgrau) ===================== */ -:root[data-theme="dark"]{ - --win:#2d2d30; --area:#242426; --bar:#333337; - --border:#3f3f46; --border2:#3a3a40; - --text:#e4e4e6; --dim:#9a9aa2; - --sel:#0e639c; --sel-br:#1177bb; --link:#4ea6ff; --accent:#1177bb; - --danger:#e06c6c; --play:#5cb85c; - --input:#1e1e1e; -} -:root[data-theme="dark"] body{background:var(--win)} -:root[data-theme="dark"] .search-wrap input, -:root[data-theme="dark"] .field input, -:root[data-theme="dark"] .field select, -:root[data-theme="dark"] .field textarea, -:root[data-theme="dark"] .mods-search input, -:root[data-theme="dark"] .path-row input, -:root[data-theme="dark"] .login-usercode{background:#1e1e1e;color:var(--text);border-color:var(--border)} -:root[data-theme="dark"] .modal-card{background:#2d2d30;border-color:#161618} -:root[data-theme="dark"] .modal-head{background:#333337} -:root[data-theme="dark"] .modal-body{background:#2d2d30} -:root[data-theme="dark"] .modal-foot{background:#2a2a2e} -:root[data-theme="dark"] .advanced{background:#242426} -:root[data-theme="dark"] .mods-list, -:root[data-theme="dark"] .account-item, -:root[data-theme="dark"] .screen-thumb{background:#1e1e1e} -:root[data-theme="dark"] .mod-icon, -:root[data-theme="dark"] .account-av, -:root[data-theme="dark"] .icon-preview{background:#3a3a40} -:root[data-theme="dark"] .mod-item+.mod-item{border-color:#333} -:root[data-theme="dark"] .mod-item:hover{background:#2a2f36} -:root[data-theme="dark"] .btn{background:linear-gradient(#3b3b40,#303034);color:var(--text);border-color:var(--border)} -:root[data-theme="dark"] .btn:hover{background:linear-gradient(#44444b,#35353b);border-color:#5a5a63} -:root[data-theme="dark"] .btn:active{background:#2a2a2e} -:root[data-theme="dark"] .btn-primary{background:linear-gradient(#2a7ac0,#1f66a8);border-color:#1a5a95;color:#fff} -:root[data-theme="dark"] .btn-primary:hover{background:linear-gradient(#3286cc,#2470b4)} -:root[data-theme="dark"] .btn-danger{color:#e88;border-color:#6a3a3a} -:root[data-theme="dark"] .btn-danger:hover{background:#3a2626} -:root[data-theme="dark"] .tbtn:hover, -:root[data-theme="dark"] .sbtn:hover, -:root[data-theme="dark"] .card:hover{background:#37373d;border-color:var(--border)} -:root[data-theme="dark"] .card.sel{background:#0e639c;border-color:#1177bb} -:root[data-theme="dark"] .card.sel .card-name{background:#1177bb;color:#fff} -:root[data-theme="dark"] .st-row2{background:#2a2a2e} -:root[data-theme="dark"] .st-row, -:root[data-theme="dark"] .group-header, -:root[data-theme="dark"] .empty h2, -:root[data-theme="dark"] .mods-col h4, -:root[data-theme="dark"] .field>span{color:var(--text)} -:root[data-theme="dark"] #btn-console svg{color:#c8c8cc} -:root[data-theme="dark"] .acct-av svg{color:#c8c8cc} -:root[data-theme="dark"] .mods-filters select, -:root[data-theme="dark"] .mods-search select, -:root[data-theme="dark"] .mmc-bar select{background:#1e1e1e;color:var(--text);border-color:var(--border)} -:root[data-theme="dark"] .upd-notes{background:#1e1e1e;color:var(--text)} -:root[data-theme="dark"] .modal-close{color:#aaa} -:root[data-theme="dark"] .modal-close:hover{color:#fff} -:root[data-theme="dark"] ::-webkit-scrollbar-thumb{background:#4a4a52;border-color:var(--area)} - -/* ---------- Titelleiste (ersetzt die weiße Windows-Leiste) ---------- */ -/* Farben passend zu TITELLEISTE in main.js (dort für die Fensterknöpfe) */ -:root{--titel-bg:#f0f0f0;--titel-fg:#1c1c1c} -:root[data-theme="dark"]{--titel-bg:#2d2d30;--titel-fg:#e4e4e6} -.titelleiste{display:flex;align-items:center;gap:8px;height:32px;padding:0 150px 0 10px;background:var(--titel-bg);color:var(--titel-fg);-webkit-app-region:drag;user-select:none;font-size:12px} -.titel-logo{width:16px;height:16px;flex:none} -.titel-text{white-space:nowrap} -body.fenster-inaktiv .titelleiste>*{opacity:.55} -body.is-popout>.titelleiste{display:none} - -/* ---------- Toolbar ---------- */ -.toolbar{display:flex;align-items:center;gap:2px;padding:5px 8px;min-width:0;overflow:hidden;background:var(--win);border-bottom:1px solid var(--border)} -.tbtn{display:inline-flex;align-items:center;gap:7px;white-space:nowrap;padding:6px 10px;border:1px solid transparent;border-radius:3px;background:none;color:var(--text);cursor:pointer;font-family:inherit;font-size:12px} -.tbtn:hover{background:#e2e6ec;border-color:var(--border2)} -.tbtn:active{background:#d7dde5} -.tbtn svg{width:18px;height:18px;color:#4b5563} -/* farbige Toolbar-Icons wie in MultiMC */ -#btn-new svg{color:#3a9c3a} -#btn-import svg{color:#3d7ab5} -#btn-open-dir svg{color:#d8a72f} -#btn-console svg{color:#5a6470} -#btn-account svg{color:#3a9c3a} -#btn-settings svg{color:#3d7ab5} -.tbtn.big{font-size:13px;padding:8px 16px;border:1px solid var(--border);background:linear-gradient(#fdfdfd,#e9e9e9)} -.tbsep{width:1px;height:24px;background:var(--border);margin:0 5px} -.tbgrow{flex:1} -.search-wrap input{padding:5px 9px;border:1px solid var(--border);border-radius:3px;background:#fff;color:var(--text);font-size:12px;width:150px} -.search-wrap input:focus{outline:none;border-color:var(--accent)} - -/* ---------- Arbeitsbereich ---------- */ -.workspace{display:grid;grid-template-columns:minmax(0,1fr) 172px;overflow:hidden;min-width:0;background:var(--area)} -.list-area{position:relative;overflow:hidden;min-height:0} -/* Skin-Hintergrund (wie MultiMCs Katze) – liegt hinter den Instanzen */ -.list-area::after{ - content:'';position:absolute;right:24px;bottom:8px;width:52%;height:88%; - background-image:var(--bg-skin,none);background-repeat:no-repeat; - background-position:right bottom;background-size:contain; - opacity:var(--bg-skin-opacity,.55);pointer-events:none;z-index:0; -} -.list{position:relative;z-index:1;height:100%;min-height:100%;overflow:auto;padding:4px 8px} -.side{background:var(--win);border-left:1px solid var(--border);overflow-y:auto;overflow-x:hidden;padding:10px 8px} -.side-empty{text-align:center;color:var(--dim);padding:24px 8px} -.side-ico{width:52px;height:52px;margin:0 auto 5px;display:grid;place-items:center;font-size:38px} -.side-ico img{width:56px;height:56px;object-fit:cover;border-radius:3px} -.side-title{text-align:center;font-weight:600;font-size:14px;word-break:break-word} -.side-grp{text-align:center;color:var(--link);font-size:11px;margin-top:2px;cursor:pointer} -.side-grp:hover{text-decoration:underline} -.hr{height:1px;background:var(--border);margin:6px 2px} -.sbtn{display:block;width:100%;text-align:center;padding:5px 4px;border:1px solid transparent;border-radius:3px;background:none;cursor:pointer;font-family:inherit;font-size:12px;color:var(--text)} -.sbtn:hover{background:#e2e6ec;border-color:var(--border2)} -.sbtn:disabled{opacity:.5;cursor:default} -.sbtn:disabled:hover{background:none;border-color:transparent} -.sbtn.play{font-weight:600} -.sbtn.del:hover{color:var(--danger)} - -/* ---------- Instanzliste / Gruppen / Kacheln ---------- */ -.group-section{margin-bottom:2px} -.group-header{display:flex;align-items:center;gap:7px;padding:5px 4px 2px;color:#333;font-weight:600;font-size:12px;cursor:pointer;user-select:none} -.group-header::after{content:'';flex:1;height:1px;background:var(--border);margin-left:6px} -.group-header .chev{font-size:9px;color:#888;width:10px;text-align:center} -.group-header.collapsed .chev{transform:none} -.group-count{color:var(--dim);font-weight:400} -.group-grid{display:grid;grid-template-columns:repeat(auto-fill,104px);gap:2px;padding:0 4px 4px;justify-content:start} -.group-section.collapsed .group-grid{display:none} -.card{display:flex;flex-direction:column;align-items:center;gap:3px;padding:6px 4px 4px;border:1px solid transparent;border-radius:2px;cursor:pointer;position:relative} -.card:hover{background:#e3ecf7} -.card.sel{background:var(--sel);border-color:var(--sel-br)} -.card-icon{width:60px;height:60px;display:grid;place-items:center;font-size:40px} -.card-icon svg,.side-ico svg{display:block} -.mc-texture-icon{display:block;object-fit:contain;image-rendering:auto;filter:drop-shadow(0 1px 1px rgba(0,0,0,.18))} -.card-icon-img{width:60px;height:60px;object-fit:cover;border-radius:3px} -.card-name{width:100%;max-width:88px;box-sizing:border-box;font-size:12px;text-align:center;line-height:1.25;padding:1px 4px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis} -.card.sel .card-name{background:var(--sel-br);color:#fff;border-radius:2px} -.card-badges{display:none} -.card-play{display:none} -.group-header.drop-hover,.group-section.drop-hover{outline:1px dashed var(--accent);outline-offset:1px} -.card.dragging{opacity:.4} - -/* Datei von außen übers Fenster gezogen (.jar/.mrpack/.zip) */ -body.file-drop-active::after{ - content:"Datei loslassen zum Importieren"; - position:fixed;inset:0;z-index:9999; - display:flex;align-items:center;justify-content:center; - background:rgba(0,0,0,.55); - color:#fff;font-size:20px;font-weight:600; - border:3px dashed var(--accent); - pointer-events:none; -} - -/* ---------- Leerer Zustand ---------- */ -.empty{position:absolute;inset:0;display:flex;flex-direction:column;align-items:center;justify-content:center;text-align:center;color:var(--dim);gap:8px} -.empty h2{color:#333;margin:0} -.empty p{max-width:340px;margin:0 0 8px} - -/* ---------- Statusleiste (zwei Zeilen) ---------- */ -.statusbar{display:flex;flex-direction:column;min-width:0;background:var(--win);border-top:1px solid var(--border)} -.st-row{display:flex;justify-content:space-between;padding:3px 10px;font-size:11px;color:#333} -.st-row2{background:#e4e4e4;border-top:1px solid var(--border2);color:#444} -.auth-warn{ - display:inline-flex;align-items:center;gap:6px; - color:#fff;background:var(--danger); - padding:1px 10px;border-radius:3px;font-weight:600;cursor:pointer; - animation:authpulse 2s ease-in-out infinite; -} -.auth-warn::before{content:'⚠';font-size:12px} -.auth-warn:hover{filter:brightness(1.12)} -@keyframes authpulse{0%,100%{opacity:1}50%{opacity:.72}} - -/* ---------- Modals ---------- */ -.modal{position:fixed;inset:0;background:rgba(0,0,0,.35);display:flex;align-items:center;justify-content:center;z-index:50} -/* Bestätigungsdialog immer über anderen Dialogen (z. B. Screenshots) */ -#modal-confirm,#modal-prompt{z-index:120} -.modal-card{width:560px;max-width:calc(100vw - 40px);max-height:calc(100vh - 60px);background:#f6f6f6;border:1px solid #a9a9a9;border-radius:4px;box-shadow:0 10px 30px rgba(0,0,0,.3);display:flex;flex-direction:column;overflow:hidden} -.modal-sm{width:420px}.modal-lg{width:820px} -#modal-settings .modal-card{width:960px;max-width:calc(100vw - 32px)} -.modal-head{display:flex;align-items:center;justify-content:space-between;padding:10px 14px;background:#e8e8e8;border-bottom:1px solid var(--border)} -.modal-head h3{margin:0;font-size:14px;font-weight:600} -.modal-close{background:none;border:none;color:#666;font-size:15px;cursor:pointer;line-height:1} -.modal-close:hover{color:#000} -.modal-body{padding:16px;overflow:auto;background:#f6f6f6} -.modal-foot{display:flex;justify-content:flex-end;gap:8px;padding:10px 14px;border-top:1px solid var(--border);background:#efefef} - -/* Popup-Fenster (Einstellungen/Konsole): Haupt-UI ausblenden, das eine Modal - füllt das ganze (rahmenlose) Fenster; der eigene Kopfbereich ersetzt die - native Titelleiste – per -webkit-app-region per Maus verschiebbar */ -body.is-popout>header.toolbar,body.is-popout>main.workspace,body.is-popout>footer.statusbar{display:none} -.popout-host{position:static;inset:auto;background:none;display:block} -/* !important: schlägt auch die spezifischere #modal-settings-Breitenregel oben */ -.popout-host .modal-card{width:100%!important;max-width:none!important;height:100vh!important;max-height:none!important;border:none;border-radius:0;box-shadow:none;margin:0} -/* Inhalt soll die restliche Fensterhöhe füllen (scrollen statt Leerraum unter dem Fuß) */ -.popout-host .modal-body{flex:1 1 auto;min-height:0} -/* Konsole/Logs/Screenshots haben einen einzelnen scrollbaren Kasten mit - fester Höhe (für den normalen Dialog gedacht) – im Popup-Fenster soll der - stattdessen die volle verbleibende Höhe ausfüllen statt Leerraum darunter - zu lassen */ -#modal-console.popout-host .modal-body, -#modal-logs.popout-host .modal-body, -#modal-screens.popout-host .modal-body, -#modal-servers.popout-host .modal-body, -#modal-mods.popout-host .modal-body, -#modal-record.popout-host .modal-body{display:flex;flex-direction:column} -.popout-host .console-out, -#modal-logs.popout-host .crash-voll, -.popout-host .mods-list, -.popout-host .record-stage{flex:1 1 auto;height:auto;max-height:none;min-height:0} -/* Screenshots/Aufzeichnungen NICHT auf die volle Fensterhöhe zwingen (Grid- - Zeilen strecken sich sonst nicht mit, es bliebe bei wenigen Einträgen ein - großer sichtbar leerer Kasten stehen) - nur die feste 460px-Deckelung - aufheben, damit bei VIELEN Einträgen trotzdem mehr Platz genutzt wird */ -.popout-host .screens-grid{max-height:none} -/* Mods-Fenster: die aktive Ansicht (Katalog/Installiert) muss selbst ein - Flex-Container werden, damit ihre eigene Liste (.mods-list) die Regel oben - nutzen und den restlichen Platz füllen kann */ -#modal-mods.popout-host #m-pane-catalog, -#modal-mods.popout-host #m-pane-installed{display:flex;flex-direction:column;flex:1 1 auto;min-height:0} -.popout-host .modal-head{-webkit-app-region:drag;cursor:default} -.popout-host .modal-head button,.popout-host .modal-head input,.popout-host .modal-head select{-webkit-app-region:no-drag} - -/* Formular */ -.field{display:flex;flex-direction:column;gap:5px;margin-bottom:12px} -.field>span{font-size:12px;color:#333} -.field input,.field select,.field textarea{padding:6px 8px;border:1px solid var(--border);border-radius:3px;background:#fff;color:var(--text);font-family:inherit;font-size:13px} -.field input:focus,.field select:focus,.field textarea:focus{outline:none;border-color:var(--accent)} -.field textarea{resize:vertical} -.field-row{display:flex;gap:12px;flex-wrap:wrap}.field-row .field{flex:1 1 0;min-width:0} -.field-icon{max-width:210px;min-width:0} -.backup-select-field{margin-top:14px;margin-bottom:0} -.backup-select-field select{width:100%} -.hint{font-size:12px} -.path-row{display:flex;gap:8px} -.path-row input{flex:1;padding:6px 8px;border:1px solid var(--border);border-radius:3px;background:#fff;color:var(--text);font-family:inherit;font-size:13px} -.advanced{border:1px solid var(--border);border-radius:3px;padding:12px 14px 2px;margin-top:4px;background:#fbfbfb} -.advanced legend{color:var(--dim);font-size:12px;padding:0 6px} -.version-row{display:flex;gap:8px}.version-row #f-version-type{max-width:120px}.version-row #f-version{flex:1} -.icon-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(30px,1fr));gap:3px;margin-top:6px; - width:100%;max-width:100%;max-height:132px;overflow-y:auto;overflow-x:hidden;box-sizing:border-box} -.icon-choice{display:flex;align-items:center;justify-content:center;padding:2px;border:1px solid transparent;border-radius:3px;background:none;cursor:pointer;min-width:0;overflow:hidden} -.icon-choice img{width:24px;height:24px;display:block;object-fit:contain;image-rendering:auto} -.icon-choice:hover{background:rgba(128,128,128,.18)} -.icon-choice.on{border-color:var(--accent);background:var(--sel)} -.icon-choice svg{display:block} -.icon-custom{display:flex;align-items:center;gap:6px;margin-top:6px;flex-wrap:wrap} -.icon-preview{width:34px;height:34px;border-radius:3px;overflow:hidden;background:#e4e4e4;border:1px solid var(--border)} -.icon-preview img{width:100%;height:100%;object-fit:cover} -.appinfo{margin-top:8px;font-size:12px;color:var(--dim);line-height:1.6} -.about-brand{display:flex;flex-direction:column;align-items:center;justify-content:center;gap:10px;margin:0 0 18px;padding:6px 0 14px;border-bottom:1px solid var(--border2);text-align:center} -.about-logo{width:56px;height:56px;border-radius:12px} -.about-name{font-size:18px;font-weight:600} - -/* Buttons in Dialogen */ -.btn{display:inline-flex;align-items:center;gap:6px;padding:6px 12px;border:1px solid var(--border);border-radius:3px;background:linear-gradient(#fdfdfd,#e9e9e9);color:var(--text);cursor:pointer;font-family:inherit;font-size:12px} -.btn:hover{background:linear-gradient(#ffffff,#e2e2e2);border-color:#9aa0a8} -.btn:active{background:#dcdcdc} -.btn:disabled{opacity:.5;cursor:default} -.btn svg{width:15px;height:15px} -.btn-primary{background:linear-gradient(#5a9be0,#3a7bc8);border-color:#2f6bb0;color:#fff} -.btn-primary:hover{background:linear-gradient(#69a8ea,#3f83d2)} -.btn-danger{color:var(--danger);border-color:#cbb0ac} -.btn-danger:hover{background:#f7e9e7;border-color:#c0392b} -.btn-lg{padding:9px 18px;font-size:13px} -.btn-mini{padding:4px 8px;font-size:11px} - -/* Badges (dezent) */ -.badge{font-size:10px;padding:1px 6px;border-radius:2px;background:#e2e2e2;color:#555;border:1px solid var(--border)} - -/* Detail-Kopf (Mods/Login) */ -.detail-head{display:flex;align-items:center;gap:12px} -.detail-icon{font-size:28px} -.detail-sub{color:var(--dim);font-size:12px;margin-top:2px} - -/* Mods */ -.mods-body{min-height:420px} -.mods-warn{background:#fdecea;border:1px solid #e0b4b0;color:#a5342a;border-radius:3px;padding:10px 12px;margin-bottom:12px} -.mods-search{display:flex;gap:8px;margin-bottom:10px;align-items:stretch} -.mods-search select{ - flex:0 0 auto;min-width:140px;max-width:180px; - padding:7px 10px;border:1px solid var(--border);border-radius:3px; - background:var(--input,#fff);color:var(--text); - font-family:inherit;font-size:12px; -} -.mods-search select:focus{outline:none;border-color:var(--accent)} -.mods-filters{display:flex;gap:8px;margin-bottom:12px} -.mods-filters select{flex:1;padding:6px 8px;border:1px solid var(--border);border-radius:3px;background:var(--input,#fff);color:var(--text);font-family:inherit;font-size:12px} -.mods-filters select:focus{outline:none;border-color:var(--accent)} -#m-more{display:block;width:100%;margin-top:8px} -.mods-search input{flex:1;padding:7px 10px;border:1px solid var(--border);border-radius:3px;background:#fff;color:var(--text)} -.mods-search input:focus{outline:none;border-color:var(--accent)} -.mods-columns{display:grid;grid-template-columns:1fr 1fr;gap:14px} -.mods-col h4{margin:0 0 8px;font-size:12px;color:#333;font-weight:600;display:flex;align-items:center;gap:6px} -.mods-tabs{display:flex;gap:2px;margin-bottom:10px;border-bottom:1px solid var(--border)} -.mtab{padding:7px 14px;border:1px solid transparent;border-bottom:none;border-radius:3px 3px 0 0;background:none;color:var(--dim);cursor:pointer;font-family:inherit;font-size:12px;margin-bottom:-1px} -.mtab:hover{color:var(--text)} -.mtab.on{color:var(--text);background:var(--bar);border-color:var(--border);font-weight:600} -.mods-list{height:340px;overflow-y:auto;overflow-x:hidden;border:1px solid var(--border);border-radius:3px;background:#fff;padding:6px} -.mods-empty{color:var(--dim);text-align:center;padding:24px 8px;font-size:12px} -.mod-item{display:flex;gap:10px;align-items:center;padding:8px;border-radius:3px;max-width:100%;overflow:hidden} -.mod-item.clickable{cursor:pointer} -.mod-item.installing{opacity:.6} -.mod-item+.mod-item{border-top:1px solid #eee} -.mod-item:hover{background:#f0f4f8} -.mod-icon{width:38px;height:38px;border-radius:3px;flex:none;background:#e4e4e4;object-fit:cover;display:flex;align-items:center;justify-content:center;font-size:18px} -.mod-info{flex:1;min-width:0} -.mod-name{font-weight:600;font-size:13px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis} -.mod-desc{font-size:12px;color:var(--dim);display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden} -.mod-meta{font-size:11px;color:var(--dim);margin-top:2px} -.mod-new{display:inline-block;margin-left:6px;padding:1px 6px;border-radius:9px;font-size:10px;font-weight:600;background:#2f7d32;color:#fff;vertical-align:middle} -.mod-off{display:inline-block;margin-left:6px;padding:1px 6px;border-radius:9px;font-size:10px;font-weight:600;background:#6b6b6b;color:#fff;vertical-align:middle} -.crash-kern{margin:10px 0;padding:10px 12px;border-left:3px solid #c0392b;background:rgba(192,57,43,.08);border-radius:0 4px 4px 0} -.crash-zeile{display:flex;gap:8px;margin-bottom:5px;font-size:12px;line-height:1.45} -.crash-zeile:last-child{margin-bottom:0} -.crash-titel{flex:0 0 132px;color:var(--dim)} -.crash-wert{flex:1;word-break:break-word} -.crash-verlauf{margin:0;font-family:var(--mono);font-size:11px;line-height:1.5;color:var(--dim);white-space:pre-wrap;word-break:break-all} -.skin-vorschau{display:flex;gap:14px;margin-top:12px} -.skin-spalte{flex:1;display:flex;flex-direction:column;gap:4px;min-width:0} -.skin-label{font-size:11px;color:var(--dim)} -.skin-bild{height:300px;display:flex;align-items:center;justify-content:center;border:1px solid var(--border);border-radius:6px;background:rgba(0,0,0,.15);padding:6px;text-align:center;overflow:hidden} -/* Die gerenderte Figur soll das Feld ausfüllen; eine rohe 64x64-Textur wird - ohne Weichzeichnen vergrößert, damit sie nicht verschwommen wirkt. */ -.skin-bild img{max-width:100%;max-height:100%;image-rendering:pixelated} -.skin-bild canvas{max-width:100%;max-height:100%;cursor:grab} -.skin-bild canvas:active{cursor:grabbing} -.crash-details{margin-top:12px} -.crash-details summary{cursor:pointer;font-size:12px;color:var(--dim)} -.crash-voll{max-height:320px;overflow:auto;margin-top:8px;padding:10px;background:rgba(0,0,0,.25);border-radius:4px;font-family:var(--mono);font-size:11px;line-height:1.45;white-space:pre-wrap;word-break:break-word} -.mod-aus .mod-name,.mod-aus .mod-meta{opacity:.55} -.mod-aus .mod-icon{filter:grayscale(1);opacity:.6} -.mod-action{flex:none} - -/* Import */ -.import-pane{min-height:180px} -.import-copy{margin:0 0 10px;font-size:13px;line-height:1.5} - -/* MultiMC-Import */ -.mmc-bar{display:flex;gap:18px;align-items:center;flex-wrap:wrap;margin-bottom:10px} -.mmc-bar select{padding:6px 8px;border:1px solid var(--border);border-radius:3px;background:var(--input,#fff);color:var(--text);font-family:inherit;font-size:12px} -.mmc-bar select:focus{outline:none;border-color:var(--accent)} -.mmc-item{display:flex;gap:10px;align-items:center;padding:7px 8px;border-radius:3px} -.mmc-item+.mmc-item{border-top:1px solid var(--border2)} -.mmc-item:hover{background:rgba(128,128,128,.10)} -.mmc-item input{width:16px;height:16px;flex:none} -.mmc-name{font-weight:600;font-size:13px} -.mmc-meta{font-size:11px;color:var(--dim)} - -/* Bedrock */ -.bd-actions{display:flex;gap:8px;align-items:center;margin-bottom:14px} -.bd-meta{font-size:11px;color:var(--dim);margin-top:2px} - -/* Login / Konten */ -.login-code{text-align:center} -.login-link{color:var(--link);font-size:15px;display:inline-block;margin-bottom:12px;cursor:pointer;text-decoration:none} -.login-link:hover{text-decoration:underline} -.login-usercode{font-family:var(--mono);font-size:28px;font-weight:700;letter-spacing:3px;color:#222;background:#fff;border:1px solid var(--border);border-radius:4px;padding:12px;margin:6px 0 12px} -.login-error{color:var(--danger)!important;font-weight:600} -.account-list{display:flex;flex-direction:column;gap:8px;margin-bottom:10px} -.account-item{display:flex;align-items:center;gap:10px;padding:10px 12px;border-radius:3px;background:#fff;border:1px solid var(--border)} -.account-item.active{border-color:var(--accent)} -.account-av{width:34px;height:34px;border-radius:3px;flex:none;background:#e4e4e4;display:flex;align-items:center;justify-content:center;font-size:18px} -img.account-av{object-fit:cover;image-rendering:auto} -.account-main{flex:1;min-width:0} -.account-name{font-weight:600} -.account-tag{font-size:11px;color:var(--link)} -.account-actions{display:flex;gap:6px} -.account-empty{color:var(--dim);text-align:center;padding:10px} - -/* Screenshots */ -.screens-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(160px,1fr));gap:12px;max-height:460px;overflow:auto} -.screen-thumb{border:1px solid var(--border);border-radius:3px;overflow:hidden;background:#fff;cursor:pointer;position:relative} -.screen-thumb img{width:100%;height:100px;object-fit:cover;display:block} -.screen-thumb .screen-name{font-size:11px;color:var(--dim);padding:4px 6px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis} -.screen-thumb .screen-del{position:absolute;top:4px;right:4px;opacity:0;background:var(--danger);color:#fff;border:none;border-radius:3px;width:24px;height:24px;cursor:pointer} -.screen-thumb:hover .screen-del{opacity:1} -.screen-thumb.selected{outline:2px solid var(--sel-br);outline-offset:1px;background:var(--sel)} -.screen-thumb .screen-check{position:absolute;top:4px;left:4px;width:18px;height:18px;margin:0;cursor:pointer;z-index:2} -.screens-toolbar{display:flex;align-items:center;gap:8px;margin-bottom:10px;flex-wrap:wrap} -.screens-toolbar .hint{font-size:11px} -.screens-empty{color:var(--dim);text-align:center;padding:30px;grid-column:1/-1} -.record-thumb-img-wrap{position:relative} -.record-thumb-img-wrap img{background:#000} -.record-thumb-play{position:absolute;inset:0;display:flex;align-items:center;justify-content:center;color:#fff;font-size:22px;text-shadow:0 1px 4px rgba(0,0,0,.7);pointer-events:none} -.record-thumb-size{font-size:10px;color:var(--dim);padding:0 6px 4px} - -/* Freunde */ -.tb-badge{display:inline-block;min-width:16px;height:16px;padding:0 4px;margin-left:6px;border-radius:8px;background:#d9453c;color:#fff;font-size:11px;font-weight:600;line-height:16px;text-align:center;box-sizing:border-box} -#modal-friends .field-row{margin-bottom:14px} -#modal-friends .field-row input{flex:1} -/* ---- Spielzeit-Statistik: Kennzahlen + Balken pro Instanz ---- */ -:root{--stat-bar:#3a6ea5} -:root[data-theme="dark"]{--stat-bar:#3d8fe0} -.stats-tiles{display:grid;grid-template-columns:repeat(4,1fr);gap:8px;margin-bottom:6px} -.stat-tile{border:1px solid var(--border);border-radius:4px;padding:8px 10px;min-width:0} -.stat-tile .stat-label{font-size:11px;color:var(--dim)} -.stat-tile .stat-value{font-size:18px;font-weight:600;margin-top:2px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis} -.stat-tile .stat-sub{font-size:11px;color:var(--dim);line-height:1.35} -.stats-list{display:flex;flex-direction:column;gap:2px} -.stat-row{display:grid;grid-template-columns:minmax(0,38%) 1fr auto;align-items:center;gap:10px;padding:5px 4px;border-radius:3px} -.stat-row:hover{background:var(--sel)} -.stat-name{min-width:0} -.stat-name b{display:block;font-weight:600;white-space:nowrap;overflow:hidden;text-overflow:ellipsis} -.stat-name span{font-size:11px;color:var(--dim);white-space:nowrap;overflow:hidden;text-overflow:ellipsis;display:block} -.stat-track{height:8px} -.stat-bar{height:8px;background:var(--stat-bar);border-radius:0 4px 4px 0;min-width:2px} -.stat-value-cell{font-variant-numeric:tabular-nums;white-space:nowrap;text-align:right;min-width:92px} -.popout-host .stats-list{max-height:none} - -/* Clip-Modus-Leiste im Aufzeichnungsfenster */ -.clip-bar{display:flex;align-items:center;gap:14px;flex-wrap:wrap;padding:8px 12px;border:1px solid var(--border);border-radius:4px;background:var(--area)} -.clip-bar.aktiv{border-color:var(--accent);box-shadow:inset 3px 0 0 var(--accent)} -.clip-switch{display:inline-flex;align-items:center;gap:8px;cursor:pointer;font-size:13px;font-weight:600;user-select:none} -.clip-switch input{position:absolute;opacity:0;width:1px;height:1px;pointer-events:none} -.clip-switch-track{position:relative;width:32px;height:18px;border-radius:9px;background:var(--border);transition:background .15s} -.clip-switch-knob{position:absolute;top:2px;left:2px;width:14px;height:14px;border-radius:50%;background:#fff;box-shadow:0 1px 2px rgba(0,0,0,.35);transition:left .15s} -.clip-switch input:checked + .clip-switch-track{background:var(--accent)} -.clip-switch input:checked + .clip-switch-track .clip-switch-knob{left:16px} -.clip-switch input:focus-visible + .clip-switch-track{outline:2px solid var(--accent);outline-offset:2px} -.clip-length{display:inline-flex;align-items:center;gap:6px;font-size:12px;color:var(--dim)} -.clip-length select{padding:3px 6px;border:1px solid var(--border);border-radius:3px;background:var(--input,#fff);color:var(--text);font-family:inherit;font-size:12px} -.clip-length select:disabled{opacity:.6} -.clip-status{flex:1;min-width:200px;font-size:12px;color:var(--dim)} -.clip-bar.aktiv .clip-status{color:var(--text)} -.clip-bar.aktiv .clip-status::before{content:"";display:inline-block;width:8px;height:8px;margin-right:7px;border-radius:50%;background:var(--danger);vertical-align:1px;animation:rec-pulse 1.6s infinite} - -/* ---- Absturz-Assistent ---- */ -.crash-hilfe{display:flex;flex-direction:column;gap:8px;margin-bottom:12px} -.crash-hilfe-titel{font-size:11px;color:var(--dim);text-transform:uppercase;letter-spacing:.03em} -.crash-fund{display:flex;gap:12px;align-items:flex-start;padding:10px 12px;border:1px solid var(--border);border-left:3px solid var(--accent);border-radius:4px;background:var(--area)} -.crash-fund-text{flex:1;min-width:0} -.crash-fund-text b{display:block;font-size:13px;margin-bottom:3px} -.crash-fund-text span{font-size:12px;color:var(--dim);line-height:1.45} -.crash-fund .btn{flex:0 0 auto;align-self:center} -.crash-fund.erledigt{border-left-color:var(--play)} -.crash-unklar{padding:10px 12px;border:1px dashed var(--border);border-radius:4px;font-size:12px;color:var(--dim)} - -/* ---- Instanz teilen ---- */ -.share-code-box{display:flex;align-items:center;justify-content:space-between;gap:12px;padding:14px 16px;border:1px solid var(--accent);border-radius:4px;background:var(--area);margin:10px 0} -.share-code{font-family:var(--mono);font-size:24px;font-weight:600;letter-spacing:.12em;user-select:all} -.share-warn{color:var(--danger)} -.share-code-input{text-transform:uppercase;letter-spacing:.1em;font-family:var(--mono)} -.share-preview{margin-top:12px;padding:12px 14px;border:1px solid var(--border);border-radius:4px;background:var(--area)} -.share-preview b{font-size:14px} -.share-preview .hint{margin:4px 0 0} - -/* ---- Kurznachrichten ---- */ -.friends-chat{display:flex;flex-direction:column;gap:8px;height:100%;min-height:340px} -.chat-head{display:flex;align-items:center;gap:10px} -.chat-head b{font-size:13px} -.chat-verlauf{flex:1;min-height:200px;max-height:300px;overflow-y:auto;display:flex;flex-direction:column;gap:6px;padding:8px;border:1px solid var(--border);border-radius:4px;background:var(--area)} -.popout-host .chat-verlauf{max-height:none} -.chat-leer{margin:auto;font-size:12px;color:var(--dim);text-align:center} -.chat-blase{max-width:78%;padding:6px 10px;border-radius:10px;font-size:12.5px;line-height:1.4;word-break:break-word;background:var(--win);border:1px solid var(--border);align-self:flex-start} -.chat-blase.ich{align-self:flex-end;background:var(--accent);border-color:var(--accent);color:#fff} -.chat-zeit{display:block;font-size:10px;opacity:.65;margin-top:2px} -.chat-schnell{display:flex;flex-wrap:wrap;gap:6px} -.chat-btn{position:relative} -.chat-badge{position:absolute;top:-6px;right:-6px;min-width:16px;height:16px;padding:0 4px;border-radius:8px;background:#e5484d;color:#fff;font-size:10px;font-weight:600;line-height:16px;text-align:center} -.report-liste{margin:6px 0 10px;padding-left:20px;font-size:12px;line-height:1.6} - -/* ---- Auswahl-Dialog ---- */ -.wahl-liste{display:flex;flex-direction:column;gap:4px;max-height:320px;overflow-y:auto} -.popout-host .wahl-liste{max-height:none} -.wahl-option{display:flex;align-items:center;gap:10px;width:100%;padding:7px 10px;border:1px solid var(--border);border-radius:4px;background:var(--area);color:var(--text);font-family:inherit;text-align:left;cursor:pointer} -.wahl-option:hover{border-color:var(--accent)} -.wahl-option.an{border-color:var(--accent);background:var(--sel)} -.wahl-option:disabled{opacity:.5;cursor:default} -.wahl-bild{width:26px;height:26px;flex:0 0 auto} -.wahl-label{display:flex;flex-direction:column;min-width:0} -.wahl-label b{font-size:13px;font-weight:600} -.wahl-label small{font-size:11px;color:var(--dim);white-space:nowrap;overflow:hidden;text-overflow:ellipsis} - -/* ---- Schnellstart-Taste auf der Kachel ---- */ -.card{position:relative} -.card-taste{position:absolute;top:4px;right:4px;padding:1px 5px;border-radius:3px;background:var(--accent);color:#fff;font-size:10px;font-weight:600;line-height:14px} - -/* ---- Bilder im Chat ---- */ -.chat-bild{display:block;max-width:100%;max-height:180px;border-radius:6px;margin-bottom:3px;cursor:zoom-in} -.screen-thumb .screen-teilen{right:32px;background:var(--accent)} - -.friends-section-title{font-size:11px;color:var(--dim);text-transform:uppercase;letter-spacing:.03em;margin:10px 0 6px} -.friend-row{display:flex;align-items:center;gap:10px;padding:6px 4px;border-radius:3px} -.friend-row:hover{background:var(--sel,rgba(0,0,0,.04))} -.friend-dot{width:9px;height:9px;border-radius:50%;background:#8a8a8a;flex:0 0 auto} -.friend-dot.online{background:#3bb54a} -.friend-avatar{width:28px;height:28px;border-radius:4px;flex:0 0 auto;background:#1e1e1e;object-fit:contain} -.friend-info{flex:1;min-width:0} -.friend-name{font-size:13px} -.friend-status{font-size:11px;color:var(--dim);white-space:nowrap;overflow:hidden;text-overflow:ellipsis} -.friends-empty{color:var(--dim);font-size:12px;padding:8px 4px} - -/* Spielaufzeichnung */ -.record-search{display:flex;flex-direction:column;align-items:center;gap:10px;padding:48px 0;color:var(--dim)} -.record-stage{display:flex;flex-direction:column;gap:10px} -.record-video{width:100%;flex:1 1 auto;min-height:360px;background:#000;border-radius:4px;object-fit:contain} -.record-toolbar{display:flex;flex-direction:column;align-items:flex-end;gap:6px} -.record-live-badge{display:flex;align-items:center;gap:8px;color:var(--danger);font-size:13px;font-weight:600} -#record-timer{font-variant-numeric:tabular-nums} -.rec-dot{width:10px;height:10px;border-radius:50%;background:var(--danger);animation:rec-pulse 1s infinite} -@keyframes rec-pulse{0%,100%{opacity:1}50%{opacity:.25}} -.record-audio-bar{display:flex;align-items:center;gap:10px;padding:2px 2px} -.record-mic-list{display:flex;flex-direction:column;gap:8px;margin-top:8px} -.record-source-row{display:flex;align-items:center;gap:10px;margin-bottom:8px} -.record-source-row .checkbox-field{margin-bottom:0;flex:1;min-width:0;font-size:13px;gap:6px} -.record-vol{width:110px} - -/* Konsole (dunkel wie ein Log) */ -.console-out{height:440px;overflow:auto;margin:0;background:#1e1e1e;border:1px solid var(--border);border-radius:3px;padding:10px;font-family:var(--mono);font-size:12px;color:#d4d4d4;white-space:pre-wrap;word-break:break-word;line-height:1.5} -.log-line{white-space:pre-wrap} -.log-error{color:#f48771}.log-warn{color:#dcdcaa}.log-info{color:#569cd6} - -/* Einstellungen */ -.settings-body{display:flex;padding:0;min-height:0;background:var(--area)} -.settings-nav{width:190px;flex:none;background:linear-gradient(180deg,var(--bar),rgba(128,128,128,.08));border-right:1px solid var(--border);padding:14px 10px;display:flex;flex-direction:column;gap:4px} -.settings-nav-label{padding:2px 10px 8px;color:var(--dim);font-size:11px;font-weight:700;letter-spacing:.08em;text-transform:uppercase} -.snav{text-align:left;padding:10px 12px;border:1px solid transparent;border-radius:8px;background:none;color:var(--text);cursor:pointer;font-family:inherit;font-size:13px;font-weight:600;transition:background .15s,border-color .15s,transform .15s} -.snav:hover{background:rgba(128,128,128,.12)} -.snav.on{background:var(--sel);border-color:var(--sel-br);color:var(--text);box-shadow:inset 0 0 0 1px rgba(255,255,255,.14)} -.settings-content{flex:1;padding:20px 22px;overflow:auto} -.settings-hero{margin-bottom:18px} -.settings-hero h4{margin:0 0 6px;font-size:20px;font-weight:700} -.settings-hero p{margin:0;color:var(--dim);font-size:13px;line-height:1.5} -.settings-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:14px;align-items:start} -.settings-grid-stack{grid-template-columns:repeat(2,minmax(0,1fr))} -.settings-card{background:rgba(255,255,255,.7);border:1px solid var(--border);border-radius:12px;padding:16px 16px 12px;box-shadow:0 1px 0 rgba(255,255,255,.5)} -.settings-card h5{margin:0 0 14px;font-size:13px;font-weight:700;color:var(--text)} -.settings-card-wide{grid-column:span 2} -.settings-card .field:last-child,.settings-card .checkbox-field:last-of-type{margin-bottom:0} -.settings-kv{display:grid;gap:10px} -.settings-kv-row{display:flex;justify-content:space-between;gap:14px;padding-bottom:10px;border-bottom:1px solid var(--border2)} -.settings-kv-row:last-child{padding-bottom:0;border-bottom:none} -.settings-kv-label{color:var(--dim);font-size:12px} -.settings-kv-value{text-align:right;font-weight:600;font-size:12px;word-break:break-word} -.appinfo{margin-top:8px;display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:12px 16px;font-size:12px;line-height:1.6} -.appinfo-item{padding:10px 12px;border:1px solid var(--border2);border-radius:10px;background:rgba(128,128,128,.06)} -.appinfo-item.full{grid-column:span 2} -.appinfo-label{display:block;color:var(--dim);font-size:11px;text-transform:uppercase;letter-spacing:.04em} -.appinfo-value{display:block;margin-top:4px;font-weight:600;word-break:break-word} -.info-card{max-width:760px} -.info-actions{display:flex;align-items:center;gap:12px;flex-wrap:wrap;margin:18px 0 0;padding-top:14px;border-top:1px solid var(--border2)} -.info-status{font-size:12px;color:var(--dim)} -.modal-sep{border-top:1px solid var(--border2)} -.info-meta{margin-top:10px} -.info-meta .settings-kv-row{align-items:center} -.info-meta .settings-kv-label{text-transform:uppercase;letter-spacing:.04em;font-size:11px} -.info-meta .settings-kv-value{text-align:left;font-size:13px;font-weight:600} -.info-meta-link{color:var(--link);text-decoration:none} -.info-meta-link:hover{text-decoration:underline} -.spane h4{margin:0 0 14px;font-size:14px;font-weight:600} -.status-ok{color:#2e8b2e!important;font-weight:600} -.status-bad{color:var(--danger)!important;font-weight:600} -:root[data-theme="dark"] .status-ok{color:#5cd65c!important} -.checkbox-field{display:flex;align-items:center;gap:8px;margin-bottom:14px;cursor:pointer;font-size:13px} -.checkbox-field input{width:16px;height:16px} -.field-port{max-width:110px;flex:none} - -:root[data-theme="dark"] .settings-body{background:#252528} -:root[data-theme="dark"] .settings-nav{background:linear-gradient(180deg,#2f2f34,#242428)} -:root[data-theme="dark"] .settings-card{background:rgba(30,30,30,.88);border-color:#3b3b42;box-shadow:none} -:root[data-theme="dark"] .settings-kv-row{border-bottom-color:#36363c} -:root[data-theme="dark"] .about-brand{border-bottom-color:#36363c} -:root[data-theme="dark"] .appinfo-item{background:rgba(255,255,255,.03);border-color:#36363c} -:root[data-theme="dark"] .info-meta-link{color:#7fc7ff} - -@media (max-width: 900px){ - #modal-settings .modal-card{max-width:calc(100vw - 20px);max-height:calc(100vh - 20px)} - .settings-body{flex-direction:column;min-height:0} - .settings-nav{width:auto;border-right:none;border-bottom:1px solid var(--border);padding:10px;flex-direction:row;flex-wrap:wrap} - .settings-nav-label{width:100%;padding:0 4px 6px} - .snav{flex:1 1 150px} - .settings-content{padding:16px} - .settings-grid,.settings-grid-stack{grid-template-columns:1fr} - .settings-card-wide{grid-column:auto} - .appinfo{grid-template-columns:1fr} - .appinfo-item.full{grid-column:auto} - .field-row{flex-direction:column;gap:0} - .path-row{flex-direction:column} -} - -/* Popup-Fenster sind eigenständige, meist schmalere Fenster -- die - Zeilenumbruch-Regel oben ist für die (deutlich breitere) Haupt-App gedacht - und soll hier nicht greifen (sonst z. B. Version/Icon im Instanz-Fenster - untereinander statt nebeneinander) */ -.is-popout .field-row{flex-direction:row} -.is-popout .path-row{flex-direction:row} - -/* Konto-Button mit 3D-Skin-Kopf */ -.acct-btn{gap:8px} -.acct-av{display:inline-flex;align-items:center;justify-content:center} -.acct-av svg{width:18px;height:18px;color:#4b5563} -.acct-head{width:24px;height:26px;object-fit:contain;image-rendering:auto;margin-top:-2px;margin-bottom:-2px} - -/* Update-Dialog */ -.upd-version{display:flex;align-items:center;justify-content:center;gap:12px;margin:4px 0 14px;font-size:15px} -.upd-old{color:var(--dim)} -.upd-arrow{color:var(--dim)} -.upd-newv{font-weight:700;color:var(--accent)} -.upd-channel{margin:-6px 0 12px;text-align:center} -.upd-notes{max-height:180px;overflow:auto;background:var(--input,#fff);border:1px solid var(--border);border-radius:3px;padding:10px 12px;font-size:12px;white-space:pre-wrap;margin-bottom:12px} -.upd-progress{margin:10px 0} -.upd-bar{height:8px;background:var(--border2);border-radius:4px;overflow:hidden} -.upd-bar-fill{height:100%;width:0;background:var(--accent);transition:width .2s} -.backup-progress{margin-top:12px} -.backup-progress-bar{height:10px;background:var(--border2);border-radius:999px;overflow:hidden} -.backup-progress-fill{height:100%;width:0;background:linear-gradient(90deg,#3a7bc8,#5aa1e6);transition:width .2s;background-size:220% 100%} -.backup-progress-fill-busy{animation:backup-progress-shift 1.2s linear infinite} -.backup-progress-text{margin-top:6px} - -@keyframes backup-progress-shift{ - from{background-position:0 0} - to{background-position:220% 0} -} - -/* Kontextmenü (Rechtsklick auf Instanz) */ -.ctx{ - position:fixed;z-index:200;min-width:210px;padding:4px; - background:var(--win);border:1px solid var(--border);border-radius:4px; - box-shadow:0 8px 24px rgba(0,0,0,.35); -} -.ctx-item{ - display:block;width:100%;text-align:left;padding:6px 12px; - border:none;border-radius:3px;background:none;color:var(--text); - font-family:inherit;font-size:12px;cursor:pointer;white-space:nowrap; -} -.ctx-item:hover{background:var(--sel);color:var(--text)} -.ctx-item:disabled{opacity:.45;cursor:default;background:none} -.ctx-strong{font-weight:600} -.ctx-danger:hover{background:var(--danger);color:#fff} -.ctx-sep{height:1px;background:var(--border);margin:4px 6px} - -/* Toast */ -.toast{position:fixed;bottom:42px;left:50%;transform:translateX(-50%);background:#333;color:#fff;padding:10px 16px;border-radius:4px;box-shadow:0 6px 20px rgba(0,0,0,.4);z-index:100;font-size:13px} -.toast.err{background:#a5342a} - -/* Scrollbars (hell) */ -::-webkit-scrollbar{width:14px;height:14px} -::-webkit-scrollbar-thumb{background:#c1c1c1;border:3px solid var(--area);border-radius:7px} -::-webkit-scrollbar-thumb:hover{background:#a8a8a8} - -/* ===================== Skin-Editor ===================== */ -#modal-skineditor .se-karte{width:1100px;max-width:calc(100vw - 32px);height:760px;max-height:calc(100vh - 40px)} -.se-modus{display:inline-flex;border:1px solid var(--border);border-radius:4px;overflow:hidden;background:var(--bar)} -.se-modus-btn{padding:5px 14px;border:none;background:none;color:var(--dim);font:inherit;font-size:12px;cursor:pointer} -.se-modus-btn+.se-modus-btn{border-left:1px solid var(--border)} -.se-modus-btn:hover{color:var(--text)} -.se-modus-btn.on{background:var(--accent);color:#fff;font-weight:600} -.se-body{display:grid;grid-template-columns:200px minmax(0,1fr) 270px;gap:14px;flex:1 1 auto;min-height:0;overflow:hidden;padding:12px 14px} -.se-werkzeuge{display:flex;flex-direction:column;gap:14px;overflow:auto;min-height:0;padding-right:2px} -.se-gruppe{display:flex;flex-direction:column;gap:6px} -.se-titel{font-size:11px;font-weight:600;text-transform:uppercase;letter-spacing:.04em;color:var(--dim)} -.se-tools{display:grid;grid-template-columns:1fr 1fr;gap:4px} -.se-tool{display:flex;flex-direction:column;align-items:center;gap:3px;padding:7px 4px;border:1px solid var(--border);border-radius:4px;background:var(--bar);color:var(--text);font:inherit;font-size:11px;cursor:pointer} -.se-tool svg{width:18px;height:18px} -.se-tool:hover:not(:disabled){border-color:var(--sel-br)} -.se-tool.on{background:var(--sel);border-color:var(--sel-br);font-weight:600} -.se-tool:disabled{opacity:.4;cursor:default} -.se-farbzeile{display:flex;gap:6px;align-items:center} -.se-farbzeile input[type=color]{width:42px;height:30px;padding:0 2px;border:1px solid var(--border);border-radius:4px;background:var(--bar);cursor:pointer} -.se-farbzeile input[type=text]{flex:1;min-width:0;height:30px;padding:0 8px;border:1px solid var(--border);border-radius:4px;font-family:var(--mono);font-size:12px;background:#fff;color:var(--text)} -:root[data-theme="dark"] .se-farbzeile input[type=text]{background:#1e1e1e} -.se-zuletzt{display:grid;grid-template-columns:repeat(8,1fr);gap:3px} -.se-farbfeld{aspect-ratio:1;border:1px solid rgba(0,0,0,.25);border-radius:3px;cursor:pointer;padding:0} -.se-farbfeld:hover{transform:scale(1.12)} -.se-farbfeld.on{outline:2px solid var(--sel-br);outline-offset:1px} -.se-ebenen{display:grid;grid-template-columns:1fr 1fr;border:1px solid var(--border);border-radius:4px;overflow:hidden} -.se-ebene{padding:6px 4px;border:none;background:var(--bar);color:var(--dim);font:inherit;font-size:12px;cursor:pointer} -.se-ebene+.se-ebene{border-left:1px solid var(--border)} -.se-ebene.on{background:var(--sel);color:var(--text);font-weight:600} -.se-check{display:flex;align-items:center;gap:6px;cursor:pointer} -.se-check input{margin:0} -.se-check:has(input:disabled){opacity:.5;cursor:default} -.se-feld{display:flex;flex-direction:column;gap:3px} -.se-feld select{height:28px;border:1px solid var(--border);border-radius:3px;background:#fff;color:var(--text);font:inherit} -:root[data-theme="dark"] .se-feld select{background:#1e1e1e} -.se-undo{display:grid;grid-template-columns:1fr 1fr;gap:4px} -.se-undo .btn{justify-content:center} -.se-gruppe>.btn-mini{align-self:flex-start} -.se-mitte{display:flex;flex-direction:column;gap:6px;min-width:0;min-height:0} -.se-buehne{flex:1 1 auto;min-height:0;position:relative;border:1px solid var(--border);border-radius:6px;background:var(--area);overflow:hidden} -.se-info{min-height:16px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis} -.se-seite{display:flex;flex-direction:column;gap:6px;min-height:0} -.se-mini{position:relative;height:320px;border:1px solid var(--border);border-radius:6px;background:var(--area);overflow:hidden} -.se-tipp{margin:4px 0 0;line-height:1.45} -.se-ansicht{position:absolute;inset:0;display:flex;align-items:center;justify-content:center} -.se-ansicht canvas{display:block} -.se-2d canvas{cursor:crosshair;border-radius:2px} -.se-3d canvas{cursor:grab} -.se-3d canvas:active{cursor:grabbing} -.se-2d[data-werkzeug="pipette"] canvas{cursor:copy} -.se-3d-leer{position:absolute} -.se-fuss{align-items:center} -.se-status{flex:1;min-width:0;margin-left:6px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap} +/* AeroMC – heller MultiMC-Native-Look */ +:root{ + --win:#f0f0f0; --area:#e2e2e2; --bar:#e9eaed; + --border:#c4c7cc; --border2:#d6d8dc; + --text:#1c1c1c; --dim:#6b7280; + --sel:#dce8f6; --sel-br:#3a6ea5; --link:#2c5aa0; --accent:#3a6ea5; + --danger:#c0392b; --play:#3a9c3a; + --font:"Segoe UI",Tahoma,system-ui,sans-serif; + --mono:Consolas,"Cascadia Mono",monospace; +} +*{box-sizing:border-box} +html,body{margin:0;height:100%;font-family:var(--font);font-size:12px;color:var(--text);background:var(--win)} +body{display:grid;grid-template-rows:auto auto 1fr auto;grid-template-columns:minmax(0,1fr);height:100vh;overflow:hidden} +.hidden{display:none!important} +.mono{font-family:var(--mono);font-size:12px} +.spacer{flex:1} +.opt,.hint{color:var(--dim)} +[data-ic] svg,.ic svg{width:16px;height:16px} + +/* ===================== DUNKLER MODUS (native, dunkelgrau) ===================== */ +:root[data-theme="dark"]{ + --win:#2d2d30; --area:#242426; --bar:#333337; + --border:#3f3f46; --border2:#3a3a40; + --text:#e4e4e6; --dim:#9a9aa2; + --sel:#0e639c; --sel-br:#1177bb; --link:#4ea6ff; --accent:#1177bb; + --danger:#e06c6c; --play:#5cb85c; + --input:#1e1e1e; +} +:root[data-theme="dark"] body{background:var(--win)} +:root[data-theme="dark"] .search-wrap input, +:root[data-theme="dark"] .field input, +:root[data-theme="dark"] .field select, +:root[data-theme="dark"] .field textarea, +:root[data-theme="dark"] .mods-search input, +:root[data-theme="dark"] .path-row input, +:root[data-theme="dark"] .login-usercode{background:#1e1e1e;color:var(--text);border-color:var(--border)} +:root[data-theme="dark"] .modal-card{background:#2d2d30;border-color:#161618} +:root[data-theme="dark"] .modal-head{background:#333337} +:root[data-theme="dark"] .modal-body{background:#2d2d30} +:root[data-theme="dark"] .modal-foot{background:#2a2a2e} +:root[data-theme="dark"] .advanced{background:#242426} +:root[data-theme="dark"] .mods-list, +:root[data-theme="dark"] .account-item, +:root[data-theme="dark"] .screen-thumb{background:#1e1e1e} +:root[data-theme="dark"] .mod-icon, +:root[data-theme="dark"] .account-av, +:root[data-theme="dark"] .icon-preview{background:#3a3a40} +:root[data-theme="dark"] .mod-item+.mod-item{border-color:#333} +:root[data-theme="dark"] .mod-item:hover{background:#2a2f36} +:root[data-theme="dark"] .btn{background:linear-gradient(#3b3b40,#303034);color:var(--text);border-color:var(--border)} +:root[data-theme="dark"] .btn:hover{background:linear-gradient(#44444b,#35353b);border-color:#5a5a63} +:root[data-theme="dark"] .btn:active{background:#2a2a2e} +:root[data-theme="dark"] .btn-primary{background:linear-gradient(#2a7ac0,#1f66a8);border-color:#1a5a95;color:#fff} +:root[data-theme="dark"] .btn-primary:hover{background:linear-gradient(#3286cc,#2470b4)} +:root[data-theme="dark"] .btn-danger{color:#e88;border-color:#6a3a3a} +:root[data-theme="dark"] .btn-danger:hover{background:#3a2626} +:root[data-theme="dark"] .tbtn:hover, +:root[data-theme="dark"] .sbtn:hover, +:root[data-theme="dark"] .card:hover{background:#37373d;border-color:var(--border)} +:root[data-theme="dark"] .card.sel{background:#0e639c;border-color:#1177bb} +:root[data-theme="dark"] .card.sel .card-name{background:#1177bb;color:#fff} +:root[data-theme="dark"] .st-row2{background:#2a2a2e} +:root[data-theme="dark"] .st-row, +:root[data-theme="dark"] .group-header, +:root[data-theme="dark"] .empty h2, +:root[data-theme="dark"] .mods-col h4, +:root[data-theme="dark"] .field>span{color:var(--text)} +:root[data-theme="dark"] #btn-console svg,:root[data-theme="dark"] #btn-search svg{color:#c8c8cc} +:root[data-theme="dark"] .acct-av svg{color:#c8c8cc} +:root[data-theme="dark"] .mods-filters select, +:root[data-theme="dark"] .mods-search select, +:root[data-theme="dark"] .mmc-bar select{background:#1e1e1e;color:var(--text);border-color:var(--border)} +:root[data-theme="dark"] .upd-notes{background:#1e1e1e;color:var(--text)} +:root[data-theme="dark"] .modal-close{color:#aaa} +:root[data-theme="dark"] .modal-close:hover{color:#fff} +:root[data-theme="dark"] ::-webkit-scrollbar-thumb{background:#4a4a52;border-color:var(--area)} + +/* ---------- Titelleiste (ersetzt die weiße Windows-Leiste) ---------- */ +/* Farben passend zu TITELLEISTE in main.js (dort für die Fensterknöpfe) */ +:root{--titel-bg:#f0f0f0;--titel-fg:#1c1c1c} +:root[data-theme="dark"]{--titel-bg:#2d2d30;--titel-fg:#e4e4e6} +.titelleiste{display:flex;align-items:center;gap:8px;height:32px;padding:0 150px 0 10px;background:var(--titel-bg);color:var(--titel-fg);-webkit-app-region:drag;user-select:none;font-size:12px} +.titel-logo{width:16px;height:16px;flex:none} +.titel-text{white-space:nowrap} +body.fenster-inaktiv .titelleiste>*{opacity:.55} +body.is-popout>.titelleiste{display:none} + +/* ---------- Toolbar ---------- */ +.toolbar{display:flex;align-items:center;gap:2px;padding:5px 8px;min-width:0;overflow:hidden;background:var(--win);border-bottom:1px solid var(--border)} +.tbtn{display:inline-flex;align-items:center;gap:7px;white-space:nowrap;padding:6px 10px;border:1px solid transparent;border-radius:3px;background:none;color:var(--text);cursor:pointer;font-family:inherit;font-size:12px} +.tbtn:hover{background:#e2e6ec;border-color:var(--border2)} +.tbtn:active{background:#d7dde5} +.tbtn svg{width:18px;height:18px;color:#4b5563} +/* farbige Toolbar-Icons wie in MultiMC */ +#btn-new svg{color:#3a9c3a} +#btn-import svg{color:#3d7ab5} +#btn-open-dir svg{color:#d8a72f} +#btn-console svg{color:#5a6470} +#btn-account svg{color:#3a9c3a} +#btn-settings svg{color:#3d7ab5} +.tbtn.big{font-size:13px;padding:8px 16px;border:1px solid var(--border);background:linear-gradient(#fdfdfd,#e9e9e9)} +.tbsep{width:1px;height:24px;background:var(--border);margin:0 5px} +.tbgrow{flex:1} +.search-wrap input{padding:5px 9px;border:1px solid var(--border);border-radius:3px;background:#fff;color:var(--text);font-size:12px;width:150px} +.search-wrap input:focus{outline:none;border-color:var(--accent)} +/* eingeklappt nur die Lupe, aufgeklappt nur das Feld */ +.search-wrap{display:flex;align-items:center} +.search-wrap:not(.offen) input{display:none} +.search-wrap.offen .tb-lupe{display:none} +.search-wrap.offen input{animation:suche-auf .16s ease-out} +@keyframes suche-auf{from{width:0;opacity:0}} +.tbtn.tb-lupe{padding:6px 8px} +#btn-search svg{color:#5a6470} + +/* ---------- Arbeitsbereich ---------- */ +.workspace{display:grid;grid-template-columns:minmax(0,1fr) 172px;overflow:hidden;min-width:0;background:var(--area)} +.list-area{position:relative;overflow:hidden;min-height:0} +/* Skin-Hintergrund (wie MultiMCs Katze) – liegt hinter den Instanzen */ +.list-area::after{ + content:'';position:absolute;right:24px;bottom:8px;width:52%;height:88%; + background-image:var(--bg-skin,none);background-repeat:no-repeat; + background-position:right bottom;background-size:contain; + opacity:var(--bg-skin-opacity,.55);pointer-events:none;z-index:0; +} +.list{position:relative;z-index:1;height:100%;min-height:100%;overflow:auto;padding:4px 8px} +.side{background:var(--win);border-left:1px solid var(--border);overflow-y:auto;overflow-x:hidden;padding:10px 8px} +.side-empty{text-align:center;color:var(--dim);padding:24px 8px} +.side-ico{width:52px;height:52px;margin:0 auto 5px;display:grid;place-items:center;font-size:38px} +.side-ico img{width:56px;height:56px;object-fit:cover;border-radius:3px} +.side-title{text-align:center;font-weight:600;font-size:14px;word-break:break-word} +.side-grp{text-align:center;color:var(--link);font-size:11px;margin-top:2px;cursor:pointer} +.side-grp:hover{text-decoration:underline} +.hr{height:1px;background:var(--border);margin:6px 2px} +.sbtn{display:block;width:100%;text-align:center;padding:5px 4px;border:1px solid transparent;border-radius:3px;background:none;cursor:pointer;font-family:inherit;font-size:12px;color:var(--text)} +.sbtn:hover{background:#e2e6ec;border-color:var(--border2)} +.sbtn:disabled{opacity:.5;cursor:default} +.sbtn:disabled:hover{background:none;border-color:transparent} +.sbtn.play{font-weight:600} +.sbtn.del:hover{color:var(--danger)} + +/* ---------- Instanzliste / Gruppen / Kacheln ---------- */ +.group-section{margin-bottom:2px} +.group-header{display:flex;align-items:center;gap:7px;padding:5px 4px 2px;color:#333;font-weight:600;font-size:12px;cursor:pointer;user-select:none} +.group-header::after{content:'';flex:1;height:1px;background:var(--border);margin-left:6px} +.group-header .chev{font-size:9px;color:#888;width:10px;text-align:center} +.group-header.collapsed .chev{transform:none} +.group-count{color:var(--dim);font-weight:400} +.group-grid{display:grid;grid-template-columns:repeat(auto-fill,104px);gap:2px;padding:0 4px 4px;justify-content:start} +.group-section.collapsed .group-grid{display:none} +.card{display:flex;flex-direction:column;align-items:center;gap:3px;padding:6px 4px 4px;border:1px solid transparent;border-radius:2px;cursor:pointer;position:relative} +.card:hover{background:#e3ecf7} +.card.sel{background:var(--sel);border-color:var(--sel-br)} +.card-icon{width:60px;height:60px;display:grid;place-items:center;font-size:40px} +.card-icon svg,.side-ico svg{display:block} +.mc-texture-icon{display:block;object-fit:contain;image-rendering:auto;filter:drop-shadow(0 1px 1px rgba(0,0,0,.18))} +.card-icon-img{width:60px;height:60px;object-fit:cover;border-radius:3px} +.card-name{width:100%;max-width:88px;box-sizing:border-box;font-size:12px;text-align:center;line-height:1.25;padding:1px 4px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis} +.card.sel .card-name{background:var(--sel-br);color:#fff;border-radius:2px} +.card-badges{display:none} +.card-play{display:none} +.group-header.drop-hover,.group-section.drop-hover{outline:1px dashed var(--accent);outline-offset:1px} +.card.dragging{opacity:.4} + +/* Datei von außen übers Fenster gezogen (.jar/.mrpack/.zip) */ +body.file-drop-active::after{ + content:"Datei loslassen zum Importieren"; + position:fixed;inset:0;z-index:9999; + display:flex;align-items:center;justify-content:center; + background:rgba(0,0,0,.55); + color:#fff;font-size:20px;font-weight:600; + border:3px dashed var(--accent); + pointer-events:none; +} + +/* ---------- Leerer Zustand ---------- */ +.empty{position:absolute;inset:0;display:flex;flex-direction:column;align-items:center;justify-content:center;text-align:center;color:var(--dim);gap:8px} +.empty h2{color:#333;margin:0} +.empty p{max-width:340px;margin:0 0 8px} + +/* ---------- Statusleiste (zwei Zeilen) ---------- */ +.statusbar{display:flex;flex-direction:column;min-width:0;background:var(--win);border-top:1px solid var(--border)} +.st-row{display:flex;justify-content:space-between;padding:3px 10px;font-size:11px;color:#333} +.st-row2{background:#e4e4e4;border-top:1px solid var(--border2);color:#444} +.auth-warn{ + display:inline-flex;align-items:center;gap:6px; + color:#fff;background:var(--danger); + padding:1px 10px;border-radius:3px;font-weight:600;cursor:pointer; + animation:authpulse 2s ease-in-out infinite; +} +.auth-warn::before{content:'⚠';font-size:12px} +.auth-warn:hover{filter:brightness(1.12)} +@keyframes authpulse{0%,100%{opacity:1}50%{opacity:.72}} + +/* ---------- Modals ---------- */ +.modal{position:fixed;inset:0;background:rgba(0,0,0,.35);display:flex;align-items:center;justify-content:center;z-index:50} +/* Bestätigungsdialog immer über anderen Dialogen (z. B. Screenshots) */ +#modal-confirm,#modal-prompt{z-index:120} +.modal-card{width:560px;max-width:calc(100vw - 40px);max-height:calc(100vh - 60px);background:#f6f6f6;border:1px solid #a9a9a9;border-radius:4px;box-shadow:0 10px 30px rgba(0,0,0,.3);display:flex;flex-direction:column;overflow:hidden} +.modal-sm{width:420px}.modal-lg{width:820px} +#modal-settings .modal-card{width:960px;max-width:calc(100vw - 32px)} +.modal-head{display:flex;align-items:center;justify-content:space-between;padding:10px 14px;background:#e8e8e8;border-bottom:1px solid var(--border)} +.modal-head h3{margin:0;font-size:14px;font-weight:600} +.modal-close{background:none;border:none;color:#666;font-size:15px;cursor:pointer;line-height:1} +.modal-close:hover{color:#000} +.modal-body{padding:16px;overflow:auto;background:#f6f6f6} +.modal-foot{display:flex;justify-content:flex-end;gap:8px;padding:10px 14px;border-top:1px solid var(--border);background:#efefef} + +/* Popup-Fenster (Einstellungen/Konsole): Haupt-UI ausblenden, das eine Modal + füllt das ganze (rahmenlose) Fenster; der eigene Kopfbereich ersetzt die + native Titelleiste – per -webkit-app-region per Maus verschiebbar */ +body.is-popout>header.toolbar,body.is-popout>main.workspace,body.is-popout>footer.statusbar{display:none} +.popout-host{position:static;inset:auto;background:none;display:block} +/* !important: schlägt auch die spezifischere #modal-settings-Breitenregel oben */ +.popout-host .modal-card{width:100%!important;max-width:none!important;height:100vh!important;max-height:none!important;border:none;border-radius:0;box-shadow:none;margin:0} +/* Inhalt soll die restliche Fensterhöhe füllen (scrollen statt Leerraum unter dem Fuß) */ +.popout-host .modal-body{flex:1 1 auto;min-height:0} +/* Konsole/Logs/Screenshots haben einen einzelnen scrollbaren Kasten mit + fester Höhe (für den normalen Dialog gedacht) – im Popup-Fenster soll der + stattdessen die volle verbleibende Höhe ausfüllen statt Leerraum darunter + zu lassen */ +#modal-console.popout-host .modal-body, +#modal-logs.popout-host .modal-body, +#modal-screens.popout-host .modal-body, +#modal-servers.popout-host .modal-body, +#modal-mods.popout-host .modal-body, +#modal-record.popout-host .modal-body{display:flex;flex-direction:column} +.popout-host .console-out, +#modal-logs.popout-host .crash-voll, +.popout-host .mods-list, +.popout-host .record-stage{flex:1 1 auto;height:auto;max-height:none;min-height:0} +/* Screenshots/Aufzeichnungen NICHT auf die volle Fensterhöhe zwingen (Grid- + Zeilen strecken sich sonst nicht mit, es bliebe bei wenigen Einträgen ein + großer sichtbar leerer Kasten stehen) - nur die feste 460px-Deckelung + aufheben, damit bei VIELEN Einträgen trotzdem mehr Platz genutzt wird */ +.popout-host .screens-grid{max-height:none} +/* Mods-Fenster: die aktive Ansicht (Katalog/Installiert) muss selbst ein + Flex-Container werden, damit ihre eigene Liste (.mods-list) die Regel oben + nutzen und den restlichen Platz füllen kann */ +#modal-mods.popout-host #m-pane-catalog, +#modal-mods.popout-host #m-pane-installed{display:flex;flex-direction:column;flex:1 1 auto;min-height:0} +.popout-host .modal-head{-webkit-app-region:drag;cursor:default} +.popout-host .modal-head button,.popout-host .modal-head input,.popout-host .modal-head select{-webkit-app-region:no-drag} + +/* Formular */ +.field{display:flex;flex-direction:column;gap:5px;margin-bottom:12px} +.field>span{font-size:12px;color:#333} +.field input,.field select,.field textarea{padding:6px 8px;border:1px solid var(--border);border-radius:3px;background:#fff;color:var(--text);font-family:inherit;font-size:13px} +.field input:focus,.field select:focus,.field textarea:focus{outline:none;border-color:var(--accent)} +.field textarea{resize:vertical} +.field-row{display:flex;gap:12px;flex-wrap:wrap}.field-row .field{flex:1 1 0;min-width:0} +.field-icon{max-width:210px;min-width:0} +.backup-select-field{margin-top:14px;margin-bottom:0} +.backup-select-field select{width:100%} +.hint{font-size:12px} +.path-row{display:flex;gap:8px} +.path-row input{flex:1;padding:6px 8px;border:1px solid var(--border);border-radius:3px;background:#fff;color:var(--text);font-family:inherit;font-size:13px} +.advanced{border:1px solid var(--border);border-radius:3px;padding:12px 14px 2px;margin-top:4px;background:#fbfbfb} +.advanced legend{color:var(--dim);font-size:12px;padding:0 6px} +.version-row{display:flex;gap:8px}.version-row #f-version-type{max-width:120px}.version-row #f-version{flex:1} +.icon-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(30px,1fr));gap:3px;margin-top:6px; + width:100%;max-width:100%;max-height:132px;overflow-y:auto;overflow-x:hidden;box-sizing:border-box} +.icon-choice{display:flex;align-items:center;justify-content:center;padding:2px;border:1px solid transparent;border-radius:3px;background:none;cursor:pointer;min-width:0;overflow:hidden} +.icon-choice img{width:24px;height:24px;display:block;object-fit:contain;image-rendering:auto} +.icon-choice:hover{background:rgba(128,128,128,.18)} +.icon-choice.on{border-color:var(--accent);background:var(--sel)} +.icon-choice svg{display:block} +.icon-custom{display:flex;align-items:center;gap:6px;margin-top:6px;flex-wrap:wrap} +.icon-preview{width:34px;height:34px;border-radius:3px;overflow:hidden;background:#e4e4e4;border:1px solid var(--border)} +.icon-preview img{width:100%;height:100%;object-fit:cover} +.appinfo{margin-top:8px;font-size:12px;color:var(--dim);line-height:1.6} +.about-brand{display:flex;flex-direction:column;align-items:center;justify-content:center;gap:10px;margin:0 0 18px;padding:6px 0 14px;border-bottom:1px solid var(--border2);text-align:center} +.about-logo{width:56px;height:56px;border-radius:12px} +.about-name{font-size:18px;font-weight:600} + +/* Buttons in Dialogen */ +.btn{display:inline-flex;align-items:center;gap:6px;padding:6px 12px;border:1px solid var(--border);border-radius:3px;background:linear-gradient(#fdfdfd,#e9e9e9);color:var(--text);cursor:pointer;font-family:inherit;font-size:12px} +.btn:hover{background:linear-gradient(#ffffff,#e2e2e2);border-color:#9aa0a8} +.btn:active{background:#dcdcdc} +.btn:disabled{opacity:.5;cursor:default} +.btn svg{width:15px;height:15px} +.btn-primary{background:linear-gradient(#5a9be0,#3a7bc8);border-color:#2f6bb0;color:#fff} +.btn-primary:hover{background:linear-gradient(#69a8ea,#3f83d2)} +.btn-danger{color:var(--danger);border-color:#cbb0ac} +.btn-danger:hover{background:#f7e9e7;border-color:#c0392b} +.btn-lg{padding:9px 18px;font-size:13px} +.btn-mini{padding:4px 8px;font-size:11px} + +/* Badges (dezent) */ +.badge{font-size:10px;padding:1px 6px;border-radius:2px;background:#e2e2e2;color:#555;border:1px solid var(--border)} + +/* Detail-Kopf (Mods/Login) */ +.detail-head{display:flex;align-items:center;gap:12px} +.detail-icon{font-size:28px} +.detail-sub{color:var(--dim);font-size:12px;margin-top:2px} + +/* Mods */ +.mods-body{min-height:420px} +.mods-warn{background:#fdecea;border:1px solid #e0b4b0;color:#a5342a;border-radius:3px;padding:10px 12px;margin-bottom:12px} +.mods-search{display:flex;gap:8px;margin-bottom:10px;align-items:stretch} +.mods-search select{ + flex:0 0 auto;min-width:140px;max-width:180px; + padding:7px 10px;border:1px solid var(--border);border-radius:3px; + background:var(--input,#fff);color:var(--text); + font-family:inherit;font-size:12px; +} +.mods-search select:focus{outline:none;border-color:var(--accent)} +.mods-filters{display:flex;gap:8px;margin-bottom:12px} +.mods-filters select{flex:1;padding:6px 8px;border:1px solid var(--border);border-radius:3px;background:var(--input,#fff);color:var(--text);font-family:inherit;font-size:12px} +.mods-filters select:focus{outline:none;border-color:var(--accent)} +#m-more{display:block;width:100%;margin-top:8px} +.mods-search input{flex:1;padding:7px 10px;border:1px solid var(--border);border-radius:3px;background:#fff;color:var(--text)} +.mods-search input:focus{outline:none;border-color:var(--accent)} +.mods-columns{display:grid;grid-template-columns:1fr 1fr;gap:14px} +.mods-col h4{margin:0 0 8px;font-size:12px;color:#333;font-weight:600;display:flex;align-items:center;gap:6px} +.mods-tabs{display:flex;gap:2px;margin-bottom:10px;border-bottom:1px solid var(--border)} +.mtab{padding:7px 14px;border:1px solid transparent;border-bottom:none;border-radius:3px 3px 0 0;background:none;color:var(--dim);cursor:pointer;font-family:inherit;font-size:12px;margin-bottom:-1px} +.mtab:hover{color:var(--text)} +.mtab.on{color:var(--text);background:var(--bar);border-color:var(--border);font-weight:600} +.mods-list{height:340px;overflow-y:auto;overflow-x:hidden;border:1px solid var(--border);border-radius:3px;background:#fff;padding:6px} +.mods-empty{color:var(--dim);text-align:center;padding:24px 8px;font-size:12px} +.mod-item{display:flex;gap:10px;align-items:center;padding:8px;border-radius:3px;max-width:100%;overflow:hidden} +.mod-item.clickable{cursor:pointer} +.mod-item.installing{opacity:.6} +.mod-item+.mod-item{border-top:1px solid #eee} +.mod-item:hover{background:#f0f4f8} +.mod-icon{width:38px;height:38px;border-radius:3px;flex:none;background:#e4e4e4;object-fit:cover;display:flex;align-items:center;justify-content:center;font-size:18px} +.mod-info{flex:1;min-width:0} +.mod-name{font-weight:600;font-size:13px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis} +.mod-desc{font-size:12px;color:var(--dim);display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden} +.mod-meta{font-size:11px;color:var(--dim);margin-top:2px} +.mod-new{display:inline-block;margin-left:6px;padding:1px 6px;border-radius:9px;font-size:10px;font-weight:600;background:#2f7d32;color:#fff;vertical-align:middle} +.mod-off{display:inline-block;margin-left:6px;padding:1px 6px;border-radius:9px;font-size:10px;font-weight:600;background:#6b6b6b;color:#fff;vertical-align:middle} +.crash-kern{margin:10px 0;padding:10px 12px;border-left:3px solid #c0392b;background:rgba(192,57,43,.08);border-radius:0 4px 4px 0} +.crash-zeile{display:flex;gap:8px;margin-bottom:5px;font-size:12px;line-height:1.45} +.crash-zeile:last-child{margin-bottom:0} +.crash-titel{flex:0 0 132px;color:var(--dim)} +.crash-wert{flex:1;word-break:break-word} +.crash-verlauf{margin:0;font-family:var(--mono);font-size:11px;line-height:1.5;color:var(--dim);white-space:pre-wrap;word-break:break-all} +.skin-vorschau{display:flex;gap:14px;margin-top:12px} +.skin-spalte{flex:1;display:flex;flex-direction:column;gap:4px;min-width:0} +.skin-label{font-size:11px;color:var(--dim)} +.skin-bild{height:300px;display:flex;align-items:center;justify-content:center;border:1px solid var(--border);border-radius:6px;background:rgba(0,0,0,.15);padding:6px;text-align:center;overflow:hidden} +/* Die gerenderte Figur soll das Feld ausfüllen; eine rohe 64x64-Textur wird + ohne Weichzeichnen vergrößert, damit sie nicht verschwommen wirkt. */ +.skin-bild img{max-width:100%;max-height:100%;image-rendering:pixelated} +.skin-bild canvas{max-width:100%;max-height:100%;cursor:grab} +.skin-bild canvas:active{cursor:grabbing} +.popout-host .skin-bild{height:240px} +.skin-umhang{margin-top:12px;padding-top:10px;border-top:1px solid var(--border2)} +.skin-umhang .field-row{margin-top:6px} +.skin-umhang .field{margin-bottom:6px} +.skin-umhang-aero{display:flex;align-items:center;gap:8px;min-height:30px;flex-wrap:wrap} +.crash-details{margin-top:12px} +.crash-details summary{cursor:pointer;font-size:12px;color:var(--dim)} +.crash-voll{max-height:320px;overflow:auto;margin-top:8px;padding:10px;background:rgba(0,0,0,.25);border-radius:4px;font-family:var(--mono);font-size:11px;line-height:1.45;white-space:pre-wrap;word-break:break-word} +.mod-aus .mod-name,.mod-aus .mod-meta{opacity:.55} +.mod-aus .mod-icon{filter:grayscale(1);opacity:.6} +.mod-action{flex:none} + +/* Import */ +.import-pane{min-height:180px} +.import-copy{margin:0 0 10px;font-size:13px;line-height:1.5} + +/* MultiMC-Import */ +.mmc-bar{display:flex;gap:18px;align-items:center;flex-wrap:wrap;margin-bottom:10px} +.mmc-bar select{padding:6px 8px;border:1px solid var(--border);border-radius:3px;background:var(--input,#fff);color:var(--text);font-family:inherit;font-size:12px} +.mmc-bar select:focus{outline:none;border-color:var(--accent)} +.mmc-item{display:flex;gap:10px;align-items:center;padding:7px 8px;border-radius:3px} +.mmc-item+.mmc-item{border-top:1px solid var(--border2)} +.mmc-item:hover{background:rgba(128,128,128,.10)} +.mmc-item input{width:16px;height:16px;flex:none} +.mmc-name{font-weight:600;font-size:13px} +.mmc-meta{font-size:11px;color:var(--dim)} + +/* Bedrock */ +.bd-actions{display:flex;gap:8px;align-items:center;margin-bottom:14px} +.bd-meta{font-size:11px;color:var(--dim);margin-top:2px} + +/* Login / Konten */ +.login-code{text-align:center} +.login-link{color:var(--link);font-size:15px;display:inline-block;margin-bottom:12px;cursor:pointer;text-decoration:none} +.login-link:hover{text-decoration:underline} +.login-usercode{font-family:var(--mono);font-size:28px;font-weight:700;letter-spacing:3px;color:#222;background:#fff;border:1px solid var(--border);border-radius:4px;padding:12px;margin:6px 0 12px} +.login-error{color:var(--danger)!important;font-weight:600} +.account-list{display:flex;flex-direction:column;gap:8px;margin-bottom:10px} +.account-item{display:flex;align-items:center;gap:10px;padding:10px 12px;border-radius:3px;background:#fff;border:1px solid var(--border)} +.account-item.active{border-color:var(--accent)} +.account-av{width:34px;height:34px;border-radius:3px;flex:none;background:#e4e4e4;display:flex;align-items:center;justify-content:center;font-size:18px} +img.account-av{object-fit:cover;image-rendering:auto} +.account-main{flex:1;min-width:0} +.account-name{font-weight:600} +.account-tag{font-size:11px;color:var(--link)} +.account-actions{display:flex;gap:6px} +.account-empty{color:var(--dim);text-align:center;padding:10px} + +/* Screenshots */ +.screens-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(160px,1fr));gap:12px;max-height:460px;overflow:auto} +.screen-thumb{border:1px solid var(--border);border-radius:3px;overflow:hidden;background:#fff;cursor:pointer;position:relative} +.screen-thumb img{width:100%;height:100px;object-fit:cover;display:block} +.screen-thumb .screen-name{font-size:11px;color:var(--dim);padding:4px 6px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis} +.screen-thumb .screen-del{position:absolute;top:4px;right:4px;opacity:0;background:var(--danger);color:#fff;border:none;border-radius:3px;width:24px;height:24px;cursor:pointer} +.screen-thumb:hover .screen-del{opacity:1} +.screen-thumb.selected{outline:2px solid var(--sel-br);outline-offset:1px;background:var(--sel)} +.screen-thumb .screen-check{position:absolute;top:4px;left:4px;width:18px;height:18px;margin:0;cursor:pointer;z-index:2} +.screens-toolbar{display:flex;align-items:center;gap:8px;margin-bottom:10px;flex-wrap:wrap} +.screens-toolbar .hint{font-size:11px} +.screens-empty{color:var(--dim);text-align:center;padding:30px;grid-column:1/-1} +.record-thumb-img-wrap{position:relative} +.record-thumb-img-wrap img{background:#000} +.record-thumb-play{position:absolute;inset:0;display:flex;align-items:center;justify-content:center;color:#fff;font-size:22px;text-shadow:0 1px 4px rgba(0,0,0,.7);pointer-events:none} +.record-thumb-size{font-size:10px;color:var(--dim);padding:0 6px 4px} + +/* Freunde */ +.tb-badge{display:inline-block;min-width:16px;height:16px;padding:0 4px;margin-left:6px;border-radius:8px;background:#d9453c;color:#fff;font-size:11px;font-weight:600;line-height:16px;text-align:center;box-sizing:border-box} +#modal-friends .field-row{margin-bottom:14px} +#modal-friends .field-row input{flex:1} +/* ---- Spielzeit-Statistik: Kennzahlen + Balken pro Instanz ---- */ +:root{--stat-bar:#3a6ea5} +:root[data-theme="dark"]{--stat-bar:#3d8fe0} +.stats-tiles{display:grid;grid-template-columns:repeat(4,1fr);gap:8px;margin-bottom:6px} +.stat-tile{border:1px solid var(--border);border-radius:4px;padding:8px 10px;min-width:0} +.stat-tile .stat-label{font-size:11px;color:var(--dim)} +.stat-tile .stat-value{font-size:18px;font-weight:600;margin-top:2px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis} +.stat-tile .stat-sub{font-size:11px;color:var(--dim);line-height:1.35} +.stats-list{display:flex;flex-direction:column;gap:2px} +.stat-row{display:grid;grid-template-columns:minmax(0,38%) 1fr auto;align-items:center;gap:10px;padding:5px 4px;border-radius:3px} +.stat-row:hover{background:var(--sel)} +.stat-name{min-width:0} +.stat-name b{display:block;font-weight:600;white-space:nowrap;overflow:hidden;text-overflow:ellipsis} +.stat-name span{font-size:11px;color:var(--dim);white-space:nowrap;overflow:hidden;text-overflow:ellipsis;display:block} +.stat-track{height:8px} +.stat-bar{height:8px;background:var(--stat-bar);border-radius:0 4px 4px 0;min-width:2px} +.stat-value-cell{font-variant-numeric:tabular-nums;white-space:nowrap;text-align:right;min-width:92px} +.popout-host .stats-list{max-height:none} + +/* Clip-Modus-Leiste im Aufzeichnungsfenster */ +.clip-bar{display:flex;align-items:center;gap:14px;flex-wrap:wrap;padding:8px 12px;border:1px solid var(--border);border-radius:4px;background:var(--area)} +.clip-bar.aktiv{border-color:var(--accent);box-shadow:inset 3px 0 0 var(--accent)} +.clip-switch{display:inline-flex;align-items:center;gap:8px;cursor:pointer;font-size:13px;font-weight:600;user-select:none} +.clip-switch input{position:absolute;opacity:0;width:1px;height:1px;pointer-events:none} +.clip-switch-track{position:relative;width:32px;height:18px;border-radius:9px;background:var(--border);transition:background .15s} +.clip-switch-knob{position:absolute;top:2px;left:2px;width:14px;height:14px;border-radius:50%;background:#fff;box-shadow:0 1px 2px rgba(0,0,0,.35);transition:left .15s} +.clip-switch input:checked + .clip-switch-track{background:var(--accent)} +.clip-switch input:checked + .clip-switch-track .clip-switch-knob{left:16px} +.clip-switch input:focus-visible + .clip-switch-track{outline:2px solid var(--accent);outline-offset:2px} +.clip-length{display:inline-flex;align-items:center;gap:6px;font-size:12px;color:var(--dim)} +.clip-length select{padding:3px 6px;border:1px solid var(--border);border-radius:3px;background:var(--input,#fff);color:var(--text);font-family:inherit;font-size:12px} +.clip-length select:disabled{opacity:.6} +.clip-status{flex:1;min-width:200px;font-size:12px;color:var(--dim)} +.clip-bar.aktiv .clip-status{color:var(--text)} +.clip-bar.aktiv .clip-status::before{content:"";display:inline-block;width:8px;height:8px;margin-right:7px;border-radius:50%;background:var(--danger);vertical-align:1px;animation:rec-pulse 1.6s infinite} + +/* ---- Absturz-Assistent ---- */ +.crash-hilfe{display:flex;flex-direction:column;gap:8px;margin-bottom:12px} +.crash-hilfe-titel{font-size:11px;color:var(--dim);text-transform:uppercase;letter-spacing:.03em} +.crash-fund{display:flex;gap:12px;align-items:flex-start;padding:10px 12px;border:1px solid var(--border);border-left:3px solid var(--accent);border-radius:4px;background:var(--area)} +.crash-fund-text{flex:1;min-width:0} +.crash-fund-text b{display:block;font-size:13px;margin-bottom:3px} +.crash-fund-text span{font-size:12px;color:var(--dim);line-height:1.45} +.crash-fund .btn{flex:0 0 auto;align-self:center} +.crash-fund.erledigt{border-left-color:var(--play)} +.crash-unklar{padding:10px 12px;border:1px dashed var(--border);border-radius:4px;font-size:12px;color:var(--dim)} + +/* ---- Instanz teilen ---- */ +.share-code-box{display:flex;align-items:center;justify-content:space-between;gap:12px;padding:14px 16px;border:1px solid var(--accent);border-radius:4px;background:var(--area);margin:10px 0} +.share-code{font-family:var(--mono);font-size:24px;font-weight:600;letter-spacing:.12em;user-select:all} +.share-warn{color:var(--danger)} +.share-code-input{text-transform:uppercase;letter-spacing:.1em;font-family:var(--mono)} +.share-preview{margin-top:12px;padding:12px 14px;border:1px solid var(--border);border-radius:4px;background:var(--area)} +.share-preview b{font-size:14px} +.share-preview .hint{margin:4px 0 0} + +/* ---- Kurznachrichten ---- */ +.friends-chat{display:flex;flex-direction:column;gap:8px;height:100%;min-height:340px} +.chat-head{display:flex;align-items:center;gap:10px} +.chat-head b{font-size:13px} +.chat-verlauf{flex:1;min-height:200px;max-height:300px;overflow-y:auto;display:flex;flex-direction:column;gap:6px;padding:8px;border:1px solid var(--border);border-radius:4px;background:var(--area)} +.popout-host .chat-verlauf{max-height:none} +.chat-leer{margin:auto;font-size:12px;color:var(--dim);text-align:center} +.chat-blase{max-width:78%;padding:6px 10px;border-radius:10px;font-size:12.5px;line-height:1.4;word-break:break-word;background:var(--win);border:1px solid var(--border);align-self:flex-start} +.chat-blase.ich{align-self:flex-end;background:var(--accent);border-color:var(--accent);color:#fff} +.chat-zeit{display:block;font-size:10px;opacity:.65;margin-top:2px} +.chat-schnell{display:flex;flex-wrap:wrap;gap:6px} +.chat-btn{position:relative} +.chat-badge{position:absolute;top:-6px;right:-6px;min-width:16px;height:16px;padding:0 4px;border-radius:8px;background:#e5484d;color:#fff;font-size:10px;font-weight:600;line-height:16px;text-align:center} +.report-liste{margin:6px 0 10px;padding-left:20px;font-size:12px;line-height:1.6} + +/* ---- Auswahl-Dialog ---- */ +.wahl-liste{display:flex;flex-direction:column;gap:4px;max-height:320px;overflow-y:auto} +.popout-host .wahl-liste{max-height:none} +.wahl-option{display:flex;align-items:center;gap:10px;width:100%;padding:7px 10px;border:1px solid var(--border);border-radius:4px;background:var(--area);color:var(--text);font-family:inherit;text-align:left;cursor:pointer} +.wahl-option:hover{border-color:var(--accent)} +.wahl-option.an{border-color:var(--accent);background:var(--sel)} +.wahl-option:disabled{opacity:.5;cursor:default} +.wahl-bild{width:26px;height:26px;flex:0 0 auto} +.wahl-label{display:flex;flex-direction:column;min-width:0} +.wahl-label b{font-size:13px;font-weight:600} +.wahl-label small{font-size:11px;color:var(--dim);white-space:nowrap;overflow:hidden;text-overflow:ellipsis} + +/* ---- Schnellstart-Taste auf der Kachel ---- */ +.card{position:relative} +.card-taste{position:absolute;top:4px;right:4px;padding:1px 5px;border-radius:3px;background:var(--accent);color:#fff;font-size:10px;font-weight:600;line-height:14px} + +/* ---- Bilder im Chat ---- */ +.chat-bild{display:block;max-width:100%;max-height:180px;border-radius:6px;margin-bottom:3px;cursor:zoom-in} +.screen-thumb .screen-teilen{right:32px;background:var(--accent)} + +.friends-section-title{font-size:11px;color:var(--dim);text-transform:uppercase;letter-spacing:.03em;margin:10px 0 6px} +.friend-row{display:flex;align-items:center;gap:10px;padding:6px 4px;border-radius:3px} +.friend-row:hover{background:var(--sel,rgba(0,0,0,.04))} +.friend-dot{width:9px;height:9px;border-radius:50%;background:#8a8a8a;flex:0 0 auto} +.friend-dot.online{background:#3bb54a} +.friend-avatar{width:28px;height:28px;border-radius:4px;flex:0 0 auto;background:#1e1e1e;object-fit:contain} +.friend-info{flex:1;min-width:0} +.friend-name{font-size:13px} +.friend-status{font-size:11px;color:var(--dim);white-space:nowrap;overflow:hidden;text-overflow:ellipsis} +.friends-empty{color:var(--dim);font-size:12px;padding:8px 4px} + +/* Spielaufzeichnung */ +.record-search{display:flex;flex-direction:column;align-items:center;gap:10px;padding:48px 0;color:var(--dim)} +.record-stage{display:flex;flex-direction:column;gap:10px} +.record-video{width:100%;flex:1 1 auto;min-height:360px;background:#000;border-radius:4px;object-fit:contain} +.record-toolbar{display:flex;flex-direction:column;align-items:flex-end;gap:6px} +.record-live-badge{display:flex;align-items:center;gap:8px;color:var(--danger);font-size:13px;font-weight:600} +#record-timer{font-variant-numeric:tabular-nums} +.rec-dot{width:10px;height:10px;border-radius:50%;background:var(--danger);animation:rec-pulse 1s infinite} +@keyframes rec-pulse{0%,100%{opacity:1}50%{opacity:.25}} +.record-audio-bar{display:flex;align-items:center;gap:10px;padding:2px 2px} +.record-mic-list{display:flex;flex-direction:column;gap:8px;margin-top:8px} +.record-source-row{display:flex;align-items:center;gap:10px;margin-bottom:8px} +.record-source-row .checkbox-field{margin-bottom:0;flex:1;min-width:0;font-size:13px;gap:6px} +.record-vol{width:110px} + +/* Konsole (dunkel wie ein Log) */ +.console-out{height:440px;overflow:auto;margin:0;background:#1e1e1e;border:1px solid var(--border);border-radius:3px;padding:10px;font-family:var(--mono);font-size:12px;color:#d4d4d4;white-space:pre-wrap;word-break:break-word;line-height:1.5} +.log-line{white-space:pre-wrap} +.log-error{color:#f48771}.log-warn{color:#dcdcaa}.log-info{color:#569cd6} + +/* Einstellungen */ +.settings-body{display:flex;padding:0;min-height:0;background:var(--area)} +.settings-nav{width:190px;flex:none;background:linear-gradient(180deg,var(--bar),rgba(128,128,128,.08));border-right:1px solid var(--border);padding:14px 10px;display:flex;flex-direction:column;gap:4px} +.settings-nav-label{padding:2px 10px 8px;color:var(--dim);font-size:11px;font-weight:700;letter-spacing:.08em;text-transform:uppercase} +.snav{text-align:left;padding:10px 12px;border:1px solid transparent;border-radius:8px;background:none;color:var(--text);cursor:pointer;font-family:inherit;font-size:13px;font-weight:600;transition:background .15s,border-color .15s,transform .15s} +.snav:hover{background:rgba(128,128,128,.12)} +.snav.on{background:var(--sel);border-color:var(--sel-br);color:var(--text);box-shadow:inset 0 0 0 1px rgba(255,255,255,.14)} +.settings-content{flex:1;padding:20px 22px;overflow:auto} +.settings-hero{margin-bottom:18px} +.settings-hero h4{margin:0 0 6px;font-size:20px;font-weight:700} +.settings-hero p{margin:0;color:var(--dim);font-size:13px;line-height:1.5} +.settings-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:14px;align-items:start} +.settings-grid-stack{grid-template-columns:repeat(2,minmax(0,1fr))} +.settings-card{background:rgba(255,255,255,.7);border:1px solid var(--border);border-radius:12px;padding:16px 16px 12px;box-shadow:0 1px 0 rgba(255,255,255,.5)} +.settings-card h5{margin:0 0 14px;font-size:13px;font-weight:700;color:var(--text)} +.settings-card-wide{grid-column:span 2} +.settings-card .field:last-child,.settings-card .checkbox-field:last-of-type{margin-bottom:0} +.settings-kv{display:grid;gap:10px} +.settings-kv-row{display:flex;justify-content:space-between;gap:14px;padding-bottom:10px;border-bottom:1px solid var(--border2)} +.settings-kv-row:last-child{padding-bottom:0;border-bottom:none} +.settings-kv-label{color:var(--dim);font-size:12px} +.settings-kv-value{text-align:right;font-weight:600;font-size:12px;word-break:break-word} +.appinfo{margin-top:8px;display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:12px 16px;font-size:12px;line-height:1.6} +.appinfo-item{padding:10px 12px;border:1px solid var(--border2);border-radius:10px;background:rgba(128,128,128,.06)} +.appinfo-item.full{grid-column:span 2} +.appinfo-label{display:block;color:var(--dim);font-size:11px;text-transform:uppercase;letter-spacing:.04em} +.appinfo-value{display:block;margin-top:4px;font-weight:600;word-break:break-word} +.info-card{max-width:760px} +.info-actions{display:flex;align-items:center;gap:12px;flex-wrap:wrap;margin:18px 0 0;padding-top:14px;border-top:1px solid var(--border2)} +.info-status{font-size:12px;color:var(--dim)} +.modal-sep{border-top:1px solid var(--border2)} +.info-meta{margin-top:10px} +.info-meta .settings-kv-row{align-items:center} +.info-meta .settings-kv-label{text-transform:uppercase;letter-spacing:.04em;font-size:11px} +.info-meta .settings-kv-value{text-align:left;font-size:13px;font-weight:600} +.info-meta-link{color:var(--link);text-decoration:none} +.info-meta-link:hover{text-decoration:underline} +.spane h4{margin:0 0 14px;font-size:14px;font-weight:600} +.status-ok{color:#2e8b2e!important;font-weight:600} +.status-bad{color:var(--danger)!important;font-weight:600} +:root[data-theme="dark"] .status-ok{color:#5cd65c!important} +.checkbox-field{display:flex;align-items:center;gap:8px;margin-bottom:14px;cursor:pointer;font-size:13px} +.checkbox-field input{width:16px;height:16px} +.field-port{max-width:110px;flex:none} + +:root[data-theme="dark"] .settings-body{background:#252528} +:root[data-theme="dark"] .settings-nav{background:linear-gradient(180deg,#2f2f34,#242428)} +:root[data-theme="dark"] .settings-card{background:rgba(30,30,30,.88);border-color:#3b3b42;box-shadow:none} +:root[data-theme="dark"] .settings-kv-row{border-bottom-color:#36363c} +:root[data-theme="dark"] .about-brand{border-bottom-color:#36363c} +:root[data-theme="dark"] .appinfo-item{background:rgba(255,255,255,.03);border-color:#36363c} +:root[data-theme="dark"] .info-meta-link{color:#7fc7ff} + +@media (max-width: 900px){ + #modal-settings .modal-card{max-width:calc(100vw - 20px);max-height:calc(100vh - 20px)} + .settings-body{flex-direction:column;min-height:0} + .settings-nav{width:auto;border-right:none;border-bottom:1px solid var(--border);padding:10px;flex-direction:row;flex-wrap:wrap} + .settings-nav-label{width:100%;padding:0 4px 6px} + .snav{flex:1 1 150px} + .settings-content{padding:16px} + .settings-grid,.settings-grid-stack{grid-template-columns:1fr} + .settings-card-wide{grid-column:auto} + .appinfo{grid-template-columns:1fr} + .appinfo-item.full{grid-column:auto} + .field-row{flex-direction:column;gap:0} + .path-row{flex-direction:column} +} + +/* Popup-Fenster sind eigenständige, meist schmalere Fenster -- die + Zeilenumbruch-Regel oben ist für die (deutlich breitere) Haupt-App gedacht + und soll hier nicht greifen (sonst z. B. Version/Icon im Instanz-Fenster + untereinander statt nebeneinander) */ +.is-popout .field-row{flex-direction:row} +.is-popout .path-row{flex-direction:row} + +/* Konto-Button mit 3D-Skin-Kopf */ +.acct-btn{gap:8px} +.acct-av{display:inline-flex;align-items:center;justify-content:center} +.acct-av svg{width:18px;height:18px;color:#4b5563} +.acct-head{width:24px;height:26px;object-fit:contain;image-rendering:auto;margin-top:-2px;margin-bottom:-2px} + +/* Update-Dialog */ +.upd-version{display:flex;align-items:center;justify-content:center;gap:12px;margin:4px 0 14px;font-size:15px} +.upd-old{color:var(--dim)} +.upd-arrow{color:var(--dim)} +.upd-newv{font-weight:700;color:var(--accent)} +.upd-channel{margin:-6px 0 12px;text-align:center} +.upd-notes{max-height:180px;overflow:auto;background:var(--input,#fff);border:1px solid var(--border);border-radius:3px;padding:10px 12px;font-size:12px;white-space:pre-wrap;margin-bottom:12px} +.upd-progress{margin:10px 0} +.upd-bar{height:8px;background:var(--border2);border-radius:4px;overflow:hidden} +.upd-bar-fill{height:100%;width:0;background:var(--accent);transition:width .2s} +.backup-progress{margin-top:12px} +.backup-progress-bar{height:10px;background:var(--border2);border-radius:999px;overflow:hidden} +.backup-progress-fill{height:100%;width:0;background:linear-gradient(90deg,#3a7bc8,#5aa1e6);transition:width .2s;background-size:220% 100%} +.backup-progress-fill-busy{animation:backup-progress-shift 1.2s linear infinite} +.backup-progress-text{margin-top:6px} + +@keyframes backup-progress-shift{ + from{background-position:0 0} + to{background-position:220% 0} +} + +/* Kontextmenü (Rechtsklick auf Instanz) */ +.ctx{ + position:fixed;z-index:200;min-width:210px;padding:4px; + background:var(--win);border:1px solid var(--border);border-radius:4px; + box-shadow:0 8px 24px rgba(0,0,0,.35); +} +.ctx-item{ + display:block;width:100%;text-align:left;padding:6px 12px; + border:none;border-radius:3px;background:none;color:var(--text); + font-family:inherit;font-size:12px;cursor:pointer;white-space:nowrap; +} +.ctx-item:hover{background:var(--sel);color:var(--text)} +.ctx-item:disabled{opacity:.45;cursor:default;background:none} +.ctx-strong{font-weight:600} +.ctx-danger:hover{background:var(--danger);color:#fff} +.ctx-sep{height:1px;background:var(--border);margin:4px 6px} + +/* Toast */ +.toast{position:fixed;bottom:42px;left:50%;transform:translateX(-50%);background:#333;color:#fff;padding:10px 16px;border-radius:4px;box-shadow:0 6px 20px rgba(0,0,0,.4);z-index:100;font-size:13px} +.toast.err{background:#a5342a} + +/* Scrollbars (hell) */ +::-webkit-scrollbar{width:14px;height:14px} +::-webkit-scrollbar-thumb{background:#c1c1c1;border:3px solid var(--area);border-radius:7px} +::-webkit-scrollbar-thumb:hover{background:#a8a8a8} + +/* ===================== Skin-Editor ===================== */ +#modal-skineditor .se-karte{width:1100px;max-width:calc(100vw - 32px);height:760px;max-height:calc(100vh - 40px)} +.se-modus{display:inline-flex;border:1px solid var(--border);border-radius:4px;overflow:hidden;background:var(--bar)} +.se-modus-btn{padding:5px 14px;border:none;background:none;color:var(--dim);font:inherit;font-size:12px;cursor:pointer} +.se-modus-btn+.se-modus-btn{border-left:1px solid var(--border)} +.se-modus-btn:hover{color:var(--text)} +.se-modus-btn.on{background:var(--accent);color:#fff;font-weight:600} +.se-body{display:grid;grid-template-columns:200px minmax(0,1fr) 270px;gap:14px;flex:1 1 auto;min-height:0;overflow:hidden;padding:12px 14px} +.se-werkzeuge{display:flex;flex-direction:column;gap:14px;overflow:auto;min-height:0;padding-right:2px} +.se-gruppe{display:flex;flex-direction:column;gap:6px} +.se-titel{font-size:11px;font-weight:600;text-transform:uppercase;letter-spacing:.04em;color:var(--dim)} +.se-tools{display:grid;grid-template-columns:1fr 1fr;gap:4px} +.se-tool{display:flex;flex-direction:column;align-items:center;gap:3px;padding:7px 4px;border:1px solid var(--border);border-radius:4px;background:var(--bar);color:var(--text);font:inherit;font-size:11px;cursor:pointer} +.se-tool svg{width:18px;height:18px} +.se-tool:hover:not(:disabled){border-color:var(--sel-br)} +.se-tool.on{background:var(--sel);border-color:var(--sel-br);font-weight:600} +.se-tool:disabled{opacity:.4;cursor:default} +.se-farbzeile{display:flex;gap:6px;align-items:center} +.se-farbzeile input[type=color]{width:42px;height:30px;padding:0 2px;border:1px solid var(--border);border-radius:4px;background:var(--bar);cursor:pointer} +.se-farbzeile input[type=text]{flex:1;min-width:0;height:30px;padding:0 8px;border:1px solid var(--border);border-radius:4px;font-family:var(--mono);font-size:12px;background:#fff;color:var(--text)} +:root[data-theme="dark"] .se-farbzeile input[type=text]{background:#1e1e1e} +.se-zuletzt{display:grid;grid-template-columns:repeat(8,1fr);gap:3px} +.se-farbfeld{aspect-ratio:1;border:1px solid rgba(0,0,0,.25);border-radius:3px;cursor:pointer;padding:0} +.se-farbfeld:hover{transform:scale(1.12)} +.se-farbfeld.on{outline:2px solid var(--sel-br);outline-offset:1px} +.se-ebenen{display:grid;grid-template-columns:1fr 1fr;border:1px solid var(--border);border-radius:4px;overflow:hidden} +.se-ebene{padding:6px 4px;border:none;background:var(--bar);color:var(--dim);font:inherit;font-size:12px;cursor:pointer} +.se-ebene+.se-ebene{border-left:1px solid var(--border)} +.se-ebene.on{background:var(--sel);color:var(--text);font-weight:600} +.se-check{display:flex;align-items:center;gap:6px;cursor:pointer} +.se-check input{margin:0} +.se-check:has(input:disabled){opacity:.5;cursor:default} +.se-feld{display:flex;flex-direction:column;gap:3px} +.se-feld select{height:28px;border:1px solid var(--border);border-radius:3px;background:#fff;color:var(--text);font:inherit} +:root[data-theme="dark"] .se-feld select{background:#1e1e1e} +.se-undo{display:grid;grid-template-columns:1fr 1fr;gap:4px} +.se-undo .btn{justify-content:center} +.se-gruppe>.btn-mini{align-self:flex-start} +.se-mitte{display:flex;flex-direction:column;gap:6px;min-width:0;min-height:0} +.se-buehne{flex:1 1 auto;min-height:0;position:relative;border:1px solid var(--border);border-radius:6px;background:var(--area);overflow:hidden} +.se-info{min-height:16px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis} +.se-seite{display:flex;flex-direction:column;gap:6px;min-height:0} +.se-mini{position:relative;height:320px;border:1px solid var(--border);border-radius:6px;background:var(--area);overflow:hidden} +.se-tipp{margin:4px 0 0;line-height:1.45} +.se-ansicht{position:absolute;inset:0;display:flex;align-items:center;justify-content:center} +.se-ansicht canvas{display:block} +.se-2d canvas{cursor:crosshair;border-radius:2px} +.se-3d canvas{cursor:grab} +.se-3d canvas:active{cursor:grabbing} +.se-2d[data-werkzeug="pipette"] canvas{cursor:copy} +.se-3d-leer{position:absolute} +.se-ablage{display:none} +.se-u2d canvas{cursor:crosshair} +.se-u2d[data-werkzeug="pipette"] canvas{cursor:copy} +.se-fuss{align-items:center} +.se-status{flex:1;min-width:0;margin-left:6px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap} diff --git a/wordpress-plugin/aeromc-friends/aeromc-friends.php b/wordpress-plugin/aeromc-friends/aeromc-friends.php index a70b430..9ab507e 100644 --- a/wordpress-plugin/aeromc-friends/aeromc-friends.php +++ b/wordpress-plugin/aeromc-friends/aeromc-friends.php @@ -1,162 +1,180 @@ -get_charset_collate(); - $presence_table = $wpdb->prefix . AEROMC_FRIENDS_PRESENCE_TABLE; - $friends_table = $wpdb->prefix . AEROMC_FRIENDS_FRIENDS_TABLE; - $invites_table = $wpdb->prefix . AEROMC_FRIENDS_INVITES_TABLE; - $sessions_table = $wpdb->prefix . AEROMC_FRIENDS_SESSIONS_TABLE; - $shares_table = $wpdb->prefix . AEROMC_FRIENDS_SHARES_TABLE; - - require_once ABSPATH . 'wp-admin/includes/upgrade.php'; - - // uuid ohne Bindestriche gespeichert (siehe aeromc_friends_normalize_uuid - // in includes/routes.php) - vermeidet doppelte Zeilen durch - // unterschiedliche Schreibweisen derselben UUID - $sql_presence = "CREATE TABLE $presence_table ( - uuid varchar(32) NOT NULL, - username varchar(32) NOT NULL, - instance_name varchar(128) DEFAULT NULL, - server_label varchar(128) DEFAULT NULL, - mc_version varchar(32) DEFAULT NULL, - last_seen datetime NOT NULL, - PRIMARY KEY (uuid) - ) $charset_collate;"; - dbDelta($sql_presence); - - $sql_friends = "CREATE TABLE $friends_table ( - id bigint(20) unsigned NOT NULL AUTO_INCREMENT, - uuid_a varchar(32) NOT NULL, - uuid_b varchar(32) NOT NULL, - status varchar(20) NOT NULL DEFAULT 'pending', - created_at datetime NOT NULL, - PRIMARY KEY (id), - KEY uuid_a (uuid_a), - KEY uuid_b (uuid_b) - ) $charset_collate;"; - dbDelta($sql_friends); - - // Einladungen "Komm auf meinen Server" - gelten nur ein paar Minuten - $sql_invites = "CREATE TABLE $invites_table ( - id bigint(20) unsigned NOT NULL AUTO_INCREMENT, - from_uuid varchar(32) NOT NULL, - to_uuid varchar(32) NOT NULL, - server varchar(128) NOT NULL, - mc_version varchar(32) DEFAULT NULL, - created_at datetime NOT NULL, - PRIMARY KEY (id), - KEY to_uuid (to_uuid) - ) $charset_collate;"; - dbDelta($sql_invites); - - // Anmelde-Sitzungen: nur der SHA-256 des Tokens wird gespeichert - $sql_sessions = "CREATE TABLE $sessions_table ( - token_hash char(64) NOT NULL, - uuid varchar(32) NOT NULL, - username varchar(32) NOT NULL, - created_at datetime NOT NULL, - last_used datetime NOT NULL, - PRIMARY KEY (token_hash), - KEY uuid (uuid) - ) $charset_collate;"; - dbDelta($sql_sessions); - - // per Code geteilte Instanzen (Mod-Liste, keine Dateien) - $sql_shares = "CREATE TABLE $shares_table ( - code varchar(9) NOT NULL, - uuid varchar(32) NOT NULL, - manifest longtext NOT NULL, - created_at datetime NOT NULL, - PRIMARY KEY (code), - KEY uuid (uuid) - ) $charset_collate;"; - dbDelta($sql_shares); - - // Kurznachrichten zwischen Freunden (werden nach einigen Tagen gelöscht) - $messages_table = $wpdb->prefix . AEROMC_FRIENDS_MESSAGES_TABLE; - $sql_messages = "CREATE TABLE $messages_table ( - id bigint(20) unsigned NOT NULL AUTO_INCREMENT, - from_uuid varchar(32) NOT NULL, - to_uuid varchar(32) NOT NULL, - text varchar(400) NOT NULL, - image_url varchar(255) DEFAULT NULL, - created_at datetime NOT NULL, - read_at datetime DEFAULT NULL, - PRIMARY KEY (id), - KEY to_uuid (to_uuid), - KEY from_uuid (from_uuid) - ) $charset_collate;"; - dbDelta($sql_messages); - - // Fehlerberichte aus dem Absturz-Assistenten (Ansicht: Werkzeuge → AeroMC Fehlerberichte) - $reports_table = $wpdb->prefix . AEROMC_FRIENDS_REPORTS_TABLE; - $sql_reports = "CREATE TABLE $reports_table ( - id bigint(20) unsigned NOT NULL AUTO_INCREMENT, - created_at datetime NOT NULL, - uuid varchar(32) DEFAULT NULL, - username varchar(32) DEFAULT NULL, - launcher_version varchar(32) DEFAULT NULL, - mc_version varchar(32) DEFAULT NULL, - loader varchar(32) DEFAULT NULL, - loader_version varchar(64) DEFAULT NULL, - system varchar(128) DEFAULT NULL, - funde text, - mods longtext, - bericht longtext, - kommentar text, - status varchar(20) NOT NULL DEFAULT 'neu', - PRIMARY KEY (id), - KEY status (status) - ) $charset_collate;"; - dbDelta($sql_reports); - - update_option('aeromc_friends_db_version', AEROMC_FRIENDS_VERSION); -} -register_activation_hook(__FILE__, 'aeromc_friends_install'); - -// Beim Ersetzen der Plugin-Dateien (Update per Upload) läuft der -// Aktivierungs-Hook NICHT erneut - neue Spalten/Tabellen deshalb anlegen, -// sobald die gespeicherte DB-Version nicht mehr zur Plugin-Version passt. -add_action('plugins_loaded', function () { - if (get_option('aeromc_friends_db_version') !== AEROMC_FRIENDS_VERSION) { - aeromc_friends_install(); - } -}); - -require_once plugin_dir_path(__FILE__) . 'includes/routes.php'; -if (is_admin()) { - require_once plugin_dir_path(__FILE__) . 'includes/admin.php'; -} +get_charset_collate(); + $presence_table = $wpdb->prefix . AEROMC_FRIENDS_PRESENCE_TABLE; + $friends_table = $wpdb->prefix . AEROMC_FRIENDS_FRIENDS_TABLE; + $invites_table = $wpdb->prefix . AEROMC_FRIENDS_INVITES_TABLE; + $sessions_table = $wpdb->prefix . AEROMC_FRIENDS_SESSIONS_TABLE; + $shares_table = $wpdb->prefix . AEROMC_FRIENDS_SHARES_TABLE; + + require_once ABSPATH . 'wp-admin/includes/upgrade.php'; + + // uuid ohne Bindestriche gespeichert (siehe aeromc_friends_normalize_uuid + // in includes/routes.php) - vermeidet doppelte Zeilen durch + // unterschiedliche Schreibweisen derselben UUID + $sql_presence = "CREATE TABLE $presence_table ( + uuid varchar(32) NOT NULL, + username varchar(32) NOT NULL, + instance_name varchar(128) DEFAULT NULL, + server_label varchar(128) DEFAULT NULL, + mc_version varchar(32) DEFAULT NULL, + last_seen datetime NOT NULL, + PRIMARY KEY (uuid) + ) $charset_collate;"; + dbDelta($sql_presence); + + $sql_friends = "CREATE TABLE $friends_table ( + id bigint(20) unsigned NOT NULL AUTO_INCREMENT, + uuid_a varchar(32) NOT NULL, + uuid_b varchar(32) NOT NULL, + status varchar(20) NOT NULL DEFAULT 'pending', + created_at datetime NOT NULL, + PRIMARY KEY (id), + KEY uuid_a (uuid_a), + KEY uuid_b (uuid_b) + ) $charset_collate;"; + dbDelta($sql_friends); + + // Einladungen "Komm auf meinen Server" - gelten nur ein paar Minuten + $sql_invites = "CREATE TABLE $invites_table ( + id bigint(20) unsigned NOT NULL AUTO_INCREMENT, + from_uuid varchar(32) NOT NULL, + to_uuid varchar(32) NOT NULL, + server varchar(128) NOT NULL, + mc_version varchar(32) DEFAULT NULL, + created_at datetime NOT NULL, + PRIMARY KEY (id), + KEY to_uuid (to_uuid) + ) $charset_collate;"; + dbDelta($sql_invites); + + // Anmelde-Sitzungen: nur der SHA-256 des Tokens wird gespeichert + $sql_sessions = "CREATE TABLE $sessions_table ( + token_hash char(64) NOT NULL, + uuid varchar(32) NOT NULL, + username varchar(32) NOT NULL, + created_at datetime NOT NULL, + last_used datetime NOT NULL, + PRIMARY KEY (token_hash), + KEY uuid (uuid) + ) $charset_collate;"; + dbDelta($sql_sessions); + + // per Code geteilte Instanzen (Mod-Liste, keine Dateien) + $sql_shares = "CREATE TABLE $shares_table ( + code varchar(9) NOT NULL, + uuid varchar(32) NOT NULL, + manifest longtext NOT NULL, + created_at datetime NOT NULL, + PRIMARY KEY (code), + KEY uuid (uuid) + ) $charset_collate;"; + dbDelta($sql_shares); + + // Kurznachrichten zwischen Freunden (werden nach einigen Tagen gelöscht) + $messages_table = $wpdb->prefix . AEROMC_FRIENDS_MESSAGES_TABLE; + $sql_messages = "CREATE TABLE $messages_table ( + id bigint(20) unsigned NOT NULL AUTO_INCREMENT, + from_uuid varchar(32) NOT NULL, + to_uuid varchar(32) NOT NULL, + text varchar(400) NOT NULL, + image_url varchar(255) DEFAULT NULL, + created_at datetime NOT NULL, + read_at datetime DEFAULT NULL, + PRIMARY KEY (id), + KEY to_uuid (to_uuid), + KEY from_uuid (from_uuid) + ) $charset_collate;"; + dbDelta($sql_messages); + + // Fehlerberichte aus dem Absturz-Assistenten (Ansicht: Werkzeuge → AeroMC Fehlerberichte) + $reports_table = $wpdb->prefix . AEROMC_FRIENDS_REPORTS_TABLE; + $sql_reports = "CREATE TABLE $reports_table ( + id bigint(20) unsigned NOT NULL AUTO_INCREMENT, + created_at datetime NOT NULL, + uuid varchar(32) DEFAULT NULL, + username varchar(32) DEFAULT NULL, + launcher_version varchar(32) DEFAULT NULL, + mc_version varchar(32) DEFAULT NULL, + loader varchar(32) DEFAULT NULL, + loader_version varchar(64) DEFAULT NULL, + system varchar(128) DEFAULT NULL, + funde text, + mods longtext, + bericht longtext, + kommentar text, + status varchar(20) NOT NULL DEFAULT 'neu', + PRIMARY KEY (id), + KEY status (status) + ) $charset_collate;"; + dbDelta($sql_reports); + + // eigene Umhänge (Bild liegt unter wp-content/uploads/aeromc-umhaenge) + $capes_table = $wpdb->prefix . AEROMC_FRIENDS_CAPES_TABLE; + $sql_capes = "CREATE TABLE $capes_table ( + uuid varchar(32) NOT NULL, + username varchar(32) NOT NULL, + datei varchar(64) NOT NULL DEFAULT '', + breite smallint(5) unsigned NOT NULL DEFAULT 0, + hoehe smallint(5) unsigned NOT NULL DEFAULT 0, + hash varchar(40) NOT NULL DEFAULT '', + status varchar(16) NOT NULL DEFAULT 'aktiv', + updated_at datetime NOT NULL, + PRIMARY KEY (uuid), + KEY status (status) + ) $charset_collate;"; + dbDelta($sql_capes); + + update_option('aeromc_friends_db_version', AEROMC_FRIENDS_VERSION); +} +register_activation_hook(__FILE__, 'aeromc_friends_install'); + +// Beim Ersetzen der Plugin-Dateien (Update per Upload) läuft der +// Aktivierungs-Hook NICHT erneut - neue Spalten/Tabellen deshalb anlegen, +// sobald die gespeicherte DB-Version nicht mehr zur Plugin-Version passt. +add_action('plugins_loaded', function () { + if (get_option('aeromc_friends_db_version') !== AEROMC_FRIENDS_VERSION) { + aeromc_friends_install(); + } +}); + +require_once plugin_dir_path(__FILE__) . 'includes/routes.php'; +require_once plugin_dir_path(__FILE__) . 'includes/capes.php'; +if (is_admin()) { + require_once plugin_dir_path(__FILE__) . 'includes/admin.php'; +} diff --git a/wordpress-plugin/aeromc-friends/includes/capes.php b/wordpress-plugin/aeromc-friends/includes/capes.php new file mode 100644 index 0000000..d883d4c --- /dev/null +++ b/wordpress-plugin/aeromc-friends/includes/capes.php @@ -0,0 +1,306 @@ +prefix . AEROMC_FRIENDS_CAPES_TABLE; +} + +function aeromc_friends_cape_dir() { + $uploads = wp_upload_dir(); + return [ + 'pfad' => trailingslashit($uploads['basedir']) . AEROMC_FRIENDS_CAPE_DIR, + 'url' => trailingslashit($uploads['baseurl']) . AEROMC_FRIENDS_CAPE_DIR, + ]; +} + +/** Datei eines Umhangs löschen (nur Namen in unserem Schema). */ +function aeromc_friends_cape_delete_file($datei) { + if (!$datei || !preg_match('/^[a-f0-9]{32}-[a-f0-9]{8}\.png$/', (string) $datei)) { + return; + } + $ort = aeromc_friends_cape_dir(); + $voll = $ort['pfad'] . '/' . $datei; + if (file_exists($voll)) { + @unlink($voll); + } +} + +/** Zeile -> öffentliche Angaben */ +function aeromc_friends_cape_info($r) { + $ort = aeromc_friends_cape_dir(); + return [ + 'url' => $ort['url'] . '/' . $r->datei, + 'width' => (int) $r->breite, + 'height' => (int) $r->hoehe, + 'hash' => $r->hash, + 'updated' => $r->updated_at, + ]; +} + +/** + * Prüft ein Umhang-Bild und gibt [daten, breite, hoehe] zurück oder WP_Error. + */ +function aeromc_friends_cape_check_image($base64) { + $daten = base64_decode(preg_replace('/^data:image\/png;base64,/', '', (string) $base64), true); + if ($daten === false || strlen($daten) < 60) { + return new WP_Error('aeromc_invalid', 'Ungültiges Bild.', ['status' => 400]); + } + if (strlen($daten) > AEROMC_FRIENDS_CAPE_MAX_BYTES) { + return new WP_Error('aeromc_too_big', 'Der Umhang ist zu groß (Datei).', ['status' => 413]); + } + if (strncmp($daten, "\x89PNG\r\n\x1A\n", 8) !== 0 || substr($daten, 12, 4) !== 'IHDR') { + return new WP_Error('aeromc_invalid', 'Nur PNG-Bilder.', ['status' => 400]); + } + $kopf = unpack('Nbreite/Nhoehe', substr($daten, 16, 8)); + $breite = (int) $kopf['breite']; + $hoehe = (int) $kopf['hoehe']; + if (!in_array($breite, [64, 128, 256, 512, 1024], true) || $breite !== 2 * $hoehe) { + return new WP_Error('aeromc_invalid', 'Ein Umhang muss 64×32, 128×64, 256×128, 512×256 oder 1024×512 Pixel groß sein.', ['status' => 400]); + } + // neu kodieren: entfernt alles außer den Bildpunkten + if (function_exists('imagecreatefromstring')) { + $bild = @imagecreatefromstring($daten); + if (!$bild || imagesx($bild) !== $breite || imagesy($bild) !== $hoehe) { + return new WP_Error('aeromc_invalid', 'Das Bild ist beschädigt.', ['status' => 400]); + } + imagealphablending($bild, false); + imagesavealpha($bild, true); + ob_start(); + imagepng($bild, null, 9); + $daten = ob_get_clean(); + imagedestroy($bild); + } + return [$daten, $breite, $hoehe]; +} + +add_action('rest_api_init', function () { + register_rest_route('aeromc/v1', '/cape', [ + [ + 'methods' => 'POST', + 'callback' => 'aeromc_friends_route_cape_upload', + 'permission_callback' => '__return_true', + ], + [ + 'methods' => 'GET', + 'callback' => 'aeromc_friends_route_cape_get', + 'permission_callback' => '__return_true', + ], + ]); + register_rest_route('aeromc/v1', '/cape/remove', [ + 'methods' => 'POST', + 'callback' => 'aeromc_friends_route_cape_remove', + 'permission_callback' => '__return_true', + ]); + register_rest_route('aeromc/v1', '/capes', [ + 'methods' => 'GET', + 'callback' => 'aeromc_friends_route_capes', + 'permission_callback' => '__return_true', + ]); +}); + +/** Anmeldung ist hier immer Pflicht – auch im Übergangsmodus (öffentlich sichtbare Bilder). */ +function aeromc_friends_cape_auth($request, $uuid) { + $sitzung = aeromc_friends_check_auth($request, $uuid); + if (is_wp_error($sitzung)) { + return $sitzung; + } + if (!$sitzung) { + return new WP_Error('aeromc_auth', 'Anmeldung erforderlich.', ['status' => 401]); + } + return $sitzung; +} + +function aeromc_friends_route_cape_upload($request) { + global $wpdb; + $uuid = aeromc_friends_normalize_uuid($request->get_param('uuid')); + if (!$uuid) { + return new WP_Error('aeromc_invalid', 'Ungültige uuid.', ['status' => 400]); + } + $sitzung = aeromc_friends_cape_auth($request, $uuid); + if (is_wp_error($sitzung)) { + return $sitzung; + } + $table = aeromc_friends_capes_table(); + $alt = $wpdb->get_row($wpdb->prepare("SELECT * FROM $table WHERE uuid = %s", $uuid)); + if ($alt && $alt->status === 'gesperrt') { + return new WP_Error('aeromc_blocked', 'Dein Umhang wurde vom Betreiber gesperrt.', ['status' => 403]); + } + if ($alt && time() - strtotime($alt->updated_at . ' UTC') < AEROMC_FRIENDS_CAPE_MIN_GAP) { + return new WP_Error('aeromc_too_fast', 'Bitte einen Moment warten, bevor du den Umhang erneut hochlädst.', ['status' => 429]); + } + + $geprueft = aeromc_friends_cape_check_image($request->get_param('image')); + if (is_wp_error($geprueft)) { + return $geprueft; + } + list($daten, $breite, $hoehe) = $geprueft; + $hash = sha1($daten); + + $ort = aeromc_friends_cape_dir(); + if (!wp_mkdir_p($ort['pfad'])) { + return new WP_Error('aeromc_error', 'Umhang konnte nicht gespeichert werden.', ['status' => 500]); + } + if (!file_exists($ort['pfad'] . '/index.html')) { + file_put_contents($ort['pfad'] . '/index.html', ''); + } + $datei = $uuid . '-' . substr($hash, 0, 8) . '.png'; + if (file_put_contents($ort['pfad'] . '/' . $datei, $daten) === false) { + return new WP_Error('aeromc_error', 'Umhang konnte nicht gespeichert werden.', ['status' => 500]); + } + if ($alt && $alt->datei !== $datei) { + aeromc_friends_cape_delete_file($alt->datei); + } + $zeile = [ + 'uuid' => $uuid, + 'username' => $sitzung->username, + 'datei' => $datei, + 'breite' => $breite, + 'hoehe' => $hoehe, + 'hash' => $hash, + 'status' => 'aktiv', + 'updated_at' => current_time('mysql', true), + ]; + $wpdb->replace($table, $zeile); + return ['ok' => true, 'cape' => aeromc_friends_cape_info((object) $zeile)]; +} + +function aeromc_friends_route_cape_remove($request) { + global $wpdb; + $uuid = aeromc_friends_normalize_uuid($request->get_param('uuid')); + if (!$uuid) { + return new WP_Error('aeromc_invalid', 'Ungültige uuid.', ['status' => 400]); + } + $sitzung = aeromc_friends_cape_auth($request, $uuid); + if (is_wp_error($sitzung)) { + return $sitzung; + } + $table = aeromc_friends_capes_table(); + $alt = $wpdb->get_row($wpdb->prepare("SELECT * FROM $table WHERE uuid = %s", $uuid)); + if ($alt) { + aeromc_friends_cape_delete_file($alt->datei); + if ($alt->status === 'gesperrt') { + // Sperre bleibt bestehen, nur das Bild ist weg + $wpdb->update($table, ['datei' => '', 'hash' => ''], ['uuid' => $uuid]); + } else { + $wpdb->delete($table, ['uuid' => $uuid]); + } + } + return ['ok' => true]; +} + +function aeromc_friends_route_cape_get($request) { + global $wpdb; + $uuid = aeromc_friends_normalize_uuid($request->get_param('uuid')); + if (!$uuid) { + return new WP_Error('aeromc_invalid', 'Ungültige uuid.', ['status' => 400]); + } + $table = aeromc_friends_capes_table(); + $r = $wpdb->get_row($wpdb->prepare("SELECT * FROM $table WHERE uuid = %s AND status = 'aktiv'", $uuid)); + return ['ok' => true, 'cape' => $r ? aeromc_friends_cape_info($r) : null]; +} + +function aeromc_friends_route_capes($request) { + global $wpdb; + $liste = array_filter(array_map('aeromc_friends_normalize_uuid', explode(',', (string) $request->get_param('uuids')))); + $liste = array_slice(array_values(array_unique($liste)), 0, AEROMC_FRIENDS_CAPE_MAX_UUIDS); + $ergebnis = []; + if ($liste) { + $table = aeromc_friends_capes_table(); + $platz = implode(',', array_fill(0, count($liste), '%s')); + $rows = $wpdb->get_results($wpdb->prepare( + "SELECT * FROM $table WHERE status = 'aktiv' AND uuid IN ($platz)", $liste + )); + foreach ($rows as $r) { + $ergebnis[$r->uuid] = aeromc_friends_cape_info($r); + } + } + $antwort = new WP_REST_Response(['ok' => true, 'capes' => (object) $ergebnis]); + // kurz zwischenspeichern lassen – der Mod fragt beim Betreten eines Servers viele auf einmal ab + $antwort->header('Cache-Control', 'public, max-age=60'); + return $antwort; +} + +// ---------- Admin: Umhänge prüfen, löschen, sperren ---------- +if (is_admin()) { + add_action('admin_menu', function () { + add_submenu_page('aeromc-reports', 'AeroMC Umhänge', 'Umhänge', 'manage_options', 'aeromc-capes', 'aeromc_friends_capes_page'); + }, 20); +} + +function aeromc_friends_capes_page() { + global $wpdb; + if (!current_user_can('manage_options')) { + return; + } + $table = aeromc_friends_capes_table(); + if (isset($_POST['aeromc_cape'], $_POST['aeromc_aktion']) && check_admin_referer('aeromc_capes')) { + $uuid = aeromc_friends_normalize_uuid($_POST['aeromc_cape']); + $r = $uuid ? $wpdb->get_row($wpdb->prepare("SELECT * FROM $table WHERE uuid = %s", $uuid)) : null; + if ($r) { + $aktion = (string) $_POST['aeromc_aktion']; + if ($aktion === 'loeschen') { + aeromc_friends_cape_delete_file($r->datei); + $wpdb->delete($table, ['uuid' => $uuid]); + echo '

Umhang von ' . esc_html($r->username) . ' gelöscht.

'; + } elseif ($aktion === 'sperren') { + aeromc_friends_cape_delete_file($r->datei); + $wpdb->update($table, ['status' => 'gesperrt', 'datei' => '', 'hash' => ''], ['uuid' => $uuid]); + echo '

' . esc_html($r->username) . ' gesperrt – der Umhang ist entfernt, neue Uploads werden abgelehnt.

'; + } elseif ($aktion === 'entsperren') { + $wpdb->delete($table, ['uuid' => $uuid]); + echo '

Sperre für ' . esc_html($r->username) . ' aufgehoben.

'; + } + } + } + + $ort = aeromc_friends_cape_dir(); + $rows = $wpdb->get_results("SELECT * FROM $table ORDER BY updated_at DESC LIMIT 300"); + echo '

AeroMC Umhänge

'; + echo '

Eigene Umhänge, die Spieler im AeroMC-Skin-Editor hochgeladen haben. „Sperren“ entfernt den Umhang und verhindert neue Uploads dieses Spielers.

'; + if (!$rows) { + echo '

Noch keine Umhänge hochgeladen.

'; + return; + } + echo ''; + foreach ($rows as $r) { + $bild = $r->datei + ? '' + : '–'; + echo '' + . ''; + } + echo '
UmhangSpielerGrößeGeändert (UTC)Status
' . $bild . '' . esc_html($r->username) . '
' . esc_html($r->uuid) . '		' . esc_html($r->breite . '×' . $r->hoehe) . '' . esc_html($r->updated_at) . '' . esc_html($r->status) . ''; + echo '
'; + wp_nonce_field('aeromc_capes'); + echo ''; + if ($r->status === 'gesperrt') { + echo ''; + } else { + echo ''; + echo ''; + } + echo '
'; +}