function handleCanvasMouseDown(mouseDownEvent) {
  let mouseDownEventTarget = mouseDownEvent.target;

  // Horizontal Co-Ordinate
  let xCoOrd = mouseDownEvent.clientX - mouseDownEventTarget.offsetLeft;

  // Vertical Co-Ordinate
  let yCoOrd = mouseDownEvent.clientY - mouseDownEventTarget.offsetTop;

  // Determine whether the mouse click was in the relevant Canvas area
  if (xCoOrd % paddedSize >= basePadding && yCoOrd % paddedSize >= basePadding) {
    let tileIndex = Math.floor(xCoOrd / paddedSize);
    tileIndex += Math.floor(yCoOrd / paddedSize) * gridRowCount;

    // If the tile is not Blank, there's nothing more to do - return.
    if (canvasData[tileIndex].isNotBlank()) {
      console.warn("handleCanvasMouseDown - Tile (" + tileIndex + ") Has Already Been Played!");
      return;
    }

    // Else play it.
    canvasData[tileIndex].playTile(currentPlayTile);
    console.log("handleCanvasMouseDown - Tile (" + tileIndex + ") Played By " + currentPlayTile);
    currentPlayTile = currentPlayTile === playerO ? playerX : playerO;

    // Increment the filled tile count on a successful Tile Click
    filledTileCount++;
    if (filledTileCount === totalTileCount) {
      console.log("handleCanvasMouseDown - Current Game Has Ended.");

      // Enable the 'Play Again' functionality
      document.getElementById("restartButton").style.visibility = "visible";
    }
  } else {
    console.info("handleCanvasMouseDown - Clicked Outside Relevant Area.");
  }
}
/**
 * Handle clicks inside the Canvas.
 * Reponsibilities:
 * - Determine whether the click is on a Tile.
 * - Determine whether the clicked Tile has been played already.
 * - Provide functionality to play an unclicked Tile.
 * - Provide functionality to indicate end-of-game & allow for a restart.
 */
Handle clicks inside the Canvas.
Reponsibilities:
- Determine whether the click is on a Tile.
- Determine whether the clicked Tile has been played already.
- Provide functionality to play an unclicked Tile.
- Provide functionality to indicate end-of-game & allow for a restart.
Handle clicks inside the Canvas . Reponsibilities : - Determine whether the click is on a Tile . - Determine whether the clicked Tile has been played already . - Provide functionality to play an unclicked Tile . - Provide functionality to indicate end - of - game & allow for a restart .
function handleCanvasMouseDown(mouseDownEvent) {
  let mouseDownEventTarget = mouseDownEvent.target;
  let xCoOrd = mouseDownEvent.clientX - mouseDownEventTarget.offsetLeft;
  let yCoOrd = mouseDownEvent.clientY - mouseDownEventTarget.offsetTop;
  if (xCoOrd % paddedSize >= basePadding && yCoOrd % paddedSize >= basePadding) {
    let tileIndex = Math.floor(xCoOrd / paddedSize);
    tileIndex += Math.floor(yCoOrd / paddedSize) * gridRowCount;
    if (canvasData[tileIndex].isNotBlank()) {
      console.warn("handleCanvasMouseDown - Tile (" + tileIndex + ") Has Already Been Played!");
      return;
    }
    canvasData[tileIndex].playTile(currentPlayTile);
    console.log("handleCanvasMouseDown - Tile (" + tileIndex + ") Played By " + currentPlayTile);
    currentPlayTile = currentPlayTile === playerO ? playerX : playerO;
    filledTileCount++;
    if (filledTileCount === totalTileCount) {
      console.log("handleCanvasMouseDown - Current Game Has Ended.");
      document.getElementById("restartButton").style.visibility = "visible";
    }
  } else {
    console.info("handleCanvasMouseDown - Clicked Outside Relevant Area.");
  }
}
function handleCanvasMouseDown ( mouseDownEvent ) { let mouseDownEventTarget = mouseDownEvent . target ; let xCoOrd = mouseDownEvent . clientX - mouseDownEventTarget . offsetLeft ; let yCoOrd = mouseDownEvent . clientY - mouseDownEventTarget . offsetTop ; if ( xCoOrd % paddedSize >= basePadding && yCoOrd % paddedSize >= basePadding ) { let tileIndex = Math . floor ( xCoOrd / paddedSize ) ; tileIndex += Math . floor ( yCoOrd / paddedSize ) * gridRowCount ; if ( canvasData [ tileIndex ] . isNotBlank ( ) ) { console . warn ( "handleCanvasMouseDown - Tile (" + tileIndex + ") Has Already Been Played!" ) ; return ; } canvasData [ tileIndex ] . playTile ( currentPlayTile ) ; console . log ( "handleCanvasMouseDown - Tile (" + tileIndex + ") Played By " + currentPlayTile ) ; currentPlayTile = currentPlayTile === playerO ? playerX : playerO ; filledTileCount ++ ; if ( filledTileCount === totalTileCount ) { console . log ( "handleCanvasMouseDown - Current Game Has Ended." ) ; document . getElementById ( "restartButton" ) . style . visibility = "visible" ; } } else { console . info ( "handleCanvasMouseDown - Clicked Outside Relevant Area." ) ; } }
Handle clicks inside the Canvas.
Handle clicks inside the Canvas .
// Horizontal Co-Ordinate
 // Vertical Co-Ordinate
 // Determine whether the mouse click was in the relevant Canvas area
 // If the tile is not Blank, there's nothing more to do - return.
 // Else play it.
 // Increment the filled tile count on a successful Tile Click
 // Enable the 'Play Again' functionality
