Chess Board Additions

This entire post can also be downloaded as a text file from
http://www.iohelix.com/misc/chess_board_additions.txt

This addition adds rank and file indicators to all four sides
of the chess board, as well as adds a html class indicating
the from square and to square for the last move (this feature
is disabled when reviewing previous games, as it makes no sense)
This also fixes the reversed black and white squares classes.

~Benjam Welker 2005-11-02
**email removed, see text file**

Files Changed:
  $Id: board.js,v 1.2 2004/11/06 17:10:41 dadij Exp
  $Id: chess.css,v 1.3 2004/11/06 17:09:20 dadij Exp
==========================================================
FIRST
Backup and open ./javascript/board.js
Find the javascript function

function htmlBoard()

and replace the entire function with the following
----------------------------------------------------------
function htmlBoard()
{ // Returns the HTML-code for an empty chessboard (Note: Fixed square size and theme)
  var i,j,k;
  var classWSquare;
  var classBSquare;
  var classHeader;
  var fileLabel;
  var xtra;
  var lastMove = chessHistory[chessHistory.length-1];
  var invertBoard = (perspective == 'black');
  var borderWidth = squareSize / 2;
  var rank = 8;
  var rankLabel = rank;

  if(isBoardDisabled == '')
  {
    classWSquare = 'light_enabled';
    classBSquare = 'dark_enabled';
    classHeader = 'header_enabled';
  }
  else
  {
    classWSquare = 'light_disabled';
    classBSquare = 'dark_disabled';
    classHeader = 'header_disabled';
  }

  var sqBackground = [classBSquare, classWSquare];

  if(invertBoard)
    rankLabel = 1

  j = 1;

  theBoard = '<table id="theBoard" cellpadding="0" style="border:1px solid #888; padding:0; border-collapse: collapse;border-spacing:0; margin-bottom:5px;">\n';
  theBoard += '<tr id="bordertop" style="height:' + borderWidth + 'px;">\n<td width="' + borderWidth + '" class="' + classHeader + '">&nbsp;<\/td>\n';

  for(i = 0; i < 8; i++)
  {
    if(invertBoard)
      fileLabel = Files[7-i];
    else
      fileLabel = Files[i];

    theBoard += '<td id="file_t' + i + '" class="' + classHeader + '" width="' + squareSize + '">' + fileLabel + '<\/td>\n';
  }

  theBoard += '<td width="' + borderWidth + '" class="' + classHeader + '">&nbsp;<\/td>\n</tr>';
  theBoard += '<tr>\n<td id="rank_r' + rank-- + '" class="' + classHeader + '" width="' + borderWidth + '">' + rankLabel + '</td>\n';

  for(k = 63; k >= 0; k--)
  {
    if((k+1) % 8 == 0)
    {
      i = k - 7;
      if(invertBoard)
        i = 63 - i;
    }
    else
    {
      if(invertBoard)
        i--;
      else
        i++;
    }

    var row = parseInt(i / 8);
    var col = i % 8;

    if(row == lastMove[2] && col == lastMove[3] && '' == isBoardDisabled)
      xtra = " fromSquare";
    else if(row == lastMove[4] && col == lastMove[5] && '' == isBoardDisabled)
      xtra = " toSquare";
    else
      xtra = "";

    theBoard += '<td id="tsq' + i + '" class="' + sqBackground[j] + xtra + '">';
    var piece = '';
    var source = '';
    if(board[row][col] != 0)
    {
      piece = getPieceColor(board[row][col]) + '_' + getPieceName(board[row][col]);
      source = 'images/' + CURRENTTHEME + '/' + piece + '.gif'; // Update the square
      theBoard += '<img alt="' + piece + '" id="sq' + i + '" ';
      theBoard += 'src="' + source + '" width="' + squareSize + '" height="' + squareSize + '" />';
    }
    else
    {
      theBoard += '&nbsp;';
    }
    theBoard += '<\/td>\n';
    if ( (k % 8) === 0 )
    {
      theBoard += '<td id="rank_l' + (rank+1) + '" class="' + classHeader + '">' + rankLabel + '<\/td>\n<\/tr>';
      if (k != 0)
      {
        if(invertBoard)
          rankLabel = 9 - rank;
        else
          rankLabel = rank;

        theBoard += '<tr>\n<td id="rank_r' + rank-- + '" class="' + classHeader + '" height="' + squareSize + '">' + rankLabel + '</td>\n';
      }
    }
    else
    {
      j = 1 - j;
    }
  }

  theBoard += '<tr id="borderbottom" height="' + borderWidth + '">\n<td class="' + classHeader + '">&nbsp;<\/td>\n';

  for (i = 0; i < 8; i++)
  {
    if (invertBoard)
      fileLabel = Files[7-i];
    else
      fileLabel = Files[i];

    theBoard += '<td id="file_b' + i + '" class="' + classHeader + '">' + fileLabel + '<\/td>\n';
  }
  theBoard += '<td class="' + classHeader + '">&nbsp;<\/td>\n<\/tr>\n<\/table>';
  return theBoard;
}
==========================================================
Save and close board.js

SECOND
Backup and open ./chess.css
and find the following rules

.header_enabled  {background-color: #F5F5DC; text-align: center; font-family: Arial, sans-serif; font-size: 16px; font-weight: bold; color: #888;}
.header_disabled {background-color: #DDDDDD; text-align: center; font-family: Arial, sans-serif; font-size: 16px; font-weight: bold; color: #888;}
.light_disabled {background-color: #444444; text-align: center; font-family: Arial, sans-serif; font-weight: bold; color: #888;}
.dark_disabled {background-color: #BBBBBB; text-align: center; font-family: Arial, sans-serif; font-weight: bold; color: #888;}
.light_enabled {background-color: #772222; text-align: center; font-family: Arial, sans-serif; font-weight: bold; color: #888;}
.dark_enabled {background-color: #CCBBBB; text-align: center; font-family: Arial, sans-serif; font-weight: bold; color: #888;}

and replace them all with the following (order IS important)

.fromSquare {background: url("./images/from.gif") center no-repeat;}
.toSquare {background: url("./images/to.gif") center no-repeat;}

.header_enabled, .header_disabled,
.light_enabled, .light_disabled,
.dark_enabled, .dark_disabled
  {text-align: center; font-family: Arial,sans-serif; font-weight: bold; color: #888;}

.header_enabled {background-color: #F5F5DC; font-size: 16px;}
.header_disabled {background-color: #DDD; font-size: 16px;}
.light_disabled {background-color: #BBB;}
.dark_disabled {background-color: #444;}
.light_enabled {background-color: #CBB;}
.dark_enabled {background-color: #722;}

Save and close chess.css.

Download the following images and place them in the images directory:

http://www.iohelix.com/webchess/images/from.gif
http://www.iohelix.com/webches/images/to.gif

Upload all and test.
DONE!