What next?

You will have noticed that I added a straight display of the four squares so you could compare it to the scrambled version underneath.

Next we want to implement the swapping of two pieces by clicking. This is much like the clicking on the cards in the Pairs Game in Project 1 but simpler:

1. I've clicked a piece. Remember it.

2. I've clicked a piece.

3. If it is the remembered piece again, go to step 5.

4. Swap the two pieces.

5. Forget the remembered piece and go to step 1.

We'll need a global for the remembered piece.
globals.js
var g_piece='';
piece_clicked.js
function piece_clicked(el) {
  if (g_piece=='') {
    g_piece=el;
  } else if (g_piece==el) {
    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='';
  }
}