Hacker News Board Hacker News, browsed like a classic message board
Live data from Hacker News

Show HN: MineSweeper implemented in 100% CSS and HTML – no JavaScript

github.com

Post reply on HN
Print view View original

31–40 of 97 posts

Re: Show HN: MineSweeper implemented in 100% CSS and HTML – no JavaScript

#31

Post by uxamanda »

This is really cool! I saw your responsive library[0] post [1] the other day, but couldn't quite wrap my head around it.

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

Re: Show HN: MineSweeper implemented in 100% CSS and HTML – no JavaScript

#32

Post by uxamanda »

James0x57 wrote: post #5
osrec wrote: post #4

Very interesting! Can I ask, how did you implement the timer in CSS/HTML? And also, what causes the lack of responsiveness?

The timer itself is a CSS animation with 1000 keyframes evenly spread, that runs once for 999s (just realized it should be running for 1000s, oops!). I can't link to lines in the source code because of the 1.23MB filesize but you can search for "timer" in the raw source to see the relevant code: https://raw.githubusercontent.com/propjockey/css-sweeper/mas... Here's the part that controls when the animation is running…

If I understand this timer, is it true that after ~16.5 mins, the game would stop? Are you stopping at 1000 keyframes because of a hard limit or for performance or for?

Re: Show HN: MineSweeper implemented in 100% CSS and HTML – no JavaScript

#34

Post by angrais »

James0x57 wrote: post #16
mitchtbaum wrote: post #15

If this took you, ballpark, 1 month to do, what do you think you would be able to do in a year?

This took ~3.25 days. :) Since I'm brushing up against the limits of CSS, there's not enough room for a full year :P

What inspired the idea and what was your motivation?

Re: Show HN: MineSweeper implemented in 100% CSS and HTML – no JavaScript

#35

Post by James0x57 »

krspykrm wrote: post #24

Good stuff! I made a sudoku in CSS ( https://identicalsnowflake.github.io/sudoku.html ) a while back, but it looks like the variable trick mentioned in the readme is a more straightforward way to embed logic, so if I were to make something similar today, I'd probably pursue that route.

This is great! I love how there's a bit of a reward for getting past the difficult middle part of gameplay - when there's not many spots left it goes fast and you can click click click to finish up without sitting there cleaning up your notes or counting 1-9 to figure out the last number or two. This is a big improvement haha

Re: Show HN: MineSweeper implemented in 100% CSS and HTML – no JavaScript

#36

Post by draw_down »

seangrogg wrote: post #28
draw_down wrote: post #8

This is very slow in my browser, which I don't mean as a criticism. Just refreshing to see something be slow that uses no JS at all :D

It is rather ironic that the chief complaints about JS are how it makes things bloated and unresponsive, yet this is 100x the size of http://www.play-minesweeper.com and the time to interactivity is recognizable by comparison. The HN community is a funny one, sometimes.

Trust me, I have a whole trove of rants about how HN talks about JavaScript. Lotta rants in that trove.

Re: Show HN: MineSweeper implemented in 100% CSS and HTML – no JavaScript

#37

Post by James0x57 »

buryat wrote: post #33

doesn't work in Safari

Hmmm... do you know what version you have?

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

Re: Show HN: MineSweeper implemented in 100% CSS and HTML – no JavaScript

#38

Post by nitwit005 »

James0x57 wrote: post #5
osrec wrote: post #4

Very interesting! Can I ask, how did you implement the timer in CSS/HTML? And also, what causes the lack of responsiveness?

The timer itself is a CSS animation with 1000 keyframes evenly spread, that runs once for 999s (just realized it should be running for 1000s, oops!). I can't link to lines in the source code because of the 1.23MB filesize but you can search for "timer" in the raw source to see the relevant code: https://raw.githubusercontent.com/propjockey/css-sweeper/mas... Here's the part that controls when the animation is running…

Can't you simplify this by making each digit a separate animation, with the ones digit running at full speed, the tens digit running at 1/10th speed, and the hundreds digit running at 1/100th speed? Then you'd only need ten keyframe values.

Re: Show HN: MineSweeper implemented in 100% CSS and HTML – no JavaScript

#40

Post by James0x57 »

lostgame wrote: post #29

Doesn’t work on mobile? Safari / iOS 13.4.1 here.

Any chance you could share a screenshot? I can't test safari without owning apple products or paying for a service :(

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

Post reply on HN