style(ui): make docked dialog look more like a Torn panel (full-width, accent border)

Previously the .tat-root.tat-anchored rule centered the dialog with a 720px max-width and no extra border, which made it look like a floating widget squeezed into the page rather than an embedded panel. The Torn gym page reference is a full-width panel with a thin dark border and a red top accent line. Changes: - margin: 0 0 12px 0 (full-width, no centering) - max-width: none (span the content area) - border-radius: 0 (Torn panels are flat, not rounded) - border: 1px solid #444 with border-top: 2px solid #c00 (red accent) - padding: 16px 20px (more breathing room, matching Torn panels) - .tat-root.tat-anchored .tat-header { cursor: default } (drag is disabled in anchored mode, so the move cursor was misleading) Free-floating mode is unchanged: the .tat-root base rule keeps its rounded shadowed look and .tat-header keeps cursor: move. Mirrored into the embedded TAT_STYLE in the bundle to keep the source and bundle in lockstep. Co-Authored-By: Claude Opus 4.8 <noreply@anthropic.com>
fix(bundle): stop pre-escaping gym name in embedded dom.js (apostrophe fix)
2026-06-07 14:02:11 -05:00 · 2026-06-07 14:00:40 -05:00 · 2026-06-07 12:17:29 -05:00 · 2026-06-07 12:15:09 -05:00 · 2026-06-07 12:14:05 -05:00 · 2026-06-07 09:00:40 -05:00
6 changed files with 440 additions and 363 deletions
@@ -10,3 +10,4 @@ pnpm-debug.log*
 Thumbs.db
 Desktop.ini
 .DS_Store
+gym-rendered.html
@@ -3,104 +3,72 @@
 *   { attr: 'strength'|'speed'|..., current: number, gym: string }
 * or `null` if the page doesn't look like a Torn gym page.
 *
- * The selectors below are best-effort matches for torn.com/gym.php
- * and will need adjustment if Torn changes the markup.
+ * Torn's gym page is a React app using CSS modules with hash suffixes
+ * (e.g. class="strength___iXqEf", class="propertyValue___IYxjf"). This
+ * scraper targets Torn's actual structure rather than guessing at selectors.
 */
+const KNOWN_ATTRS = ['strength', 'defense', 'speed', 'dexterity', 'endurance', 'intelligence'];
+
 export function currentAttribute() {
-  // The attribute name is shown in the gym page header.
-  // Torn displays it as a capitalized word (e.g. "Strength") near the
-  // top of the gym form.
-  const KNOWN = ['strength', 'defense', 'speed', 'dexterity', 'endurance', 'intelligence'];
-  const ATTR_RE = new RegExp('\\b(' + KNOWN.join('|') + ')\\b');
-
-  const headers = document.querySelectorAll('h1, h2, h3, h4, .title, .gym-title, [class*="gym"]');
-  let attr = null;
-  let attrEl = null;
-  for (const el of headers) {
-    const t = (el.textContent || '').trim().toLowerCase();
-    const m = t.match(ATTR_RE);
-    if (m) { attr = m[1]; attrEl = el; break; }
-  }
+  const li = findActiveAttributeLi();
+  if (!li) return null;
+  const attr = extractAttrFromLi(li);
  if (!attr) return null;
-
-  // Current value: look for the prominent number on the page that is
-  // formatted like a Torn attribute (e.g. "14,328,501"). Search near
-  // the attribute element so we don't pick up unrelated global numbers.
-  let valEl = findValueNear(attrEl);
-  if (!valEl) valEl = findValueElement(); // fallback: whole-page scan
-  if (!valEl) return null;
-  const current = parseNumber(valEl.textContent);
+  const current = extractValueFromLi(li);
  if (current == null) return null;
-
-  // Gym name: any element on the page containing the word "Gym" or
-  // "Bastion" / "Frontline" / etc. Torn's gym names vary.
  const gym = findGymName() || 'Unknown gym';
-
  return { attr, current, gym };
 }

-function findValueNear(el) {
-  // Look at the element itself, then up to a few ancestors, then their descendants.
-  // Prefer the largest formatted number within ~2 parent levels.
-  const scope = [];
-  let cur = el;
-  for (let depth = 0; depth < 3 && cur; depth++) {
-    scope.push(cur);
-    cur = cur.parentElement;
+function findActiveAttributeLi() {
+  // Priority 1: the <li> with the "success" class (just trained).
+  const lis = document.querySelectorAll('ul[class*="properties"] > li[class*="success"]');
+  for (const li of lis) {
+    if (extractAttrFromLi(li)) return li;
  }
-  let best = null;
-  let bestN = -Infinity;
-  for (const root of scope) {
-    const candidates = root.querySelectorAll('*');
-    for (const c of candidates) {
-      if (c.children.length > 0) continue;
-      const t = (c.textContent || '').trim();
-      if (!/^[\d,]+(\.\d+)?$/.test(t)) continue;
-      const n = parseNumber(t);
-      if (n == null || n < 1) continue;
-      if (n > bestN) { best = c; bestN = n; }
+  // Priority 2: the <li> corresponding to the .gained message's attribute.
+  const gained = document.querySelector('[class*="gained"]');
+  if (gained) {
+    const text = (gained.textContent || '').toLowerCase();
+    for (const attr of KNOWN_ATTRS) {
+      if (text.includes(attr)) {
+        const li = document.querySelector('ul[class*="properties"] > li[class^="' + attr + '___"]');
+        if (li) return li;
+      }
    }
  }
-  return best;
+  // Priority 3: the first <li> in the properties list.
+  const all = document.querySelectorAll('ul[class*="properties"] > li');
+  for (const li of all) {
+    if (extractAttrFromLi(li)) return li;
+  }
+  return null;
 }

-function findValueElement() {
-  // Fallback only used when no element is found near the attribute.
-  // Walk all elements; pick the largest formatted number on the page.
-  const candidates = document.querySelectorAll('*');
-  let best = null;
-  let bestN = -Infinity;
-  for (const el of candidates) {
-    if (el.children.length > 0) continue;
-    const t = (el.textContent || '').trim();
-    if (!/^[\d,]+(\.\d+)?$/.test(t)) continue;
-    const n = parseNumber(t);
-    if (n == null || n < 1) continue;
-    if (n > bestN) { best = el; bestN = n; }
+function extractAttrFromLi(li) {
+  const cls = li.className || '';
+  for (const attr of KNOWN_ATTRS) {
+    if (cls.split(/\s+/).some((c) => c.startsWith(attr + '___'))) return attr;
  }
-  return best;
+  return null;
+}
+
+function extractValueFromLi(li) {
+  const valueSpan = li.querySelector('[class^="propertyValue"]');
+  if (!valueSpan) return null;
+  return parseNumber(valueSpan.textContent);
 }

 function findGymName() {
-  // Look for a known set of Torn gym name fragments. Adjust as needed.
-  // Prefer an element that looks like the gym panel so we don't match
-  // against global widgets (news, sidebar, ads).
-  const panel = document.querySelector('.gym, #gym, [class*="gym-"], [class*="Gym"]');
-  const roots = panel ? [panel, document.body] : [document.body];
-  const known = [
-    'Total Bastion', 'Frontline Fitness', 'Gym 300', 'Gym 500',
-    'Baldr\'s Gym', 'Sportscience Laboratory', 'Premier Fitness',
-    'Chrome Gym', 'Mr. Miyagi\'s', 'Power House',
-  ];
-  for (const root of roots) {
-    const all = root.querySelectorAll('h1, h2, h3, h4, p, span, div, li');
-    for (const el of all) {
-      if (el.children.length > 0) continue;
-      const t = (el.textContent || '').trim();
-      for (const name of known) {
-        if (t.includes(name)) return name;
-      }
-    }
+  // Find the currently selected gym button. It has the "active" class.
+  const activeBtn = document.querySelector('button[class*="gymButton"][class*="active"]');
+  if (activeBtn) {
+    const label = activeBtn.getAttribute('aria-label') || '';
+    // aria-label format: "<Gym Name>. Membership cost - $X. Energy usage - N per train."
+    // The gym name is everything before the first ". ".
+    const dot = label.indexOf('. ');
+    if (dot !== -1) return label.slice(0, dot);
+    return label; // no period, return whole label as fallback
  }
  return null;
 }
@@ -5,15 +5,16 @@
 * compared against the previous one, and `onTrain({attr, delta, ts})`
 * is invoked.
 *
- * `parseTrainResponse(text, url)` is intentionally permissive and
- * returns `{ newValue, attr } | null`. The default implementation
- * tries JSON first, then a regex fallback.
+ * `parseTrainResponse(text, url)` returns:
+ *   { delta, attr }          — when a "You gained X.XX <attr>" message is found
+ *   { newValue, attr }       — when a propertyValue span or JSON newValue is found
+ *   null                     — when nothing usable is found
 */
 export function startRequestInterceptor({ prevValue, currentAttr, onTrain, onParseFail }) {
  let lastValue = prevValue;
  let warnedFor = null;

-  const handle = (text, url) => {
+  function handle(text, url) {
    const parsed = parseTrainResponse(text, url, currentAttr);
    if (!parsed) {
      if (warnedFor !== url) {
@@ -22,11 +23,22 @@ export function startRequestInterceptor({ prevValue, currentAttr, onTrain, onPar
      }
      return;
    }
-    if (parsed.attr && currentAttr && parsed.attr !== currentAttr) return;
-    const delta = parsed.newValue - lastValue;
-    lastValue = parsed.newValue;
-    if (delta > 0) onTrain({ attr: parsed.attr, delta, ts: Date.now() });
-  };
+
+    let delta;
+    if (typeof parsed.delta === 'number' && parsed.delta > 0) {
+      delta = parsed.delta;
+    } else if (typeof parsed.newValue === 'number' && parsed.newValue > 0) {
+      delta = parsed.newValue - lastValue;
+      lastValue = parsed.newValue;
+    } else {
+      return;
+    }
+
+    if (delta <= 0) return;
+    const attr = parsed.attr || currentAttr;
+    if (!attr) return;
+    onTrain({ attr, delta, ts: Date.now() });
+  }

  wrapXhr(handle);
  wrapFetch(handle);
@@ -37,23 +49,31 @@ export function startRequestInterceptor({ prevValue, currentAttr, onTrain, onPar
 }

 function parseTrainResponse(text, url, fallbackAttr) {
-  // Try JSON
+  // Strategy 1: look for the "gained" message in the response.
+  // Format: "You gained <number> <attr>" (e.g. "You gained 10,885.76 dexterity").
+  // Torn sometimes prefixes with other text (e.g. "You gained 10,885.76 dexterity"),
+  // so we match the number-and-attribute-name pattern directly.
+  const gainedMatch = text.match(/[Yy]ou\s+gained\s+([\d,]+(?:\.\d+)?)\s+(strength|defense|speed|dexterity|endurance|intelligence)\b/i);
+  if (gainedMatch) {
+    const delta = parseFloat(gainedMatch[1].replace(/,/g, ''));
+    const attr = gainedMatch[2].toLowerCase();
+    if (Number.isFinite(delta) && delta >= 0) {
+      return { delta, attr };
+    }
+  }
+  // Strategy 2: JSON with newValue + attr.
  try {
    const j = JSON.parse(text);
-    // Torn historically returns an HTML fragment; if it's JSON, look
-    // for a known shape. This is a placeholder — adjust after manual
-    // verification.
    if (j && typeof j === 'object' && 'newValue' in j && 'attr' in j) {
      return { newValue: Number(j.newValue), attr: String(j.attr) };
    }
  } catch { /* not JSON */ }
-
-  // Regex fallback: scan text for a number formatted like an attribute.
-  // If we find one and the caller passed a fallbackAttr, use it; otherwise
-  // the caller can choose to ignore the result.
-  const m = text.match(/(\d{1,3}(?:,\d{3})+|\d{4,})/);
-  if (m) {
-    const newValue = parseInt(m[1].replace(/,/g, ''), 10);
+  // Strategy 3: regex fallback (last resort). Don't use the first number
+  // blindly; look specifically for the propertyValue span content, which
+  // is the authoritative source.
+  const propertyValueMatch = text.match(/class="propertyValue[^"]*"[^>]*>([\d,]+(?:\.\d+)?)</);
+  if (propertyValueMatch) {
+    const newValue = parseInt(propertyValueMatch[1].replace(/,/g, ''), 10);
    if (Number.isFinite(newValue) && newValue > 0) {
      return { newValue, attr: fallbackAttr || null };
    }
@@ -4,144 +4,146 @@ import { currentAttribute } from './dom.js';
 import { startRequestInterceptor } from './interceptor.js';

 function findAnchorElement() {
-  // Try several selectors in priority order. Torn's gym page structure
-  // varies; we cast a wide net and return the first match.
+  // Return the element to insert the dialog BEFORE in the DOM.
+  // The user wants the dialog between the notification wrapper and the
+  // gym content wrapper; we insert before gymContentWrapper.
  const candidates = [
+    '[class*="gymContentWrapper"]',  // outer wrapper — best insertion point
+    '[class*="gymContent"]',         // inner wrapper (fallback)
+    'ul[class*="properties"]',       // the list itself (last resort)
+    // Legacy fallbacks (kept for robustness):
    'form[action*="train"]',
    'form.train-form',
    'form[class*="train"]',
    '[class*="train-button"]',
    'button[class*="train"]',
-    'a[class*="train"]',
+    'a[href*="train"]',
    'button[name="train"]',
    'a[href*="train"]',
  ];
  for (const sel of candidates) {
    const el = document.querySelector(sel);
-    if (el) {
-      // Prefer the form ancestor if the match is a button/link, since we
-      // want to anchor above the whole form, not just the button.
-      return el.closest('form') || el;
-    }
-  }
-  // Last-ditch: any element inside the gym panel that looks like the
-  // training form.
-  const panel = document.querySelector('.gym, #gym, [class*="gym-"], [class*="Gym"]');
-  if (panel) {
-    const form = panel.querySelector('form');
-    if (form) return form;
+    if (el) return el;
  }
  return null;
 }

 function start() {
-  const store = new Store({
-    storage: localStorage,
-    onWarn: (m) => console.warn(m),
-  });
-  const prefs = store.getPrefs();
+  try {
+    const store = new Store({
+      storage: localStorage,
+      onWarn: (m) => console.warn(m),
+    });
+    const prefs = store.getPrefs();

-  const dialog = new Dialog({
-    onTargetChange: (v) => {
-      const attr = currentAttribute()?.attr;
-      if (!attr) return;
-      store.setTarget(attr, v);
-      render();
-    },
-    onModeChange: (m) => {
-      store.setMode(m);
-      prefs.mode = m;
-      applyMode();
-    },
-    onPosChange: (pos) => store.setPos(pos),
-    onClose: () => dialog.destroy(),
-  });
+    // State that applyMode() and render() may touch on first call.
+    // Declared up-front to avoid TDZ ReferenceError if applyMode()'s
+    // anchor-miss branch fires before the natural declaration point.
+    let lastSnapshot = null;
+    let lastAttr = null;
+    let lastDelta = 0;
+    let anchorError = null;

-  dialog.mount({ initialMode: prefs.mode, initialPos: prefs.pos });
-  applyMode();
-
-  let lastSnapshot = null;
-  let lastAttr = null;
-  let lastDelta = 0;
-  let anchorError = null;
-
-  function snapshot() {
-    const a = currentAttribute();
-    if (!a) {
-      return { error: "Couldn't read attribute — Torn may have updated the page." };
+    // One-time migration: dialog now defaults to bottom-left, so reset any
+    // previously-saved position from the bottom-right era.
+    if (prefs.pos && (prefs.pos.x !== 0 || prefs.pos.y !== 0)) {
+      console.info('[tat] resetting dialog position to new bottom-left default');
+      prefs.pos = { x: 0, y: 0 };
+      store.setPos(prefs.pos);
    }
-    lastAttr = a.attr;
-    const summary = store.getSummary(a.attr);
-    return {
-      attr: a.attr,
-      gym: a.gym,
-      current: a.current,
-      target: store.getTarget(a.attr),
-      perTrain: lastDelta,
-      summary,
-      warn: store._saveDisabled ? 'saving disabled this session' : null,
-      anchorError: anchorError,
-    };
-  }

-  function render() {
-    lastSnapshot = snapshot();
-    dialog.render(lastSnapshot);
-  }
+    const dialog = new Dialog({
+      onTargetChange: (v) => {
+        const attr = currentAttribute()?.attr;
+        if (!attr) return;
+        store.setTarget(attr, v);
+        render();
+      },
+      onModeChange: (m) => {
+        store.setMode(m);
+        prefs.mode = m;
+        applyMode();
+      },
+      onPosChange: (pos) => store.setPos(pos),
+      onClose: () => dialog.destroy(),
+    });

-  function applyMode() {
-    if (prefs.mode === 'anchored') {
-      const el = findAnchorElement();
-      if (el) {
-        const rect = el.getBoundingClientRect();
-        dialog.setMode('anchored', { canAnchor: true });
-        dialog._positionAnchored(rect);
-        // observe
-        const ro = new ResizeObserver(() => {
-          if (prefs.mode === 'anchored') dialog._positionAnchored(el.getBoundingClientRect());
-        });
-        ro.observe(el);
-        anchorError = null;
+    dialog.mount({ initialMode: prefs.mode, initialPos: prefs.pos });
+    applyMode();
+
+    function snapshot() {
+      const a = currentAttribute();
+      if (!a) {
+        return { error: "Couldn't read attribute — Torn may have updated the page." };
+      }
+      lastAttr = a.attr;
+      const summary = store.getSummary(a.attr);
+      return {
+        attr: a.attr,
+        gym: a.gym,
+        current: a.current,
+        target: store.getTarget(a.attr),
+        perTrain: lastDelta,
+        summary,
+        warn: store._saveDisabled ? 'saving disabled this session' : null,
+        anchorError: anchorError,
+      };
+    }
+
+    function render() {
+      lastSnapshot = snapshot();
+      dialog.render(lastSnapshot);
+    }
+
+    function applyMode() {
+      if (prefs.mode === 'anchored') {
+        const el = findAnchorElement();
+        if (el) {
+          dialog.setMode('anchored', { canAnchor: true, insertBefore: el });
+          anchorError = null;
+          return;
+        }
+        // Anchor selector missed — don't snap to default, just keep current
+        // position and show a note.
+        anchorError = "Couldn't find the training UI on this page.";
+        render();
        return;
      }
-      // Anchor selector missed — don't snap to default, just keep current
-      // position and show a note.
-      anchorError = "Couldn't find the training form on this page.";
-      render();
-      return;
+      anchorError = null;
+      dialog.setMode('free');
    }
-    anchorError = null;
-    dialog.setMode('free');
-  }

-  // initial paint
-  render();
+    // initial paint
+    render();

-  // watch DOM for attribute changes
-  let pending = false;
-  const observer = new MutationObserver(() => {
-    if (pending) return;
-    pending = true;
-    requestAnimationFrame(() => {
-      pending = false;
-      const a = currentAttribute();
-      if (a && (a.attr !== lastAttr || a.current !== lastSnapshot?.current)) render();
+    // watch DOM for attribute changes
+    let pending = false;
+    const observer = new MutationObserver(() => {
+      if (pending) return;
+      pending = true;
+      requestAnimationFrame(() => {
+        pending = false;
+        const a = currentAttribute();
+        if (a && (a.attr !== lastAttr || a.current !== lastSnapshot?.current)) render();
+      });
    });
-  });
-  observer.observe(document.body, { childList: true, subtree: true, characterData: true });
+    observer.observe(document.body, { childList: true, subtree: true, characterData: true });

-  // intercept train requests
-  const prev = currentAttribute()?.current ?? 0;
-  startRequestInterceptor({
-    prevValue: prev,
-    currentAttr: lastAttr,
-    onTrain: ({ attr, delta, ts }) => {
-      store.recordTrain(attr, delta, ts);
-      lastDelta = delta;
-      render();
-    },
-    onParseFail: (url) => console.warn('[tat] could not parse train response from', url),
-  });
+    // intercept train requests
+    const prev = currentAttribute()?.current ?? 0;
+    startRequestInterceptor({
+      prevValue: prev,
+      currentAttr: lastAttr,
+      onTrain: ({ attr, delta, ts }) => {
+        store.recordTrain(attr, delta, ts);
+        lastDelta = delta;
+        render();
+      },
+      onParseFail: (url) => console.warn('[tat] could not parse train response from', url),
+    });
+  } catch (e) {
+    console.error('[tat] failed to start:', e);
+  }
 }

 if (location.hash === '#tat-test') {
@@ -8,6 +8,17 @@ const STYLE = `
  font: 13px/1.4 Tahoma, Verdana, sans-serif;
  padding: 12px 14px;
 }
+.tat-root.tat-anchored {
+  position: static;
+  margin: 0 0 12px 0;
+  max-width: none;
+  box-shadow: none;
+  border-radius: 0;
+  border: 1px solid #444;
+  border-top: 2px solid #c00;
+  padding: 16px 20px;
+}
+.tat-root.tat-anchored .tat-header { cursor: default; }
 .tat-header {
  display: flex; justify-content: space-between; align-items: center;
  padding-bottom: 8px; margin-bottom: 10px;
@@ -100,7 +111,7 @@ export class Dialog {

    if (initialMode === 'free') {
      root.style.bottom = '20px';
-      root.style.right = '20px';
+      root.style.left = '20px';
      if (initialPos.x || initialPos.y) {
        root.style.transform = `translate(${initialPos.x}px, ${initialPos.y}px)`;
      }
@@ -117,17 +128,37 @@ export class Dialog {
  setMode(mode, anchorInfo) {
    this.mode = mode;
    if (!this.root) return;
+    // Clear all position styles
    this.root.style.transform = '';
    this.root.style.top = '';
    this.root.style.bottom = '';
    this.root.style.left = '';
    this.root.style.right = '';
+    this.root.classList.remove('tat-anchored');
+
    if (mode === 'free') {
+      // Floating mode: ensure dialog is in body and position at bottom-left.
+      if (this.root.parentNode !== document.body) {
+        document.body.appendChild(this.root);
+      }
      this.root.style.bottom = '20px';
-      this.root.style.right = '20px';
+      this.root.style.left = '20px';
    } else if (anchorInfo && anchorInfo.canAnchor) {
-      this._positionAnchored(anchorInfo.rect);
+      if (anchorInfo.insertBefore) {
+        // Docked mode: insert the dialog into the page flow before the
+        // given element, and add the tat-anchored class to switch to
+        // static positioning.
+        anchorInfo.insertBefore.parentNode.insertBefore(this.root, anchorInfo.insertBefore);
+        this.root.classList.add('tat-anchored');
+      } else if (anchorInfo.rect) {
+        // Fallback: position fixed above the rect (old behavior, used when
+        // no insertion point is available but a rect was given).
+        this._positionAnchored(anchorInfo.rect);
+      }
+      // If neither insertBefore nor rect, leave the dialog where it is
+      // (the caller will show an anchorError note).
    } else {
+      // Top-center fallback (used when mode is anchored but no anchor info).
      this.root.style.top = '20px';
      this.root.style.left = '50%';
      this.root.style.transform = 'translateX(-50%)';
@@ -135,6 +166,7 @@ export class Dialog {
  }

  _positionAnchored(rect) {
+    if (!rect) return;  // defensive: setMode may be called without a rect
    const dialogRect = this.root.getBoundingClientRect();
    let top = rect.top - dialogRect.height - 8;
    if (top < 8) top = 20;
@@ -122,76 +122,73 @@
  }

  // ===== dom.js (embedded) =====
+  const TAT_KNOWN_ATTRS = ['strength', 'defense', 'speed', 'dexterity', 'endurance', 'intelligence'];
  function currentAttribute() {
-    const KNOWN = ['strength', 'defense', 'speed', 'dexterity', 'endurance', 'intelligence'];
-    const ATTR_RE = new RegExp('\\b(' + KNOWN.join('|') + ')\\b');
-    const headers = document.querySelectorAll('h1, h2, h3, h4, .title, .gym-title, [class*="gym"]');
-    let attr = null, attrEl = null;
-    for (const el of headers) {
-      const t = (el.textContent || '').trim().toLowerCase();
-      const m = t.match(ATTR_RE);
-      if (m) { attr = m[1]; attrEl = el; break; }
-    }
+    const li = tatFindActiveAttributeLi();
+    if (!li) return null;
+    const attr = tatExtractAttrFromLi(li);
    if (!attr) return null;
-    let valEl = findValueNear(attrEl);
-    if (!valEl) valEl = findValueElement();
-    if (!valEl) return null;
-    const current = parseNumber(valEl.textContent);
+    const current = tatExtractValueFromLi(li);
    if (current == null) return null;
-    const gym = findGymName() || 'Unknown gym';
+    const gym = tatFindGymName() || 'Unknown gym';
    return { attr: attr, current: current, gym: gym };
  }
-  function findValueNear(el) {
-    const scope = [];
-    let cur = el;
-    for (let depth = 0; depth < 3 && cur; depth++) {
-      scope.push(cur);
-      cur = cur.parentElement;
+  function tatFindActiveAttributeLi() {
+    // Priority 1: the <li> with the "success" class (just trained).
+    const lis = document.querySelectorAll('ul[class*="properties"] > li[class*="success"]');
+    for (const li of lis) {
+      if (tatExtractAttrFromLi(li)) return li;
    }
-    let best = null, bestN = -Infinity;
-    for (const root of scope) {
-      const candidates = root.querySelectorAll('*');
-      for (const c of candidates) {
-        if (c.children.length > 0) continue;
-        const t = (c.textContent || '').trim();
-        if (!/^[\d,]+(\.\d+)?$/.test(t)) continue;
-        const n = parseNumber(t);
-        if (n == null || n < 1) continue;
-        if (n > bestN) { best = c; bestN = n; }
+    // Priority 2: the <li> corresponding to the .gained message's attribute.
+    const gained = document.querySelector('[class*="gained"]');
+    if (gained) {
+      const text = (gained.textContent || '').toLowerCase();
+      for (const attr of TAT_KNOWN_ATTRS) {
+        if (text.indexOf(attr) !== -1) {
+          const li = document.querySelector('ul[class*="properties"] > li[class^="' + attr + '___"]');
+          if (li) return li;
+        }
      }
    }
-    return best;
-  }
-  function findValueElement() {
-    const candidates = document.querySelectorAll('*');
-    let best = null, bestN = -Infinity;
-    for (const el of candidates) {
-      if (el.children.length > 0) continue;
-      const t = (el.textContent || '').trim();
-      if (!/^[\d,]+(\.\d+)?$/.test(t)) continue;
-      const n = parseNumber(t);
-      if (n == null || n < 1) continue;
-      if (n > bestN) { best = el; bestN = n; }
+    // Priority 3: the first <li> in the properties list.
+    const all = document.querySelectorAll('ul[class*="properties"] > li');
+    for (const li of all) {
+      if (tatExtractAttrFromLi(li)) return li;
    }
-    return best;
+    return null;
  }
-  function findGymName() {
-    const panel = document.querySelector('.gym, #gym, [class*="gym-"], [class*="Gym"]');
-    const roots = panel ? [panel, document.body] : [document.body];
-    const known = ['Total Bastion', 'Frontline Fitness', 'Gym 300', 'Gym 500', "Baldr's Gym", 'Sportscience Laboratory', 'Premier Fitness', 'Chrome Gym', "Mr. Miyagi's", 'Power House'];
-    for (const root of roots) {
-      const all = root.querySelectorAll('h1, h2, h3, h4, p, span, div, li');
-      for (const el of all) {
-        if (el.children.length > 0) continue;
-        const t = (el.textContent || '').trim();
-        for (const name of known) { if (t.includes(name)) return name; }
+  function tatExtractAttrFromLi(li) {
+    const cls = li.className || '';
+    const parts = cls.split(/\s+/);
+    for (const attr of TAT_KNOWN_ATTRS) {
+      const prefix = attr + '___';
+      for (const c of parts) {
+        if (c.indexOf(prefix) === 0) return attr;
      }
    }
    return null;
  }
-  function parseNumber(text) {
+  function tatExtractValueFromLi(li) {
+    const valueSpan = li.querySelector('[class^="propertyValue"]');
+    if (!valueSpan) return null;
+    return tatParseNumber(valueSpan.textContent);
+  }
+  function tatFindGymName() {
+    // Find the currently selected gym button. It has the "active" class.
+    const activeBtn = document.querySelector('button[class*="gymButton"][class*="active"]');
+    if (activeBtn) {
+      const label = activeBtn.getAttribute('aria-label') || '';
+      // aria-label format: "<Gym Name>. Membership cost - $X. Energy usage - N per train."
+      // The gym name is everything before the first ". ".
+      const dot = label.indexOf('. ');
+      if (dot !== -1) return label.slice(0, dot);
+      return label; // no period, return whole label as fallback
+    }
+    return null;
+  }
+  function tatParseNumber(text) {
    if (!text) return null;
-    const cleaned = text.replace(/,/g, '').trim();
+    const cleaned = String(text).replace(/,/g, '').trim();
    if (!/^\d+(\.\d+)?$/.test(cleaned)) return null;
    const n = parseFloat(cleaned);
    return Number.isFinite(n) ? Math.floor(n) : null;
@@ -204,25 +201,52 @@
    function handle(text, url) {
      const parsed = parseTrainResponse(text, url, opts.currentAttr);
      if (!parsed) { if (warnedFor !== url) { warnedFor = url; opts.onParseFail && opts.onParseFail(url); } return; }
-      if (parsed.attr && opts.currentAttr && parsed.attr !== opts.currentAttr) return;
-      const delta = parsed.newValue - lastValue;
-      lastValue = parsed.newValue;
-      if (delta > 0) opts.onTrain({ attr: parsed.attr || opts.currentAttr, delta: delta, ts: Date.now() });
+      let delta;
+      if (typeof parsed.delta === 'number' && parsed.delta > 0) {
+        delta = parsed.delta;
+      } else if (typeof parsed.newValue === 'number' && parsed.newValue > 0) {
+        delta = parsed.newValue - lastValue;
+        lastValue = parsed.newValue;
+      } else {
+        return;
+      }
+      if (delta <= 0) return;
+      const attr = parsed.attr || opts.currentAttr;
+      if (!attr) return;
+      opts.onTrain({ attr: attr, delta: delta, ts: Date.now() });
    }
    wrapXhr(handle); wrapFetch(handle);
    return { updatePrevValue: function (v) { lastValue = v; } };
  }
  function parseTrainResponse(text, url, fallbackAttr) {
+    // Strategy 1: look for the "gained" message in the response.
+    // Format: "You gained <number> <attr>" (e.g. "You gained 10,885.76 dexterity").
+    // Torn sometimes prefixes with other text (e.g. "You gained 10,885.76 dexterity"),
+    // so we match the number-and-attribute-name pattern directly.
+    const gainedMatch = text.match(/[Yy]ou\s+gained\s+([\d,]+(?:\.\d+)?)\s+(strength|defense|speed|dexterity|endurance|intelligence)\b/i);
+    if (gainedMatch) {
+      const delta = parseFloat(gainedMatch[1].replace(/,/g, ''));
+      const attr = gainedMatch[2].toLowerCase();
+      if (Number.isFinite(delta) && delta >= 0) {
+        return { delta: delta, attr: attr };
+      }
+    }
+    // Strategy 2: JSON with newValue + attr.
    try {
      const j = JSON.parse(text);
      if (j && typeof j === 'object' && 'newValue' in j && 'attr' in j) {
        return { newValue: Number(j.newValue), attr: String(j.attr) };
      }
    } catch {}
-    const m = text.match(/(\d{1,3}(?:,\d{3})+|\d{4,})/);
-    if (m) {
-      const newValue = parseInt(m[1].replace(/,/g, ''), 10);
-      if (Number.isFinite(newValue) && newValue > 0) return { newValue: newValue, attr: fallbackAttr || null };
+    // Strategy 3: regex fallback (last resort). Don't use the first number
+    // blindly; look specifically for the propertyValue span content, which
+    // is the authoritative source.
+    const propertyValueMatch = text.match(/class="propertyValue[^"]*"[^>]*>([\d,]+(?:\.\d+)?)</);
+    if (propertyValueMatch) {
+      const newValue = parseInt(propertyValueMatch[1].replace(/,/g, ''), 10);
+      if (Number.isFinite(newValue) && newValue > 0) {
+        return { newValue: newValue, attr: fallbackAttr || null };
+      }
    }
    return null;
  }
@@ -252,6 +276,8 @@
  // ===== ui.js (embedded) =====
  const TAT_STYLE = `
  .tat-root { position: fixed; z-index: 99999; min-width: 320px; max-width: 420px; background: #2b2b2b; color: #ddd; border: 1px solid #444; border-radius: 6px; box-shadow: 0 4px 12px rgba(0,0,0,0.4); font: 13px/1.4 Tahoma, Verdana, sans-serif; padding: 12px 14px; }
+  .tat-root.tat-anchored { position: static; margin: 0 0 12px 0; max-width: none; box-shadow: none; border-radius: 0; border: 1px solid #444; border-top: 2px solid #c00; padding: 16px 20px; }
+  .tat-root.tat-anchored .tat-header { cursor: default; }
  .tat-header { display: flex; justify-content: space-between; align-items: center; padding-bottom: 8px; margin-bottom: 10px; border-bottom: 1px solid #444; cursor: move; user-select: none; }
  .tat-header strong { color: #fff; }
  .tat-close { cursor: pointer; opacity: 0.6; padding: 0 4px; }
@@ -315,7 +341,7 @@
      this.mode = opts.initialMode || 'free';
      if (this.mode === 'free') {
        root.style.bottom = '20px';
-        root.style.right = '20px';
+        root.style.left = '20px';
        if (opts.initialPos && (opts.initialPos.x || opts.initialPos.y)) {
          root.style.transform = 'translate(' + opts.initialPos.x + 'px, ' + opts.initialPos.y + 'px)';
        }
@@ -326,12 +352,39 @@
    setMode(mode, anchorInfo) {
      this.mode = mode;
      if (!this.root) return;
+      // Clear all position styles
      this.root.style.transform = ''; this.root.style.top = ''; this.root.style.bottom = ''; this.root.style.left = ''; this.root.style.right = '';
-      if (mode === 'free') { this.root.style.bottom = '20px'; this.root.style.right = '20px'; }
-      else if (anchorInfo && anchorInfo.canAnchor) { this._positionAnchored(anchorInfo.rect); }
-      else { this.root.style.top = '20px'; this.root.style.left = '50%'; this.root.style.transform = 'translateX(-50%)'; }
+      this.root.classList.remove('tat-anchored');
+      if (mode === 'free') {
+        // Floating mode: ensure dialog is in body and position at bottom-left.
+        if (this.root.parentNode !== document.body) {
+          document.body.appendChild(this.root);
+        }
+        this.root.style.bottom = '20px';
+        this.root.style.left = '20px';
+      } else if (anchorInfo && anchorInfo.canAnchor) {
+        if (anchorInfo.insertBefore) {
+          // Docked mode: insert the dialog into the page flow before the
+          // given element, and add the tat-anchored class to switch to
+          // static positioning.
+          anchorInfo.insertBefore.parentNode.insertBefore(this.root, anchorInfo.insertBefore);
+          this.root.classList.add('tat-anchored');
+        } else if (anchorInfo.rect) {
+          // Fallback: position fixed above the rect (old behavior, used when
+          // no insertion point is available but a rect was given).
+          this._positionAnchored(anchorInfo.rect);
+        }
+        // If neither insertBefore nor rect, leave the dialog where it is
+        // (the caller will show an anchorError note).
+      } else {
+        // Top-center fallback (used when mode is anchored but no anchor info).
+        this.root.style.top = '20px';
+        this.root.style.left = '50%';
+        this.root.style.transform = 'translateX(-50%)';
+      }
    }
    _positionAnchored(rect) {
+      if (!rect) return;  // defensive: setMode may be called without a rect
      const dialogRect = this.root.getBoundingClientRect();
      let top = rect.top - dialogRect.height - 8;
      if (top < 8) top = 20;
@@ -414,119 +467,120 @@

  // ===== main.js (embedded) =====
  function findAnchorElement() {
-    // Try several selectors in priority order. Torn's gym page structure
-    // varies; we cast a wide net and return the first match.
+    // Return the element to insert the dialog BEFORE in the DOM.
+    // The user wants the dialog between the notification wrapper and the
+    // gym content wrapper; we insert before gymContentWrapper.
    const candidates = [
+      '[class*="gymContentWrapper"]',
+      '[class*="gymContent"]',
+      'ul[class*="properties"]',
+      // Legacy fallbacks (kept in case Torn ever wraps the list in a form):
      'form[action*="train"]',
      'form.train-form',
      'form[class*="train"]',
      '[class*="train-button"]',
      'button[class*="train"]',
-      'a[class*="train"]',
+      'a[href*="train"]',
      'button[name="train"]',
      'a[href*="train"]',
    ];
    for (const sel of candidates) {
      const el = document.querySelector(sel);
-      if (el) {
-        // Prefer the form ancestor if the match is a button/link, since we
-        // want to anchor above the whole form, not just the button.
-        return el.closest('form') || el;
-      }
-    }
-    // Last-ditch: any element inside the gym panel that looks like the
-    // training form.
-    const panel = document.querySelector('.gym, #gym, [class*="gym-"], [class*="Gym"]');
-    if (panel) {
-      const form = panel.querySelector('form');
-      if (form) return form;
+      if (el) return el;
    }
    return null;
  }

  function start() {
    if (window.__tat_started) return; window.__tat_started = true;
-    const store = new Store({ storage: localStorage, onWarn: function (m) { console.warn(m); } });
-    const prefs = store.getPrefs();
+    try {
+      const store = new Store({ storage: localStorage, onWarn: function (m) { console.warn(m); } });
+      const prefs = store.getPrefs();

-    const dialog = new Dialog({
-      onTargetChange: function (v) {
-        const a = currentAttribute(); if (!a) return; store.setTarget(a.attr, v); render();
-      },
-      onModeChange: function (m) { store.setMode(m); prefs.mode = m; applyMode(); },
-      onPosChange: function (pos) { store.setPos(pos); },
-      onClose: function () { dialog.destroy(); },
-    });
+      // State that applyMode() and render() may touch on first call.
+      // Declared up-front to avoid TDZ ReferenceError if applyMode()'s
+      // anchor-miss branch fires before the natural declaration point.
+      let lastSnapshot = null;
+      let lastAttr = null;
+      let lastDelta = 0;
+      let anchorError = null;

-    dialog.mount({ initialMode: prefs.mode, initialPos: prefs.pos });
-    applyMode();
+      // One-time migration: dialog now defaults to bottom-left, so reset any
+      // previously-saved position from the bottom-right era.
+      if (prefs.pos && (prefs.pos.x !== 0 || prefs.pos.y !== 0)) {
+        console.info('[tat] resetting dialog position to new bottom-left default');
+        prefs.pos = { x: 0, y: 0 };
+        store.setPos(prefs.pos);
+      }

-    let lastSnapshot = null;
-    let lastAttr = null;
-    let lastDelta = 0;
-    let anchorError = null;
+      const dialog = new Dialog({
+        onTargetChange: function (v) {
+          const a = currentAttribute(); if (!a) return; store.setTarget(a.attr, v); render();
+        },
+        onModeChange: function (m) { store.setMode(m); prefs.mode = m; applyMode(); },
+        onPosChange: function (pos) { store.setPos(pos); },
+        onClose: function () { dialog.destroy(); },
+      });

-    function snapshot() {
-      const a = currentAttribute();
-      if (!a) return { error: "Couldn't read attribute — Torn may have updated the page." };
-      lastAttr = a.attr;
-      const summary = store.getSummary(a.attr);
-      return {
-        attr: a.attr, gym: a.gym, current: a.current,
-        target: store.getTarget(a.attr), perTrain: lastDelta, summary: summary,
-        warn: store._saveDisabled ? 'saving disabled this session' : null,
-        anchorError: anchorError,
-      };
-    }
+      dialog.mount({ initialMode: prefs.mode, initialPos: prefs.pos });
+      applyMode();

-    function render() { lastSnapshot = snapshot(); dialog.render(lastSnapshot); }
+      function snapshot() {
+        const a = currentAttribute();
+        if (!a) return { error: "Couldn't read attribute — Torn may have updated the page." };
+        lastAttr = a.attr;
+        const summary = store.getSummary(a.attr);
+        return {
+          attr: a.attr, gym: a.gym, current: a.current,
+          target: store.getTarget(a.attr), perTrain: lastDelta, summary: summary,
+          warn: store._saveDisabled ? 'saving disabled this session' : null,
+          anchorError: anchorError,
+        };
+      }

-    function applyMode() {
-      if (prefs.mode === 'anchored') {
-        const el = findAnchorElement();
-        if (el) {
-          const rect = el.getBoundingClientRect();
-          dialog.setMode('anchored', { canAnchor: true });
-          dialog._positionAnchored(rect);
-          if (typeof ResizeObserver !== 'undefined') {
-            const ro = new ResizeObserver(function () {
-              if (prefs.mode === 'anchored') dialog._positionAnchored(el.getBoundingClientRect());
-            });
-            ro.observe(el);
+      function render() { lastSnapshot = snapshot(); dialog.render(lastSnapshot); }
+
+      function applyMode() {
+        if (prefs.mode === 'anchored') {
+          const el = findAnchorElement();
+          if (el) {
+            dialog.setMode('anchored', { canAnchor: true, insertBefore: el });
+            anchorError = null;
+            return;
          }
-          anchorError = null;
+          // Anchor selector missed — don't snap to default, just keep current
+          // position and show a note.
+          anchorError = "Couldn't find the training UI on this page.";
+          render();
          return;
        }
-        // Anchor selector missed — don't snap to default, just keep current
-        // position and show a note.
-        anchorError = "Couldn't find the training form on this page.";
-        render();
-        return;
+        anchorError = null;
+        dialog.setMode('free');
      }
-      anchorError = null;
-      dialog.setMode('free');
-    }

-    render();
+      render();

-    let pending = false;
-    const observer = new MutationObserver(function () {
-      if (pending) return;
-      pending = true;
-      requestAnimationFrame(function () {
-        pending = false;
-        const a = currentAttribute();
-        if (a && (a.attr !== lastAttr || a.current !== (lastSnapshot && lastSnapshot.current))) render();
+      let pending = false;
+      const observer = new MutationObserver(function () {
+        if (pending) return;
+        pending = true;
+        requestAnimationFrame(function () {
+          pending = false;
+          const a = currentAttribute();
+          if (a && (a.attr !== lastAttr || a.current !== (lastSnapshot && lastSnapshot.current))) render();
+        });
      });
-    });
-    observer.observe(document.body, { childList: true, subtree: true, characterData: true });
+      observer.observe(document.body, { childList: true, subtree: true, characterData: true });

-    const prev = (currentAttribute() && currentAttribute().current) || 0;
-    startRequestInterceptor({
-      prevValue: prev, currentAttr: lastAttr,
-      onTrain: function (e) { store.recordTrain(e.attr, e.delta, e.ts); lastDelta = e.delta; render(); },
-      onParseFail: function (url) { console.warn('[tat] could not parse train response from', url); },
-    });
+      const prev = (currentAttribute() && currentAttribute().current) || 0;
+      startRequestInterceptor({
+        prevValue: prev, currentAttr: lastAttr,
+        onTrain: function (e) { store.recordTrain(e.attr, e.delta, e.ts); lastDelta = e.delta; render(); },
+        onParseFail: function (url) { console.warn('[tat] could not parse train response from', url); },
+      });
+    } catch (e) {
+      console.error('[tat] failed to start:', e);
+    }
  }

  // ===== self-test (only when location.hash === '#tat-test') =====
Author	SHA1	Message	Date
dev	e44bf2b3c9	style(ui): make docked dialog look more like a Torn panel (full-width, accent border) Previously the .tat-root.tat-anchored rule centered the dialog with a 720px max-width and no extra border, which made it look like a floating widget squeezed into the page rather than an embedded panel. The Torn gym page reference is a full-width panel with a thin dark border and a red top accent line. Changes: - margin: 0 0 12px 0 (full-width, no centering) - max-width: none (span the content area) - border-radius: 0 (Torn panels are flat, not rounded) - border: 1px solid #444 with border-top: 2px solid #c00 (red accent) - padding: 16px 20px (more breathing room, matching Torn panels) - .tat-root.tat-anchored .tat-header { cursor: default } (drag is disabled in anchored mode, so the move cursor was misleading) Free-floating mode is unchanged: the .tat-root base rule keeps its rounded shadowed look and .tat-header keeps cursor: move. Mirrored into the embedded TAT_STYLE in the bundle to keep the source and bundle in lockstep. Co-Authored-By: Claude Opus 4.8 <noreply@anthropic.com>	2026-06-07 14:02:11 -05:00
dev	b626fb7d41	fix(bundle): stop pre-escaping gym name in embedded dom.js (apostrophe fix) The embedded currentAttribute() in the bundle was returning gym: tatEsc(gym), but the render template in Dialog.render also escapes with tatEsc(s.gym). The double-escape turned 'George's' into 'George&#39;s', which the browser decoded to the visible text 'George's'. The src/dom.js source does NOT pre-escape (returns the raw gym string and lets the render template handle escaping once). This commit restores the mirror in the embedded dom.js so the bundle matches the source. No changes to src/dom.js (it was already correct). Co-Authored-By: Claude Opus 4.8 <noreply@anthropic.com>	2026-06-07 14:00:40 -05:00
dev	c6de810417	feat(bundle): mirror source changes in embedded userscript	2026-06-07 12:17:29 -05:00
dev	ca83996c6e	feat(main): anchor dialog by inserting before gymContentWrapper (dock in page flow)	2026-06-07 12:15:09 -05:00
dev	a1e79ac801	feat(ui): add tat-anchored CSS class and rework setMode to dock the dialog in the page flow	2026-06-07 12:14:05 -05:00
dev	7fddd84b6a	fix(bundle): mirror source fixes in embedded userscript	2026-06-07 09:00:40 -05:00
dev	2ed25c14de	fix(main): pass rect to setMode and remove redundant _positionAnchored call (anchor crash fix)	2026-06-07 09:00:04 -05:00
dev	95c655c24c	fix(gitignore): add rendered gym.php source to ignore list	2026-06-07 08:49:41 -05:00
Claude Opus 4.8	d494093139	fix(bundle): mirror source fixes in embedded userscript	2026-06-06 09:15:13 -05:00
Claude Opus 4.8	429a5d1b14	fix(main): anchor above Torn's `properties___HASH` list instead of looking for a form	2026-06-06 09:14:05 -05:00
Claude Opus 4.8	ac1c04ecad	fix(dom): find active gym button by `active` class instead of iterating all buttons	2026-06-06 09:13:22 -05:00
dev	8d89e40b91	fix(bundle): mirror source fixes in embedded userscript	2026-06-05 08:43:22 -05:00
dev	540416949b	fix(interceptor): parse "gained" message for reliable per-train delta	2026-06-05 08:39:16 -05:00
dev	6dd5d2e3f2	fix(dom): rewrite scraper to use Torn's CSS module structure (li class prefix, propertyValue span)	2026-06-05 08:38:39 -05:00
Claude	76e3ba2488	fix(bundle): mirror source fixes in embedded userscript Mirrors the three src/ changes into the embedded copy in torn-attribute-tracker.user.js: 1. Hoist the four let bindings (lastSnapshot, lastAttr, lastDelta, anchorError) to the top of start(), before dialog.mount() and applyMode(), so the anchor-miss branch of applyMode() can write anchorError without tripping the TDZ. 2. Default the floating dialog to bottom-left (left: 20px, bottom: 20px) in both Dialog.mount() and Dialog.setMode()'s 'free' branch. 3. One-time migration: if prefs.pos has any non-zero coordinate on load (a residue of the bottom-right era), reset it to {x: 0, y: 0} and log to the console. Stored position from any subsequent drag is preserved. 4. Wrap the start() body in try/catch and log failures to the console, so an unexpected error (e.g. TornTools conflict, future regressions) does not prevent the dialog from appearing. All four changes are byte-equivalent to the corresponding src/ changes; the build-time drift tests in tests/build.test.js still pass.	2026-06-01 22:24:57 -05:00
Claude	b03cc80665	fix(ui): default floating dialog position to bottom-left When the dialog first appears (mount) and when it switches to 'free' mode (setMode), pin it to the bottom-left corner of the viewport (left: 20px, bottom: 20px) rather than the previous bottom-right default. The header drag handler still uses left/top for the new position, so this change flows through cleanly on subsequent drags. Note: existing users with a saved pos.x/pos.y in localStorage will still see the dialog at the old transform-offset position until pos is reset in a follow-up migration (see next commit).	2026-06-01 22:24:01 -05:00
Claude	501c6746eb	fix(main): hoist let bindings to top of start() to fix TDZ on anchorError The applyMode() function reads/writes anchorError, lastSnapshot, and other let-bound state. Function declarations are hoisted, so applyMode() can fire from inside the dialog.mount() / applyMode() call sequence at the top of start() — but the let bindings themselves are not initialized until execution reaches their declaration line, which came later. When prefs.mode === 'anchored' and findAnchorElement() returns null, the new 'anchor missed' branch writes to anchorError and calls render(). Both access anchorError before its let binding is initialized, throwing ReferenceError: Cannot access 'anchorError' before initialization. Move all four let declarations (lastSnapshot, lastAttr, lastDelta, anchorError) to the top of start(), before dialog.mount() and applyMode(). Function declarations are unaffected — they are hoisted regardless.	2026-06-01 22:22:29 -05:00