From 24e91899f4f71829aadd1f63bb00c09278730d2a Mon Sep 17 00:00:00 2001 From: luxick Date: Wed, 22 Jul 2026 19:02:47 +0200 Subject: [PATCH] Update game-datcards-improved.user.js --- js/game-datcards-improved.user.js | 130 +----------------------------- 1 file changed, 2 insertions(+), 128 deletions(-) diff --git a/js/game-datcards-improved.user.js b/js/game-datcards-improved.user.js index a50042e..c0e3ebc 100644 --- a/js/game-datcards-improved.user.js +++ b/js/game-datcards-improved.user.js @@ -196,106 +196,11 @@ const FONT_STYLE_ID = 'gdc-card-font'; const FONT_PREF_KEY = 'gdc-card-font-enabled'; - // The official sizes are point sizes on a printed card, and CSS pt units say - // nothing about how large the app happens to draw that card. So instead of - // using pt directly, measure each card and derive how many layout pixels one - // point of the printed card is worth; --gdc-pt below carries that value. - // Printed datacard width, 8in. Measured back from an official card: its body - // text sits at ~1.3% of the card width, which puts 7.5pt at this reference. - // Raising it shrinks all card text and lowering it grows it, so it doubles as - // the tuning knob for the overall type size: - // localStorage.setItem('gdc-card-width-pt', 560) - const CARD_WIDTH_PT = 576; - - function cardWidthPt() { - return Number(localStorage.getItem('gdc-card-width-pt')) || CARD_WIDTH_PT; - } - - function pt(size) { - return `calc(${size} * var(--gdc-pt, 1.333px))`; - } - - // offsetWidth is the untransformed layout width, so this stays correct - // whether the app zooms cards by scaling the layout or by a CSS transform. - function updateFontScale() { - const reference = cardWidthPt(); - document.querySelectorAll('.unit').forEach((unit) => { - const width = unit.offsetWidth; - if (!width) return; - const value = width / reference + 'px'; - if (unit.style.getPropertyValue('--gdc-pt') !== value) { - unit.style.setProperty('--gdc-pt', value); - } - }); - } - + // Family swap only: sizes, weights and casing are left to the app so the two + // renderings can be compared side by side. function cardFontCss() { return ` .unit, .unit * { font-family: ${CARD_FONT}, sans-serif !important; } - - /* Unit name: extra bold 15pt, slightly tracked out as on the printed card */ - .unit .name_container .name { - font-weight: 800 !important; - font-size: ${pt(15)} !important; - letter-spacing: 0.02em !important; - } - - /* Unit description: light italic 8pt */ - .unit .name_container .subname, - .unit .header .description { - font-weight: 300 !important; - font-style: italic !important; - font-size: ${pt(8)} !important; - } - - /* Unit values: bold 14pt */ - .unit .stats_container .value, - .unit .stats_container .value-text { - font-weight: 700 !important; - font-size: ${pt(14)} !important; - } - - /* Section banners ("RANGED WEAPONS", "ABILITIES", "KEYWORDS:") are set a - step larger than body text on the printed card, and tracked out. */ - .unit .heading .title:not(.center), - .unit .invul .title, - .unit .footer .title { - font-weight: 700 !important; - font-size: ${pt(9)} !important; - letter-spacing: 0.04em !important; - } - - /* General weapon and abilities text: regular or bold 7.5pt */ - .unit .stats_container .caption, - .unit .heading .title.center, - .unit .ability .name, - .unit .ability .value, - .unit .footer .value { - font-weight: 700 !important; - font-size: ${pt(7.5)} !important; - } - - .unit .weapon .value, - .unit .ability .title, - .unit .ability .description, - .unit .description-container .description { - font-weight: 400 !important; - font-size: ${pt(7.5)} !important; - } - - /* Keyword lists are small caps, not the plain title case the app uses. */ - .unit .footer .value { - font-variant-caps: small-caps !important; - } - - /* Weapon abilities (the keyword/rule chips): bold 5.5pt */ - .unit .keyword-button, - .unit .keyword-button span, - .unit .rule-button, - .unit .rule-button span { - font-weight: 700 !important; - font-size: ${pt(5.5)} !important; - } `; } @@ -303,33 +208,11 @@ return localStorage.getItem(FONT_PREF_KEY) === '1'; } - // Cards get re-rendered on every edit and resized by the zoom control, so the - // scale has to be recomputed rather than set once. - var domObserver = null; - var sizeObserver = null; - var scalePending = false; - - function scheduleFontScale() { - if (scalePending) return; - scalePending = true; - requestAnimationFrame(() => { - scalePending = false; - updateFontScale(); - document.querySelectorAll('.unit').forEach((unit) => sizeObserver.observe(unit)); - }); - } - function applyCardFont(enabled) { const existing = document.getElementById(FONT_STYLE_ID); if (!enabled) { if (existing) existing.remove(); - if (domObserver) { - domObserver.disconnect(); - sizeObserver.disconnect(); - domObserver = null; - sizeObserver = null; - } return; } @@ -337,15 +220,6 @@ style.id = FONT_STYLE_ID; style.textContent = cardFontCss(); if (!existing) document.head.appendChild(style); - - if (!domObserver) { - // childList only: the scale is written to the cards as an inline custom - // property, and watching attributes here would retrigger on our own write. - sizeObserver = new ResizeObserver(scheduleFontScale); - domObserver = new MutationObserver(scheduleFontScale); - domObserver.observe(document.body, { childList: true, subtree: true }); - } - scheduleFontScale(); } function syncCardFontButton() {