calculateSquareSize: Use 12.5% for square width and px for square height

[ngocdaothanh]

trafficstars

If we use the result of calculateSquareSize for width of the squares, there may be gap between the board and its container:

The result should only be used for square height.

Fix:

       html += '<div class="' + CSS.square + ' ' + CSS[squareColor] + ' ' +
         'square-' + square + '" ' +
-        'style="width: ' + SQUARE_SIZE + 'px; height: ' + SQUARE_SIZE + 'px" ' +
+        'style="width: 12.5%; height: ' + SQUARE_SIZE + 'px" ' +

   html += 'alt="" ' +
   'class="' + CSS.piece + '" ' +
   'data-piece="' + piece + '" ' +
-  'style="width: ' + SQUARE_SIZE + 'px;' +
+  'style="width: 100%;' +
   'height: ' + SQUARE_SIZE + 'px;';

   // set board width
-  boardEl.css('width', (SQUARE_SIZE * 8) + 'px');
+  boardEl.css('width', '100%');

[ngocdaothanh]

It turns out that the chess piece move animation becomes strange if we use % unit.

A simple solution is in calculateSquareSize just return (containerEl.width() - 1) / 8.

[ngocdaothanh]

Sorry, the above works on Chrome, but not Firefox (board rows will overflow to their next rows).

[ngocdaothanh]

Back to my first msg and the animation problem. It seems that the animation problem is solved by using px at buildPiece when we call that method for animation, and using % for other cases.