Migrate/react - #2
Merged
Merged
Conversation
Sets up React on Vite and ports the core so the app runs on React, on a branch so the live site (main) stays untouched. Tooling: - react, react-dom, @vitejs/plugin-react (v4, Vite 6 compatible); JSX in tsconfig; ESLint react-hooks/react-refresh; entry is now main.tsx - index.html body is a single #root; React renders the UI Reused as-is (framework-agnostic, no DOM): services/, domain/, i18n/, types.ts, features/radar.ts. New React structure: - i18n/I18nContext.tsx — provider + useI18n (lang/t/toggle) over the existing i18n module - hooks/useTheme.ts, hooks/usePokemon.ts (fetch + neighbor prefetch) - components/: Header, PokedexDevice, DetailsCard, TypeBadge, StatsList - App.tsx composes them; --type-color, URL and title sync to the Pokémon CSS is reused unchanged via the same class names, so the ported UI looks identical. The legacy vanilla feature modules remain as reference and will be ported to components (and removed) in the next phases: favorites, autocomplete, filter, compare, team, quiz, battle, cards, then the deck builder — built in React. Co-Authored-By: Claude Opus 4.8 (1M context) <noreply@anthropic.com>
Ports the entire details card to React components — nothing dropped:
- context/ModalContext: generic modal provider (overlay, close, Escape,
backdrop) — open(<Node/>) from anywhere
- hooks: useSpecies, useTranslatedText (async EN→PT with cache)
- components/details/:
- About: description, genus, flags, about grid, held items, alt forms
- Abilities + AbilityDetail (modal)
- Effectiveness (weaknesses/resistances/immunities with ×mult)
- Evolution (clickable chain + encounter locations)
- Moves (reuses the existing renderMoves list+search via ref) + MoveDetail
- Cards (lazy TCG gallery + 3D holo tilt) + CardDetail (rich modal with
rarity tier badge, content and market price)
- DetailsCard now has all five tabs (Sobre/Stats/Golpes/Evolução/Cartas);
radar reused via radarSvg; App passes onSelect to navigate from
evolution/forms
Verified: every tab renders, ability/move/card modals open, PT translation
falls back to EN gracefully. Still on the branch (panels next).
Co-Authored-By: Claude Opus 4.8 (1M context) <noreply@anthropic.com>
Brings the React app to near full parity — reusing the existing vanilla feature logic via refs so nothing is lost: - context/FavoritesContext: shared favorites (panel + card button) - panels/: FavoritesPanel (ported) and FilterPanel, ComparePanel (with stat legend), TeamPanel (with battle modal), QuizPanel — each mounts the existing setup* (filter/compare/team/battle/quiz) into React-owned refs - PokedexDevice: autocomplete on search (setupAutocomplete), cry and share buttons, and image → sprite Lightbox (getSpriteGallery) - DetailsActions: favorite toggle + PNG/GIF download (services/download.ts) - App: loads all names once (stable getNames), renders the panels column, adds ←/→ and "/" keyboard nav, and full SEO/OG meta per Pokémon - main.tsx wraps App in Favorites/Modal providers; dropped StrictMode so the reused imperative setup* modules don't double-mount Verified in-browser: favorites, filter selects, compare, team, quiz (4 options), autocomplete (suggestions), favorite chip, cry/share, and the lightbox gallery all work; PT translation still degrades to EN under rate limits. Header install/info + the deck builder are next. Co-Authored-By: Claude Opus 4.8 (1M context) <noreply@anthropic.com>
New dedicated in-app view (?view=deck, opened from the header) to build a 60-card TCG deck with live charts and a health score. - services/tcg.ts: searchCards(name/supertype/subtype/type) + supertype and evolvesFrom added to the card model - domain/deck.ts (pure): deck rules and analyzeDeck() — size vs 60, 4-copy limit (basic Energy unlimited), Basic Pokémon count, energy-vs-attacker type matching, evolution-line completeness, trainer count → a 0–100 score, A–F grade and a structured issue list - hooks/useDeck.ts: deck state (card → count) persisted in localStorage - components/deck/: Catalog (search + supertype/type filters), DeckList (grouped rows with +/- steppers), DeckAnalysis (composition donut, energy cost curve, basics gauge, score ring, "what to improve" checklist), DeckBuilder view (2-col desktop, tabbed mobile), bilingual labels - Header gets a "🃏 Deck" button; App routes the view via ?view=deck Verified: analysis correctly flags >4 copies, deck size, healthy basics and energy-type mismatches; steppers and persistence work. Co-Authored-By: Claude Opus 4.8 (1M context) <noreply@anthropic.com>
- App: Pokémon-of-the-day default when there is no ?pokemon - DetailsCard tabs get data-tab (keeps the E2E selectors working) - e2e: add a deck-builder smoke test; all 4 specs pass on the React app, including the axe accessibility audit (no critical WCAG 2 A/AA violations) - Docs: CLAUDE.md now describes the React architecture (components/hooks/ context, reused services/domain/i18n/features); README stack lists React 19 and the Pokémon TCG API The React branch now reaches feature parity with the vanilla app (search, details with all tabs, favorites, filter, compare, team+battle, quiz, cards, lightbox, cry/share/download, keyboard nav, PWA install, i18n, theming) and adds the deck builder. Co-Authored-By: Claude Opus 4.8 (1M context) <noreply@anthropic.com>
- Vitest now only runs src/**/*.test.ts (was wrongly picking up the Playwright e2e spec) - src/__tests__/deck.test.ts covers analyzeDeck: under-60, the 4-copy limit (basic energy unlimited), attacker energy-type mismatch, and no-Pokémon - 18 unit tests pass Co-Authored-By: Claude Opus 4.8 (1M context) <noreply@anthropic.com>
- CardDetail: the card is now a 3D analysis view — drag to rotate it in space (with a moving holographic glare) plus a 🔄 full-spin button; honors prefers-reduced-motion - Styles: the 3133-line style.css is split into 11 per-area files under src/styles/ (tokens, header, device, details, panels, layout, modals, team-quiz, tcg, battle, deck) imported in cascade order via index.css; main.tsx imports index.css. Same bundle output, much smaller files (largest is details.css at ~600 lines vs 3133) Co-Authored-By: Claude Opus 4.8 (1M context) <noreply@anthropic.com>
- Meta decks: 3 archetype templates (Charizard/Miraidon/Gardevoir) loadable
from the deck builder header; each card is fetched by name from the TCG
API (useDeck.addMany respects the 4-copy rule)
- Optimization: DeckBuilder is React.lazy + Suspense — a separate 13KB
chunk loaded only when the deck view opens
- Parity review of the React port:
- Compare/Team/Quiz panels now refresh on language change (like vanilla)
- PokedexDevice restores fitPokemonName (auto-shrink long names) and the
image pop animation on each Pokémon
Co-Authored-By: Claude Opus 4.8 (1M context) <noreply@anthropic.com>
The card detail is now a true 3D object you can inspect like a game model: - Front (artwork) + back (bundled SVG Pokémon-style card back); dragging rotates it freely with no clamp, so past 90° you see the back - Controls: 🔄 full 360 spin, ⟳ flip front/back, and a zoom slider - Rarity-driven holographic shine that follows the rotation — subtle for common/uncommon, stronger holo for rare, rainbow for ultra, and an intense rainbow sweep + glow for secret/hyper rares - Honors prefers-reduced-motion Also fixes a parity bug: the always-rendered (hidden) battle modal made the arrow-key nav think a modal was open — the keyboard guard now ignores hidden modals (.modal:not([hidden])). Co-Authored-By: Claude Opus 4.8 (1M context) <noreply@anthropic.com>
Zooming used transform: scale(), which grew the card past its layout box and over the info column / out of the modal. Now the zoom sets the stage width/height (layout-aware) and the card modal stacks the card above the info, so enlarging reflows and stays within the modal (which scrolls). Co-Authored-By: Claude Opus 4.8 (1M context) <noreply@anthropic.com>
Deploying with
|
| Status | Name | Latest Commit | Updated (UTC) |
|---|---|---|---|
| ✅ Deployment successful! View logs |
pokedex | 3f55a7d | Jul 12 2026, 09:01 PM |
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
Add this suggestion to a batch that can be applied as a single commit.This suggestion is invalid because no changes were made to the code.Suggestions cannot be applied while the pull request is closed.Suggestions cannot be applied while viewing a subset of changes.Only one suggestion per line can be applied in a batch.Add this suggestion to a batch that can be applied as a single commit.Applying suggestions on deleted lines is not supported.You must change the existing code in this line in order to create a valid suggestion.Outdated suggestions cannot be applied.This suggestion has been applied or marked resolved.Suggestions cannot be applied from pending reviews.Suggestions cannot be applied on multi-line comments.Suggestions cannot be applied while the pull request is queued to merge.Suggestion cannot be applied right now. Please check back later.
No description provided.