Description
The completed project will implement a web application for playing the Set card game with multiple players
over a network. The first step of the project is to create a new NetBeans project, create the game page, display a
hand of cards on the screen and allow the player to select cards.
Instructions
1. Create an HTML5 application project in NetBeans and call it SetGame-. Eg., my version
would be called SetGame-jaf207.
2. The basic structure of the application will be a single html page that uses Ajax calls and web sockets to
communicate with the server.
3. Include all your JavaScript code and css in this single page. Load both the jQuery and jQueryUI libraries.
Download the images.zip file from Coursesite, unzip it and place the images in a separate images folder in the
project. Each Set card will now be designated by an integer from 1 to 81.
4. Layout the display page to look like the following:
Add 2 additional fields not shown on the graphic: a text box for entering a user name and a login button.
Use Bootstrap to break up the page into columns.
5. The display page should pre-load all the images from the images directory and store each one as an element in
an array to be used later. This might take a while, so you may want to display a progress indicator while this is
happening. Use the progressbar method from jQueryUI to do this.
6. Create a JavaScript function that takes an array of integers as a parameter and displays corresponding hand of
cards (x rows of 3 across) on the page. The list of cards is an array of integers, since each card is known by its own
integer. To test this function, hard code an array of 12 integers.
7. Implement an event handler on each image in the grid to surround the image with a border when it is clicked.
Toggle this border each time the image is clicked.
8. To submit your assignment, do a clean on your NetBeans project, ZIP it up and upload the zipped file to
Coursesite.
