-
Notifications
You must be signed in to change notification settings - Fork 0
/
Copy pathindex.html
125 lines (116 loc) · 5.39 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
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
<!DOCTYPE html>
<html lang="en-us">
<head>
<title>Star Wars RPG</title>
<meta charset="utf-8">
<!-- <link rel="stylesheet" type="text/css" href="assets/css/reset.css"> -->
<link rel="stylesheet" type="text/css" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<link rel="stylesheet" type="text/css" href="assets/css/style.css">
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
</head>
<body>
<div class="container-fluid">
<div class="row" id="titleRow">
<div class="col-sm-10 col-sm-offset-1">
<img class="title" src="assets/images/star_wars_title.png" width="25%">
<h1 class="title"><strong> Arena</strong></h1>
</div>
</div>
<div class="row" id="charSelectRow">
<div class="col-sm-1 text-center select col-sm-offset-1 ">
<span class="character">
<img src="assets/images/luke.jpg" height="100%" width="100%" id="luke" class="btn select light-side" value="luke">
<!-- <button id="luke" class="btn btn-info btn-small select light-side" value="luke">Luke Skywalker</button> -->
</span>
</div>
<div class="col-sm-1 text-center select">
<span class="character">
<img src="assets/images/han-solo.png" height="100%" width="100%" id="han" class="btn select light-side" value="han">
<!-- <button id="han" class="btn btn-info btn-small select light-side" value="han">Han Solo</button> -->
</span>
</div>
<div class="col-sm-1 text-center select">
<span class="character">
<img src="assets/images/leia-organa.jpeg" height="100%" width="100%" id="leia" class="btn select light-side" value="leia">
<!-- <button id="leia" class="btn btn-info btn-small select light-side" value="leia">Leia Organa</button> -->
</span>
</div>
<div class="col-sm-1 text-center select">
<span class="character">
<img src="assets/images/chewbacca.jpeg" height="100%" width="100%" id="chewy" class="btn select light-side" value="chewy">
<!-- <button id="chewy" class="btn btn-info btn-small select light-side" value="chewy">Chewbacca</button> -->
</span>
</div>
<div class="col-sm-2">
</div>
<div class="col-sm-1 text-center select">
<span class="character">
<img src="assets/images/stormtrooper.jpeg" height="100%" width="100%" id="stormtrooper" class="btn select dark-side" value="stormtrooper">
<!-- <button id="stormtrooper" class="btn btn-danger btn-small select dark-side" value="stormtrooper">Stormtrooper</button> -->
</span>
</div>
<div class="col-sm-1 text-center select">
<span class="character">
<img src="assets/images/boba-fett.jpeg" height="100%" width="100%" id="boba" class="btn select dark-side" value="boba">
<!-- <button id="boba" class="btn btn-danger btn-small select dark-side" value="boba">Boba Fett</button> -->
</span>
</div>
<div class="col-sm-1 text-center select">
<span class="character">
<img src="assets/images/vader.jpeg" height="100%" width="100%" id="vader" class="btn select dark-side" value="vader">
<!-- <button id="vader" class="btn btn-danger btn-small select dark-side" value="vader">Darth Vader</button> -->
</span>
</div>
<div class="col-sm-1 text-center select">
<span class="character">
<img src="assets/images/palpatine.jpeg" height="100%" width="100%" id="emperor" class="btn select dark-side" value="emperor">
<!-- <button id="emperor" class="btn btn-danger btn-small select dark-side" value="emperor">Emperor Palpatine</button> -->
</span>
</div>
</div> <!-- End of Character Select Row -->
<div class="row" id="messageRow">
<div class="col-sm-offset-1 col-sm-2" id="info-box">
<h4>Player: <span id="player"></span></h4>
<h4>Opponent: <span id="opponent"></span></h4>
<h4>Enemies Defeated: <span id="defeated"></span></h4>
</div>
<div class="col-sm-6">
<h2><span id="alert">Select a character</span></h2>
</div>
</div> <!-- End of Message Row -->
<div class="row invisible" id="enemiesRow">
<div class="col-sm-2 col-sm-offset-1">
<h2>Enemies:</h2>
</div>
<div class="col-sm-7" id="enemiesBox">
</div>
</div> <!-- End of Enemies Row -->
<div class="row" id="combatRow">
<div class="col-sm-offset-1 col-sm-1">
</div>
<div class="col-sm-9">
<div id="arena">
<div class="col-sm-5 invisible">
<div class="avatar" id="player-avatar">
</div>
<div class="health-meter text-center">
<p>Health: <span id="player-health"></span></p>
</div>
</div>
<div class="col-sm-2">
<button id="attack" class="btn btn-default btn-small invisible bottom-align">Attack</button>
</div>
<div class="col-sm-5 invisible">
<div class="avatar" id="opp-avatar">
</div>
<div class="health-meter text-center">
<p>Health: <span id="opp-health"></span></p>
</div>
</div>
</div>
</div>
</div> <!-- End of Combat Row -->
</div>
<script src="assets/javascript/game.js"></script>
</body>
</html>