@ebinas/react-use-minesweeper v1.0.0

react-use-minesweeper

A react custom hook that provides the game logic for Minesweeper.

🔖 Overview

This hook provides the core mechanics for Minesweeper using only standard React APIs. It simplifies the integration of Minesweeper logic into your React applications.

🎮 Demo

You can play example web app here:

🌐 https://mine-sweeper.ebinas.dev/

🚀 API

useMinesweeper hook

Main hook to implement Minesweeper app.
Each method does't depend on state and was defined with useCallback.
(You can optimize rendering with useMemo in your app)

const {
  board,           // The current state of the Minesweeper board.
  gameState,       // The current state of the game (e.g., "initialized", "playing", "completed", "failed").
  gameMode,        // The current game mode (e.g., "easy", "normal", "hard").
  init,            // Function to select game mode & initialize the game.
  restart,         // Function to restart the game in same game mode.
  open,            // Function to open a cell.
  toggleFlag,      // Function to toggle a flag on a cell.
  switchFlagType,  // Function to switch the type of flag(e.g., 🚩, ❓).
  flags,           // The current number of flags used in the game.
  settings         // The game settings constant.
} = useMinesweeper();

Example Implementation

type Props = {
  defaultGameMode: GameMode;
};

const Example: React.FC<Props> = ({ defaultGameMode }) => {
  const {
    board, gameState, gameMode, init, restart, open, toggleFlag, switchFlagType, flags, settings,
  } = useMinesweeper(defaultGameMode);

  return (
    <>
      <h1>Example</h1>
      <p>{`💣: ${board.meta.mines}, 🚩: ${flags.normal}, ❓: ${flags.suspected}`}</p>
      {gameState === 'completed' && <p>🎉 You win!</p>}
      <div>
        {board.data.map((row) => {
          return row.map((cell) => {
            return (
              <Cell key={cell.id} data={cell} open={open} toggleFlag={toggleFlag} switchFlagType={switchFlagType} />
            );
          });
        })}
      </div>
        <div>
            <button onClick={() => init('hard')}>Hard Mode</button>
            <button onClick={restart}>Restart</button>
        </div>
            
    </>
  );
};

Others

📖 Background

This hook is derived from my Next.js application, ebinase/mine-sweeper. Its purpose is to separate the Minesweeper game logic from the UI, enabling easy implementation of Minesweeper in your projects.