Create a boardgame-card element

[jkomoros]

By popping out memory's memory-card.

Look at https://www.webcomponents.org/element/vpusher/game-card to see what to use.

Animations to flip. Spacers. Ideally this will be the class that does the magic layout diffing and stuff in the future.

[jkomoros]

We'll naturally need to do this for #161

[jkomoros]

The API would be that you pass a renderedContent

[jkomoros]

• [x] Use paper-styles shadowing and lift
• [x] Drefault back uses br to deterministically break, width 110% to clip
• [x] Playing-card subclass (maybe have a styler that looks at rank/suit values and if it's certain types it renders it specially)
• [x] On hover card lifts if it's interactive
• [x] disabled styling (e.g. slightly grayed out, no hovers, no events)
• [x] interactive styling (either spacer or disabled)
• [x] spacer and disabled shouldn't fire events
• [x] flip animation
• [ ] jsdoc documentation
• [x] Some way to have the card flipped tall (the container should be the other size, and the internals should be rotated (see comment below)... also cards in collections shoudl be centered...
• [x] Some way to have different sizing. Are there just fixed sizes, or do you style the container yourself? There's the "big, medium, small, tiny"
• [x] Some aspect ratio notion that can be overridden
• [ ] An easy way to say "just center this content"
• [x] Pretty back
• [x] boardgame-card-hand that can array in a splay
• [x] use boardgame-card-hand in places like monroe
• [x] Hand has a mark, unmark that game view calls before and after databind takes note of their unique IDs and where they are and then animates
• [x] Stack
• [x] document card, hand

[jkomoros]

Some cards are "naturally" tall, while some are "naturally" wide.

There is an attribute, "tall", which means that the card's content is naturally tall. The card also has rotated attribute, which rotates 90 degrees (logically, not via transforms)