Workshop › Battleship › Step 34 of 35

A side panel

What we are doing

Next to your small sea there is room for the numbers: your shots, your best, the enemy ships still afloat, and the keys.

```js
const x = HOME.x + N * SMALL + 20
ctx.fillStyle = 'white'
ctx.font = '14px sans-serif'
ctx.fillText('Shots ' + shots, x, HOME.y + 16)
ctx.fillText('Best ' + (best || '-'), x, HOME.y + 38)
ctx.fillText('Left: ' + enemyFleet.filter((s) => !sunk(s)).map((s) => s.cells.length).join(' '), x, HOME.y + 60)
ctx.fillText('H: their heat map', x, HOME.y + 82)
if (state !== 'playing') ctx.fillText('Tap or Enter: again', x, HOME.y + 104)
```

What it means

• x is 20 pixels to the right of your small sea.
• best || '-' shows a dash while there is no record yet.
• filter, map and join(' ') turn the ships still afloat into a text like 5 3 2.

Your turn

At the end of draw, under your fleet's drawSea, write the panel lines.

Skills: Drawing on a canvas

← Your best game Build it yourself: ships apart →

All steps

1. A 10 by 10 sea
2. A function for any sea
3. Your own sea
4. Draw again and again
5. Grids and ships as lists
6. A random fleet
7. Two fleets
8. Which ship is here?
9. Fire at a square
10. Show the shots
11. Your shot
12. Tap to fire
13. A message line
14. Hit or miss?
15. See your own fleet
16. Sinking ships
17. Darker hits on a sunk ship
18. Outline sunk ships
19. Win in as few shots as you can
20. A record of their shots
21. Take turns
22. The computer shoots back
23. You can lose too
24. A heat map
25. Shoot the hottest square
26. Hunt around a hit
27. See the heat map
28. H for heat
29. Show their ships at the end
30. A keyboard cursor
31. Move with the arrows
32. Fire with Enter, play again
33. Your best game
34. A side panel
35. Build it yourself: ships apart