Initial Version #1

Merged
elvis merged 10 commits from feature/initial_version into main 2026-04-16 09:52:43 +00:00
Owner

Create initial version of the MTG Binder app with 3x3 grid using Scryfall API to display a random set of 9 Magic the Gathering cards.
The UI displays information pertaining to the cards and clicking the image takes you to the scryfall page.

Create initial version of the MTG Binder app with 3x3 grid using Scryfall API to display a random set of 9 Magic the Gathering cards. The UI displays information pertaining to the cards and clicking the image takes you to the scryfall page.
Changed both card grid and modal images to use art_crop instead of normal
field for cleaner card artwork without borders/frame.

Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com>
- Added comprehensive .gitignore for Node.js projects
- Configured Express.js server with Scryfall API integration
- Implemented 3x3 card grid with modal for card details
- Created EJS template for responsive card display
- Added JavaScript for modal click/fetch functionality

Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com>
Prevent local Claude IDE settings from being committed to git.

Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com>
- Replace EJS modal template with DOM manipulation approach
- Add card image to modal with clickable link to Scryfall card page
- Use scryfall_uri field from API response for proper card page links
- Add optional chaining for image_uris to handle cards without images
- Improve card fetching with retry logic and error handling
- Add fallback for cards where all fetches fail
- Use image_uris.normal (PNG) from Scryfall API instead of art_crop
- Layout: card image left-aligned, attributes wrap around on left/bottom
- Image responsively sized (max 320px wide, 420px tall)
- Made image clickable to open Scryfall card page
- Changed modal body to flex row layout for side-by-side image/text
- Added word-wrapping support for long card names and flavor text
- Grid cards use art_crop (smaller image)
- Modal still uses image_uris.normal (PNG)
- Added modal-oracle div to display oracle_text
- Added modal-flavor with display: none to hide when empty
- JavaScript renders oracle_text from card data
- Flavor text div only visible when card has flavor text
- EJS now conditionally renders flavor div only if card.flavor_text exists and is non-empty
- Removed JS display toggle logic since div is conditionally rendered in template
- JavaScript now sets display:none on flavor div if no flavor text
- Div still rendered in template for consistency, but hidden when empty
- Fix ReferenceError by declaring modalFlavor selector
elvis merged commit 69af80d1cd into main 2026-04-16 09:52:43 +00:00
Sign in to join this conversation.
No reviewers
No labels
No milestone
No project
No assignees
1 participant
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
elvis/mtg-binder!1
No description provided.