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..9d81315 100644 --- a/docs/refractor-tier-mockup.html +++ b/docs/refractor-tier-mockup.html @@ -920,23 +920,23 @@ body { inset 1px 0 2px rgba(255,255,255,0.15); } -/* Diamond glow pulse animation — applied to whole container */ +/* 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 0 8px 2px 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)); + 0 0 14px 5px var(--diamond-glow-color, rgba(201,169,78,0.8)), + 0 0 24px 8px 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)); + 0 0 8px 2px var(--diamond-glow-color, rgba(201,169,78,0.6)); } } @@ -1365,11 +1365,11 @@ const TIER_PRESETS = { cornerSize: 30, cornerThick: 3, diamondFill: 1, - diamondColor: '#d46a1a', - diamondHighlight: '#f0a050', + diamondColor: '#1a6b1a', + diamondHighlight: '#40b040', diamondSize: 19, diamondGlow: 'off', - diamondGlowColor: '#d46a1a', + diamondGlowColor: '#1a6b1a', diamondEffect: 'none', }, t2: { @@ -1393,11 +1393,11 @@ const TIER_PRESETS = { cornerSize: 30, cornerThick: 3, diamondFill: 2, - diamondColor: '#b82020', - diamondHighlight: '#e85050', + diamondColor: '#2070b0', + diamondHighlight: '#50a0e8', diamondSize: 19, diamondGlow: 'off', - diamondGlowColor: '#b82020', + diamondGlowColor: '#2070b0', diamondEffect: 'none', }, t3: { @@ -1421,11 +1421,11 @@ const TIER_PRESETS = { cornerSize: 30, cornerThick: 3, diamondFill: 3, - diamondColor: '#7b2d8e', - diamondHighlight: '#b860d0', + diamondColor: '#a82020', + diamondHighlight: '#e85050', diamondSize: 19, diamondGlow: 'off', - diamondGlowColor: '#7b2d8e', + diamondGlowColor: '#a82020', diamondEffect: 'none', }, t4: { @@ -1449,11 +1449,11 @@ const TIER_PRESETS = { cornerSize: 35, cornerThick: 3, diamondFill: 4, - diamondColor: '#1a6af0', - diamondHighlight: '#60b0ff', + diamondColor: '#6b2d8e', + diamondHighlight: '#a060d0', diamondSize: 19, diamondGlow: 'on', - diamondGlowColor: '#1a6af0', + diamondGlowColor: '#6b2d8e', diamondEffect: 'none', }, t4b: { @@ -1477,11 +1477,11 @@ const TIER_PRESETS = { cornerSize: 35, cornerThick: 3, diamondFill: 4, - diamondColor: '#1a6af0', - diamondHighlight: '#60b0ff', + diamondColor: '#6b2d8e', + diamondHighlight: '#a060d0', diamondSize: 19, diamondGlow: 'on', - diamondGlowColor: '#1a6af0', + diamondGlowColor: '#6b2d8e', diamondEffect: 'none', }, }; @@ -1563,10 +1563,8 @@ function renderCardHTML(tierKey) { 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%)`; } - // 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};` : ''; + const glowClass = t.diamondGlow === 'on' ? ' diamond-glow' : ''; + const glowVar = t.diamondGlow === 'on' ? ` --diamond-glow-color: ${t.diamondGlowColor};` : ''; // Build container inline style — effects stack on top of the base box-shadow let containerStyle = `width:${ds}px;height:${ds}px;${glowVar}`; diff --git a/docs/refractor-visual-spec.md b/docs/refractor-visual-spec.md index 313af1a..1b96381 100644 --- a/docs/refractor-visual-spec.md +++ b/docs/refractor-visual-spec.md @@ -117,10 +117,10 @@ Metallic effect **automatically** enables the glow pulse (no separate toggle nee | Tier | Color (body) | Highlight (bright edge) | Glow Color | Intent | |------|-------------|------------------------|------------|--------| -| T1 | `#d46a1a` | `#f0a050` | `#d46a1a` | Orange | -| T2 | `#b82020` | `#e85050` | `#b82020` | Red | -| T3 | `#7b2d8e` | `#b860d0` | `#7b2d8e` | Purple | -| T4 | `#1a6af0` | `#60b0ff` | `#1a6af0` | Blue flame | +| T1 | `#1a6b1a` | `#40b040` | `#1a6b1a` | Green | +| T2 | `#2070b0` | `#50a0e8` | `#2070b0` | Blue | +| T3 | `#a82020` | `#e85050` | `#a82020` | Red | +| T4 | `#6b2d8e` | `#a060d0` | `#6b2d8e` | Purple | Progression: warm → hot → regal → transcendent. @@ -235,9 +235,9 @@ L-shaped corner brackets on all four card corners. ### Database/API considerations The diamond fill count is already derivable from the tier level — no new database fields needed: -- `refractor_tier = 1` → `diamondFill = 1`, color = orange -- `refractor_tier = 2` → `diamondFill = 2`, color = red -- `refractor_tier = 3` → `diamondFill = 3`, color = purple -- `refractor_tier = 4` → `diamondFill = 4`, color = blue-flame +- `refractor_tier = 1` → `diamondFill = 1`, color = green +- `refractor_tier = 2` → `diamondFill = 2`, color = blue +- `refractor_tier = 3` → `diamondFill = 3`, color = red +- `refractor_tier = 4` → `diamondFill = 4`, color = purple Diamond colors are purely visual (CSS) — they don't need to be stored.