same link: Point and click — a demo of image map & alternatives
the first version was the same but without transition on each card hovered / z-index change
The current version is just stacked dots…
It also work on firefox on my end, maybe an addon is interfering ? Or are you on an older version of firefox that doesn’t support nested css maybe ?
Well, it seems to be a browser issue…but no it is a version updated twenty minutes ago…
You might be able to dispense with the z-index race ( 
) and gain the same advantage with isolation:isolate. (Untested).
The last version works again with my FF.
It would be great to have a versionthat could the cards from different filters. The range-operator was a quick test to have ten cards. It would be good to have the shuffle-mechanism established there already. The resolution of the tarot card is so gigantic the first click may take some time.
Hi @telumire
I think I would like to have the game in a fullscreen-modal… but again, I have trouble getting this to work…
<$button class="tc-btn-invisible">
<$action-sendmessage $message="tm-modal" $param="Playing-cards" dictionary={{$:/temp/dictionary}} count={{$:/temp/count}}/>Test
</$button>
Count and dictionary to be chosen by selectors…
And here the modal:
\define dcards(dictionary, count)
@@.cardcontainer
<$list filter="[<dictionary>indexes[]shuffle[]limit<count>]" counter="c" variable="key">
<$list filter="[<c>multiply[2]subtract<count>subtract[1]divide[2]]" variable="n">
<div class="ccard" style=`--i:$(n)$`><<n>><<key>>{{tarot}}</div>
</$list>
</$list>
@@
\end
<<dcards>>
$$$text/vnd.tiddlywiki
\rules except dash
<style>
.cardcontainer{
container-type: inline-size;
height:100vh;
display:grid;
place-items: center;
}
.cardcontainer .ccard {
position: absolute;
background-color:black;
color:white;
width: 240px;
aspect-ratio: 0.75;
transition: 0.5s;
transform-origin: 50% 100%;
}
.cardcontainer:hover .ccard {
z-index:0;
transform:
rotate(calc(var(--i) * 5deg))
translate(calc(var(--i) * 40cqw/<<range>>), var(--y,-40px));
&:hover{--y:-90px;}
}
.cardcontainer .ccard:focus-within{
z-index:{{!!put-card-on-top}};
}
.cardcontainer .ccard:active {
translate: calc(var(--i)*20px)-50px;
}
</style>
I only need to set a z-index of 1 on the last focused card, so it’s still relatively clean but you’re right it would be interesting to do this with “isolation”, I’ll try
edit: as far as I understand it, isolation:isolate is creating a new staking context, allowing to calculate the stacking relatively to the parent in isolation to the rest of the document. So in this particular case, you still need to use z-index to put one card above the other despite the dom order (unless I’m using it wrong ?).
I think you are having the same issue than me: Bug ? “:has(:hover)” not working in single tindler window - Developers - Talk TW (tiddlywiki.org)
edit: I don’t know why, but if I specify the class then it works in both cases:
.cardcontainer{
container-type:inline-size;
height:100vh;
display:grid;
place-items: center;
grid-template-areas:"stack";
}
.cardcontainer .ccard {
grid-area:stack;
width: 240px;
aspect-ratio: 0.75;
transition: 0.5s;
transform-origin: 50% 100%;
}
.cardcontainer:has(.ccard:hover) .ccard{
transform:
rotate(calc(var(--i) * 5deg))
translate(calc(var(--i) * 40cqw/<<range>>), var(--y,-40px));
&:hover{
--y:-90px;
}
}
.cardcontainer .ccard:focus-within{
z-index: {{!!put-card-on-top}};
}
.cardcontainer .ccard:active {
translate: calc(var(--i)*20px)-50px;
}
The animation is still not working alas, but here is the demo how this could look in a modal.
playingcardsmodal.json (5.9 KB)
Image and title are not synchonized so far… but it would be possible to have a front and a backside that match and for example could explain the meaning of the card.
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. 
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
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.