jjallaire
commented
5 years ago We should already handle transform cards (do a draft w/ Innistratd to verify it works as expected). You can see that here: https://github.com/jjallaire/draftpod/blob/master/src/components/draft/infobar/InfoBar.vue#L35-L37
For split cards, we'd need to add that field to our import from scryfall (just add the layout field here: https://github.com/jjallaire/draftpod/blob/master/tools/download_set.R#L98-L110). Then in the Vue template linked to above just conditionally add a CSS class for split cards. We might in addition want some sort of transition to make the change in display a bit less jarring.
On touch screens we actually don't have the preview bar at all, but we do show a larger version of the card when it's touched, see https://github.com/jjallaire/draftpod/blob/master/src/components/draft/core/TouchDragManager.js#L38. So we'd want that to display horizontally as well.
Trigger for the onMouseOver would need updating.
We would need to set the transform, transform-origin, and margin-left properties programatically. The below achieved the proper orientation for regular split cards.
<div class="card-viewer" style="transform: rotate(90deg); transform-origin: left top; margin-left: 100%;"><img src="https://img.scryfall.com/cards/normal/front/8/f/8f1801f2-ea6e-4196-858e-2afc456cf6a0.jpg?1538879984"></div>Note, this may result in some overlap in the pick area, but retains the placement of the stats info box.
Planar cards (from planechase) would require rotation handling, but nobody's going to be drafting those. Other card types should not require special handling. Meld could be handled just like transform.
For Mobile: Don't bother rotating splits. Layouts need working on for phones/tablets for the base cases first, then review to see about mods for double faced cards.