previous

page 12

next
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.

previous
next