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