8.3. Overall Structure and Files
The directory structure of Dueling Cards is very similar to all the previous applications, although there are a few differences, as you can see in Figure 8-3.
We have the usual styles.css file in the css directory and the index.htm file in the root directory. The primary difference between this and previous applications is the addition of a couple of directories under the img directory. The cardBacks directory contains images for the backs of the cards. You'll notice three different images: basicRed.gif, basicBlue.gif, and ashley.gif. The first two are, as their name implies, your basic, run-of-the-mill red and blue patterned card backs. The ashley.gif one gives you a more playful card back.
NOTE
In my previous book, Practical Dojo Projects, my son Andrew designed the levels for the game project presented there. My daughter Ashley, after seeing that, asked to play a role in this book somehow. My son is a few years older than my daughter, however (9 versus 6), and is starting to get into programming a little bit, while my daughter is the typical little princess with the dolls and tea parties and all that jazz and she doesn't really share my son's fledgling interest in programming (although she can use a computer just fine, better than some people I've seen at work!). So, I needed a task she could do that didn't involve coding, and a card back image turned out to be a good choice.
Figure 8.3. The application's directory structure and constituent files
The cardFaces directory, which I haven't expanded in the figure because it would be too long, is where you'll find 53 images, one for each card in a standard deck, plus one joker. The pageBacks directory contains a couple of images used as the background for the page, and users can switch those just like they can the card back in use.
The js directory contains all our code, and in this application I've structured it a little differently. This time, the files generally describe the functional area they belong to in the application rather than individual classes of UI component definitions. For example, the Data.js file contains the data fields that are a part of the DuelingCards namespace, which is defined in the DuelingCards.js file. The IndicatorsCode.js file contains code dealing with the indicator arrows around the action cards, and the MenuCode.js file contains the code related to the main menu. The OpponentCode.js file houses all the code that makes up the computer opponent you'll be trying to beat, and the SetupCode.js file contains code run at application startup.