-
Notifications
You must be signed in to change notification settings - Fork 0
/
index.html
39 lines (39 loc) · 1.72 KB
/
index.html
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
<html>
<head>
<link rel="stylesheet" type="text/css" href="style.css">
<script type="text/javascript" src="jquery-2.1.3.min.js"></script>
<script type="text/javascript" src="knockout-3.2.0.js"></script>
<script type="text/javascript" src="script.js"></script>
</head>
<body>
<div id="container">
<p>Battleships</p>
<div id="battlegrid">
<script type="text/javascript">
for(i = 0; i < GRID_SIZE; i++) {
document.write('<div class="row">');
for(j = 0; j < GRID_SIZE; j++) {
document.write('<span class="cell" id="'+i+j+'"></span>');
}
document.write('</div>');
}
</script>
</div>
<div id="controls">
<p><strong data-bind="text: instructions"></strong></p>
<div data-bind="visible: mode() == 'PLACE'">
<ul data-bind="foreach: ships">
<li data-bind="text: ship.shipType+' ('+ship.shipSize+')', strike: placed(), css: { highlight: $root.rangeLength() == ship.shipSize && !placed()}"></li>
</ul>
<button data-bind="enable: placedShips() == SHIPS.length, click: play">Play</button><br />
</div>
<div data-bind="visible: mode() !== 'PLACE'">
<p>Hits: <strong data-bind="text: hits()"></strong></p>
<p>Shots: <strong data-bind="text: shots()"></strong></p>
<p>Accuracy: <strong data-bind="text: accuracy()+'%'"></strong></p>
<button data-bind="visible: mode() == 'FINISHED', click: playAgain">Play again</button>
</div>
</div>
</div>
</body>
</html>