Portefolio:

Web-Applikationen

OTHELLY - an app to replay Othello games and to display states of games

To show replays of Othello games in a website, you can use a few programs mostly written in Java (as applets), but also in Javascript. A survey you will find at Onlinespiele-Sammlung.
In the near future the Java-applets will become more difficult to use because of security reasons. Most browsers are already blocking them nowadays.

So it will be useful to look for alternatives as there were Flash and Javascript.
Flash is going also out of fashion, moreover I don't know such a tool in Flash.
So remains Javascript.

In the moment you will only find two apps in Javascript to replay Othello games online:

  1. Hamlite, a development of the Japanese K. Kawami from 2011 and already in use on some pages (e. g. Othello News)
  2. a derivative of KOBRO from 2007 of Belarussian V. Khlebnikov. It is useful for replays and for representations of game states (have a look at this tutorial)

Both programs are excellent and both have (different) great features but also some limitations: Hamlite needs a connection to the server of the developer and an iframe to be integrated into a webpage. KOBRO II is mainly made for use in the authors website only and cannot be used multiple times at once in one webpage; but to show other games in the same page, you can set up links to click on.

With these tools in mind I tried to create the "perfect" Othello browser which should:

  • replay a game step by step forward and backwards
  • show number and position of the last move
  • let you play the game in your own way after every move
  • show the game at start after a given move
  • let you inject a transcript of another game at runtime
  • show multiple games or gamestates in one page
  • be easy includable in a webpage
  • be easy customizable in color and size
  • be open to further developement by anybody

As a starting point I used a working Othello game created by Kelly Yancey in 2000; this had all the necessary routines of a digital Othello game so that I only had to add the aforementioned features.

Talked enough! Show me the masterpiece!

							........
							........
							........
							...O#...
							...#O...
							........
							........
							........
						

WOC Final 2010: Yusuke TAKANASHI (Black) - Michele BORASSI (White)

With the above OTHELLY you can replay the World Othello Championchip final from 2010 between Yusuke TAKANASHI (Black) and Michele BORASSI (White). Just play around with it by hitting the different buttons. You may also play yourself, but to get back to the original game, you have to hit the RESET button before.

How to use OTHELLY for replays

The simplest way to include the program into a webpage as a replayer is the following HTML code:

		<div class="othello-game">
			<input type="text" class="gameplay" value="F5 D6 C3 D3 C4 F4 F6 G5 E6 D7 E3 C5 ... A8 H2 B7 A7" />
		</div>
		<p class="othello-game-title">Some title text</p>
				

If you don't have a transcript of a game, you can also take the numbers of the moves arranged in form of the board:

		<div class="othello-game">
			<pre>
				47 46 17 23 26 24 27 49
				57 58 09 14 22 29 48 50
				42 08 03 04 15 19 35 36
				41 12 05 () ## 06 34 51
				44 13 07 ## () 01 37 40
				16 18 11 02 10 20 28 39
				45 38 32 30 25 21 59 54
				43 56 33 31 52 53 60 55
			</pre>
			<input type="text" class="gameplay" value="" />
		</div>
		<p class="othello-game-title">Some title text</p>
				
				

OTHELLY will reproduce these codes as regular games you can replay move by move. Look at the following example, which is a representation of the former encoding.

					47 46 17 23 26 24 27 49
					57 58 09 14 22 29 48 50
					42 08 03 04 15 19 35 36
					41 12 05 () ## 06 34 51
					44 13 07 ## () 01 37 40
					16 18 11 02 10 20 28 39
					45 38 32 30 25 21 59 54
					43 56 33 31 52 53 60 55
					

Play the game by hitting the > button

How to use OTHELLY for displaying game states

The easiest way to display a state of a game is to include OTHELLY in the same way as you include it as a replayer; but at the end of the transcript you have to append the number of the move, after which you want to show the game. Just add: >25 (the > is required, 25 is the number of the move).
1st and recommended way:

		<div class="othello-game">
			<input type="text" class="gameplay" value="f5d6c3d3c4f4c5b3c2d1a3c6b4e3...h2h3>25" />
		</div>
			
			

2nd way:

		<div class="othello-game">
			<pre>
				47 46 17 23 26 24 27 49
				57 58 09 14 22 29 48 50
				42 08 03 04 15 19 35 36
				41 12 05 () ## 06 34 51
				44 13 07 ## () 01 37 40
				16 18 11 02 10 20 28 39
				45 38 32 30 25 21 59 54
				43 56 33 31 52 53 60 55
				> 22
			</pre>
			<input type="text" class="gameplay" value="" />
		</div>
		<p class="othello-game-title">Some title text</p>
				

The 3rd and possible way: OTHELLY is also able to read the following HTML to display a game state; here the game state is "hard coded". You can use two ways of encoding the game (empty fields, black and white stones).
I found these both in tutorials; maybe there are more ways - then it is easy to expand OTHELLY.

		<div class="othello-game">
			<pre class="othello-board-code">
				..OOOO..
				#.O#OO..
				##OOOOOO
				#O###OOO
				.OO#OOOO
				OOOOOOOO
				..#OOO..
				.###.O..
			</pre>
			<input type="text" class="gameplay" value="b1a1a5b2g1g2b7a8a7e8h1h2h7g7g8h8" />
		</div>
				
		<div class="othello-game">
			<pre class="othello-board-code">
				- - - - - - - -
				- X - - - - - -
				- - X O O - - -
				- - - X O - - -
				- - - O X - - -
				- - O - - X - -
				- - - - - - - -
				- - - - - - - -
			</pre>
			<input type="text" class="gameplay" value="" />
		</div>
		

To these hard coded representations you may add some moves (see the input tag below), so that a user can play them by hitting the FORWARD button (and undo them with the BACKWARD button). You may also add the whole transcript of the game.

		<input type="text" class="gameplay" value="b1a1a5b2g1g2b7a8a7e8h1h2h7g7g8h8" />
				
					..OOOO..
					#.O#OO..
					##OOOOOO
					#O###OOO
					.OO#OOOO
					OOOOOOOO
					..#OOO..
					.###.O..
					

Score of the game between Pete Bhagat (Black) und Joel Feinstein (White) of Cambridge International 1987, like the latter uses it in his strategy lection "The art of sacrificing four corners" for demonstration purposes. Hit the "FORWARD" (>) button to follow the moves he does suggest.

Customization

The colors of OTHELLY are very easy to customize over CSS. Just change the values in the associated CSS-file to get a different look.
You can also change the images which are used for the stones, the empty fields and some features from the original game (e. g. to show how many stones will be flipped by every legal move).

The size of the boards (and some other details like the language) you can adjust with Javascript only. You can do this globally for all boards in a page or adjust only single boards. How to do this you will have a look at the source code of the demonstration files below.
More details you will find here or by studying the download files.

Examples

I changed the original static images against OTHELLY in 3 examples of strategy guides/articles:

Download

Here you'll find a zipped archive with all examples and a minified version of the js-file for download.
If you will use OTHELLY in your own projects or expand/improve it or if you find a bug, I would be glad to get a short note.