You can use the live version of the Tarot app by visiting lexstarkweather.com/tarot
This project was done partially as a Vue3 exercise and partially as a solution to a problem I was having with my real-world Tarot cards: shuffling.
Most Tarot cards are quite a bit larger than your standard playing cards, so shuffling the deck is already a little challenging. Adding to that, the orientation of the cards matters in Tarot and also needs to be shuffled (unlike standard playing cards, which are mirrored vertically). You generally end up just dumping the deck in a pile and swirling it around, but even then I was getting a lot of duplicate cards from poor shuffling.
Besides using a Fisher-Yates shuffle that's both nearly instant and exceptionally random, it has a number of features that make it quick and easy to run through the deck, like being able to restrict the deck to just the major arcana cards (the 'face' cards that most people associate with cartomancy). You can toggle quick summaries for each card, shuffle between drawing, and even get some basic stats like the prevailing suite and ratio of reversed/upright cards.
Most Tarot cards are quite a bit larger than your standard playing cards, so shuffling the deck is already a little challenging. Adding to that, the orientation of the cards matters in Tarot and also needs to be shuffled (unlike standard playing cards, which are mirrored vertically). You generally end up just dumping the deck in a pile and swirling it around, but even then I was getting a lot of duplicate cards from poor shuffling.
Besides using a Fisher-Yates shuffle that's both nearly instant and exceptionally random, it has a number of features that make it quick and easy to run through the deck, like being able to restrict the deck to just the major arcana cards (the 'face' cards that most people associate with cartomancy). You can toggle quick summaries for each card, shuffle between drawing, and even get some basic stats like the prevailing suite and ratio of reversed/upright cards.
The desktop view uses the full width of the screen up to 1920px, so we get a ton of play area for the cards but keep things constrained on ultra-wide monitors.
At smaller screen sizes, we switch to a more condense view and begin to shrink the card size. This scales all the way from small desktop to tablet views.
A little CSS animation does our card flip and displays the card's title
The heavily-condensed tablet/large mobile view. Controls get moved to a mobile-style menu.
Full mobile view stacks the cards.
The how-to-play descriptions are also stacked.
Settings are moved to a modal card for mobile views.
