| <html> |
| <head> |
| <title>Start a game</title> |
| <meta http-equiv="content-type" content="text/html; charset=ISO-8859-1"> |
| <link rel="stylesheet" type="text/css" href="./style.css"> |
| </head> |
| <body> |
| <h1>Pawns Game</h1> |
| <div class="start"> |
| <a class="start" href="http://www.org.eclipse.swt.examples.browser.demos.pawns/actionstart1player">1 player</a> |
| <a class="start" href="http://www.org.eclipse.swt.examples.browser.demos.pawns/actionstart2players">2 players</a> |
| </div> |
| <h2>How to play</h2> |
| This board game is a variant of Reversi and Tic Tac Toe. Each one of the two players sets a pawn on an empty cell of the board. |
| <h3>Pawns</h3> |
| <ul> |
| <li class="white">Player 1</li> |
| <li class="black">Player 2</li> |
| <li class="wall">Wall. Cannot be reversed.</li> |
| </ul> |
| <div class="theme"> |
| Different themes are supported. Theme is configured through a Cascading Style Sheet (CSS) that determines how the HTML content is rendered by the SWT Browser widget. |
| <ul class="theme"> |
| <li><a href="http://www.org.eclipse.swt.examples.browser.demos.pawns/actiontheme/css1">Theme 1</a></li> |
| <li><a href="http://www.org.eclipse.swt.examples.browser.demos.pawns/actiontheme/css2">Theme 2</a></li> |
| <li><a href="http://www.org.eclipse.swt.examples.browser.demos.pawns/actiontheme/css3">Theme 3</a></li> |
| <li><a href="http://www.org.eclipse.swt.examples.browser.demos.pawns/actiontheme/css4">Theme 4</a></li> |
| </ul> |
| |
| </div> |
| <h2>How to win</h2> |
| The game ends when all cells are filled. The winner is the one with most pawns of their colour. |
| |
| <h2>Java and HTML integrated through the SWT Browser widget</h2> |
| <p> |
| Rendering is based on HTML and CSS techniques. Computer moves are programmed in regular |
| Java code in the Eclipse plug-in. The SWT Browser widget is used for rendering and reacting |
| to user input. |
| </p> |
| <h3>Implementation</h3> |
| <p> |
| The board is a table filled with hyperlinks. Cascading Style Sheets |
| provide various themes and control the table aesthetic appearance. |
| <br>The API <code>org.eclipse.swt.browser.Browser.setText(java.lang.String)</code> draws |
| the board game from HTML generated in memory. |
| <br>Player moves are captured by implementing the interface <code>org.eclipse.swt.browser.LocationListener</code>. |
| e.g the player clicks on a cell that may generate a hyperlink with a URL similar to |
| <code>http://www.org.eclipse.swt.examples.browser.demos/xx1yy2</code>. That hyperlink identifies |
| the position of the cell selected by the player (column 1, row 2). The move is completed by generating |
| new HTML content and invoking <code>Browser.setText</code> to update the board game. |
| </p> |
| </body> |
| </html> |
