Pokédex

A single-page web app for tracking a personal Pokémon collection: nicknames, species, types, natures, met info, sprites, move/ability logs per game, and an achievements/ribbons system. Runs entirely client-side and can be opened directly from disk (index.html) with no build step or server required.

Project structure

index.html               Layout, imports, and modal markup
css/
  main.css               Header, layout, stats bar, toolbar, empty state, changelog modal
  pokemon.css             Card grid, detail modal, add/edit form, date picker, dropdowns
  achievements.css       Achievements section styling
  animations.css         Shared keyframe animations
  themes.css             Theme variables (including the Master Ball custom theme)
js/
  app.js                 Data model, state, form handling, keyboard shortcuts
  achievements.js        Achievement catalog logic, title resolution, Memory Ribbon UI
  renderer.js            Card/grid rendering, stats dashboard, date picker, ball/type UI
  pokemon.js             Add/Edit form modal, import/export
  filters.js             Filter and search hooks
  utils.js               File System Access API helpers, toast notifications
data/
  achievements.js        ACHIEVEMENT_CATALOG (ribbons, marks, misc)
  changelog.js           CHANGELOG (in-app version history)
  pokemon.js             ROSTER_DATA seed (empty by default)
icons/
  ui-icons.js            Poké Ball art, shiny/mega/gigantamax badges, placeholder icons
  achievement-icons.js   Contest/Battle Memory sub-ribbon icons and per-achievement artwork

All artwork in the app is Base64 icon data stored in icons/; there are no plain image files, so there's no separate images/ folder.

Data and icon files are loaded as plain <script> tags (not fetched as JSON) so the app keeps working when opened directly from file://, where fetch() of local JSON is blocked by browser CORS policy. Load order is icons → data → app → achievements → renderer → utils → pokemon → filters → init(), so every module sees the globals it depends on already defined.

Notes on data files

• ROSTER_DATA in data/pokemon.js is an empty seed array; the app starts with zero Pokémon and everything is added through the UI.
• Achievement icons: most achievements use one of four generic placeholder icons (ribbon/mark/diploma/star) unless real artwork has been supplied for that specific achievement, in which case it's stored in icons/achievement-icons.js under window.ACHIEVEMENT_ICONS. Two achievements (time_travel_award, pokestar_studios_star) currently have no dedicated artwork and fall back to the placeholder.
• Contest Memory Ribbon (40 sub-ribbons, split evenly across Hoenn and Sinnoh) and Battle Memory Ribbon (8 sub-ribbons) each have their own icon sets, CONTEST_MEMORY_SUB_ICONS and BATTLE_MEMORY_SUB_ICONS, kept separate from the main achievement catalog since they're rendered as an expandable sub-grid under their parent ribbon.

Known limitations

• Per-tier Contest ribbon images and Battle Memory ability-ribbon images are covered by the sub-icon lookups mentioned above rather than by individual top-level catalog entries.

Achievements: Memory Ribbons

Contest Star Ribbon is auto-awarded once all five standalone Master Ribbons (Coolness/Beauty/Cuteness/Cleverness/Toughness) are selected, and isn't independently togglable. Twinkling Star Ribbon becomes available only after Contest Star has been auto-awarded, and is automatically removed again if Contest Star's prerequisites stop being met.

In the read-only detail view, expanding a Memory Ribbon badge shows only the sub-ribbon(s) actually earned by that Pokémon (plus, for Contest Memory, a region header only when that region has at least one earned ribbon). The editable add/edit form always shows the full picker grid, since every sub-ribbon needs to be visible there for toggling on or off.

Browser compatibility

The custom date picker, Master Ball theme color math, and File System Access API helpers (js/utils.js) target Chromium-based browsers. The File System Access API in particular has no effect outside Chromium; on other browsers, saving/loading falls back to standard file download/upload dialogs.