hex-painter

hex-painter is a JavaScript library that allows you to "draw" a picture of a Hex game board by typing ASCII text, like this:

-     . . . . .
--     . . . . .
---     . . * 0 .
----     . 0 0 0 .
-----     0 0 0 0 .

and then convert it in a web browser, on-the-fly, to produce an SVG image like this:

What is Hex?

Hex is a two-player strategy game played on an N x N diamond-shaped hexagonal grid, which starts off empty. Each player owns two opposite edges of the board. The rules of play are simple:

1. Players take turns placing a piece of their color in an unoccupied cell.
2. The game is won by the player who first forms an unbroken chain of their color that connects the two board edges they own.

Despite the simplicity of the rules, the strategy for the game is surprisingly complex. It was proven long ago that the first player has a winning strategy, but nobody has been able to characterize it any more clearly than "make the right moves."

Martin Gardner introduced the game to many people in his Mathematical Games column in Scientific American, which is reprinted in the book Hexaflexagons and Other Mathematical Diversions. There's also a more recent book devoted entirely to the subject: Hex strategy, by Cameron Browne.

Online information is available on Wikipedia and MathWorld.

A large number of scholarly papers have been published about Hex. Ryan B. Hayward's oevre is a good example. I particularly recommend Solving 8x8 Hex.

Examples

Hex-painter was created to make it (relatively) easy to illustrate web pages discussing hex strategy. You can see it in action on these web pages:

• The Hex Board Editor describes the mini-language you use to "draw" a game board. It also provides a live editor: a textbox whose board "drawing" is rendered immediately, so you can see the resulting SVG image.

• Hex Templates shows a collection of "edge templates", which are important patterns that crop up repeatedly in games. Each edge template is rendered from a <pre> text section by hex-painter.

Contents

The contents of this repository are as follows:

• README.md - this description
• hex-painter.js - the source code for hex-painter (this is the major contribution of this GitHub repository)
• board-editor.html - the source code of The Hex Board Editor
• hex-templates.html - the source code of Hex Templates
• Support libraries:
  • raphael-min.js - the magical Raphaël JavaScript Library that makes it easy to create SVG content on the web
  • jquery-1.7.2.min.js - the fast, small, and feature-rich JavaScript library that simplifies HTML document manipulation
• beehive.png - the picture shown above, generated in The Hex Board Editor and then screen-captured