mtg-card-seer

2.0.2 • Public • Published

MTG Card Seer

A set of easy to use HTML Web Components that use the Scryfall API to display MTG card images automatically on hover.

Basic usage

Each component has a rich and flexible API that are easy to use out of the box. Basic usage would be wrapping whatever text you would want to function as a card image popover in the card-link element like you would with a span. This will automatically search and display the specified card when hovering the link. Note that the text does not have to be the card name exactly, it performs a fuzzy search so partial names or spelling errors will work if no cards have a similar name.

Example:

<card-link>Viscera Seer</card-link>

You can read more about specific component APIs below or view more in depth examples here.

Features

  • Made for modern browsers
  • Mobile ready
  • Supports external customization

Installation

The library is available as a package on npm. Currently there is no static location for a production file to hotlink to.

npm install mtg-card-seer --save

After that import the library in your code and all components will now be usable in your HTML.

import 'mtg-card-seer';

Dev setup

To get the project up and running with a test page and hot reloading, clone the repo and run the following:

npm install
npm start

To build the project for production code:

npm build

API documentation

API documentation is available in the repo here.

Feature roadmap

  • [x] add search by collector number to card-link
  • [x] add ability to specify card face to display for card-link
  • [x] add optional display for price info to card-link preview
  • [x] add proper mobile support for card-link
  • [x] add inline card preview component
  • [x] add decklist component
  • [ ] decklist component visual view
  • [ ] add sideboard cuts/adds component
  • [ ] add a11y mode for cards
  • [ ] multilingual support

Discovered a bug? Log it here with browser details and steps to replicate it.

Have an idea for a feature? Recommend it here.

Dependents (0)

Package Sidebar

Install

npm i mtg-card-seer

Weekly Downloads

1

Version

2.0.2

License

MIT

Unpacked Size

106 kB

Total Files

8

Last publish

Collaborators

  • andeic