diff --git a/docs/card-cosmetics-playground.html b/docs/card-cosmetics-playground.html new file mode 100644 index 0000000..13d58a3 --- /dev/null +++ b/docs/card-cosmetics-playground.html @@ -0,0 +1,810 @@ + + + + + +Paper Dynasty — Card Cosmetics Explorer + + + + + +
+

Card Cosmetics Explorer

+

Paper Dynasty — Evolution Visual System

+ +
+ + + + + + +
+ +
+

Frame

+ + + + + +
+ +
+

Header Background

+ + + + +
+ +
+

Column Backgrounds

+ + + + + +
+ +
+

Gradient Bars

+ + + + +
+ +
+

Evolution Badge

+ + + + + +
+ +
+

Rarity Glow

+ + + +
+ +
+

Team Color

+
+ + Team primary color +
+
+ + + + + + + + +
+
+
+ + +
+
+
+ +
+
+
+
+ R +
+
+
+
Mike Trout
+
CF   LF   RF
+
+
+
+
+
+
+ ALL-STAR +
+
+
+
+
+
stealing A-12
+
running 14
+
bunting B
+
hit & run A
+
2025 Live
+
+
+ + +
+
+
+
1
+
2
+
3
+
+
+
1
+
2
+
3
+
+
+ + +
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+ +
+
+ Default card — no cosmetics applied. + +
+
+
+ + + + diff --git a/docs/refractor-tier-mockup.html b/docs/refractor-tier-mockup.html index ec06cef..36b0ae5 100644 --- a/docs/refractor-tier-mockup.html +++ b/docs/refractor-tier-mockup.html @@ -886,57 +886,57 @@ body { .pd-card.anim-on.tier-t4b .col-header-right-group .col-header:nth-child(3)::before { animation-delay: -1.35s; } /* ═══════════════════════════════════════════════════════ - TIER DIAMOND INDICATOR — 4-quadrant fill at x=600, y=95 - A square rotated 45deg, divided into a 2x2 grid. - Fill order: 1st(right) → 2nd(top) → 3rd(left) → home(bottom) + TIER DIAMOND INDICATOR — baseball diamond with 4 base diamonds + Outer diamond outline + 4 small diamond-shaped bases inside. + Fill order: 1st/east(right) → 2nd/north(top) → 3rd/west(left) → home/south(bottom) T0=none, T1=1st, T2=1st+2nd, T3=1st+2nd+3rd, T4=all 4 ═══════════════════════════════════════════════════════ */ .tier-diamond { position: absolute; left: 600px; top: 78.5px; - transform: translate(-50%, -50%) rotate(45deg); - display: grid; - grid-template: 1fr 1fr / 1fr 1fr; - gap: 2px; + transform: translate(-50%, -50%); z-index: 20; pointer-events: none; - /* Dark gap color gives the cross visible definition */ - background: rgba(0,0,0,0.75); - border-radius: 2px; - box-shadow: - 0 0 0 1.5px rgba(0,0,0,0.7), - 0 2px 5px rgba(0,0,0,0.5); + filter: drop-shadow(0 1px 3px rgba(0,0,0,0.6)); } -.diamond-quad { - background: rgba(0,0,0,0.3); +.tier-diamond svg { + display: block; } -.diamond-quad.filled { - box-shadow: - inset 0 1px 2px rgba(255,255,255,0.45), - inset 0 -1px 2px rgba(0,0,0,0.35), - inset 1px 0 2px rgba(255,255,255,0.15); +.tier-diamond .diamond-outline { + fill: none; + stroke: rgba(255,255,255,0.2); + stroke-width: 0.7; } -/* Diamond glow pulse animation — applied to whole container */ +.tier-diamond .diamond-base { + fill: rgba(0,0,0,0.25); + stroke: rgba(255,255,255,0.15); + stroke-width: 0.4; + transition: fill 0.3s, stroke 0.3s, filter 0.3s; +} + +.tier-diamond .diamond-base.filled { + stroke-width: 0.6; + filter: brightness(1.1); +} + +/* Diamond glow pulse animation — applied to whole container for T4 */ @keyframes diamond-glow-pulse { - 0% { box-shadow: - 0 0 0 1.5px rgba(0,0,0,0.7), - 0 2px 5px rgba(0,0,0,0.5), - 0 0 5px 1px var(--diamond-glow-color, rgba(201,169,78,0.6)); + 0% { filter: + drop-shadow(0 1px 3px rgba(0,0,0,0.6)) + drop-shadow(0 0 4px var(--diamond-glow-color, rgba(201,169,78,0.6))); } - 50% { box-shadow: - 0 0 0 1.5px rgba(0,0,0,0.5), - 0 2px 4px rgba(0,0,0,0.3), - 0 0 8px 3px var(--diamond-glow-color, rgba(201,169,78,0.8)), - 0 0 14px 5px var(--diamond-glow-color, rgba(201,169,78,0.25)); + 50% { filter: + drop-shadow(0 1px 2px rgba(0,0,0,0.4)) + drop-shadow(0 0 8px var(--diamond-glow-color, rgba(201,169,78,0.8))) + drop-shadow(0 0 16px var(--diamond-glow-color, rgba(201,169,78,0.3))); } - 100% { box-shadow: - 0 0 0 1.5px rgba(0,0,0,0.7), - 0 2px 5px rgba(0,0,0,0.5), - 0 0 5px 1px var(--diamond-glow-color, rgba(201,169,78,0.6)); + 100% { filter: + drop-shadow(0 1px 3px rgba(0,0,0,0.6)) + drop-shadow(0 0 4px var(--diamond-glow-color, rgba(201,169,78,0.6))); } } @@ -944,15 +944,6 @@ body { animation: diamond-glow-pulse 2s ease-in-out infinite; } -/* Metallic sheen — boosted inset highlights on filled quads */ -.diamond-quad.metallic.filled { - box-shadow: - inset 0 1px 3px rgba(255,255,255,0.7), - inset 0 -1px 2px rgba(0,0,0,0.5), - inset 1px 0 3px rgba(255,255,255,0.3), - inset -1px 0 2px rgba(0,0,0,0.2); -} - @@ -1153,17 +1144,6 @@ body { -
- - -
@@ -1342,7 +1322,6 @@ const TIER_PRESETS = { diamondSize: 19, diamondGlow: 'off', diamondGlowColor: '#000000', - diamondEffect: 'none', }, t1: { name: 'T1 Base Chrome', @@ -1365,12 +1344,11 @@ const TIER_PRESETS = { cornerSize: 30, cornerThick: 3, diamondFill: 1, - diamondColor: '#d46a1a', - diamondHighlight: '#f0a050', + diamondColor: '#a82020', + diamondHighlight: '#e85050', diamondSize: 19, diamondGlow: 'off', - diamondGlowColor: '#d46a1a', - diamondEffect: 'none', + diamondGlowColor: '#a82020', }, t2: { name: 'T2 Refractor', @@ -1393,12 +1371,11 @@ const TIER_PRESETS = { cornerSize: 30, cornerThick: 3, diamondFill: 2, - diamondColor: '#b82020', - diamondHighlight: '#e85050', + diamondColor: '#5a4fbf', + diamondHighlight: '#9a8ff0', diamondSize: 19, diamondGlow: 'off', - diamondGlowColor: '#b82020', - diamondEffect: 'none', + diamondGlowColor: '#5a4fbf', }, t3: { name: 'T3 Gold Refractor', @@ -1421,12 +1398,11 @@ const TIER_PRESETS = { cornerSize: 30, cornerThick: 3, diamondFill: 3, - diamondColor: '#7b2d8e', - diamondHighlight: '#b860d0', + diamondColor: '#b8942a', + diamondHighlight: '#e8c850', diamondSize: 19, diamondGlow: 'off', - diamondGlowColor: '#7b2d8e', - diamondEffect: 'none', + diamondGlowColor: '#c9a94e', }, t4: { name: 'T4 Superfractor', @@ -1449,12 +1425,11 @@ const TIER_PRESETS = { cornerSize: 35, cornerThick: 3, diamondFill: 4, - diamondColor: '#1a6af0', - diamondHighlight: '#60b0ff', + diamondColor: '#c9a94e', + diamondHighlight: '#f0d878', diamondSize: 19, diamondGlow: 'on', - diamondGlowColor: '#1a6af0', - diamondEffect: 'none', + diamondGlowColor: '#c9a94e', }, t4b: { name: 'T4b Superfractor (full-card rainbow)', @@ -1477,12 +1452,11 @@ const TIER_PRESETS = { cornerSize: 35, cornerThick: 3, diamondFill: 4, - diamondColor: '#1a6af0', - diamondHighlight: '#60b0ff', + diamondColor: '#c9a94e', + diamondHighlight: '#f0d878', diamondSize: 19, diamondGlow: 'on', - diamondGlowColor: '#1a6af0', - diamondEffect: 'none', + diamondGlowColor: '#c9a94e', }, }; @@ -1548,62 +1522,51 @@ function renderCardHTML(tierKey) {
`; } - // Tier diamond indicator — 4-quadrant fill (baseball base path) - // Grid reading order: top-left, top-right, bottom-left, bottom-right - // After rotate(45deg): top-left=LEFT(3rd), top-right=BOTTOM(home), bottom-left=TOP(2nd), bottom-right=RIGHT(1st) - // Fill order: 1st(right) → 2nd(top) → 3rd(left) → home(bottom) + // Tier diamond indicator — baseball diamond with 4 base-shaped diamonds inside + // Outer diamond outline, 4 small diamonds at: east(1B), north(2B), west(3B), south(Home) + // Fill order: 1st/east → 2nd/north → 3rd/west → home/south let diamondHTML = ''; if (t.diamondFill > 0) { const ds = t.diamondSize; - const effect = t.diamondEffect || 'none'; + const glowClass = t.diamondGlow === 'on' ? ' diamond-glow' : ''; + const glowVar = t.diamondGlow === 'on' ? `--diamond-glow-color: ${t.diamondGlowColor};` : ''; - // Standard gradient for filled quads; metallic uses a different one - let diamondBG = `linear-gradient(135deg, ${t.diamondHighlight} 0%, ${t.diamondColor} 50%, ${darkenHex(t.diamondColor, 0.75)} 100%)`; - if (effect === 'metallic') { - diamondBG = `linear-gradient(135deg, rgba(255,255,255,0.9) 0%, ${t.diamondHighlight} 20%, ${t.diamondColor} 50%, ${darkenHex(t.diamondColor, 0.6)} 80%, ${t.diamondHighlight} 100%)`; + const firstFilled = t.diamondFill >= 1; // 1st base / east + const secFilled = t.diamondFill >= 2; // 2nd base / north + const thirdFilled = t.diamondFill >= 3; // 3rd base / west + const homeFilled = t.diamondFill >= 4; // home plate / south + + // SVG viewBox is 100x100, diamond centered + // Outer diamond: points at N(50,5) E(95,50) S(50,95) W(5,50) + // Each base is a small diamond (~16x16 units) + const baseFill = `${t.diamondColor}`; + const baseHighlight = `${t.diamondHighlight}`; + const emptyFill = 'rgba(0,0,0,0.25)'; + const emptyStroke = 'rgba(255,255,255,0.15)'; + + function baseEl(cx, cy, filled, id) { + const r = 8; // half-size of each base diamond + const pts = `${cx},${cy-r} ${cx+r},${cy} ${cx},${cy+r} ${cx-r},${cy}`; + if (filled) { + return ``; + } + return ``; } - // Metallic effect automatically includes glow pulse - const wantsGlow = t.diamondGlow === 'on' || effect === 'metallic'; - const glowClass = wantsGlow ? ' diamond-glow' : ''; - const glowVar = wantsGlow ? ` --diamond-glow-color: ${t.diamondGlowColor || t.diamondColor};` : ''; - - // Build container inline style — effects stack on top of the base box-shadow - let containerStyle = `width:${ds}px;height:${ds}px;${glowVar}`; - if (effect === 'bloom') { - containerStyle += `box-shadow: 0 0 0 1.5px rgba(0,0,0,0.7), 0 0 8px 3px ${hexToRGBA(t.diamondColor, 0.5)}, 0 0 16px 6px ${hexToRGBA(t.diamondColor, 0.25)};`; - } else if (effect === 'border') { - containerStyle += `border: 1.5px solid ${t.diamondHighlight}; box-shadow: 0 0 0 1px rgba(0,0,0,0.5), 0 0 4px 1px ${hexToRGBA(t.diamondHighlight, 0.3)};`; - } else if (effect === 'shadow') { - containerStyle += `box-shadow: 0 0 0 1.5px rgba(0,0,0,0.7), 0 3px 8px 2px ${hexToRGBA(t.diamondColor, 0.45)}, 0 1px 3px rgba(0,0,0,0.6);`; - } else if (effect === 'escalation') { - containerStyle += `border: 1.5px solid ${t.diamondHighlight};`; - const intensity = t.diamondFill / 4; // 0.25 → 1.0 - const bloomSize = Math.round(4 + intensity * 12); - const bloomSpread = Math.round(1 + intensity * 5); - containerStyle += `box-shadow: 0 0 0 1px rgba(0,0,0,0.5), 0 0 ${bloomSize}px ${bloomSpread}px ${hexToRGBA(t.diamondColor, 0.2 + intensity * 0.3)};`; - } - // metallic has no container-level effect — it only changes gradient + quad shadows - - // Extra CSS class for metallic quads - const metallicClass = effect === 'metallic' ? ' metallic' : ''; - - // Empirically verified grid-to-visual mapping after rotate(45deg): - // div 1 (grid top-left) → LEFT = 3rd base - // div 2 (grid top-right) → BOTTOM = home plate - // div 3 (grid bottom-left) → TOP = 2nd base - // Verified mapping: div1→TOP, div2→RIGHT, div3→LEFT, div4→BOTTOM - const firstFilled = t.diamondFill >= 1; // 1st base / right = div 2 - const secFilled = t.diamondFill >= 2; // 2nd base / top = div 1 - const thirdFilled = t.diamondFill >= 3; // 3rd base / left = div 3 - const homeFilled = t.diamondFill >= 4; // home plate / bottom = div 4 diamondHTML = - `
` + - `
` + - `
` + - `
` + - `
` + - `
`; + `
` + + `` + + `` + + `` + + `` + + `` + + `` + + `` + + baseEl(76, 50, firstFilled, 'base-1b') + + baseEl(50, 24, secFilled, 'base-2b') + + baseEl(24, 50, thirdFilled, 'base-3b') + + baseEl(50, 76, homeFilled, 'base-home') + + `
`; } // Result rows @@ -1803,7 +1766,6 @@ function loadControlsFromState() { document.getElementById('ctrlDiamondSize').value = t.diamondSize; document.getElementById('ctrlDiamondGlow').value = t.diamondGlow; document.getElementById('ctrlDiamondGlowColor').value = t.diamondGlowColor; - document.getElementById('ctrlDiamondEffect').value = t.diamondEffect || 'none'; updateValueLabels(); } @@ -1833,7 +1795,6 @@ function saveControlsToState() { t.diamondSize = parseInt(document.getElementById('ctrlDiamondSize').value); t.diamondGlow = document.getElementById('ctrlDiamondGlow').value; t.diamondGlowColor = document.getElementById('ctrlDiamondGlowColor').value; - t.diamondEffect = document.getElementById('ctrlDiamondEffect').value; } /* ───────────────────────────────────────────────────────── @@ -1944,72 +1905,35 @@ ${cls} .red-gradient { background-image: ${redGrad}; }` + (t.diamondFill > 0 ? ` -/* Tier diamond indicator — 4-quadrant fill at x=600, y=95 */ +/* Tier diamond indicator — baseball diamond with 4 base diamonds */ ${cls} .tier-diamond { position: absolute; left: 600px; top: 78.5px; width: ${t.diamondSize}px; height: ${t.diamondSize}px; - transform: translate(-50%, -50%) rotate(45deg); - display: grid; - grid-template: 1fr 1fr / 1fr 1fr; - gap: 2px; + transform: translate(-50%, -50%); z-index: 20; pointer-events: none; - background: rgba(0,0,0,0.75); - border-radius: 2px; - box-shadow: - 0 0 0 1.5px rgba(0,0,0,0.7), - 0 2px 5px rgba(0,0,0,0.5); + filter: drop-shadow(0 1px 3px rgba(0,0,0,0.6)); } -${cls} .diamond-quad { - background: rgba(0,0,0,0.3); +${cls} .tier-diamond svg { display: block; } +${cls} .tier-diamond .diamond-outline { + fill: none; + stroke: rgba(255,255,255,0.2); + stroke-width: 0.7; } -${cls} .diamond-quad.filled { - background: ${(t.diamondEffect === 'metallic') - ? `linear-gradient(135deg, rgba(255,255,255,0.9) 0%, ${t.diamondHighlight} 20%, ${t.diamondColor} 50%, ${darkenHex(t.diamondColor, 0.6)} 80%, ${t.diamondHighlight} 100%)` - : `linear-gradient(135deg, ${t.diamondHighlight} 0%, ${t.diamondColor} 50%, ${darkenHex(t.diamondColor, 0.75)} 100%)`}; - box-shadow: - ${(t.diamondEffect === 'metallic') - ? `inset 0 1px 3px rgba(255,255,255,0.7), - inset 0 -1px 2px rgba(0,0,0,0.5), - inset 1px 0 3px rgba(255,255,255,0.3), - inset -1px 0 2px rgba(0,0,0,0.2)` - : `inset 0 1px 2px rgba(255,255,255,0.45), - inset 0 -1px 2px rgba(0,0,0,0.35), - inset 1px 0 2px rgba(255,255,255,0.15)`}; -}` + (() => { - const eff = t.diamondEffect || 'none'; - let effectCSS = ''; - if (eff === 'bloom') { - effectCSS = ` -${cls} .tier-diamond { - box-shadow: 0 0 0 1.5px rgba(0,0,0,0.7), 0 0 8px 3px ${hexToRGBA(t.diamondColor, 0.5)}, 0 0 16px 6px ${hexToRGBA(t.diamondColor, 0.25)}; -}`; - } else if (eff === 'border') { - effectCSS = ` -${cls} .tier-diamond { - border: 1.5px solid ${t.diamondHighlight}; - box-shadow: 0 0 0 1px rgba(0,0,0,0.5), 0 0 4px 1px ${hexToRGBA(t.diamondHighlight, 0.3)}; -}`; - } else if (eff === 'shadow') { - effectCSS = ` -${cls} .tier-diamond { - box-shadow: 0 0 0 1.5px rgba(0,0,0,0.7), 0 3px 8px 2px ${hexToRGBA(t.diamondColor, 0.45)}, 0 1px 3px rgba(0,0,0,0.6); -}`; - } else if (eff === 'escalation') { - const intensity = t.diamondFill / 4; - const bloomSize = Math.round(4 + intensity * 12); - const bloomSpread = Math.round(1 + intensity * 5); - effectCSS = ` -${cls} .tier-diamond { - border: 1.5px solid ${t.diamondHighlight}; - box-shadow: 0 0 0 1px rgba(0,0,0,0.5), 0 0 ${bloomSize}px ${bloomSpread}px ${hexToRGBA(t.diamondColor, 0.2 + intensity * 0.3)}; -}`; - } - return effectCSS; -})() + (t.diamondGlow === 'on' ? ` +${cls} .tier-diamond .diamond-base { + fill: rgba(0,0,0,0.25); + stroke: rgba(255,255,255,0.15); + stroke-width: 0.4; +} +${cls} .tier-diamond .diamond-base.filled { + fill: url(#baseFillGrad); + stroke: ${t.diamondHighlight}; + stroke-width: 0.6; + filter: brightness(1.1); +}` + (t.diamondGlow === 'on' ? ` ${cls} .tier-diamond.diamond-glow { --diamond-glow-color: ${t.diamondGlowColor}; animation: diamond-glow-pulse 2s ease-in-out infinite;