from Hacker News

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

by JaneOri on 7/22/20, 8:03 PM with 92 comments

• by JaneOri on 7/22/20, 8:04 PM

  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!

• by uxamanda on 7/22/20, 10:49 PM

  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

• by kanobo on 7/22/20, 8:35 PM

  That's crazy! The large lag between clicking and the UI updating is slightly annoying, but that's just me nitpicking at something other than the cool technical feat.

• by jedberg on 7/22/20, 10:21 PM

  I think I see my CPU dripping out the side of my laptop.

• by onion2k on 7/22/20, 9:26 PM

  Very cool. CSS can do some amazing stuff these days. I made a game using moving checkboxes recently - https://codepen.io/onion2k/pen/qBbKYee - with a timer and scoring. It's a fun challenge to avoid JS.

• by krspykrm on 7/22/20, 10:19 PM

  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.

• by krapp on 7/23/20, 1:53 AM

  Every day we stray further from God's light.

• by jagger27 on 7/23/20, 1:12 AM

  It sort of bothers me how much feature creep CSS itself has undergone. Was it not enough to leave things simpler and just use pre-processors and JavaScript?

  What hope does one have to implement the entire CSS spec from scratch now?

• by osrec on 7/22/20, 8:57 PM

  Very interesting! Can I ask, how did you implement the timer in CSS/HTML?

  And also, what causes the lack of responsiveness?

• by mitchtbaum on 7/22/20, 9:38 PM

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

• by divbzero on 7/22/20, 10:09 PM

  I was sad to discover that Minesweeper is no longer bundled by default with Windows.

• by kristopolous on 7/23/20, 12:49 AM

  I tried this on a low end smartphone. Might as well have been called MineSwapper

• by aaroninsf on 7/22/20, 9:56 PM

  Idle question,

  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.

• by MrSourz on 7/22/20, 9:46 PM

  Now, which email clients does this render properly in! I'm looking forwards to diving through this.

• by roryokane on 7/25/20, 7:21 AM

  I was so confused why everyone was saying the game is so impressive when all my clicks did nothing but place a ‘?’ where I clicked. Was each ‘?’ an error message? No, it turned out you need to click each square twice to reveal it. The page really needs some instructions, because that is not how normal Minesweeper works.

  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.

• by Sniffnoy on 7/23/20, 12:08 AM

  I'm confused -- how do I flag? Right-clicking seems to just bring up the right-click menu.

  Edit: Nevermind, figured it out. You click on the flag up top to switch between flagging and clearing.

• by hughw on 7/22/20, 10:36 PM

  Now do GPT-3.

• by TedDoesntTalk on 7/22/20, 9:21 PM

  Oh my god, this is AWESOME!

• by soulofmischief on 7/22/20, 11:14 PM

  Very nice. Thanks for sharing.

• by buryat on 7/22/20, 10:50 PM

  doesn't work in Safari

• by lostgame on 7/22/20, 10:45 PM

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

• by edem on 7/23/20, 8:45 AM

  Why.

• by draw_down on 7/22/20, 9:18 PM

  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