
previous

page 24
next
styles.css
#ships {
margin-left:2vmin;
display:flex;
flex-direction:column;
justify-content:space-around;
align-items:center;
}
.ship {
height:7.2vmin;
opacity:.2;
}
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);
}
var id=rc2id(row,col);
var el=document.getElementById(id);
el.setAttribute('a',a);
el.setAttribute('sn',sn);
}
previous
next