Now we need to decide how to remove completed suits and show them as a pile somewhere.
You may remember that quite early on we left space on the right of the canvas for an 11th column which has so far been empty. First it would be good to indicate that column. One way would be to fill it with a grey background. Add 2 lines to GAME.game.draw(), which in our example is Spider:
Spider.prototype.draw = function ()
{ GAME.g2.fillStyle = '#000';
GAME.g2.fillRect (0, 0, GAME.cnv.width, GAME.cnv.height);
GAME.g2.fillStyle = '#777';
GAME.g2.fillRect (GAME.cnv.width - this.COL_WIDTH, 0,
this.COL_WIDTH, GAME.cnv.height);
GAME.targets = [];
for (const COLUMN of GAME.COLUMNS) COLUMN.draw ();
// to do: remainder pile
};
The grey area will be used both for completed suits and the remainder pile. The latter is still to be designed.
Let's keep things very simple for now. When a suit is complete it will be removed and we will simply put a count of completed suits near the top of that extra column. Later we could look at how to animate the cards flying to that column. For now we need a counter to be initialised in Spider():
this.nCompleted = 0;
When a suit is complete we can increment that number and remove the last 13 cards from the relevant column. I will leave that as an exercise but you will see my version when I show all the sources when these pages are complete.
Similarly, you should be able to use fillText() to write the number completed every time the canvas is redrawn. You will need to set the text colour and font.