styles.css
#ships {
  margin-left:2vmin;
  display:flex;
  flex-direction:column;
  justify-content:space-around;
  align-items:center;
}
.ship {
  height:7.2vmin;
  opacity:.2;
}

So far so good but now we have to connect the ships on the grid with this progess display.
We'll give each square a ship number attribute, sn.
The first step is to make sure each square has this attribute.
Change squares.js thus:

  var s2="' onClick='square_clicked(this);' v='0' a='7' sn='0'>";

Next we look at seed.js. This function is already setting the a attribute so it is the obvious place to set the new sn attribute too. So I propose we rename set_a to set_a_sn.

function set_a_sn(row,col,a,sn) {
  var id=rc2id(row,col);
  var el=document.getElementById(id);
  el.setAttribute('a',a);
  el.setAttribute('sn',sn);
}