Storesweeper is a modern implementation of the classic Minesweeper game, built with a focus on event-based state management and type safety.
You can demo the game at https://minesweeper-store.vercel.app/
This project showcases the use of:
- @xstate/store for state management
- SolidJS for reactive UI rendering
- ts-pattern for exhaustive pattern matching
Together they create a great foundation for tasks like this.
- Lightweight yet capable tooling
- Responsive grid-based game board
- Multiple difficulty presets
- Custom game configurations
- Timer and flag counter
- Toast notifications (triggered by game events)
The project was a learning experience for me, and I wanted to share it with others. The following are some of the key principles that guided the development:
- Type and runtime safety through use of TypeScript and pattern matching
- Efficient, reactive UI rendering with SolidJS
- Centralized state management with @xstate/store
- Clean separation of concerns between UI components and game logic
The ideal outcome was to have a store which could run the game in the browser, but easily be adapted to run in a Node.js environment or on the server for example.
In this specfic iteration, I wanted the rendering of the UI to avoid any redundant renders possible and have as granular of control over reactivity as possible.
- Node.js
- pnpm
-
Clone the repository:
git clone https://github.com/steveadams/minesweeper-store.git cd minesweeper-store -
Install dependencies:
pnpm install
Start the development server:
pnpm run dev
The game will be available at http://localhost:3000.
To create a production build:
npm run build
The output will be in the dist directory.
pnpm test
Do you see a way to do things better? Contributions are welcome! Feel free to submit a Pull Request.
This project is open source and available under the MIT License.