-
Notifications
You must be signed in to change notification settings - Fork 0
/
Copy pathBattleArena.html
111 lines (76 loc) · 2.25 KB
/
BattleArena.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
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
<html>
<head>
<script src="src/player1.js" type='text/javascript'></script>
<script src="src/arena.js" type='text/javascript'></script>
<script src="lib/jquery.js" type='text/javascript'></script>
<style>
table, th, td {
border-collapse: collapse;
padding: 5px;
text-align: left;
}
th, td {
border-bottom: 1px solid #ddd;
}
td {
height: 25px;
vertical-align: bottom;
}
tr:hover {
background-color: #f5f5f5
}
tr:nth-child(even) {
background-color: #f2f2f2
}
th {
background-color: #4CAF50;
color: white;
}
</style>
</head>
<body>
<h1>Get ready to rumble!</h1>
<h2>
<span class="player1"></span> versus <span class="player2"></span>
</h2>
<div id="match-winner"></div>
<div id="match-results"></div>
<table id='round-results'>
<thead>
<tr>
<th class='player1'></td>
<th class= 'player2'></td>
<th>Round Winner</td>
</tr>
</thead>
<tbody id='result-body'>
<tr>
</tr>
</tbody>
</table>
</body>
<script type="text/javascript">
$(function() {
// for now, because I havent figured out another way to do this
// you will need to give your player object a custom name
// so that you dont collide with your opponents player object.
//
// Here I am pitching two PlayerHans app against each other.
var player1 = new PlayerHans();
var player2 = new PlayerHans();
var arena = new Arena(player1, player2);
$('.player1').text(player1.name);
$('.player2').text(player2.name);
arena.totalRounds = 51;
arena.runMatch();
arena.rounds.forEach(function(r) {
var row = "<tr><td>"+ r.player1 + "</td>" + "<td>" + r.player2 + "</td>" + "<td>" + r.winner + "</td></tr>";
$('#result-body').append(row);
});
var result = arena.sumScore();
$('#match-results').text(player1.name + "wins: " + result.player1 +
" | " + player2.name + "wins: " + result.player2);
$('#match-winner').text("Winner: " + result.winner);
});
</script>
</html>