-
Notifications
You must be signed in to change notification settings - Fork 0
/
Copy pathindex.html
153 lines (125 loc) · 5.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
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
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
<!DOCTYPE html>
<!--using this as a crutch to block the console errors until I get around to creating a proper favicon.ico-->
<link rel="shortcut icon" href="#">
<html lang="en-US">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>Project Whale</title>
<link rel="stylesheet" type="text/css" href="assets/css/interface.css" />
<script src="dist/bundle.js" type="module" ></script>
</head>
<body>
<div class="monster-container" id="konvaCanvas">
<img src="assets/images/enemies/goblinbrawler.png" alt="Clickable" id="monster">
</div>
<div class="health-bar-container">
<!-- Player Health Bar -->
<div class="individual-stat-bar" id="player-stat-container">
<div class="row" id="player-health-bar"></div>
<div class="stat-bar-text">Player HP: <span class="span" id="playerHP">100</span></div>
</div>
<!-- Enemy Health Bar -->
<div class="individual-stat-bar" id="enemy-stat-container">
<div class="row" id="enemy-health-bar"></div>
<div class="stat-bar-text">Enemy HP: <span class="span" id="enemyHP">100</span></div>
</div>
<!-- Player Armor Bar -->
<div class="individual-stat-bar" id="player-stat-container">
<div class="row" id="player-armor-bar"></div>
<div class="stat-bar-text">Player AP: <span class="span" id="playerAP">100</span></div>
</div>
<!-- Enemy Armor Bar -->
<div class="individual-stat-bar" id="enemy-stat-container">
<div class="row" id="enemy-armor-bar"></div>
<div class="stat-bar-text">Enemy AP: <span class="span" id="enemyAP">100</span></div>
</div>
<!-- Player Mana Bar -->
<div class="individual-stat-bar" id="player-stat-container">
<div class="row" id="player-mana-bar"></div>
<div class="stat-bar-text">Player MP: <span class="span" id="playerMP">100</span></div>
</div>
<!-- Enemy Mana Bar -->
<div class="individual-stat-bar" id="enemy-stat-container">
<div class="row" id="enemy-mana-bar"></div>
<div class="stat-bar-text">Enemy MP: <span class="span" id="enemyMP">100</span></div>
</div>
</div>
<div class="row"></div>
<button class="button" id="changeState">Enter Battle State</button>
<div class="row"></div>
<!-- Tab links begin -->
<div class="tab">
<button class="tablink" id="tabButtonFight">Fight</button>
<button class="tablink" id="tabButtonStrategy">Strats</button>
<button class="tablink" id="tabButtonInventory">Inventory</button>
<button class="tablink" id="tabButtonShop">Shop</button>
<button class="tablink" id="tabButtonStats">Stats</button>
</div>
<div class="row"></div>
<div id="Fight" class="tabcontent">
<div class="row"></div>
<div class="row">
Coins: <span class="span" id="coins">0</span>
</div>
<div class="row">
<button class="inlineButton" id="buyCoinGen">Buy Coin Generator</button>
Coin Generators: <span class="span" id="coinGens">0</span>
</div>
<div class="row">
Coin Generator Cost: <span class="span" id="coinGenCost">10</span>
</div>
<div class="row"></div>
<div class="row">
Kills: <span class="span" id="totalKills">0</span>
</div>
<div class="row">
<button class="button" id="resetMob")">New Rat</button>
</div>
<div class="row"></div>
</div>
<div id="Strategy" class="tabcontent">
<div id="player-action-container">
<div id="playerActionList">
<h3>Action List</h3>
<!-- Action items are displayed here when available -->
</div>
<div class="dropzone" id="playerActionQueue">
<h3>Action Queue</h3>
<!-- Queued items are displayed here when available -->
</div>
</div>
</div>
<div id="Inventory" class="tabcontent">
<h3>Inventory</h3>
<div id="inventoryGrid" class="inventory-itemsGrid">
<!-- Inventory items are displayed here -->
</div>
</div>
<div id="Shop" class="tabcontent">
<h3>Shop</h3>
<p id="shopMessage" class="shop-message"></p>
<div class="row"></div>
<button id="buyButton" class="shop-buy-button">Buy</button>
<div class="row"></div>
<div id="itemsGrid" class="shop-itemsGrid">
<!-- Shop items are displayed here -->
</div>
</div>
<div id="Stats" class="tabcontent">
<h3>Player Stats</h3>
<table id="statsTable">
<thead>
<tr>
<th>Stat</th>
<th>Value</th>
</tr>
</thead>
<tbody id="statsBody">
<!-- Rows inserted here -->
</tbody>
</table>
</div>
<!-- Tab links end -->
</body>
</html>