Boardmap is a real-time board game visualization tool that generates strategic heatmaps to help players understand spatial reasoning and pattern recognition in board games. Built with Vue and designed with a polymorphic architecture for extensibility across multiple game types.

Board games, like Chess, are fun with friends. After playing Chess for a while, it occurred to me that I was just following rules moving one best step ahead. As the game progressed, I took the best one step forward each turn. No strategy, no plan. I had been following my gut, feeling/mood for the pieces or opponent. It always ended up in two ways: quick lose or rarely won by chance.

The traditional board game experience relies heavily on players' ability to visualize complex spatial relationships and strategic patterns. Many players, particularly those with spatial reasoning challenges or newcomers to strategic games, struggle to comprehend the full scope of piece influence, movement possibilities, and threat assessments across the board state. This creates a significant barrier to entry and limits strategic development for a substantial portion of the gaming community.

• Real-time Heatmaps: Visualize piece influence, movement options, and threat analysis
• Interactive Gameplay: Click-to-move interface with instant visual feedback
• Instant Updates: Auto-refreshing visualizations with each move
• Polymorphic Architecture: Extensible design supporting multiple game types

• Checkers: Full implementation with proper king movement
• Custom Games: Extensible base classes for new game types: Learn how

Try it yourself: 🚀 Launch

# clone the repository
git clone https://github.com/henryhale/boardmap.git

# navigate to project directory
cd boardmap

# install dependencies
pnpm install

# start development server
pnpm start

Open http://localhost:5173 to view it in your browser.

1. Select a piece by clicking on it (only current player's pieces)
2. View possible moves highlighted with green dots
3. Make a move by clicking on a highlighted square
4. Toggle heatmaps to see strategic insights
5. Analyze patterns using different visualization modes
6. Reset the game using the reset button to start a new game

• Base influence: 1 point per piece
• Mobility bonus: +0.3 per possible move
• King bonus: +2 points
• Positional bonuses: Back row (+0.5), sides (+0.3)
• Maximum capped at 5 points

• Shows all squares pieces can move to
• Overlapping moves increase heat value
• Real-time updates with game state

• Displays opponent attack patterns
• Higher values for squares containing your pieces
• Helps identify vulnerable positions

1. Create a new class extending GameEngine
2. Implement all abstract methods
3. Add game-specific logic

Example:

class ChessEngine extends GameEngine {
	constructor() {
		super(8) // 8x8 board
	}

	initializeBoard() {
		// Chess piece setup
	}

	isValidMove(fromRow, fromCol, toRow, toCol) {
		// Chess move validation
	}

	// ... other methods
}

Add new visualization types by extending HeatmapCalculator:

static calculateCustomHeatmap(gameEngine) {
  const heatmap = Array(gameEngine.boardSize).fill(null).map(() => Array(gameEngine.boardSize).fill(0));
  // Custom calculation logic
  // ...
  return heatmap;
}

• PixSim - project logo made manually using it's image creator
• Vuejs - seamless UI render and reactivity
• TailwindCSS - CSS made easy
• Lucide Icons - free beautiful icons

1. Clone/fork the repository: git clone https://github.com/henryhale/boardmap.git
2. Create your feature branch git checkout -b feature/amazing-feature
3. Commit your changes git commit -m 'Add amazing feature'
4. Push to the branch git push origin feature/amazing-feature
5. Open a pull request

This project is licensed under the MIT License - see the LICENSE.txt file for details.

Made with ❤️ by Henry Hale with support from Anthropic's Claude Code.