Assignment 1: Bridge Hands

Due Thursday, 10/2/08

Create a web page that displays randomly generated bridge deals. Bridge deals should be displayed in a format like this:

	NORTH A 4 3 K Q J 10 K 5 2 9 8 7
WEST Q J 10 A 10 8 7 6 4 J 4 3 2		EAST 9 8 7 6 2 9 8 7 6 2 10 6 5
	SOUTH K 5 5 4 3 A Q J 9 3 A K Q

Note that each deal consists of four hands, labelled "North", "East", "South" and "West".
Each time the page is loaded it should display a new deal.
The page should provide a button that rotates the hands clockwise. I.e., the hand currently shown at the top is moved to the right position, the hand that was at the right is moved to be at the bottom, etc. The titles ("North", "South", etc.) should move with the hands. So, after rotation, the above deal should look like this:

	WEST Q J 10 A 10 8 7 6 4 J 4 3 2
SOUTH K 5 5 4 3 A Q J 9 3 A K Q		NORTH A 4 3 K Q J 10 K 5 2 9 8 7
	EAST 9 8 7 6 2 9 8 7 6 2 10 6 5

The page should also provide a button that deals a new hand.
Your source code should be formatted so that it is easily readable: use indentation, etc.

Notes on bridge hands:

Bridge is played with a standard deck of 52 cards. Such a deck consists of 4 suits: spades (), hearts (), diamonds () and clubs (). Each suit consists of 13 cards labelled 2,3,4,5,6,7,8,9,10, J, Q, K, A.) Hands are formed by dealing the entire deck out evenly among four players, usually named "North", "East", "South" and "West" in the bridge literature. Thus each player ends up with 13 (uniformly) randomly selected cards, and the union of the cards in the four hands (NSEW) should form a complete deck of 52 cards. Consequently you cannot make any assumptions about the distribution of cards within any particular player's hand. A player might have 10 spades, 1 heart, 0 diamonds and 2 clubs, for example (this would be an exceedingly unlikely distribution, but it is possible,) or they might have 4 spades, 2 hearts, 4 diamonds and 3 clubs. Your code should be able to handle any distribution.

The suits of each hand are displayed in the order shown: spades on top, followed by hearts, diamonds and then clubs. Each suit should be ordered: A, K, Q, J, 10, 9, 8, 7, 6, 5, 4, 3, 2, as shown above.

Submitting Your Page:

Submit a single zip file containing all necessary files to load your page to the homework submission system): the main .html file, as well as any image files (.gif and .jpg, for example) that your page references. The main .html file (the one I will access with my browser) should be called bridge.html. Don't forget this!

Also, don't forget to submit hardcopies of your files at the beginning of class (when we next meet), as well.

Hints:

See chapter 7, in the book for how to redeal the hands. One solution is to define each of the four lines of each hand as a textbox (<input type="text"...>) in a form. The value property of each defines the text provided therein. The hand labels, however, should not be provided in a text box, but should just be normal html text. The textboxes should be defined in the <body> block of your html document. Your javascript will merely change the value attribute of the textboxes.

See chapter 8, on arrays, to see how to rotate the hands. You might want to use the <span> or <div> tags to identify sections of html to be rotated.

You should be able to do all of this on your PC without having to post your page on a web server (in fact you should avoid using a server in case some other student accesses your pages there and attempts to copy them and pass them off as their own work!) Just use the File menu of your browser to open the .html file on your PC.

When you submit your page to me, make sure you submit all the files used by your page.

Bridge is a Great Game:

If you are interested in bridge, there is a huge amount of on-line and written literature on the subject. A good starting place is the web site for the American Contract Bridge League (ACBL). There is a link from there to a number of places where you can play bridge on-line with tens of thousands of players.