Assignment: Bridge Hands

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". The first time each deal is displayed, North, should be at the top, East, to the right, etc.
• 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, but should do so without forcing the browser to reload the page.
• 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 labelled "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. Because the cards are dealt randomly, 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 in the example above (this is called "rank ordering").

Submitting Your Page:

Submit your several files as a zip file to the dropbox. Make sure you include in your zip file all the .html files, as well as any image files (.gif and .jpg, for example) that your page references and any external style sheets or .js files. The main .html file (the one I will access with my browser) should be called bridge.html. Don't forget this!

Hints:

There are a number of ways to solve this. They differ primarily in how you display each of the four hands. One way is to display each in its own textarea (<textarea>). Give each textarea its own id, so the JS can access each independently. The value property of a <textarea> is where you will encode a hand. The textareas have a specific number of columns, so you can cause each of the suits to appear on a separate line by inserting an appropriate number of space characters between them (you'll have to calculate the number). The onload event can be used to provide the initial value properties. Rotation can be accomodated either by exchanging the values of the 4 textareas, or by changing the top and left properties appropriately.

Another approach is to have each hand representated by a <div> having position properties. Each div should have an id for access by JS. In each <div> you might place four <span>, one for each suit.

Other approaches involve using 4 text boxes (<input type="text">) for each hand, or using tables.

See the section in Chapter 6, Dynamic Content, in the textbook for how to redeal the hands. You'll need to define each of the four lines of each hand as a textbox (<textarea>) 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 the section, Moving Elements, 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.

How to Proceed:

Start by displaying a single hand. The onload event can be used to set the value of the hand. The exact method will vary with the approach that you take.

Now try to get all four hands to display, but don't worry about positioning the hands in a "circle".

Next, position the hands into a "circle" by using the position, left, and top properties.

Next, add a button that "redeals" the hands.

You should add the rotation ability after you get a single deal to display properly.

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.