| .github/workflows | ||
| .husky | ||
| .vscode | ||
| docs | ||
| firebase | ||
| scripts | ||
| src | ||
| .env.development | ||
| .env.example | ||
| .gitignore | ||
| .nvmrc | ||
| .repo-policy.json | ||
| .secretlintignore | ||
| .secretlintrc.json | ||
| AGENTS.md | ||
| CLAUDE.md | ||
| CONTRIBUTING.md | ||
| eslint.config.js | ||
| LICENSE | ||
| netlify.toml | ||
| package.json | ||
| pnpm-lock.yaml | ||
| pnpm-workspace.yaml | ||
| README.md | ||
| screenshot.png | ||
| vite.config.js | ||
| vitest.config.js | ||
Play Minesweeper Online for Free
Play it here: mnswpr.com. This is the classic game Minesweeper built with vanilla web technologies (i.e., no framework dependency).
How to Play
The goal is to reveal every safe cell without detonating a mine. Your first click is always safe.
- Left click — reveal a cell
- Right click — flag / unflag a suspected mine
- Left + right click together (chording) — reveal the neighbors of a satisfied number
- Touch — tap to reveal, long-press to flag
Ways to Use
The web is a wonderful, free, and open platform to create and distribute value. You can use mnswpr in different ways:
Using it as a library takes only a few lines — mount it onto any element by id:
import '@cozy-games/mnswpr/mnswpr.css'
import mnswpr from '@cozy-games/mnswpr'
const game = new mnswpr('app')
game.initialize()
Tooling
The project has gone through years of existence. It started from 2019 when tooling was massively different. I have modernized it since and have witnessed how much easier and faster it is to build now - even without web frameworks or LLMs!
As of now the tooling I use are:
- Vite for bundling and development server
- Eslint for JS linting & CSS linting
- ESLint Stylistic for JS formatting
- Husky for git hooks
- PNPM for dependency management
- and a bunch of automation using scripts and Continuous Integration actions
Because a big part of this project's purpose is to track how the software development industry evolves, I now also use it as a playground for coding agents.
Development
Technology Stack: HTML, JS, and CSS; Google Firebase for leader board store; Netlify for hosting
To start development, you need node. I highly recommend pnpm to be used as well. Once you know you have this, you can do the following:
- Install dependencies:
pnpm i - Start the dev server:
pnpm run dev
The rest of the everyday commands:
pnpm test # run the Vitest suite
pnpm lint # ESLint (JS + CSS)
pnpm lint:fix # ESLint with autofix
pnpm run build # build the website
pnpm run preview # serve the production build
The game engine and leaderboard are consumed from npm — they live in ayo-run/cozy-games, not here.
Contributing
Contributions are welcome! See AGENTS.md for the architecture, conventions, and release workflow before opening a pull request.
Background
One day, while working in my home office, I heard loud and fast mouse clicks coming from our bedroom. It's my wife, playing her favorite game (Minesweeper) on a crappy website full of advertisements.
I can't allow this, it's a security issue. 🤣
But it is also an opportunity.
I wanted to give her the same game, with a similar leader board she can dominate. And this is also a chance for me to dig deeper into vanilla JS.
Can I make a page with complex interactions (more on this later) without any library dependency?
What I have learned:
- JS is awesome ✨
- We don't always need JS frameworks (or TS) ✨
- Even subtle UI changes can improve user gameplay experience ✨
- There's more ways to break your app than you are initially aware of ✨
- Competition motivates users to use your app more ✨
- Hash in bundled filenames helps avoid issues with browser caching (when shipping versions fast) ✨
License
Just keep building.
A project by Ayo