81–90 of 97 posts
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…
Doesn’t work on iOS?
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…
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 f…
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…
Doesn’t work on iOS?
Seems like the "click click" message, which is shown only on op's direct link, causes some problems.
Earlier quoted context omitted.
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 f…
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?
Earlier quoted context omitted.
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?
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 :)
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…
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 f…
Earlier quoted context omitted.
Doesn’t work on iOS?
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.
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"?
Earlier quoted context omitted.
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 f…
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 , not , 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.