Workshop › Klondike Solitaire › Step 3 of 40

The face of a card

What we are doing

A face-up card shows its name in the corner (Q♥) and a big suit in the middle. Two arrays turn the numbers in a card into these symbols.

```js
const SUITS = ['♠', '♥', '♦', '♣']
const RANKS = ['', 'A', '2', '3', '4', '5', '6', '7', '8', '9', '10', 'J', 'Q', 'K']

  if (!card.up) return
  ctx.fillStyle = '#0f172a'
  ctx.font = 'bold 14px sans-serif'
  ctx.textAlign = 'left'
  ctx.fillText(RANKS[card.rank] + SUITS[card.suit], x + 4, y + 16)
  ctx.font = '28px sans-serif'
  ctx.textAlign = 'center'
  ctx.fillText(SUITS[card.suit], x + CW / 2, y + 54)
```

What it means

• SUITS[1] is '♥': suits are numbers 0 to 3. RANKS[12] is 'Q': ranks go from 1 (ace) to 13 (king); the empty '' only fills place 0 so the numbers match the cards.
• if (!card.up) return stops here for a face-down card: no text on its back.
• fillText(text, x, y) writes text; ctx.font sets its size, ctx.textAlign whether x is its left edge or its center. The big suit is centered on the card: x + CW / 2.

Your turn

1. Above const CW = 56 ... write SUITS and RANKS.
2. In drawCardAt, under ctx.strokeRect(...), write the eight new lines. Press Run.

Skills: Arrays and objects, Drawing on a canvas

← Draw one card Red and black →

All steps

1. The green table
2. Draw one card
3. The face of a card
4. Red and black
5. A deck of 52
6. Shuffle
7. Piles in one object
8. Deal the seven columns
9. A place for every pile
10. Put the piles on the table
11. Fan out the columns
12. Outlines for empty places
13. Turn over a card
14. Space turns a card
15. Go through the stock again
16. What is under the pointer?
17. Hitting a card in a column
18. Tap the stock
19. Rule 1: building a column
20. Rule 2: building a foundation
21. Move cards by the rules
22. Turn over the uncovered card
23. Find where a card goes
24. Pick up a card
25. Tap to move
26. A move counter
27. Count the moves
28. Where did you grab it?
29. Follow the pointer
30. Draw the held cards at the pointer
31. Drop it where you want
32. Drop a king into an empty column
33. A clock
34. Winning
35. You won!
36. A new game
37. The best time
38. Snapshots of the table
39. Undo
40. Build it yourself: finish by itself