{"id":13724510,"url":"https://github.com/propjockey/css-sweeper","last_synced_at":"2026-01-25T09:33:49.574Z","repository":{"id":40627495,"uuid":"281741508","full_name":"propjockey/css-sweeper","owner":"propjockey","description":"MineSweeper implemented in CSS + HTML using the Space Toggle trick (no JavaScript!)","archived":false,"fork":false,"pushed_at":"2022-06-29T01:31:22.000Z","size":975,"stargazers_count":836,"open_issues_count":0,"forks_count":57,"subscribers_count":12,"default_branch":"master","last_synced_at":"2025-03-04T17:43:50.732Z","etag":null,"topics":[],"latest_commit_sha":null,"homepage":null,"language":"HTML","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":"bsd-2-clause","status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/propjockey.png","metadata":{"files":{"readme":"README.md","changelog":null,"contributing":null,"funding":null,"license":"LICENSE","code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null}},"created_at":"2020-07-22T17:28:13.000Z","updated_at":"2025-03-04T00:11:21.000Z","dependencies_parsed_at":"2022-07-18T05:46:16.639Z","dependency_job_id":null,"html_url":"https://github.com/propjockey/css-sweeper","commit_stats":null,"previous_names":[],"tags_count":0,"template":false,"template_full_name":null,"purl":"pkg:github/propjockey/css-sweeper","repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/propjockey%2Fcss-sweeper","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/propjockey%2Fcss-sweeper/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/propjockey%2Fcss-sweeper/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/propjockey%2Fcss-sweeper/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/propjockey","download_url":"https://codeload.github.com/propjockey/css-sweeper/tar.gz/refs/heads/master","sbom_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/propjockey%2Fcss-sweeper/sbom","scorecard":null,"host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":286080680,"owners_count":28750875,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2026-01-25T09:00:19.176Z","status":"ssl_error","status_checked_at":"2026-01-25T09:00:04.131Z","response_time":113,"last_error":"SSL_read: unexpected eof while reading","robots_txt_status":"success","robots_txt_updated_at":"2025-07-24T06:49:26.215Z","robots_txt_url":"https://github.com/robots.txt","online":false,"can_crawl_api":true,"host_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub","repositories_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories","repository_names_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repository_names","owners_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners"}},"keywords":[],"created_at":"2024-08-03T01:01:58.469Z","updated_at":"2026-01-25T09:33:49.559Z","avatar_url":"https://github.com/propjockey.png","language":"HTML","funding_links":[],"categories":["HTML"],"sub_categories":[],"readme":"![James0x57](https://img.shields.io/badge/James0x57%20%F0%9F%91%BD-I%20made%20a%20thing!-blueviolet.svg?labelColor=222222)\n\n# css-sweeper from PropJockey\nMineSweeper implemented in CSS + HTML using the Space Toggle trick (no JavaScript!)\n\n\u003ca href=\"https://propjockey.github.io/css-sweeper/\"\u003ePLAY IT HERE!\u003c/a\u003e\n\nNOTE: this is \u003ca href=\"https://github.com/propjockey/DOMinion-build-demo\"\u003eanother stress test\u003c/a\u003e, expect lag for the next several years of average computer advancement!\n\n\u003cimg src=\"https://propjockey.github.io/css-sweeper/css-sweeper.gif\"\u003e\n\n## Win Condition\nSince it's not practical to clear all the spaces when you expose an empty area (without loops or causing cyclic references), the win condition has been reduced to:\n\n1. Flag all the bombs\n2. Do not flag non-bombs\n3. ~~Clear all non-bomb spaces~~\n\nThis also allows you to win when it comes down to a forced-guess since you can flag without consequence. If you pick right and haven't flagged any non-bombs, you win.\n\n## Mine Field Generation\nThe fields are only defined by where the bombs are (and that those spaces are not not-bombs).\n\nThe rest of the game, counter, numbers, etc flow from there, so the bombs can be placed anywhere, and in any number.\n\nThis is the (lazy/inefficient) script I ran before hand to generate the 16 included Fields:\n```js\nvar levels = [{},{},{},{},{},{},{},{},{},{},{},{},{},{},{},{}]\nvar genlvl = (lvl) =\u003e {\n  var y = ~~(Math.random() * 16)\n  var x = ~~(Math.random() * 30)\n  var key = `bomb-${y}-${x}`\n  lvl[key] = `--${key}: ; --not-${key}: initial;`\n}\nlevels.forEach(lvl =\u003e {\n  while (Object.keys(lvl).length \u003c 99) { genlvl(lvl) }\n})\nvar cssoutput = \"\"\nlevels.forEach((lvl, i) =\u003e {\n  var out = `    #level-${ i.toString(10).padStart(2, \"0\") }:checked ~ #ram {\n      --level: \"${ (i + 1).toString(10).padStart(2, \"0\") }\";\n      ${Object.values(lvl).join(\"\\n      \")}\n    }\n`\n  cssoutput += out\n})\n// cssoutput is the only css necessary to create new fields\n```\n\n## CSS is a programming language thanks to the Space Toggle trick\n\n### Basics of Space Toggle:\n* if your --css-var holds a space `--toggler: ;`, then it can be added to anything (any number of times) without changing the value\n  ```css\n    --toggler: ;\n    --red-if-toggler: var(--toggler) red;\n    background: var(--red-if-toggler, green); /* will be red! */\n  ```\n* if your --css-var holds `initial` `--toggler: initial;` (or was never defined), then it can be added to anything to force-fallback when referenced\n  ```css\n    --toggler: initial;\n    --red-if-toggler: var(--toggler) red;\n    background: var(--red-if-toggler, green); /* will be green! */\n  ```\n* Space Toggles can be combined for AND logic: \n  ```css\n    --red-if-togglersalltrue: var(--tog1) var(--tog2) var(--tog3) red;\n  ```\n* Space Toggles can be combined for OR logic: \n  ```css\n    --red-if-anytogglertrue: var(--tog1, var(--tog2, var(--tog3))) red;\n  ```\n* Checkboxes (and radio buttons) make a great source for space toggles (shout out to \u003ca href=\"https://twitter.com/RockStarwind\"\u003e@RockStarwind\u003c/a\u003e for that idea)\n  ```css\n    #common-css-var-area { /* default any \"not\" values to truthy */ --not-flagged: ; }\n    #mycheckbox:checked ~ #common-css-var-area { --flagged: ; --not-flagged: initial; }\n    #anotherbox:checked ~ #common-css-var-area { --open: ; }\n    #common-css-var-area {\n      --yellow-if-flagged-and-open: var(--open) var(--flagged) yellow;\n      --white-if-not-flagged-and-open: var(--open) var(--not-flagged) white;\n      --red-if-flagged: var(--flagged) red;\n      color: var(--yellow-if-flagged-and-open, var(--white-if-not-flagged-and-open, var(--red-if-flagged, black)))\n    }\n    /* color will be black if not flagged and not open */\n  ```\n\n### For reference, here's where Space Toggle has been discussed recently:\n* https://twitter.com/James0x57/status/1282303255826046977 - introductory tweet (somewhat complex)\n* https://twitter.com/James0x57/status/1283596399196680192 - Tweet with a relatively simple example.\n* https://github.com/propjockey/css-media-vars - a library that provides space toggles to use anywhere based on @ media query state\n* https://twitter.com/James0x57/status/1283906181031960576 - Tweet introducing css-media-vars, with discussion on how Space Toggle is per spec and not relying on bugs/hacks.\n* https://propjockey.github.io/bcd7sdd/ - Uses Space Toggles to create a circuit board, using checkboxes to mantain state between inputs.\n\n### Space Toggle has been independently discoverd a handful of times:\n* \u003ca href=\"https://twitter.com/anatudor\"\u003e@anatudor\u003c/a\u003e probably the first to discover it - about 3 years ago!\n* \u003ca href=\"https://twitter.com/James0x57\"\u003e@JamesOx57\u003c/a\u003e in April 2020 which kickstarted development of augmented-ui v2 because it allows augs to be equipped without extra class names.\n* \u003ca href=\"https://twitter.com/DavidKPiano\"\u003e@DavidKPiano\u003c/a\u003e in June 2020 and instead of just space, he includes an empty comment `--pnl: /**/;` and calls it `prop-and-lock`\n\n## Socials\n\u003ca href=\"https://twitter.com/James0x57\"\u003eFollow me on Twitter for more web dev insanity!\u003c/a\u003e\n(and feel free to ask questions!)\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fpropjockey%2Fcss-sweeper","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fpropjockey%2Fcss-sweeper","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fpropjockey%2Fcss-sweeper/lists"}