[JaneOri]

I realize this is an absurd thing to do, but it was fun and I wanted to test the limits of CSS again so I could share the results!

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!

[cnees]

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.

http://www.neopets.com/~Cism

Codepen link (so you don't have to be signed into Neopets to see it)

https://codepen.io/qaz/pen/bGEzyrJ

Enjoy!

[cnees]

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

[James0x57]

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!

[cnees]

Thanks!

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.

[James0x57]

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!

[uxamanda]

That is an amazing hack! Awesome.

[LoSboccacc]

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?

[James0x57]

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 :)

[LoSboccacc]

thanks

[jonny_eh]

This should make white-boarding interviews a lot more fun. "Please implement Minesweeper, but only using HTML + CSS"

[atoav]

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.

[ARandomerDude]

Why would you give "them" ideas?

[pedrocx486]

It's good to see which companies you shouldn't work for.

[ceocoder]

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.

Great job!

[krrrh]

“fckgw rhqq2 yxrkt 8tg6w. There’s a name I’ve not heard in a long, long time.”

[ceocoder]

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.

[Aeolun]

Is there something magic about that code?

[ceocoder]

Yes - https://en.wikipedia.org/wiki/Volume_licensing#Leaked_keys

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" :)

[0] https://www.ilo.org/wcmsp5/groups/public/---asia/---ro-bangk...

[panda88888]

It’s the most popular Windows 98 cd key back in the old days.

[elteto]

Fantastic! Are you proud that you can call yourself an HTML programmer now?

[Sebb767]

Technically he's a CSS programmer ;)

[James0x57]

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

[Diskutant]

Doesn’t work on iOS?

[Diskutant]

The "Play it here" link on the github page works.

Seems like the "click click" message, which is shown only on op's direct link, causes some problems.

[James0x57]

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"?

[Diskutant]

Yes it’s stuck on #randommenu

Sometimes it works though, needs some „clicking“ (touching), eventually it will (might) work.

[faeyanpiraat]

Can confirm