James0x57

Wow, crazy timing! You'll love what I just posted haha

I really like the sounds too - are they original and/or free to use?

wow, that's super clever. I was sitting here reading the code and didn't find a negative margin or positional property anywhere, and further, no switches to hold the state. Couldn't for the life of me figure out what you were doing hahaha I love it

Thank you!

OHHH I wish the others would have been more specific other than "it doesn't work". Thank you!

The way that random thing works is:

1) #randommenu:target shows the overlay (based on hash in the url)

2) the overlay has a link to "#" (fullscreen) that says "click-click"

3) Then rendered ontop of the link, all 16 level labels are full screen & transparent

4) Animations loop through them (hard-coded random scramble) to change their z-index to be on top, one at a time, for about 0.25s each

5) Clicking on any of the labels causes that layer to disappear, exposing the "#" link

6) Clicking again changes the url to "#" so #randommenu is no longer :target, thus closing the overlay

My guess is it's probably flashing too fast for iOS/Safari to register a full click.. I could probably fix it by making the random sequence take longer.

Can you confirm the URL never changes to "#" and stays stuck on "#randommenu"?

This is awesome - Could you please explain how you're holding state of each box individually without checkbox:checked? It's not immediately obvious to me how that's possible or where it's happening in your code!

You can't (afaik) tell if it's a right-click vs left-click in HTML+CSS alone that causes the el state to change - that info is part of the JS event :)

edit: ^ previously said "with css variables to hold state" or something similar (or my wires got crossed and I saw that somewhere else)

CSS variables can't be set by animations yet without JS's CSS Houdini giving them a type - a CSS @ property is in the works to do it without JS though!

lmao, I've come full circle. Excellent callout. hahaha

haha, awesome! You nailed it. It's really cool to see it being tested out in the world! Thank you for sharing!

Yes, but I didn't trust them to stay synchronized and it wasn't too difficult to generate the code for 1000 keyframes so I just did that :)

the timer stops at 999 because that's what it does in the real minesweeper, you can keep playing though!

Any chance you could share a screenshot? I can't test safari without owning apple products or paying for a service :(

as far as I know iOS 13.4.1 should be completely compatible.. there might a smaller limit on the number of calc() operations? The spec says it must support a minimum of 20 operations, but I'm (ab)using almost 1000 in a max()