Three Prompts: Minesweeper Demo

Introduction

Minesweeper is a classic puzzle game that has been captivating players since the early days of personal computing. This implementation brings the timeless gameplay to the web using modern technologies like React and Vite. What makes this project particularly interesting is that it was created using only three prompts with Windsurf AI, demonstrating how efficient AI-assisted development can be for creating fully functional applications.

The game features all the elements you'd expect from Minesweeper: a grid of cells hiding mines, numerical hints about adjacent mines, and the satisfying challenge of clearing the board without triggering any explosions. But it also includes modern enhancements like customizable grid sizes and mine counts, making it both nostalgic and fresh.

The Three Prompts

Here are the exact prompts that were used to create this project:

/review @HOW_TO_ADD_PROJECTS.md Then make a new project called "minesweeper-demo"

Plan to make the following changes

- Dropdown for number of mines
- Dropdown for grid size
- Fix white on white text in instructions

Break out components from app.jsx to keep things simple and clean


Once done planning /execute

Make a plan then execute

Fix the grid size and mine counr colors to not be white on white
The top labels should be white, the select should be white, but the text inside the select should be black

Make everything in that list be centered vertically

Also remove the mines count card because it's displayed in the dropdown now

Then /execute

Let's analyze what each prompt accomplished:

Prompt 1: Project Initialization

The first prompt focused on reviewing how to add projects to the main website and then creating the initial Minesweeper demo project. This established the foundation for the game, setting up the basic project structure and initial implementation.

Prompt 2: Feature Enhancement and Component Architecture

The second prompt expanded the game's functionality by adding customization options (grid size and mine count dropdowns) and improving the code organization. This prompt specifically requested breaking the monolithic app into smaller components, which resulted in a cleaner architecture with separate components for the game board, cells, controls, and instructions.

Prompt 3: UI Refinements

The final prompt addressed UI issues, particularly color contrast problems and alignment. It focused on making the game more visually appealing and accessible by ensuring proper text colors in dropdowns and improving the layout. It also removed redundant UI elements to streamline the interface.

These three prompts build upon each other in a logical progression: first establishing the core functionality, then enhancing features and improving code organization, and finally refining the user interface and experience.

Technologies Used

The Minesweeper Demo leverages several modern web technologies:

• React 19.1.0: The latest version of React provides the foundation for building the user interface with a component-based architecture.

• Vite 6.3.5: This build tool offers lightning-fast development and optimized production builds, making the development process smooth and efficient.

• React Hooks: The game extensively uses useState and useEffect hooks for state management and side effects, demonstrating modern React patterns.

• CSS: Custom styling creates the classic Minesweeper look while ensuring responsiveness and accessibility.

Key Features and Functionality

Dynamic Game Board

The game offers three different grid sizes (9x9, 12x12, and 16x16), allowing players to choose their preferred difficulty level. The board dynamically adjusts to accommodate these different sizes while maintaining proper proportions.

Adjustable Mine Density

Players can select from various mine counts (5, 10, 15, or 20 mines) based on the grid size. The game intelligently limits the maximum number of mines to 25% of the total cells to ensure the game remains playable.

Flag Mode

A toggle button enables flag mode, allowing players to mark cells they suspect contain mines. This strategic element is essential for solving more complex Minesweeper puzzles.

Auto-reveal for Empty Cells

When a player clicks on a cell with no adjacent mines, the game automatically reveals all connected empty cells and their borders, implementing the classic Minesweeper flood-fill behavior that makes the game more enjoyable.

Win/Loss Detection

The game automatically detects when all non-mine cells have been revealed (win condition) or when a mine has been clicked (loss condition), providing appropriate feedback to the player.

Visual Feedback

Numbers indicating adjacent mines are color-coded for quick visual recognition, and clear visual indicators show the game state (ongoing, won, or lost).

Implementation Details

Component Architecture

The application follows a clean component architecture with clear separation of concerns:

• App.jsx: Contains the main game logic and state management
• GameBoard.jsx: Renders the grid of cells
• GameCell.jsx: Handles individual cell rendering and interaction
• GameControls.jsx: Provides UI controls for game settings
• GameInstructions.jsx: Displays game instructions

This modular approach makes the code more maintainable and easier to understand.

Game State Management

The game state is managed centrally in the App component using React's useState hooks. Key state variables include:

• grid: A 2D array representing the game board
• gameOver and gameWon: Boolean flags for game status
• flagMode: Toggle for marking potential mines
• gridSize and mineCountOption: Configuration options

Recursive Cell Revealing

One of the most interesting implementation details is the recursive algorithm for revealing empty cells. When a cell with no adjacent mines is clicked, the revealCell function recursively reveals all connected empty cells:

const revealCell = (grid, row, col) => {
  if (row < 0 || row >= gridSize || col < 0 || col >= gridSize) return
  if (grid[row][col].revealed || grid[row][col].flagged) return

  grid[row][col].revealed = true

  // If cell has no adjacent mines, reveal adjacent cells
  if (grid[row][col].adjacentMines === 0) {
    for (
      let r = Math.max(0, row - 1);
      r <= Math.min(gridSize - 1, row + 1);
      r++
    ) {
      for (
        let c = Math.max(0, col - 1);
        c <= Math.min(gridSize - 1, col + 1);
        c++
      ) {
        if (r !== row || c !== col) {
          revealCell(grid, r, c)
        }
      }
    }
  }
}

This elegant solution efficiently implements the flood-fill behavior that makes Minesweeper satisfying to play.

Challenges and Solutions

Challenge: Maintaining Game State Across Components

Solution: The game uses centralized state management in the App component, passing down state and handlers as props to child components. This approach ensures that all components work with a single source of truth, preventing synchronization issues.

Challenge: UI Color Contrast Issues

Solution: The third prompt specifically addressed color contrast problems, particularly with white text on white backgrounds in the dropdowns. The solution involved carefully designing the color scheme to ensure proper contrast for accessibility, making the labels white, the select elements white, but the text inside the select elements black.

Challenge: Dynamic Mine Count Based on Grid Size

Solution: To prevent the game from becoming unplayable with too many mines, the implementation includes logic to limit the maximum number of mines to 25% of the total cells. This ensures that the game remains challenging but fair across different grid sizes.

const maxMines = Math.floor(gridSize * gridSize * 0.25) // Max 25% of cells can be mines
if (mineCountOption > maxMines) {
  setMineCountOption(Math.min(20, maxMines))
}

Challenge: Code Organization

Solution: The second prompt specifically requested breaking down the monolithic app into smaller components. This resulted in a cleaner architecture with separate components for different aspects of the game, making the code more maintainable and easier to understand.

Conclusion

The Minesweeper Demo showcases how powerful AI-assisted development can be when used effectively. With just three carefully crafted prompts, we were able to create a fully functional game with customizable options, clean code architecture, and an accessible user interface.

The project demonstrates several important software development principles:

1. Iterative development: Starting with core functionality and progressively enhancing it
2. Component-based architecture: Breaking down complex UIs into manageable pieces
3. User experience considerations: Addressing accessibility and usability concerns

Potential future enhancements could include:

• Adding a timer to track completion time
• Implementing difficulty presets (beginner, intermediate, expert)
• Saving game state to allow pausing and resuming games
• Adding sound effects for a more immersive experience

Want to see more projects created with just three prompts? Check out the Three Prompts collection for more examples of what's possible with AI-assisted development.