Notes for Class No. 26

Student “Show and Tell” of Preliminary Assignment No. 9 Scrabble Implementations

Thursday, December 3, 2015

A video of this class is (or will be) posted at: http://echo360.uml.edu/heines201516/guiprogramming1.html

Handouts and Materials

Assignment No. 9: Implementing a Bit of Scrabble with Drag-and-Drop

Openings / Announcements / Reminders

Class Notes

Working with Associative Arrays in JavaScript (continued)

Working Web Page

Discussed in last class ...

The Associative Array

/*  File:  /~heines/91.461/91.461-2015-16f/461-assn/Scrabble_Pieces_AssociativeArray_Jesse.js
 *  Jesse M. Heines, UMass Lowell Computer Science, heines@cs.uml.edu
 *  Copyright (c) 2015 by Jesse M. Heines.  All rights reserved.  May be freely 
 *    copied or excerpted for educational purposes with credit to the author.
 *  updated by JMH on November 21, 2015 at 10:27 AM
 *  updated by JMH on November 25, 2015 at 10:58 AM to add the blank tile
 *  updated by JMH on November 27, 2015 at 10:22 AM to add original-distribution
 */
 
var ScrabbleTiles = [] ;
ScrabbleTiles["A"] = { "value" : 1,  "original-distribution" : 9,  "number-remaining" : 9  } ;
ScrabbleTiles["B"] = { "value" : 3,  "original-distribution" : 2,  "number-remaining" : 2  } ;
ScrabbleTiles["C"] = { "value" : 3,  "original-distribution" : 2,  "number-remaining" : 2  } ;
ScrabbleTiles["D"] = { "value" : 2,  "original-distribution" : 4,  "number-remaining" : 4  } ;
ScrabbleTiles["E"] = { "value" : 1,  "original-distribution" : 12, "number-remaining" : 12 } ;
ScrabbleTiles["F"] = { "value" : 4,  "original-distribution" : 2,  "number-remaining" : 2  } ;
ScrabbleTiles["G"] = { "value" : 2,  "original-distribution" : 3,  "number-remaining" : 3  } ;
ScrabbleTiles["H"] = { "value" : 4,  "original-distribution" : 2,  "number-remaining" : 2  } ;
ScrabbleTiles["I"] = { "value" : 1,  "original-distribution" : 9,  "number-remaining" : 9  } ;
ScrabbleTiles["J"] = { "value" : 8,  "original-distribution" : 1,  "number-remaining" : 1  } ;
ScrabbleTiles["K"] = { "value" : 5,  "original-distribution" : 1,  "number-remaining" : 1  } ;
ScrabbleTiles["L"] = { "value" : 1,  "original-distribution" : 4,  "number-remaining" : 4  } ;
ScrabbleTiles["M"] = { "value" : 3,  "original-distribution" : 2,  "number-remaining" : 2  } ;
ScrabbleTiles["N"] = { "value" : 1,  "original-distribution" : 6,  "number-remaining" : 6  } ;
ScrabbleTiles["O"] = { "value" : 1,  "original-distribution" : 8,  "number-remaining" : 8  } ;
ScrabbleTiles["P"] = { "value" : 3,  "original-distribution" : 2,  "number-remaining" : 2  } ;
ScrabbleTiles["Q"] = { "value" : 10, "original-distribution" : 1,  "number-remaining" : 1  } ;
ScrabbleTiles["R"] = { "value" : 1,  "original-distribution" : 6,  "number-remaining" : 6  } ;
ScrabbleTiles["S"] = { "value" : 1,  "original-distribution" : 4,  "number-remaining" : 4  } ;
ScrabbleTiles["T"] = { "value" : 1,  "original-distribution" : 6,  "number-remaining" : 6  } ;
ScrabbleTiles["U"] = { "value" : 1,  "original-distribution" : 4,  "number-remaining" : 4  } ;
ScrabbleTiles["V"] = { "value" : 4,  "original-distribution" : 2,  "number-remaining" : 2  } ;
ScrabbleTiles["W"] = { "value" : 4,  "original-distribution" : 2,  "number-remaining" : 2  } ;
ScrabbleTiles["X"] = { "value" : 8,  "original-distribution" : 1,  "number-remaining" : 1  } ;
ScrabbleTiles["Y"] = { "value" : 4,  "original-distribution" : 2,  "number-remaining" : 2  } ;
ScrabbleTiles["Z"] = { "value" : 10, "original-distribution" : 1,  "number-remaining" : 1  } ;
ScrabbleTiles["_"] = { "value" : 0,  "original-distribution" : 2,  "number-remaining" : 2  } ;

The HTML file

<!DOCTYPE HTML> <html> <head> <title>Scrabble Associative Array Demo</title> <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />  <meta name="description" content="For 91.461 Assignment No. 9" /> <link type="text/css" rel="stylesheet" href="/~heines/blueverdana08pt.css"></link> <link type="text/css" rel="stylesheet" href="Scrabble_Pieces_AssociativeArray_Jesse_Test.css"></link>  <script type="text/javascript" src="/~heines/jQuery/jquery-2.1.4.min.js"></script>  <script src="Scrabble_Pieces_AssociativeArray_Jesse.js"></script> <script> $(document).ready( function () { // define variables here to thwart hoisting var char ; // uppercase character indicated by the loop index var newTableRow ; // one row of the table var newTableCell ; // one cell in a table row var nTilesOriginal = 0 ; // number of tiles in original distribution // (to check that all 100 accounted for) var nTilesRemaining = 0 ; // number of tiles remaining during the game // populate table of tile values // note that an associative array is actually an object, so to get its length // we have to first reference its keys and count those for ( k = 0 ; k < Object.keys( ScrabbleTiles ).length + 1 ; k++ ) { // convert the integer loop index to an uppercase character, which the // subscript of the associative array of tile objects if ( k < Object.keys( ScrabbleTiles ).length - 1 ) { char = String.fromCharCode( 65 + k ) ; } else if ( k < Object.keys( ScrabbleTiles ).length ) { char = "_" ; } else { char = "Total" ; } // create a new table row to hold the info on one tile newTableRow = $("<tr></tr>" ) ; // create a new table cell to hold the letter of the tile we're looking at newTableCell = $("<td></td>" ) ; if ( k < Object.keys( ScrabbleTiles ).length ) { // all rows except the last if ( char !== "_" ) { // handle all tiles except the blank // put the letter of the tile into the new table cell newTableCell.text( char ) ; } else { // handle the blank newTableCell.text( "Blank" ) ; } } else { // handle the last row, which will contain the total number of tiles newTableCell.attr( "colspan", "2" ) ; // row title will span 2 columns newTableCell.css( { // format the last row as white text on black background "font-weight" : "bold", "font-style" : "italic", "background-color" : "black", "color" : "white", "text-align" : "right" } ) ; newTableCell.text( "Total Tiles:" ) ; // set title for last row } // append the new table cell to the new table row newTableRow.append( newTableCell ) ; // display letter tile values if ( k < Object.keys( ScrabbleTiles ).length ) { // all rows except the last // create a new table cell to hold the value of the tile we're looking at newTableCell = $("<td></td>" ) ; // put the letter of the tile into the new table cell // here we can use the dot syntax because "value" is a plain indentifier newTableCell.text( ScrabbleTiles[ char ].value ) ; // append the new table cell to the new table row newTableRow.append( newTableCell ) ; } // display original letter tile distribution if ( k < Object.keys( ScrabbleTiles ).length ) { // all rows except the last // create a new table cell to hold the value of the tile we're looking at newTableCell = $("<td></td>" ) ; // put the letter of the tile into the new table cell // here we can use the dot syntax because "value" is a plain indentifier newTableCell.text( ScrabbleTiles[ char ][ "original-distribution" ] ) ; // add number of tiles for this letter to the count of the total number of tiles nTilesOriginal += ScrabbleTiles[ char ][ "original-distribution" ] ; // append the new table cell to the new table row newTableRow.append( newTableCell ) ; } // create a new table cell to hold the number of tiles remaining of the tile // we're looking at newTableCell = $("<td></td>" ) ; if ( k < Object.keys( ScrabbleTiles ).length ) { // put the numer of tiles for the letter into the new table cell // here we must use the 2-D array syntax because "number-remaining" contains a hyphen newTableCell.text( ScrabbleTiles[ char ][ "number-remaining" ] ) ; // add number of tiles for this letter to the count of the total number of tiles nTilesRemaining += ScrabbleTiles[ char ][ "number-remaining" ] ; // append the new table cell to the new table row newTableRow.append( newTableCell ) ; } else { // add cell for total number of letter tiles in original distribution newTableCell.css( { "font-weight" : "bold", "background-color" : "black", "color" : "white" } ) ; newTableCell.text( nTilesOriginal ) ; // append the new table cell to the new table row newTableRow.append( newTableCell ) ; newTableCell = $("<td></td>" ) ; // create another table cell // add cell for total number of letter tiles remaining newTableCell.css( { "font-weight" : "bold", "background-color" : "black", "color" : "white" } ) ; newTableCell.text( nTilesRemaining ) ; // append the new table cell to the new table row newTableRow.append( newTableCell ) ; } // append the complete table row to the table $("#tbl").append( newTableRow ) ; } } ) ; </script> <style> /* enhance CSS from version 1 */ /* make the table head column separators white */ /* (start with the 3rd column and go backwards) */ th:nth-child(-n+3) { border-right : 1px solid white ; } </style> </head> <body> <table id="tbl"> <tr> <th>Tile</th> <th>Value</th> <th>Orig.<br>Dist.</th> <th>No.<br>Left</th> </tr> </table> </body> </html>

To be discussed today ...

The CSS File

/*  File:  
 *    /~heines/91.461/91.461-2015-16f/461-assn/Scrabble_Pieces_AssociativeArray_Jesse_Test.css
 *  Jesse M. Heines, UMass Lowell Computer Science, heines@cs.uml.edu
 *  Copyright (c) 2015 by Jesse M. Heines.  All rights reserved.  May be freely 
 *    copied or excerpted for educational purposes with credit to the author.
 *  updated by JMH on November 21, 2015 at 10:24 AM
 */


/* add borders to the table the CSS way */
table {
  border-spacing : 0 ;
  border-collapse : collapse ;
}

/* format the table cells the CSS way */
td, th {
  text-align : center ;
  border : 1px solid black ;
  padding : 0px 5px ;
}

/* format the table head cells the CSS way */
th {
  background-color : black ;
  color : white ;
}

/* make the table head column separators white */
/* (start with the 2nd column and go backwards) */
th:nth-child(-n+2) {
  border-right : 1px solid white ;
}