HTML and CSS Reference
When you run this application again, this configuration will not be necessary. The chess board should look
like Figure 11-4 .
Figure 11-4. The completed check board with static positions
■ If you want to remove the database from your machine, you can find the folder where they are stored and
delete the corresponding subfolder. On my machine, the path is: C:\Users\Mark.INTERNAL\AppData\
Roaming\Mozilla\Firefox\Profiles\jch09kcf.default\indexedDB . In this folder there is a subfolder for
each database. The subfolder name includes the protocol (http), domain name, and port, if applicable. For my appli-
cation this is http+++localhost+17018 . delete this folder and restart the browser. The page should reconfigure
the database since it must create a new one.
Moving the Pieces
Now you're ready to animate the board by moving the pieces around. You'll use the same canned moves that
were used in Chapter 10. A piece can be moved by simply updating its position and then redrawing the board.
There is one complication; however, if a move captures a piece, you need to remove it from the board. For now,
you'll simply delete the object from the store but I'll show you a better way at the end of the chapter.
Defining the Moves
Since you're so database savvy now, you'll store the moves in the database as well. A move is defined by the
starting and ending positions. For example, “move the piece at e2 to e3”. You'll number these moves from 1
to 7 so they will be applied in the correct order. You'll need a new object store to hold the move details. To do
that you'll need to specify a new version, which will raise the onupgradeneeded event. Then you'll add logic the
configureDatabase() function to create the new store.