News for hackers. Stuff that matters.
Re:Show HN: MineSweeper implemented in 100% CSS and HTML – n... by James0x57 on Wednesday July 22, 2020 @05:12PM (#23921639)
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:

    #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)));
    }
Though the design is responsive to the width of the window, I suspect you mean how slow it is: it's 1.23MB of HTML + CSS, and clicking anything causes almost everything to redraw. It's only a little laggy on my computer but the idea was to test the limits of what's possible and is expected! :)

Thank you for checking it out!

Re:Show HN: MineSweeper implemented in 100% CSS and HTML – n... by nitwit005 on Wednesday July 22, 2020 @07:07PM (#23922541)
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 – n... by James0x57 on Wednesday July 22, 2020 @07:22PM (#23922643)
Yes, but I didn't trust them to stay synchronized and it wasn't too difficult to generate the code for 1000 keyframes so I just did that :)
Re:Show HN: MineSweeper implemented in 100% CSS and HTML – n... by uxamanda on Wednesday July 22, 2020 @06:50PM (#23922409)
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 – n... by James0x57 on Wednesday July 22, 2020 @07:20PM (#23922634)
the timer stops at 999 because that's what it does in the real minesweeper, you can keep playing though!
Re:Show HN: MineSweeper implemented in 100% CSS and HTML – n... by uxamanda on Wednesday July 22, 2020 @08:34PM (#23923033)
Ah, that makes sense, it's just for the visual. Thanks for clarifying.