fix: improve diamond tier indicator visibility #194

cal · 2026-04-07T13:41:10Z

cal commented

2026-04-07 13:41:10 +00:00

Summary

Add silver backing div behind diamond so the X gap lines are visible
Darken unfilled quads (rgba(0,0,0,0.3) → 0.55) for better contrast
Diamond grid background now transparent so backing shines through gaps only

Deploy note

These are volume-mounted template files, not in the Docker image. After merge, manually copy to each server:

scp storage/templates/tier_style.html <host>:<path>/storage/templates/
scp storage/templates/player_card.html <host>:<path>/storage/templates/

Env	Host	Path
Dev	`ssh pd-database`	`/home/cal/container-data/dev-pd-database/`
Prod	`ssh akamai`	`/root/container-data/paper-dynasty/`

Test plan

Verified on dev — T1 diamond shows green filled quad with silver X lines

## Summary - Add silver backing div behind diamond so the X gap lines are visible - Darken unfilled quads (`rgba(0,0,0,0.3)` → `0.55`) for better contrast - Diamond grid background now transparent so backing shines through gaps only ## Deploy note These are **volume-mounted template files**, not in the Docker image. After merge, manually copy to each server: ``` scp storage/templates/tier_style.html <host>:<path>/storage/templates/ scp storage/templates/player_card.html <host>:<path>/storage/templates/ ``` | Env | Host | Path | |-----|------|------| | Dev | `ssh pd-database` | `/home/cal/container-data/dev-pd-database/` | | Prod | `ssh akamai` | `/root/container-data/paper-dynasty/` | ## Test plan - [x] Verified on dev — T1 diamond shows green filled quad with silver X lines

cal added 1 commit 2026-04-07 13:41:12 +00:00

fix: improve diamond tier indicator visibility abbcd75382

- Add silver backing div behind diamond so the X gap lines pop
- Darken unfilled quads for better contrast with filled tier color
- Make diamond grid background transparent (backing shows through gaps)

NOTE: These are volume-mounted template files, NOT baked into the
Docker image. After merging, manually deploy to each server:

  scp storage/templates/tier_style.html <host>:<container-data>/storage/templates/
  scp storage/templates/player_card.html <host>:<container-data>/storage/templates/

Hosts:
  Dev:  ssh pd-database → /home/cal/container-data/dev-pd-database/
  Prod: ssh akamai → /root/container-data/paper-dynasty/

Co-Authored-By: Claude Opus 4.6 (1M context) <noreply@anthropic.com>

Claude added the

ai-reviewing

label 2026-04-07 13:45:52 +00:00

Claude reviewed 2026-04-07 13:47:30 +00:00

Claude left a comment

AI Code Review

Files Reviewed

storage/templates/player_card.html (modified)
storage/templates/tier_style.html (modified)

Findings

Correctness

No issues found.

Backing div is placed before .tier-diamond in HTML and uses z-index: 19 vs diamond's z-index: 20 — correct layering ✅
Both backing div and its CSS are inside {% if refractor_tier is defined and refractor_tier > 0 %} — conditional rendering is consistent ✅
Sizing: backing is 44px × 44px; diamond grid is 2×19px + 2px gap = 40px × 40px. The 4px size differential centers the silver backing with a 2px overlap on each edge, ensuring the 2px cross gaps read as silver X lines as intended ✅
Background change rgba(0,0,0,0.75) → transparent on .tier-diamond correctly allows backing to show through the gap: 2px grid lines ✅
Unfilled quad darkening 0.3 → 0.55 is a straightforward contrast improvement ✅
T3/T4 shimmer, prismatic sweep, and glow-pulse animations are untouched ✅

Security

No issues found. Template files only; no user input paths involved.

Style & Conventions

Minor: .tier-diamond-backing and .tier-diamond share six properties in common (position, left, top, transform, border-radius, pointer-events). These are duplicated across two separate blocks in the diff. The local working tree has already refactored this into a combined selector — consider squashing that cleanup into this commit to avoid a follow-up.

Suggestions

The silver backing (rgba(200,210,220,0.9)) currently applies identically across all tiers (T1–T4). If future tiers use different gap colours, consider parameterising the backing colour via the diamond_colors dict (e.g. a backing key). Non-blocking, cosmetic.

Verdict: COMMENT

No blocking issues. Implementation correctly achieves the stated visual goals. Posting as COMMENT due to self-review restriction (PR author = reviewer).

Automated review by Claude PR Reviewer

## AI Code Review ### Files Reviewed - `storage/templates/player_card.html` (modified) - `storage/templates/tier_style.html` (modified) ### Findings #### Correctness No issues found. - Backing div is placed before `.tier-diamond` in HTML and uses `z-index: 19` vs diamond's `z-index: 20` — correct layering ✅ - Both backing div and its CSS are inside `{% if refractor_tier is defined and refractor_tier > 0 %}` — conditional rendering is consistent ✅ - Sizing: backing is `44px × 44px`; diamond grid is `2×19px + 2px gap = 40px × 40px`. The 4px size differential centers the silver backing with a 2px overlap on each edge, ensuring the 2px cross gaps read as silver X lines as intended ✅ - Background change `rgba(0,0,0,0.75)` → `transparent` on `.tier-diamond` correctly allows backing to show through the `gap: 2px` grid lines ✅ - Unfilled quad darkening `0.3` → `0.55` is a straightforward contrast improvement ✅ - T3/T4 shimmer, prismatic sweep, and glow-pulse animations are untouched ✅ #### Security No issues found. Template files only; no user input paths involved. #### Style & Conventions - **Minor**: `.tier-diamond-backing` and `.tier-diamond` share six properties in common (`position`, `left`, `top`, `transform`, `border-radius`, `pointer-events`). These are duplicated across two separate blocks in the diff. The local working tree has already refactored this into a combined selector — consider squashing that cleanup into this commit to avoid a follow-up. #### Suggestions - The silver backing (`rgba(200,210,220,0.9)`) currently applies identically across all tiers (T1–T4). If future tiers use different gap colours, consider parameterising the backing colour via the `diamond_colors` dict (e.g. a `backing` key). Non-blocking, cosmetic. ### Verdict: COMMENT No blocking issues. Implementation correctly achieves the stated visual goals. Posting as COMMENT due to self-review restriction (PR author = reviewer). --- *Automated review by Claude PR Reviewer*

cal force-pushed fix/diamond-indicator-styling from abbcd75382 to 73be3dd6f3

2026-04-07 13:47:32 +00:00

Compare

Claude added

ai-reviewed

and removed

ai-reviewing

labels 2026-04-07 13:47:52 +00:00

Claude approved these changes 2026-04-07 13:58:02 +00:00

Dismissed

Claude left a comment

Approved via pd-pr

Claude approved these changes 2026-04-07 13:58:11 +00:00

Claude left a comment

Approved via pd-pr

cal merged commit 19003215a3 into main

2026-04-07 13:58:13 +00:00

cal deleted branch fix/diamond-indicator-styling

2026-04-07 13:58:13 +00:00

cal referenced this issue from a commit

2026-04-07 13:58:13 +00:00

Merge pull request 'fix: improve diamond tier indicator visibility' (#194) from fix/diamond-indicator-styling into main

Sign in to join this conversation.

No reviewers

No Milestone

No project

No Assignees

2 Participants

Notifications

Due Date

The due date is invalid or out of range. Please use the format 'yyyy-mm-dd'.

No due date set.

Dependencies

No dependencies set.

Reference: cal/paper-dynasty-database#194