Skip to content

feat(021): mark an unowned tile with words, not a faded image - #88

Merged
plainprogrammer merged 14 commits into
mainfrom
021-unowned-tile-marker
Oct 14, 2026
Merged

plainprogrammer merged 14 commits into
mainfrom
021-unowned-tile-marker

Conversation

@plainprogrammer

Copy link
Copy Markdown
Owner

The tile of a card you don't own now shows the card image exactly as supplied, with a visible "Not owned" marker below it, instead of the image at 45% opacity.

Closes #65

Why

Scryfall's image guidelines say "Do not blur, sharpen, desaturate, or color-shift card images." A faded image blends with the page behind it. The maintainer compared four rendered looks on 2026-10-13 and chose this one (spec 021, decision 1).

What changed

  • The image. An override in collector/additions.css returns the unowned tile's image and its no-image placeholder to full opacity. components.css is the design-system export and isn't edited; the override wins by stylesheet order.
  • The marker. catalog/entries/_tile adds a "Not owned" c-tag on a row of its own under the set and language tags, inside the link, so a screen reader hears it as part of the tile's name. Nothing is laid over the image.
  • Level buttons. An unowned tile is one line taller, so the add button sits at the foot of its cell and a row that mixes owned and unowned tiles keeps its Add buttons level.
  • Owned tiles, collection tiles, scanner candidates and the rows that mark unowned with muted text are unchanged.
  • Spec 021 (spec, plan, verification), a new pattern document docs/design-system/components/UnownedTile.md, and a bullet in TileAdd.md. The export's ItemTile.md still describes the fade; UnownedTile.md says the published design system should drop it at its next export, when the override can go.

Screenshots

Before After
Desktop, light before after
Desktop, dark before after
Phone, light Phone, dark
after after

Decisions for you

The ruling settles the look. These were the implementer's to make and are recorded in spec 021 as decisions 2 to 8; the main ones:

  1. The marker is a c-tag, not a pattern of its own. Chip.md describes the tag as "for data"; the scanner already uses one for a status phrase.
  2. The dashed frame stays. It is the export's, it was in the look you chose, and it never touches the image.
  3. The copy is "Not owned".
  4. Open, not acted on: whether the ×N quantity badge on the image counts as a "stamp" under the same guideline.

Verification

  • bin/ci: passed, 1354 examples, 0 failures, 1 pending (the art agreement spec, unrelated).
  • Specs seen failing first: request specs for the marker on both pages that render the tile, and a system spec that reads computed style in Firefox. Opacity is 1 with no filter or blend on every unowned tile (0.45 before), and a mixed row's Add buttons are level.
  • spec/design_system_files_spec.rb now fails on any new rule that fades or filters a c-tile. It pins the export's opacity:.45, so a corrected re-export needs that expectation edited.
  • One independent read-only review (Opus): no code defects; it compared the after shots with the chosen look. Its follow-ups are the last five commits.
  • Not verified: a real screen reader and a real phone.

Known limits

🤖 Generated with Claude Code

plainprogrammer and others added 14 commits October 13, 2026 18:19
Ruling (maintainer, 2026-10-13): of four rendered looks, D was chosen: the
card image at full opacity with a visible "Not owned" tag below it.

Co-Authored-By: Claude Opus 5.5 <noreply@anthropic.com>
Co-Authored-By: Claude Opus 5.5 <noreply@anthropic.com>
A c-tag on a second c-tile__meta row, the last thing inside the tile's link,
in search results and on a card's printings page (#65).

Co-Authored-By: Claude Opus 5.5 <noreply@anthropic.com>
…evel

Overrides the export's 45% fade on c-tile--owned-none in additions.css, for
the image and the missing-image fallback, and puts the add control at the
foot of its cell so a row that mixes owned and unowned tiles stays level.
Scryfall's image guideline forbids desaturating or color-shifting a card
image (#65; ruling of 2026-10-13, look D).

Co-Authored-By: Claude Opus 5.5 <noreply@anthropic.com>
Co-Authored-By: Claude Opus 5.5 <noreply@anthropic.com>
Co-Authored-By: Claude Opus 5.5 <noreply@anthropic.com>
…after an add

From the branch review: the phone-width rows are mixed whatever the
factories' sequences hold; the stylesheet check also reads rules inside a
media query; quick add asserts the marker before the add and not after.

Co-Authored-By: Claude Opus 5.5 <noreply@anthropic.com>
Co-Authored-By: Claude Opus 5.5 <noreply@anthropic.com>
Co-Authored-By: Claude Opus 5.5 <noreply@anthropic.com>
Six images, about 440 KB in all (2.1 MB before): after at 1280px and 390px in
both themes, before at 1280px in both themes.

Co-Authored-By: Claude Opus 5.5 <noreply@anthropic.com>
…ng variable

A comment that names a filter above a tile rule no longer fails the check.

Co-Authored-By: Claude Opus 5.5 <noreply@anthropic.com>
… document

TileAdd.md is an app addition (spec 004), not part of the export, and never
described the fade; only ItemTile.md does. UnownedTile.md says so and points
at TileAdd for the foot-of-cell rule.

Co-Authored-By: Claude Opus 5.5 <noreply@anthropic.com>
… v1.1.0)

The direction is approved by the maintainer's ruling of 2026-10-13; decisions
2 to 8 are put to the maintainer in the pull request.

Co-Authored-By: Claude Opus 5.5 <noreply@anthropic.com>
Co-Authored-By: Claude Opus 5.5 <noreply@anthropic.com>
@plainprogrammer plainprogrammer self-assigned this Oct 14, 2026
@plainprogrammer
plainprogrammer merged commit 4af91c1 into main Oct 14, 2026
4 checks passed
@plainprogrammer
plainprogrammer deleted the 021-unowned-tile-marker branch October 14, 2026 02:10
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Labels

None yet

Projects

None yet

Development

Successfully merging this pull request may close these issues.

Decide whether fading unowned card tiles fits Scryfall's image guidelines

1 participant