LIVECODE: Tile Puzzle

another_solution.js

// todo
const hintButton = document.querySelector('#show-hint');
const hint = document.querySelector('.hint');

hintButton.addEventListener('click', () => {
  hint.classList.toggle('active');
});

const isEmptyAbove = ({ tileColumn, tileRow, emptyTileColumn, emptyTileRow }) => {
  return (tileColumn == emptyTileColumn && tileRow == emptyTileRow - 1);
};

const isEmptyBelow = ({ tileColumn, tileRow, emptyTileColumn, emptyTileRow }) => {
  return (tileColumn == emptyTileColumn && tileRow == emptyTileRow + 1);
};

const isEmptyFront = ({ tileColumn, tileRow, emptyTileColumn, emptyTileRow }) => {
  return (tileRow == emptyTileRow && tileColumn == emptyTileColumn - 1);
};

const isEmptyBehind = ({ tileColumn, tileRow, emptyTileColumn, emptyTileRow }) => {
  return (tileRow == emptyTileRow && tileColumn == emptyTileColumn + 1);
};

const canMove = (tile) => {
  const emptyTile = document.querySelector('.empty');

  const coordinates = {
    tileRow: tile.parentElement.rowIndex,
    tileColumn: tile.cellIndex,
    emptyTileRow: emptyTile.parentElement.rowIndex,
    emptyTileColumn: emptyTile.cellIndex
  };

  return isEmptyAbove(coordinates) || isEmptyBelow(coordinates) ||
         isEmptyFront(coordinates) || isEmptyBehind(coordinates);
};

const checkIfPlayerWins = () => {
  const tilesOrder = Array.from(document.querySelectorAll('td')).map(e => {
    return parseInt(e.innerHTML)
  });
  if (tilesOrder.join() === "1,2,3,4,5,6,7,8,9,10,11,12,13,14,15,NaN") {
    alert("You win!");
  }
};

const move = (tile) => {
  const emptyTile = document.querySelector('.empty');
  const number = tile.innerText;
  tile.innerText = '';
  tile.classList.add('empty');
  emptyTile.classList.remove('empty');
  emptyTile.innerHTML = number;
  checkIfPlayerWins();
};

const tiles = document.querySelectorAll('td');
tiles.forEach(tile => {
  tile.addEventListener('click', () => {
    if (canMove(tile)) {
      move(tile);
    }
  })
});

livecode_solution.js

// todo
const hintButton = document.getElementById('show-hint');
const hint = document.querySelector('.hint');

hintButton.addEventListener('click', () => {
  hint.classList.toggle('active');
});

const tiles = document.querySelectorAll('td');

const isBelowEmpty = ({ emptyTileColumn, emptyTileRow, clickedTileColumn, clickedTileRow  }) => {
  return (emptyTileColumn === clickedTileColumn && emptyTileRow === clickedTileRow + 1);
};


const isAboveEmpty = ({ emptyTileColumn, emptyTileRow, clickedTileColumn, clickedTileRow  }) => {
  return (emptyTileColumn === clickedTileColumn && emptyTileRow === clickedTileRow - 1);
};

const isFrontEmpty = ({ emptyTileColumn, emptyTileRow, clickedTileColumn, clickedTileRow  }) => {
  return (emptyTileColumn === clickedTileColumn + 1 && emptyTileRow === clickedTileRow);
};

const isBehindEmpty = ({ emptyTileColumn, emptyTileRow, clickedTileColumn, clickedTileRow  }) => {
  return (emptyTileColumn === clickedTileColumn - 1 && emptyTileRow === clickedTileRow);
};


const canMove = (tile) => {
  const emptyTile = document.querySelector('.empty');

  const coordinates = {
    clickedTileRow: tile.parentElement.rowIndex,
    clickedTileColumn: tile.cellIndex,
    emptyTileRow: emptyTile.parentElement.rowIndex,
    emptyTileColumn: emptyTile.cellIndex
  }

  // (clickedTileRow === emptyTileRow) && (Math.abs(clickedTileColumn - emptyTileColumn) === 1)

  return isBelowEmpty(coordinates) || isAboveEmpty(coordinates) || isFrontEmpty(coordinates) || isBehindEmpty(coordinates);
}


tiles.forEach((tile) => {
  tile.addEventListener('click', () => {
    if (canMove(tile)) {
      const emptyTile = document.querySelector('.empty');

      number = tile.innerText;
      tile.innerText = '';
      tile.classList.add('empty');
      emptyTile.innerText = number;
      emptyTile.classList.remove('empty');
    }
  });
});

// Select all tiles
// Iterate through tiles
// Attach an event listener to each tile
// Determine if the tile can move

// Move Rules:
// See if there's empty tile
// Above Below Front Behind
// Row Index = tile.parentElement.rowIndex
// Column Index = tile.cellIndex

// If can move
// Remove value
// Add empty class
// Add number to empty cell
// Remove empty class from empty cell