It's like seeing that fun tech demo that implements Brainfuck in Rust's type system and going "heh, and they said compiled languages were fast? I can do this faster in PHP!"
The HN community largely rails against the use of JS anywhere, even if not using JS would make things much more difficult. Therefore, it's funny when someone makes a relatively trivial app not using any JS and it exacerbates the problems people cite for JS rather than not.
The whole thing is really cool and I love how they managed to get so far using some cool CSS tricks. But per the community it should also be a godsend because by not using JS it should by default make it faster, smaller, and probably cure cancer or solve for FTL travel or something.
Well maybe 2003 didn't mention Silverlight.
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!
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.
Codepen link (so you don't have to be signed into Neopets to see it)
https://codepen.io/qaz/pen/bGEzyrJ
Enjoy!
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.
Great job!
Seems like the "click click" message, which is shown only on op's direct link, causes some problems.
With this post, I think I am starting to grok the (Space Toggle) trick. The Tweet you linked in your library was really helpful [2].
My current understanding is – in CSS, you can set a variable to nothing (a space). When a property contains that "blank" variable, it is replaced by nothing and so the second, "fallback" value is the default. Because you can update CSS variables within more specific or later CSS, you can update the "blank" variable and give it a new value of "initial", this causes it to switch from the default to the defined override.
I realized, you can even combine this with the CSS checkbox hack. I made a (super hacky) version of CSS-only dark mode toggle based on your JSBin (gotta love an absolute positioned bg, lol) [3]
[0] https://propjockey.github.io/css-media-vars/ [1] https://news.ycombinator.com/item?id=23865900 [2] https://twitter.com/James0x57/status/1283596399196680192/pho... [3] https://jsbin.com/xelufoyoka/1/edit
What hope does one have to implement the entire CSS spec from scratch now?
This minesweeper, and the other examples in the comments, seem to capitalize on some hacky aspects of CSS, not features of the CSS spec.
In the real world, I doubt many people rely on CSS for things that JavaScript can do. (but I bet plenty of beginners use JavaScript, when CSS would have been more appropriate, haha)
And also, what causes the lack of responsiveness?
Here's the part that controls when the animation is running:
#level-none:not(:checked) ~ #ram #timer::before {
animation: timer step-end 1;
animation-duration: 999s;
animation-fill-mode: forwards;
--pause-if-won: var(--win-state) paused;
--pause-if-lost: var(--game-over) paused;
--pause-if-randommenu: var(--randommenu-visible) paused;
animation-play-state: var(--pause-if-won, var(--pause-if-lost, var(--pause-if-randommenu, running)));
}
Thank you for checking it out!
is CSS/HTML turing complete?
If so I look forward to a Show HN of a CSS/HTML emulator of JSMESS emulating a 386 running Windows 98.
Neither CSS nor HTML is turing complete.
The combination of CSS and HTML together is not quite turing complete either.
The combination of CSS and HTML plus an external source that repeated clicks the mouse is turing complete.
I could be remembering this wrong, however.
There is a famous demo of rule110 in css at http://eli.fox-epste.in/rule110-full.html
There are several edge cases where a sort of simile of NOT is possible though. You can branch from truthy/falsey into falsy/truthy numbers. And if is something is falsey you can "else" into another action.
Just can't "else" from a truthy state without the ...anti-vein... always being present.
The other thing you need to know to play is that right-clicking won’t flag a square. Instead, you need to left-click on the flag in the top left to toggle flag mode, then left-click on a square to flag it.
Edit: Nevermind, figured it out. You click on the flag up top to switch between flagging and clearing.
It should work on iOS 11.3 and up... maybe. They might have smaller limits on the number of operations per calc()..? Can't think of anything overtly incompatible.
Unfortunately Safari is today's IE6 in web dev since they're so far behind on so many features. Except it's worse since you can't test without owning their products or paying for a service either... wish I could check it out, there's probably something to learn
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()
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...
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!
After that blew up on twitter I tried thinking of something else I could test using checkboxes as the state and MineSweeper just popped in my head since it's pretty much 480 fancy checkboxes.
Motivation was just to see if I could, then to see what the limits are once I realized I'd be able to.
Thanks for checking it out!
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.
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"?
Sometimes it works though, needs some „clicking“ (touching), eventually it will (might) work.