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!
Since I'm brushing up against the limits of CSS, there's not enough room for a full year :P
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()
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!"