The finishing touches

We already have a finished function - let's use it.

function piece_clicked(el) {
  if (g_piece=='') {
    g_piece=el;
    g_piece.classList.add('highlight');
  } else if (g_piece==el) {
    g_piece.classList.remove('highlight');
    g_piece='';
  } else {
    // swap
    var r=el.style.gridRowStart;
    var c=el.style.gridColumnStart;
    el.style.gridRowStart= g_piece.style.gridRowStart;
    el.style.gridColumnStart= g_piece.style.gridColumnStart;
    g_piece.style.gridRowStart=r;
    g_piece.style.gridColumnStart=c;
    g_piece.classList.remove('highlight');
    g_piece='';
    if (finished()) finale();
  }
}

For the finale I plan to simply remove the grid. A neat way to do this is to have the full picture stored behind the pieces and then simply hide the piece class.

I found that I needed to hide this picture otherwise it grabs the clicks!

You should be able to manage this all by yourself before checking the next page.