Minesweeper React

Using in a project

yarn install @cassler/use-minesweeper

MineSweeper React component

Import the full component to use directly.

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:

import { useMineSweeper, BoardContext } from '@cassler/use-minesweeper'

This provides most of what you need as an object. Below is an example implementation.

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 (
    <BoardContext.Provider value={ctx}>
      <div style={getGridStyle(size)}>
        {ctx.board.map((item, idx) => (
          <button type="button" onClick={() => selectItem(idx)}>
            {isItemOpen(idx) ? `x${item.xAxis},y${item.yAxis}` : '?'}
          </button>
        ))}
      </div>
    </BoardContext.Provider>
  );
}

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 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.