HTML and CSS Reference
In-Depth Information
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.
Search WWH ::

Custom Search