Ataxx game viewer (WIP)

Ataxx 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
2. URL parameters
3. Data-attributes

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

UML diagram

Bugs

1. PGN multi game separation + show list of games
2. 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.