Workshop › Wordle-style Word Guess › Step 23 of 26

Keys that remember

What we are doing

The on-screen keyboard can do what a real one cannot: colour each key with the best thing known about its letter, so you see at a glance which letters are left. Green beats yellow beats gray, so each mark gets a rank.

```js
// The best thing known about each letter so far: green beats yellow beats gray.
function letterColors() {
  const rank = { gray: 1, yellow: 2, green: 3 }
  const known = {}
  for (const g of guesses) {
    ;[...g.word].forEach((letter, i) => {
      const mark = g.marks[i]
      if (!known[letter] || rank[mark] > rank[known[letter]]) known[letter] = mark
    })
  }
  return known
}

  const known = letterColors()

    ctx.fillStyle = known[k.key] ? COLORS[known[k.key]] : '#71717a'
```

What it means

• rank orders the marks. known maps a letter to its best mark so far.
• For every letter of every guess: if nothing is known yet, or this mark ranks higher, it becomes the known mark.
• A key is drawn in its letter's colour, or grey if nothing is known (OK and DEL never are).

Your turn

1. Above function draw() {, write the comment and letterColors, and leave an empty line.
2. In draw, above ctx.font = 'bold 14px sans-serif', write const known = letterColors().
3. In the key loop, change the first fillStyle line. Press Run and send a guess.

Skills: Arrays and objects, Game states

← Enter and Delete keys Keep statistics →

All steps

1. The canvas and the pen
2. Paint the background
3. A function that draws
4. A row of five tiles
5. Six rows
6. Draw again and again
7. The typed letters
8. Type with the keyboard
9. Show the letters
10. Backspace
11. Leave shortcuts alone
12. A secret word
13. Right letter, right place
14. Right letter, wrong place
15. Enter sends the guess
16. Colour the guesses
17. Winning and losing
18. A message line
19. Where the keys go
20. Draw the keyboard
21. Tap a key
22. Enter and Delete keys
23. Keys that remember
24. Keep statistics
25. Show the statistics
26. Build it yourself: only real words