In the Spider constructor we already had
this.REMAINDER = [];
and noted that something would be done later to make this hold the cards remaining after the initial deal. We need to show it (face down) in the grey side column so it can be clicked on to cause further deals, 10 cards at a time. As well as Spider.deal() we will need Spider.dealMore(). I will also show here the material added to Spider.draw() for the side column:
Spider.prototype.deal = function ()
{ // 4 rows + 4 cards face down then a row face up
// 5 deals of 10 remaining
var colNo = 0;
for (var i = 0; i < 54; i++)
{ var card = GAME.deck.getCard (i);
if (i > 43) card.reveal ();
GAME.COLUMNS [colNo].addCard (card);
colNo++;
if (colNo >= GAME.N_COLUMNS) colNo = 0;
}
for (i = 54; i < 104; i++)
{ this.REMAINDER.push (GAME.deck.getCard (i));
}
};
Spider.prototype.dealMore = function ()
{ if (this.REMAINDER.length < 10) return;
for (const COL of GAME.COLUMNS)
{ if (COL.isEmpty ())
{ alert ("You cannot deal when\nthere are empty columns");
return;
} }
for (var i = 0; i < 10; i++)
{ var card = this.REMAINDER.pop ();
card.reveal ();
GAME.COLUMNS [i].addCard (card);
}
recordDealInHistory ();
this.draw ();
};
Spider.prototype.draw = function ()
{ GAME.g2.fillStyle = '#000';
GAME.g2.fillRect (0, 0, GAME.cnv.width, GAME.cnv.height);
GAME.g2.fillStyle = '#777';
var sideColXLeft = GAME.cnv.width - 20 - this.COL_WIDTH;
GAME.g2.fillRect (sideColXLeft, 0,
this.COL_WIDTH, GAME.cnv.height);
GAME.targets = [];
for (const COLUMN of GAME.COLUMNS) COLUMN.draw ();
GAME.g2.fillStyle = '#fff';
GAME.g2.font = "24px sans-serif";
var txt = (this.nCompleted < this.N_SUITS) ?
this.nCompleted : "YOU WIN!";
GAME.g2.fillText (txt, sideColXLeft + 10,
Card.prototype.height + 40);
if (this.REMAINDER.length >= 10)
{ var xL = sideColXLeft + 10, yT = 10, card = GAME.BACK;
GAME.g2.putImageData (card, xL, yT);
var targetWd = Card.prototype.width,
targetHt = Card.prototype.height;
GAME.targets.push (new Target (xL, yT,
xL + targetWd, yT + targetHt, this.REMAINDER, null, null));
// Special 5th parameter identifies the remainder when clicked
}
};
There are 2 more new things here: recordDealInHistory() which I will return to in a moment and the last 3 parameters of the Target at the end of drawing.
To handle the second of those, onMousedown() now starts like this:
function onMousedown (e)
{ var xy = getMousePoint (e);
var target = findTarget (xy.x, xy.y, GAME.targets);
if (null === target) return;
if (target.column === GAME.game.REMAINDER)
{ GAME.game.dealMore ();
return;
}
... and the rest as before
}
This is another example of JavaScript's flexibility: previously we supplied a Column for that parameter of new Target() but this time we are giving the remainder array. Other languages would not allow the use of different types like this. Those other languages are probably better for beginners, keeping them out of trouble. As long as you are aware when you are using different types there should be no problem.
We are going to do a similar thing in recordDealInHistory(), a new function which is necessary to enable the player to undo a deal. Instead of putting a State in the history array we will put a String. The new code in stateB.js is:
function recordDealInHistory ()
{ GAME.HISTORY.push ("deal");
}
function undo ()
{ if (0 === GAME.HISTORY.length) return;
var state = GAME.HISTORY.pop ();
if (state === "deal")
{ for (var i = GAME.N_COLUMNS - 1; i >= 0; i--)
{ var col = GAME.COLUMNS [i];
var card = col.getLastCard ();
col.removeCard (card);
GAME.game.REMAINDER.push (card);
} }
else
... and the rest as before
}
Of course the cards on the ends of the columns have to pushed back onto the remainder array in the reverse order of dealing, so when the deal happens again it is the same as before. Verify that with a test.