1960-utils/ReforgerOutputConsole/index.html

<!doctype html>
<html lang="de">
<head>
<meta charset="utf-8">
<title>Reforger Output Console</title>
<style>
  :root {
    --bg: #15171a;
    --pane: #1b1e22;
    --header: #22262b;
    --border: #2f343a;
    --text: #c9d1d9;
    --muted: #7d8590;
    --accent: #4ea1ff;
    --warn: #e3b341;
    --error: #f47067;
    --warn-bg: rgba(227, 179, 65, 0.07);
    --error-bg: rgba(244, 112, 103, 0.10);
  }
  * { box-sizing: border-box; }
  html, body { height: 100%; margin: 0; }
  body {
    background: var(--bg);
    color: var(--text);
    font: 13px/1.4 "Segoe UI", system-ui, sans-serif;
    display: flex;
    flex-direction: column;
  }
  #topbar {
    display: flex;
    align-items: center;
    gap: 16px;
    padding: 6px 12px;
    border-bottom: 1px solid var(--border);
    background: var(--header);
  }
  #topbar h1 { font-size: 14px; margin: 0; font-weight: 600; }
  #conn { color: var(--muted); font-size: 12px; }
  #conn.down { color: var(--error); }
  #topbar label { display: flex; align-items: center; gap: 4px; color: var(--muted); cursor: pointer; }
  #topbar .spacer { flex: 1; }
  #panes { flex: 1; display: flex; min-height: 0; }
  .pane {
    flex: 1 1 0;
    min-width: 0;
    display: flex;
    flex-direction: column;
    background: var(--pane);
    position: relative;
  }
  .splitter {
    flex: 0 0 5px;
    cursor: col-resize;
    background: var(--border);
    transition: background 0.15s;
  }
  .splitter:hover, .splitter.dragging { background: var(--accent); }
  body.resizing { cursor: col-resize; user-select: none; }
  .pane-head {
    padding: 6px 8px;
    background: var(--header);
    border-bottom: 1px solid var(--border);
    display: flex;
    flex-direction: column;
    gap: 4px;
    transition: background 0.6s;
  }
  .pane-head.flash { background: #1f3b5c; transition: none; }
  .row { display: flex; align-items: center; gap: 6px; }
  .name { font-weight: 600; white-space: nowrap; }
  .folder { color: var(--muted); font-size: 12px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; flex: 1; }
  .counts { font-size: 12px; white-space: nowrap; }
  .counts .e { color: var(--error); }
  .counts .w { color: var(--warn); }
  button {
    background: #2d333b;
    color: var(--text);
    border: 1px solid var(--border);
    border-radius: 4px;
    padding: 2px 8px;
    font: inherit;
    font-size: 12px;
    cursor: pointer;
  }
  button:hover { background: #373e47; }
  button.on { border-color: var(--accent); color: var(--accent); }
  input[type=search] {
    flex: 1;
    min-width: 0;
    background: var(--bg);
    color: var(--text);
    border: 1px solid var(--border);
    border-radius: 4px;
    padding: 2px 6px;
    font: inherit;
    font-size: 12px;
  }
  select {
    background: var(--bg);
    color: var(--text);
    border: 1px solid var(--border);
    border-radius: 4px;
    font: inherit;
    font-size: 12px;
  }
  .log {
    flex: 1;
    overflow: auto;
    font: 12px/1.35 Consolas, "Cascadia Mono", monospace;
    padding: 4px 0 4em;
  }
  .log div { padding: 0 8px; white-space: pre; }
  body.wrap .log div { white-space: pre-wrap; word-break: break-all; }
  .log div.e { color: var(--error); background: var(--error-bg); }
  .log div.w { color: var(--warn); background: var(--warn-bg); }
  .log div.partial { opacity: 0.8; }
  .log div.hidden { display: none; }
  .log mark { background: #6e5a12; color: inherit; }
  .empty { color: var(--muted); padding: 12px; font-style: italic; }
  .log-wrap { flex: 1; min-height: 0; display: flex; flex-direction: column; position: relative; }
  .crash {
    flex: 0 0 40%;
    min-height: 0;
    display: flex;
    flex-direction: column;
    border-top: 2px solid var(--error);
  }
  .crash[hidden] { display: none; }
  .crash-head {
    display: flex;
    align-items: center;
    gap: 6px;
    padding: 4px 8px;
    background: #3a1f1f;
    color: var(--error);
    font-weight: 600;
  }
  .crash-head span { flex: 1; }
  .crash-head button { padding: 0 7px; font-size: 14px; line-height: 1.3; }
  .crash-body {
    flex: 1;
    overflow: auto;
    margin: 0;
    padding: 6px 8px 3em;
    font: 12px/1.35 Consolas, "Cascadia Mono", monospace;
    color: var(--text);
    background: #1e1a1a;
    white-space: pre;
  }
  body.wrap .crash-body { white-space: pre-wrap; word-break: break-all; }
  .jump {
    position: absolute;
    right: 18px;
    bottom: 14px;
    background: var(--accent);
    color: #0d1117;
    border: none;
    font-weight: 600;
  }
  .jump:hover { background: #79b8ff; }
</style>
</head>
<body class="wrap">
<div id="topbar">
  <h1>Reforger Output Console</h1>
  <span id="conn">verbinde…</span>
  <span class="spacer"></span>
  <label><input type="checkbox" id="wrapToggle" checked> Zeilenumbruch</label></div>
<div id="panes"></div>

<template id="paneTpl">
  <section class="pane">
    <div class="pane-head">
      <div class="row">
        <span class="name"></span>
        <span class="folder"></span>
        <span class="counts"><span class="e"></span> <span class="w"></span></span>
      </div>
      <div class="row">
        <input type="search" class="filter" placeholder="Filter…">
        <select class="level" title="Nur bestimmte Stufen anzeigen">
          <option value="all">Alle</option>
          <option value="ew">Fehler + Warnungen</option>
          <option value="e">Nur Fehler</option>
        </select>
        <button class="follow on" title="Automatisch ans Ende scrollen">Folgen</button>
        <button class="clear" title="Anzeige leeren (Datei bleibt unverändert)">Leeren</button>
        <button class="open" title="Log-Ordner im Explorer öffnen">Ordner</button>
      </div>
    </div>
    <div class="log-wrap">
      <div class="log"></div>
      <button class="jump" hidden>↓ Neue Zeilen</button>
    </div>
    <div class="crash" hidden>
      <div class="crash-head">
        <span>Crash Report</span>
        <button class="crash-close" title="Crash Report schließen">✕</button>
      </div>
      <pre class="crash-body"></pre>
    </div>
  </section>
</template>

<script>
const panesEl = document.getElementById('panes');
const connEl = document.getElementById('conn');
let maxLines = 20000;
const panes = [];

// Zeilen wie "21:19:25.435   INIT      (E): ..." bzw. "(W)"
const LEVEL_RE = /^\s*\d{1,2}:\d{2}:\d{2}\.\d+\s+\S+\s*\((E|W)\)/;
const TIME_RE = /^\s*\d{1,2}:\d{2}:\d{2}\.\d+\s/;

document.getElementById('wrapToggle').addEventListener('change', (e) => {
  document.body.classList.toggle('wrap', e.target.checked);
});

function createPane(info) {
  const el = document.getElementById('paneTpl').content.firstElementChild.cloneNode(true);
  const p = {
    id: info.id,
    el,
    head: el.querySelector('.pane-head'),
    log: el.querySelector('.log'),
    folderEl: el.querySelector('.folder'),
    eEl: el.querySelector('.counts .e'),
    wEl: el.querySelector('.counts .w'),
    jump: el.querySelector('.jump'),
    followBtn: el.querySelector('.follow'),
    crashEl: el.querySelector('.crash'),
    crashBody: el.querySelector('.crash-body'),
    filter: '',
    level: 'all',
    follow: true,
    partial: '',
    partialEl: null,
    lastLevel: '',
    errors: 0,
    warnings: 0,
  };
  el.querySelector('.name').textContent = info.name;

  el.querySelector('.filter').addEventListener('input', (e) => {
    p.filter = e.target.value.toLowerCase();
    refilter(p);
  });
  el.querySelector('.level').addEventListener('change', (e) => {
    p.level = e.target.value;
    refilter(p);
  });
  p.followBtn.addEventListener('click', () => setFollow(p, !p.follow));
  el.querySelector('.clear').addEventListener('click', () => clearPane(p));
  el.querySelector('.open').addEventListener('click', () => fetch('/open?id=' + p.id, { method: 'POST' }));
  p.jump.addEventListener('click', () => setFollow(p, true));
  el.querySelector('.crash-close').addEventListener('click', () => showCrash(p, null));
  p.log.addEventListener('scroll', () => {
    const atBottom = p.log.scrollHeight - p.log.scrollTop - p.log.clientHeight < 20;
    if (atBottom && !p.follow) setFollow(p, true);
    else if (!atBottom && p.follow && !p.autoScrolling) setFollow(p, false);
    p.autoScrolling = false;
  });

  panesEl.appendChild(el);
  return p;
}

// --- Spaltenbreiten ---------------------------------------------------------
// Breiten werden als flex-grow-Verhältnis gespeichert, damit sie beim
// Ändern der Fenstergröße proportional mitwachsen.
const MIN_PANE_PX = 150;
const WIDTHS_KEY = 'paneWidths';

function paneEls() {
  return [...panesEl.querySelectorAll(':scope > .pane')];
}

function saveWidths() {
  try {
    localStorage.setItem(WIDTHS_KEY, JSON.stringify(paneEls().map((el) => Number(el.style.flexGrow) || 1)));
  } catch {}
}

function restoreWidths() {
  let widths;
  try {
    widths = JSON.parse(localStorage.getItem(WIDTHS_KEY));
  } catch {}
  const els = paneEls();
  if (!Array.isArray(widths) || widths.length !== els.length) return;
  els.forEach((el, i) => (el.style.flexGrow = widths[i]));
}

function addSplitter() {
  const sp = document.createElement('div');
  sp.className = 'splitter';
  sp.title = 'Ziehen zum Anpassen, Doppelklick = gleich breit';
  panesEl.appendChild(sp);

  sp.addEventListener('pointerdown', (e) => {
    e.preventDefault();
    const left = sp.previousElementSibling;
    const right = sp.nextElementSibling;
    // Alle Spalten auf ihre aktuelle Pixelbreite "einfrieren". Erst alle
    // messen, dann setzen – sonst verfälscht das Zwischen-Layout die Messung.
    const els = paneEls();
    const widths = els.map((el) => el.getBoundingClientRect().width);
    els.forEach((el, i) => (el.style.flexGrow = widths[i]));
    const startX = e.clientX;
    const startLeft = widths[els.indexOf(left)];
    const total = startLeft + widths[els.indexOf(right)];

    sp.setPointerCapture(e.pointerId);
    sp.classList.add('dragging');
    document.body.classList.add('resizing');

    const onMove = (ev) => {
      const w = Math.min(Math.max(startLeft + ev.clientX - startX, MIN_PANE_PX), total - MIN_PANE_PX);
      left.style.flexGrow = w;
      right.style.flexGrow = total - w;
    };
    const onUp = () => {
      sp.removeEventListener('pointermove', onMove);
      sp.classList.remove('dragging');
      document.body.classList.remove('resizing');
      saveWidths();
    };
    sp.addEventListener('pointermove', onMove);
    sp.addEventListener('pointerup', onUp, { once: true });
    sp.addEventListener('pointercancel', onUp, { once: true });
  });

  sp.addEventListener('dblclick', () => {
    for (const el of paneEls()) el.style.flexGrow = 1;
    saveWidths();
  });
}

function setFollow(p, on) {
  p.follow = on;
  p.followBtn.classList.toggle('on', on);
  if (on) {
    p.jump.hidden = true;
    scrollToEnd(p);
  }
}

function scrollToEnd(p) {
  p.autoScrolling = true;
  p.log.scrollTop = p.log.scrollHeight;
}

function matches(p, div) {
  if (p.level === 'e' && div.dataset.lvl !== 'e') return false;
  if (p.level === 'ew' && !div.dataset.lvl) return false;
  if (p.filter && !div.textContent.toLowerCase().includes(p.filter)) return false;
  return true;
}

function refilter(p) {
  for (const div of p.log.children) {
    if (div.classList.contains('empty')) continue;
    div.classList.toggle('hidden', !matches(p, div));
  }
  if (p.follow) scrollToEnd(p);
}

function updateCounts(p) {
  p.eEl.textContent = p.errors ? p.errors + ' E' : '';
  p.wEl.textContent = p.warnings ? p.warnings + ' W' : '';
}

function clearPane(p) {
  p.log.textContent = '';
  p.partial = '';
  p.partialEl = null;
  p.lastLevel = '';
  p.errors = 0;
  p.warnings = 0;
  updateCounts(p);
}

function makeLine(p, text) {
  const div = document.createElement('div');
  const m = LEVEL_RE.exec(text);
  let lvl = '';
  if (m) lvl = m[1] === 'E' ? 'e' : 'w';
  else if (!TIME_RE.test(text) && text.trim() !== '') lvl = p.lastLevel; // Fortsetzungszeile
  if (TIME_RE.test(text) || text.trim() === '') p.lastLevel = lvl;
  if (lvl) {
    div.className = lvl;
    div.dataset.lvl = lvl;
  }
  div.textContent = text;
  return { div, lvl, isNew: !!m };
}

function appendText(p, chunk) {
  const empty = p.log.querySelector('.empty');
  if (empty) empty.remove();

  const parts = (p.partial + chunk.replace(/\r/g, '')).split('\n');
  p.partial = parts.pop();
  if (p.partialEl) {
    p.partialEl.remove();
    p.partialEl = null;
  }

  const frag = document.createDocumentFragment();
  for (const line of parts) {
    const { div, lvl, isNew } = makeLine(p, line);
    if (isNew && lvl === 'e') p.errors++;
    if (isNew && lvl === 'w') p.warnings++;
    if (!matches(p, div)) div.classList.add('hidden');
    frag.appendChild(div);
  }
  if (p.partial) {
    const div = document.createElement('div');
    div.className = 'partial';
    div.textContent = p.partial;
    p.partialEl = div;
    frag.appendChild(div);
  }
  p.log.appendChild(frag);

  let excess = p.log.childElementCount - maxLines;
  while (excess-- > 0) p.log.firstElementChild.remove();

  updateCounts(p);
  if (p.follow) scrollToEnd(p);
  else if (parts.length) p.jump.hidden = false;
}

// text === null schließt den Crash-Bereich.
function showCrash(p, text) {
  p.crashBody.textContent = text || '';
  p.crashEl.hidden = text === null;
  if (text !== null) p.crashBody.scrollTop = 0;
  if (p.follow) scrollToEnd(p);
}

function resetPane(p, info) {
  clearPane(p);
  showCrash(p, info.crash);
  p.folderEl.textContent = info.folder ? info.folder + ' / ' + info.file : '';
  p.folderEl.title = info.logsDir + (info.folder ? '\\' + info.folder + '\\' + info.file : '');
  if (info.text) {
    appendText(p, info.text);
  } else {
    const msg = document.createElement('div');
    msg.className = 'empty';
    msg.textContent = info.dirMissing
      ? 'Ordner nicht gefunden: ' + info.logsDir
      : info.folder ? 'Warte auf ' + info.file + '…' : 'Noch kein Log-Ordner vorhanden.';
    p.log.appendChild(msg);
  }
  setFollow(p, true);
}

function flash(p) {
  p.head.classList.add('flash');
  requestAnimationFrame(() => requestAnimationFrame(() => p.head.classList.remove('flash')));
}

const es = new EventSource('/events');
es.addEventListener('init', (e) => {
  const data = JSON.parse(e.data);
  maxLines = data.maxLines;
  panesEl.textContent = '';
  panes.length = 0;
  for (const info of data.panes) {
    if (panes.length) addSplitter();
    const p = createPane(info);
    panes[info.id] = p;
    resetPane(p, info);
  }
  restoreWidths();
  connEl.textContent = 'verbunden';
  connEl.classList.remove('down');
});
es.addEventListener('reset', (e) => {
  const info = JSON.parse(e.data);
  const p = panes[info.id];
  if (!p) return;
  resetPane(p, info);
  flash(p);
});
es.addEventListener('append', (e) => {
  const { id, chunk } = JSON.parse(e.data);
  if (panes[id]) appendText(panes[id], chunk);
});
es.addEventListener('crash', (e) => {
  const { id, text } = JSON.parse(e.data);
  const p = panes[id];
  if (!p) return;
  showCrash(p, text);
  flash(p);
});
es.onerror = () => {
  connEl.textContent = 'Verbindung getrennt – versuche erneut…';
  connEl.classList.add('down');
};
</script>
</body>
</html>