https://github.com/cassler/use-minesweeper
Basic implementation of Minesweeper as a React hook.
https://github.com/cassler/use-minesweeper
games minesweeper postcss react react-hooks tailwind typescript vite
Last synced: 3 months ago
JSON representation
Basic implementation of Minesweeper as a React hook.
- Host: GitHub
- URL: https://github.com/cassler/use-minesweeper
- Owner: cassler
- Created: 2022-02-07T14:19:12.000Z (over 4 years ago)
- Default Branch: main
- Last Pushed: 2022-02-09T02:31:04.000Z (over 4 years ago)
- Last Synced: 2025-10-20T04:43:09.571Z (8 months ago)
- Topics: games, minesweeper, postcss, react, react-hooks, tailwind, typescript, vite
- Language: TypeScript
- Homepage: https://www.npmjs.com/package/@cassler/use-minesweeper
- Size: 142 KB
- Stars: 1
- Watchers: 1
- Forks: 0
- Open Issues: 0
-
Metadata Files:
- Readme: README.md
Awesome Lists containing this project
README
# Minesweeper React
## Using in a project
`yarn install @cassler/use-minesweeper`
### MineSweeper React component
Import the full component to use directly.
```jsx
import { MineSweeper } from '@cassler/use-minesweeper';
import '/node_modules/@cassler/use-minesweeper/dist/style.css';
```
| Argument | Type | Default | Required | Description |
| -------- | ----- | ----- | ------- | --------- |
| `size` | `number` | 12 | false | Dimensions of gameboard along each axis in absolute units. |
| `difficulty` | `number` | 0.25 | false | Liklihood of a bomb being on any given square. Value between 0 and 1 |
### useMinesweeper Hook
Or just the hook to compose your own version:
```jsx
import { useMineSweeper, BoardContext } from '@cassler/use-minesweeper'
```
This provides most of what you need as an object. Below is an example implementation.
```tsx
export interface Props { size: number, difficulty: number }
export function MyApp({ size = 12, difficulty = 0.25 }:Props) {
const { ctx, getGridStyle, isItemOpen, selectItem } = useMineSweeper(size, difficulty);
return (
{ctx.board.map((item, idx) => (
selectItem(idx)}>
{isItemOpen(idx) ? `x${item.xAxis},y${item.yAxis}` : '?'}
))}
);
}
```
`useMinsweeper` provides the following for composition. The values for `board`, `flippedItems` and
`selectItem` are included as a single `ctx` object for ease-of-use. You can destruture these further
if you want to use something other than `React.Context`.
| key | type | description |
| ---- | ---- | --------------------------- |
| `ctx.board` | `object[]` | All items on the board in an array, see types for details |
| `ctx.flippedItems` | `number[]` | All currently flipped items by absolute index. |
| `ctx.selectItem` | `(idx:number) => void` | Update state to flip selected index |
| `getGridStyle` | `(size:number) => CSSProperties` | Provide CSS grid styles to apply to board container. |
| `handleNewGame` | `() => void` | Resets the game state and generates a new board. |
| `setSize` | `(size:number) => void` | Build a new board from the given axis length |
| `setDifficulty` | `(diff:number) => void` | Provide a value between 0 and 1 to build a new board with the given difficulty factor. |
## Development
`yarn & yarn dev` To install dependencies and launch a dev server on Vite.
`yarn build` Will transpile ES and UMD flavors of modules - both are available for consumption. Notably, [UMD modules](https://github.com/umdjs/umd) which are capable of working everywhere, be it in the client, on the server or elsewhere. This includes compatability with `require` and `import` syntaxes with special-casing to handle CommonJS compatability.