Ataxx game viewer (WIP)
GamesAtaxx game viewer
Ataxx game viewer is a tool to replay Ataxx games.
Contents
- Ataxx game viewer
- Ataxx
- License
- Usage
- Quick start
- Examples (WIP)
- 1. Example game
- 2. Data attributes - URL
- 3. Data attributes - FEN string
- 4. Live view
- FEN or PGN?
- UML diagram
- Bugs
- Future improvements
- FEN notes
- Glossary
- Downloads
Ataxx
Ataxx is a strategy board game by The Leland Corporation in 1990. See the Wikipedia article about Ataxx for more information.
License
joriszwart.nl License. Do distribute, but do not modify. Patches are welcome.
Usage
Drag'n'drop a file onto the viewer. Currently only .fen files are supported.
Quick start
Download the .zip [link] and unzip to a (static) webserver.
Examples (WIP)
The ataxx game viewer can be instantiated using different methods.
1. Example game
Default it tries to load from the query string (e.g. ?url=games/short.fen) or the preset games/game.fen.
Note that for cross-domain calls (e.g. viewer is on domain A and the games are on domain B) CORS-headers are needed.
Use an anchor (#) to jump to a move.
2. Data attributes - URL
Using the data attribute data-url
it can load a specific
game. Useful for multiple viewers on a page!
3. Data attributes - FEN string
Showing a single move is possible with data-fen
.
Live view
data-ws
loads a running game from a websocket.
sashaxxx-rpi3b|randoxx-rpi3b fen 7/4x2/3xx2/3x3/1x5/x6/x5x o 0 6 d5 1572616580.934179 new_pair randoxx-rpi3b sashaxxx-rpi3b 1572616632.469679 fen oooxxxx/xooxxxx/ooxxxxx/ooxxoox/oxxxoox/xxxxoox/xxxxoox o 0 51 d5e6 1572616886.532868
Events
ws.onvictory = function (event) {
$flash.textContent = 'Disconnected. Please wait.'
// reconnect fibonacci
}
ondrop (filename, data) => {
}
onnewlivegame () => {
// add to running games
}
onend instance => {
instance.remove()
}
FEN or PGN?
That is the question...
PGN | FEN | |
---|---|---|
Half moves | no | yes |
Initial board setup | yes | yes |
Progressive rendering | no | yes |
Tag support | yes | no |
True Moves™ | yes | no |
UML diagram
Bugs
- PGN multi game separation + show list of games
- PGN: irregular moves not handled (‘start’, ‘0-1’, ‘bestmove’, comments etc)
Future improvements
- celebrate victory!
- animated pieces
- two player play
- AI player play
- validate FEN board against position on next move (ie. a piece must exist on position)
- validate FEN board for new pieces
- FEN string as query param (?fen=) to render a single move (or jump to in case of a loaded game)
- move number as data-* or query param (?move=) to render a single move (or jump to in case of a loaded game)
- as pop over / widget
- rewrite renderer to svg / responsive canvas / css grid (use vw in any case to get it to 100% width or 100% height)
- animate piece instead of source and destination blueish
- test loads of games FEN against the same PGN game for discrepancies
FEN notes
6o/7/x2o3/7/7/6x/6x x 3 6o/2x4/3x3/7/7/6x/6x o 0 1 7/2x4/3x2o/7/7/6x/6x x 1 2 7/2x2x1/6x/7/7/6x/6x o 0 2 6o/7/x2o3/7/7/6x/6x x 3
# zet | fen | player aan zet | halfmove | move START x5o/6o/7/7/7/7/2xx2x x 0 1 a6 x5o/x5o/7/7/7/7/2xx2x o 0 1 f7 x4oo/x5o/7/7/7/7/2xx2x x 0 2 b6 x4oo/xx4o/7/7/7/7/2xx2x o 0 2 f5 x4oo/xx4o/5o1/7/7/7/2xx2x x 0 3 c5 x4oo/xx4o/2x2o1/7/7/7/2xx2x o 0 3 f5d4 x4oo/xx4o/2o4/3o3/7/7/2xx2x x 0 4 b6d5 x4oo/x5o/2xx3/3x3/7/7/2xx2x o 0 4 f6 x4oo/x4oo/2xx3/3x3/7/7/2xx2x x 0 5 d4b5 x4oo/x4oo/1xxx3/7/7/7/2xx2x o 1 5 f6e4 x4oo/x5o/1xxo3/4o2/7/7/2xx2x x 0 6 c6 x4oo/x1x3o/1xxx3/4o2/7/7/2xx2x o 0 6 e4d6 x4oo/x1oo2o/1xoo3/7/7/7/2xx2x x 0 7
Only 'zet' and 'fen' are needed.
I think it would be better that spawns like 'a6' are like 'a7a6' so you know which move it was (arrow drawing) -> -> activitely check the passed .fen and .pgn files for this behaviour, however it could be that they are constructed in a way that they are always correct (e.g. a clone can be marked as 'a6 only' or if there is only one neighbour) -> d.d. 12 nov 2019: no, they aren't but it doesn't matter really
Protip
Protip: you can save an image of the board by right clicking or long tapping it!
Downloads
See ataxx-viewer.zip or source code.