No way! I've done exactly the same thing. (https://news.ycombinator.com/item?id=15479160) At first I thought this was my own thread! I guess there's a healthy overlap between loving Minesweeper puzzles and CSS puzzles. :)
I used HTML/CSS so I could implement it on a Neopets page, which meant I couldn't use forms, inputs, or CSS3, which means it's less feature-complete and the approach is completely different. The final result, though, is still the same delightful Minesweeper experience.
To emulate Minesweeper's not-a-bomb-on-the-first-click experience, I start the board off with a generous region revealed, and then to emulate flood-filling, I make blank cells sit in an invisible (overflow hidden) scroll box that scrolls to a revealed version of the region when you click the blank cells, which have relative links. That only works for rectangular regions, but I remember having a way to make it work with irregularly shaped regions and being too lazy to implement it because it was going to be even trickier and uglier than what I was already doing. I'll leave that as an exercise for the reader. :P
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!
I use scroll position to keep the state. In effect, each square is in a div with overflow:hidden. (In the actual code I used <i>, not <div>, which might've been to save bytes because the server is so slow). It has a fixed visible height, the height of the square. Above the fold (before scrolling) is the un-clicked square, and below the fold (what you see after scrolling) is the clicked square.
Since overflow is hidden, you have to use an in-page anchor link to scroll to the clicked state. The unclicked version of each cell is an anchor to the clicked version.
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
both lack the left+right click that reveals tiles around numbers that have the sufficient amount of bomb marked, I'm curious what's the css/html limitation that prevents the implementation of that behavior?
At some point questions like these become more like: Guess which exact sentence I am thinking about
I am very good with HTML and CSS and would definitely be able to solve sth like this. But not on a whiteboard, I would have to be able to fool around with it.
That is impressive, just impressive. Brought back some fond memories of installing Windows XP over and over again for family and friends with fckgw rhqq2 yxrkt 8tg6w and playing minesweeper before handing it off to them.
this should be like a secret handshake or even better our version of windmill high-five from Top Gun. Still can't believe that I can enter that S/N without having to even think about it.
tl;dr I grew up in India where the Indian Rupee was quite weak compared to the USD. Most people I knew couldn't really afford a legitimate copy of Windows XP - 1 USD was about 48.61 INR in 2002, and average wage was about 120 INR/day[0]. At that price a copy of Windows XP (priced at around $300/$400 ~ INR 14,000) was prohibitively expensive for pretty much everyone I knew. Because of that we ended up using leaked keys to setup new PCs, I did that enough times for my family, friends, and classmates that now I can type that key up as if I'm typing "hello world" :)
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"?
I linked to the README since any web devs that see this will probably want to know how buuut here's a link to the game if you want to go hands on:
https://propjockey.github.io/css-sweeper/#randommenu
It's all open source, and I discuss some details of how to do it in that readme, but I am more than happy to answer any questions!
Thanks for checking it out!