chris/dex
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Form Dex: name the default slot, larger art, readable labels

Browse Source 
- Unown's first slot is now "A" (its base sprite is the A shape), not
  "Default". Other letter/pattern sets keep "Default".
- The grey-out for uncaught entries applied to the whole tile, dimming
  the label text to ~0.55 opacity — unreadable in dark mode. Move the
  grayscale/opacity to just the sprite; the label stays full-contrast.
- Sprites 40 -> 60px, grid cell min 68 -> 88px.

Co-Authored-By: Claude Sonnet 5 <noreply@anthropic.com>
Claude-Session: https://claude.ai/code/session_017Ve7HLspzeG2xDPtJQ8vmu
This commit is contained in:
chris 2026-09-10 10:37:51 -04:00
parent a70f3c9976
commit 83cb89aedd
2 changed files with 21 additions and 12 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

27
src/styles/layout.css
View File

@ -2929,7 +2929,7 @@
} }
.formdex { .formdex {
display: grid; display: grid;
grid-template-columns: repeat(auto-fill, minmax(68px, 1fr)); grid-template-columns: repeat(auto-fill, minmax(88px, 1fr));
gap: 8px; gap: 8px;
margin-top: 10px; margin-top: 10px;
} }
@ -2938,32 +2938,37 @@
display: flex; display: flex;
flex-direction: column; flex-direction: column;
align-items: center; align-items: center;
gap: 2px; gap: 4px;
padding: 8px 4px 6px; padding: 10px 4px 8px;
border: none; border: none;
border-radius: 14px; border-radius: 14px;
background: var(--surface-2); background: var(--surface-2);
cursor: pointer; cursor: pointer;
filter: grayscale(1); transition: background 0.15s;
opacity: 0.55;
transition: filter 0.15s, opacity 0.15s, background 0.15s;
} }
.formdex__tile.is-caught { .formdex__tile.is-caught {
filter: none;
opacity: 1;
background: color-mix(in srgb, var(--type-main) 16%, var(--surface-2)); background: color-mix(in srgb, var(--type-main) 16%, var(--surface-2));
} }
/* Dim only the artwork until caught — the label stays fully legible. */
.formdex__sprite { .formdex__sprite {
width: 40px; width: 60px;
height: 40px; height: 60px;
object-fit: contain; object-fit: contain;
image-rendering: pixelated; image-rendering: pixelated;
filter: grayscale(1);
opacity: 0.6;
transition: filter 0.15s, opacity 0.15s;
}
.formdex__tile.is-caught .formdex__sprite {
filter: none;
opacity: 1;
} }
.formdex__label { .formdex__label {
font-size: 0.62rem; font-size: 0.7rem;
font-weight: 700; font-weight: 700;
text-align: center; text-align: center;
line-height: 1.15; line-height: 1.15;
color: var(--text);
max-width: 100%; max-width: 100%;
overflow: hidden; overflow: hidden;
text-overflow: ellipsis; text-overflow: ellipsis;

6
src/views/PokemonDetail.js
View File

@ -511,8 +511,12 @@ export async function PokemonDetail(nationalId) {
// because you switched your active game to browse something else. // because you switched your active game to browse something else.
let formDexPanel = null; let formDexPanel = null;
if (cosmeticForms.length > 1) { if (cosmeticForms.length > 1) {
// For letter/pattern sets the base sprite *is* the first entry (Unown's
// default artwork is the "A" shape), so give it that name rather than a
// generic "Default".
const DEFAULT_SLOT_NAME = { unown: 'A' };
const slots = [ const slots = [
{ slug: snapSpecies.name, id: nationalId, name: 'Default', sprite: null }, { slug: snapSpecies.name, id: nationalId, name: DEFAULT_SLOT_NAME[snapSpecies.name] || 'Default', sprite: null },
...cosmeticForms, ...cosmeticForms,
]; ];
const countEl = el('span', { class: 'formdex__count' }); const countEl = el('span', { class: 'formdex__count' });