Workshop › Klondike Solitaire › Step 11 of 40

Fan out the columns

What we are doing

In a real game the cards of a column overlap: a face-down card shows a thin 8-pixel edge, a face-up one 22 pixels, enough to read it. cardY adds up the cards above to find each card's y.

```js
const DOWN_STEP = 8 // how much of a face-down card shows under the next one
const UP_STEP = 22

// The y of card `index` in a tableau column: face-down cards overlap more than face-up ones.
function cardY(key, index) {
  if (key[0] !== 't') return TOP_Y
  let y = TAB_Y
  const pile = piles[key]
  for (let i = 0; i < index; i++) y += pile[i].up ? UP_STEP : DOWN_STEP
  return y
}

    for (let i = first; i < pile.length; i++) drawCardAt(pile[i], x, cardY(key, i))
```

What it means

Piles that are not columns (!== means "is not") are always at TOP_Y.
For a column, start at TAB_Y and, for every card above this one, add 22 if it is face up, 8 if not.
draw now asks cardY for each card's y.

Your turn

Under TAB_Y write DOWN_STEP and UP_STEP.
Under pileX, leave an empty line and write cardY with its comment.
In draw, replace the last argument of drawCardAt(...) with cardY(key, i). Press Run.

Skills: Functions, Drawing on a canvas

← Put the piles on the table Outlines for empty places →

All steps