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 ... B8 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 a 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.
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
The easiest way to include OTHELLY for displaying game states is 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).
<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> <div class="othello-game"> <input type="text" class="gameplay" value="f5d6c3d3c4f4c5b3c2d1a3c6b4e3...g8h7g1h4a1b2a8a7h5h1h2h3>25" /> </div>
OTHELLY is able to read two more ways of "hardcoded" game states:
<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 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
OTHELLY is very easy to customize over CSS. Just change the values you want and get a totally different look.
You can also change the images which are used for stones 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 you can adjust in Javascript with the options-object. It is global and its values will influence all boards if it is present.
// general options for all boards in a page
var Othelly_options = {
'imgPath' : 'images/',
'piecewidth' : 25,
'pieceheight' : 25,
'width' : 8,
'height' : 8,
// messages (uncomment a language if you want the messages in the game in that language; you may add your own translations)
/*
// English (default)
'PlayerWhite' : 'WHITE',
'PlayerBlack' : 'BLACK',
'PlayerTurn' : /*WHITE or BLACK*/'\'s turn',
'PlayerHasWon' : /*WHITE or BLACK*/' has won',
'PlayerMustPass' : /*WHITE or BLACK*/' must pass!',
'PlayerNoMoves' : 'No more moves!',
'Draw' : 'It\'s a draw!',
*/
// French
/*
'PlayerWhite' : 'BLANC',
'PlayerBlack' : 'NOIR',
'PlayerTurn' : ' doit jouer',
'PlayerHasWon' : ' a gagné',
'PlayerMustPass' : ' doit passer!',
'PlayerNoMoves' : 'Il n'y a pas de mouvements!',
'Draw' : 'Égalité!',
*/
// German
/*
'PlayerWhite' : 'WEISS',
'PlayerBlack' : 'SCHWARZ',
'PlayerTurn' : ' ist am Zug',
'PlayerHasWon' : ' hat gewonnen',
'PlayerMustPass' : ' muss passen!',
'PlayerNoMoves' : 'Es gibt keine Spielzüge mehr!',
'Draw' : 'Untentschieden!',
*/
/*
'human' : 1,
'moveFirst' : 1,
'humanVsHuman' : true,
'showcursor' : true,
'showflips' : false,
'weightsquares' : true,
'edgesensitive' : true,
*/
}
If you want to change the look of single boards in a page there is the possibility to use a further option-container: iOptions.
You count the boards from top to bottom of the page, so you get the number of each of them. With this number you address the specific values to that board.
The example above show all possible properties.
// individual options for every board
var iOthelly_options = {
1 : {'moveFirst' : 'WHITE', 'size' : 30, 'rowsCols' : 8, 'imgPath' : 'images/'},
2 : {'moveFirst' : 'WHITE', 'size' : 20, 'rowsCols' : 8, 'imgPath' : 'images/special'},
3 : {'moveFirst' : 'WHITE', 'size' : 10, 'rowsCols' : 8, 'imgPath' : 'images/morespecial/'}
}
Here are 3 examples of strategy guides where I changed the original static images against OTHELLY:
Othello: An Introduction to Strategy and Tactics by Colin Springer (Original)
Too many pieces can be bad for you! by Joel Feinstein (Original
In this demo one could use only two OTHELLY-Replayers instead of the five used in the (original) article. The first OTHELLY is feeded with all the moves shown in the next figures. The moves can be retraced by clicking the forward button.
The Art of Sacrificing Four Corners by Joel Feinstein (Original)
Here you'll find a zipped archive with all examples and a minified version of the js-file for download