-
Notifications
You must be signed in to change notification settings - Fork 0
/
Copy pathindex.html
89 lines (77 loc) · 2.34 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
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style rel="stylesheet">
.field {
float: left;
box-sizing: border-box;
border: solid 1px white;
}
.field-label {
text-align: center;
margin: 0;
padding: 0;
}
</style>
</head>
<body>
<h1>Ship battle map generator</h1>
<script type="text/javascript" src="lib/board-generator.min.js"></script>
<script type="text/javascript">
const fieldSize = 40;
const mapSize = 10;
// console.log(BoardGenerator);
let board = new BoardGenerator.BoardGenerator();
const boardView = document.createElement('div');
boardView.style['margin-top'] = '20px';
boardView.style.width = fieldSize * mapSize + 'px';
boardView.style.height = fieldSize * mapSize + 'px';
document.querySelector('body').append(boardView);
function createBoard(index) {
boardView.innerHTML = '...Loading';
board.randomMap(mapSize, mapSize, [
board.ship('CRUISER-5', 5),
board.ship('CRUISER-4', 4),
board.ship('CRUISER-4', 4),
board.ship('CRUISER-3', 3),
board.ship('CRUISER-3', 3),
board.ship('CRUISER-2', 2),
board.ship('CRUISER-2', 2),
board.ship('CRUISER-2', 2),
board.ship('CRUISER-2', 2),
board.ship('CRUISER-1', 1),
board.ship('CRUISER-1', 1),
board.ship('CRUISER-1', 1),
board.ship('CRUISER-1', 1),
board.ship('CRUISER-1', 1)
]).then(fields => {
setTimeout(() => {
createBoard(++index);
}, 5000);
let fieldsHTML = '';
fields.forEach(field => {
let bgColor = field.ship ? 'red' : 'grey';
bgColor = field.marked ? 'blue' : bgColor;
let text = field.ship
? field.ship.name[0] + field.ship.name.slice(field.ship.name.length - 2)
: '';
fieldsHTML += '' +
'<div class="field" style="width: ' + fieldSize + 'px; height:' + fieldSize + 'px; background: ' + bgColor + '">' +
'<p class="field-label" style="line-height: 40px;">' +
text + ' </p>' +
'</div>';
boardView.innerHTML = fieldsHTML;
});
}, error => {
console.error(index, error);
setTimeout(() => {
createBoard(++index);
}, 500);
});
}
createBoard(1);
</script>
</body>
</html>