How to get css variables from counter? (Building a Playing-card animation)

I don’t know. Isolation is new to me and I haven’t had time to play with it yet.

This is a fantastic demo!

On my Chrome browser, absolutely everything works as I would expect, except

(1) The very first click on a card does nothing — the card has a “hiccup”, but doesn’t turn over. Second click works to turn over.

(2) Repeat click on the card doesn’t turn it back over, which is at least intuitively what I would have expected. But maybe for Tarot purposes it should stay turned over?

At any rate, I hope you’ll continue to make the demo availiable at TiddlyHost, since I could imagine this becoming something like an edition, the “Tiddly Tarot edition” — where the cards could then take their positions within a reading layout or two, and someone would then add in a full suite of interpretive tiddlers, etc. Great proof of concept!

PS: I did get duplicate cards (within the same array) while playing with the tiddler called “Pick your cards (this will be saved)” — So the algorithm to remove cards from the deck once they’re face up (or to assign values earlier, at the point when they’re still face-down) needs tweaking. :slight_smile:

That is logical because the {{tarot}} random-mechanism starts from new in each card.
That is why I am trying to implement a new shuffle mechanism instead.

Thanks for reminding me of isolation:isolate, I was able to fix a bug with the ribbon that appear on the cards listed on tiddlywiki’s front page : Fix ribbon going over sticky tiddler title by Telumire · Pull Request #8096 · Jermolene/TiddlyWiki5 · GitHub

I made a quick demo to explain the different ways we can fix a z-index: Minimal CSS

This is a limitation that comes from the way I animate the card flip, it’s actually an animation that can only go forward … I should be able to fix this I think

Yes it was just a quick demo so I didn’t try to make it take into account previously picked card, it shouldn’t be too hard to fix I think. I’ll update the demo :slight_smile:

1 Like

Check this out: Shuffling a deck of card

shuffling deck.json (3.7 KB)

I’m using saq’s shuffle operator, it works really well! I still need to adapt the css code to recreate the animation, but it’s a good start.

1 Like

At first glance I could not reverse-engineer where the shuffle and the filter come in.
It would be cool to be able to configure a filter that determines where the cards are taken from… and a filter to determine how to get the backside info of the cards.

This is how the shuffling is done:

In the field “deck”, I wrote the name of the cards in the deck as a space separated list. If you want to use card name with spaces, you’ll need to use the titlelist format.

Then, I created a procedure called “action_shuffle_deck”, that will be used by a button widget to shuffle the deck field:

<$action-listops $field="deck" $subfilter="+[_shuffle[]]"/>

The shuffle operator code is located here: Point and click — creating games with tw

Once the deck is shuffled, I list all the card in the deck and add a limit matching the range selected, to get a number of cards that are random AND unique.

To get the backside info of a card, you could use a dictionnary tiddler, or use the lookup filter operator.