examples/org.eclipse.swt.examples.browser.demos/css4/welcome.html

<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>