forked from Pseudonian/Ultra-Progress-Bar
-
Notifications
You must be signed in to change notification settings - Fork 1
/
Copy pathindex.html
286 lines (281 loc) · 20.4 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
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
173
174
175
176
177
178
179
180
181
182
183
184
185
186
187
188
189
190
191
192
193
194
195
196
197
198
199
200
201
202
203
204
205
206
207
208
209
210
211
212
213
214
215
216
217
218
219
220
221
222
223
224
225
226
227
228
229
230
231
232
233
234
235
236
237
238
239
240
241
242
243
244
245
246
247
248
249
250
251
252
253
254
255
256
257
258
259
260
261
262
263
264
265
266
267
268
269
270
271
272
273
274
275
276
277
278
279
280
281
282
283
284
285
286
<!DOCTYPE html>
<html lang="en">
<head>
<link rel="preconnect" href="https://fonts.googleapis.com">
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
<link href="https://fonts.googleapis.com/css2?family=Manrope:wght@200&display=swap" rel="stylesheet">
<meta name="description" content="The second best Idle Game, right after Synergism!" />
<meta content="width=device-width, initial-scale=1" name="viewport" />
<meta content="text/html;charset=utf-8" http-equiv="Content-Type" />
<meta content="utf-8" http-equiv="encoding" />
<link rel="icon" href="UPBTransparent.ico" type="image/x-icon" sizes="16x16">
<script src="src/index.ts" type="module"></script>
<title>Ultimate Progress Bar</title>
</head>
<link rel="stylesheet" href="styles.css">
<body>
<div id="transparentBG"></div>
<div id="confirmationBox">
<div id="confirmWrapper">
<div id="confirm" tabindex="-1">
<p></p>
<button id="okConfirm">OK</button>
<button id="cancelConfirm">Cancel</button>
</div>
</div>
<div id="alertWrapper">
<div id="alert" tabindex="-1">
<p></p>
<button id="okAlert">OK</button>
</div>
</div>
<div id="promptWrapper">
<div id="prompt" tabindex="-1">
<label for="promptText"></label>
<input id="promptText">
<button id="okPrompt">OK</button>
<button id="cancelPrompt">Cancel</button>
</div>
</div>
</div>
<div class="mainProgressBarArea" id="progressTesting">
<div class="tabSeparator" id="progressBarTest1"><p>Ultimate Progress Bar v0.2.4-alpha</p></div>
<div class="progressBarBig" id="progressBarTest2">
<div id="progression"></div>
<div id="smallResourceIndicators">
<div class="progressBarBigText" id="level"></div>
<div class="progressBarBigText" id="exp"></div>
<div class="progressBarBigText" id="perSecCurr"></div>
<div class="progressBarBigText" id="perSecPrev"></div>
<div class="progressBarBigText" id="coinWorth"></div>
</div>
</div>
</div>
<div class="wrapper" id="test">
<aside class="sideNav" id="test2">
<ul class="tabColumn" id="test3">
<li class="tab" id="main-tab-nav">Main</li>
<li class="tab" id="upgrade-tab-nav" style="color: gold">Upgrades</li>
<li class="tab" id="talent-tab-nav" style="color: orchid">Talents</li>
<li class="tab" id="dueling-tab-nav" style="color:aquamarine">[Updated!] Dueling</li>
<li class="tab" id="challenge-tab-nav" style="color: red">[New!] Challenges</li>
</ul>
</aside>
<main>
<div class="wrapperInner" id="innerTesting">
<div class="tabs" id="mainTab">
<h1>How did we get here?</h1>
<p>You're powerless, but you weren't at one point. Ant God must have reduced you to mere atoms!</p>
<p>The only thing you have left is this measly progress bar. It ticks up no matter what you do.</p>
<p>Not even you really know what it accomplishes. At least, not at the moment.</p>
<p>For now, all you can really do is wait, but filling the bar unlocks new paradigms!</p>
<h3>You hear a faint voice from a friendly stranger: <i>~check out the Upgrades when you reach level 2!~</i></h3>
<button id="reset-game">Alpha Test: Reset your current game for testing purposes!</button>
<button id="simulate-time">Simulate 1 hour lol?</button>
</div>
<div class="tabs" id="upgradeTab">
<h3 style="color: gold">Spend your coins here!</h3>
<h3 style="color: white">Protip: You can SHIFT while clicking to buy MAX!</h3>
<p>You have <span id="gold-amount" class='coinCountDisplay' style="color: gold; font-size: larger;"></span> coins! [Total Earned:<span id="gold-total-amount" style="color:grey; font-size: larger;"></span>]</p>
<div class="coinUpgrades">
<div class="coinUpgrade" id="coin-bar-speed" style="border-color: orchid;">
<p class="coinUpgradeText" id="coin-bar-speed-name">Bar Fill Speed</p>
<p class="coinUpgradeText" id="coin-bar-speed-effect">+0.2 Progress Per Second</p>
<button class="coinUpgradeBtn" id="buy-coin-bar-speed">Buy More for 1 Coin</button>
</div>
<div class="coinUpgrade" id="coin-momentum">
<p class="coinUpgradeText" id="coin-bar-momentum-name">Bar Momentum</p>
<p class="coinUpgradeText" id="coin-bar-momentum-effect">+0.00% Progress Per 1% Bar Filled</p>
<button class="coinUpgradeBtn" id="buy-coin-bar-momentum">Buy more for 10 Coin</button>
</div>
<div class="coinUpgrade" id="coin-agitation" style="border-color: orchid;">
<p class="coinUpgradeText" id="coin-bar-agitation-name">Bar Agitation</p>
<p class="coinUpgradeText" id="coin-bar-agitation-effect">+0.02% Bar Fragments per CRIT</p>
<button class="coinUpgradeBtn" id="buy-coin-bar-agitation">Buy more for 10k Coin</button>
</div>
</div>
<div class="coinUpgrades">
<div class="coinUpgrade" id="coin-reverberation">
<p class="coinUpgradeText" id="coin-bar-reverberation-name">Bar Reverberation</p>
<p class="coinUpgradeText" id="coin-bar-reverberation-effect">0% Chance to have a CRITICAL Tick</p>
<button class="coinUpgradeBtn" id="buy-coin-bar-reverberation">Buy more for 25 Coin</button>
</div>
<div class="coinUpgrade" id="coin-vibration">
<p class="coinUpgradeText" id="coin-bar-vibration-name">Bar Vibration</p>
<p class="coinUpgradeText" id="coin-bar-vibration-effect">CRITICAL Ticks fill up the bar 10x faster.</p>
<button class="coinUpgradeBtn" id="buy-coin-bar-vibration">Buy more for 50 Coin</button>
</div>
<div class="coinUpgrade" id="coin-adoption">
<p class="coinUpgradeText" id="coin-bar-adoption-name">Bar Adoption</p>
<p class="coinUpgradeText" id="coin-bar-adoption-effect">+1% Talent Gain</p>
<button class="coinUpgradeBtn" id="buy-coin-bar-adoption">Buy more for 250 Coin</button>
</div>
</div>
<div class="coinUpgrades">
<div class="coinUpgrade" id="coin-empowerment">
<p class="coinUpgradeText" id="coin-bar-empowerment-name">Bar Empowerment</p>
<p class="coinUpgradeText" id="coin-bar-empowerment-effect">Increase Progress Speed by 1% per level (multiplicative)</p>
<button class="coinUpgradeBtn" id="buy-coin-bar-empowerment">Buy more for 10k Coin</button>
</div>
<div class="coinUpgrade" id="coin-reinforcement" style="border-color: orchid;">
<p class="coinUpgradeText" id="coin-bar-reinforcement-name">Bar Reinforcement</p>
<p class="coinUpgradeText" id="coin-bar-reinforcement-effect">Gain 2% more Bar Fragments per bar level.</p>
<button class="coinUpgradeBtn" id="buy-coin-bar-reinforcement">Buy more for 20k Coin</button>
</div>
<div class="coinUpgrade" id="reset" style="border-color: turquoise;">
<p class="coinUpgradeText" id="reset-name">RESET</p>
<p class="coinUpgradeText">Go back to level 0, pronto!</p>
<button class="coinUpgradeBtn" id="buy-reset">~Refresh~</button>
</div>
</div>
<div class="coinUpgrades">
<div class="coinUpgrade" id="coin-resonance">
<p class="coinUpgradeText" id="coin-bar-resonance-name">Bar Resonance</p>
<p class="coinUpgradeText" id="coin-bar-resonance-effect">On CRIT, chance to do SUPER CRIT (3x Damage and earn coins!)</p>
<button class="coinUpgradeBtn" id="buy-coin-bar-resonance">Buy more for 2k Coin</button>
</div>
</div>
<p>You have <span id="fragment-amount" style="color:cyan"></span> Bar Fragments [+<span id="fragment-bonus" style="color: cyan"></span>% Progress Speed].</p>
<p>On refresh, you will have <span id="fragment-gain" style="color: orchid"></span> Bar Fragments [Replaces Current Amount!]</p>
<p>Refresh timer: <span id="refresh-timer" style="color:cyan"></span>. Times refreshed: <span id="refresh-counter" style="color:cyan">0</span>. CRITS this refresh: <span id="refresh-crit-counter" style="color: gold">0</span> \ Bar Fragments +<span id="refresh-crit-fragments" style="color: gold">0</span>%</p>
</div>
<div class="tabs" id="talentsTab">
<div class="talentContainer" id="talentCriticalChanceContainer">
<div class="talentBarContainer">
<p>Critical Chance</p>
<div class="talentProgressBar">
<div class="talentProgression" id="talentCriticalChanceProgression"></div>
<div class="talentBarText" id="talentCriticalChanceEXP"></div>
</div>
<div class="talentSacrificeArea">
<button class="talentSacrifice" id="talentCriticalChanceSacrifice">Sacrifice Bar Fragments</button>
<p class="talentInfoText">Sacrificed: <span id="talentCriticalChanceSacrificeAmount" style="color: orchid"></span> \ Talent EXP x<span id="talentCriticalChanceSacrificeMultiplier" style="color: orchid"></span></p>
</div>
</div>
<div class="talentInfo">
<p class="talentInfoText" id="talentCriticalChanceTempLevel">Test 1</p>
<p class="talentInfoText" id="talentCriticalChancePermLevel">Test 2</p>
<p class="talentInfoText" id="talentCriticalChancePermGain">Test 3</p>
<p class="talentInfoText" id="talentCriticalChanceEffect">Test 4</p>
<p class="talentInfoText" id="talentCriticalChanceInfo">Gain EXP from CRIT Ticks!</p>
</div>
</div>
<div class="talentContainer" id="talentProgressSpeedContainer">
<div class="talentBarContainer">
<p>Progress Speed</p>
<div class="talentProgressBar">
<div class="talentProgression" id="talentProgressSpeedProgression"></div>
<div class="talentBarText" id="talentProgressSpeedEXP"></div>
</div>
<div class="talentSacrificeArea">
<button class="talentSacrifice" id="talentProgressSpeedSacrifice">Sacrifice Bar Fragments</button>
<p class="talentInfoText">Sacrificed: <span id="talentProgressSpeedSacrificeAmount" style="color: orchid"></span> \ Talent EXP x<span id="talentProgressSpeedSacrificeMultiplier" style="color: orchid"></span></p>
</div>
</div>
<div class="talentInfo">
<p class="talentInfoText" id="talentProgressSpeedTempLevel">Test 1</p>
<p class="talentInfoText" id="talentProgressSpeedPermLevel">Test 2</p>
<p class="talentInfoText" id="talentProgressSpeedPermGain">Test 3</p>
<p class="talentInfoText" id="talentProgressSpeedEffect">Test 4</p>
<p class="talentInfoText" id="talentProgressSpeedInfo">Gain EXP from higher EXP/sec!</p>
</div>
</div>
<div class="talentContainer" id="talentCoinGainContainer">
<div class="talentBarContainer">
<p>Coin Gain</p>
<div class="talentProgressBar">
<div class="talentProgression" id="talentCoinGainProgression"></div>
<div class="talentBarText" id="talentCoinGainEXP"></div>
</div>
<div class="talentSacrificeArea">
<button class="talentSacrifice" id="talentCoinGainSacrifice">Sacrifice Bar Fragments</button>
<p class="talentInfoText">Sacrificed: <span id="talentCoinGainSacrificeAmount" style="color: orchid"></span> \ Talent EXP x<span id="talentCoinGainSacrificeMultiplier" style="color: orchid"></span></p>
</div>
</div>
<div class="talentInfo">
<p class="talentInfoText" id="talentCoinGainTempLevel">Test 1</p>
<p class="talentInfoText" id="talentCoinGainPermLevel">Test 2</p>
<p class="talentInfoText" id="talentCoinGainPermGain">Test 3</p>
<p class="talentInfoText" id="talentCoinGainEffect">Test 4</p>
<p class="talentInfoText" id="talentCoinGainInfo">Gain EXP from earning coins!</p>
</div>
</div>
</div>
<div class="tabs" id="duelingTab">
<p>You have <span id="dueling-coins" class='coinCountDisplay' style="color: gold; font-size: larger;"></span> coins!</p>
<div class="mainBattleContainer">
<div class="duelingStatArea" id="playerCorner">
<p id="playerName">Tester!</p>
<div id="playerHPBar" class="duelingProgressBar hpBar">
<div class="duelingBarProgression hpBarProgression" id="playerHPProgression"></div>
<div class="duelingBarText" id="playerHPText">100/100 HP</div>
</div>
<div id="playerMPBar" class="duelingProgressBar mpBar">
<div class="duelingBarProgression mpBarProgression" id="playerMPProgression"></div>
<div class="duelingBarText" id="playerMPText">4/4 MP</div>
</div>
<div class="statSummary">
<p id="playerATK">ATK 8</p>
<p id="playerSTR">STR 13</p>
<p id="playerDEF">DEF 10</p>
<p id="playerARMOR">ARMOR 10</p>
<p id="playerCritChance">CritChance 10</p>
<p id="playerCritDamage">CritDamage 140</p>
</div>
</div>
<div id="playerMoves">
<button class="moveButton" id="autoAttack">Auto Attack [OFF]</button>
<button class="moveButton" id="basicAttack">Basic Attack</button>
<button class="moveButton">Heal [-1 MP WIP]</button>
<button class="moveButton" id="enrageSkill">Enrage</button>
<button class="moveButton">Entrophize [-100 MP WIP]</button>
</div>
<div class="duelingStatArea" id="enemyCorner">
<p id="enemyName">Testing Dummy Lv.04</p>
<div id="enemyHPBar" class="duelingProgressBar hpBar">
<div class="duelingBarProgression hpBarProgression" id="enemyHPProgression"></div>
<div class="duelingBarText" id="enemyHPText">100/100 HP</div>
</div>
<div id="enemyMPBar" class="duelingProgressBar mpBar">
<div class="duelingBarProgression mpBarProgression" id="enemyMPProgression"></div>
<div class="duelingBarText" id="enemyMPText">4/4 MP</div>
</div>
<div class="statSummary">
<p id="enemyATK">ATK 8</p>
<p id="enemySTR">STR 13</p>
<p id="enemyDEF">DEF 10</p>
<p id="enemyARMOR">ARMOR 10</p>
<p id="enemyCritChance">CritChance 10</p>
<p id="enemyCritDamage">CritDamage 140</p>
<p id="enemyLastMove">Last Move: <span id="enemyMove"></span></p>
</div>
</div>
</div>
</div>
<div class="tabs" id="challengeTab">
<div class="challengeContainer">
<img id="basic-challenge-icon" src="Pictures/Transparent Pictures/Basic Challenge.png">
<img id="no-refresh-challenge-icon" src="Pictures/Transparent Pictures/No Refresh.png">
<img id="no-coin-upgrade-challenge-icon" src="Pictures/Transparent Pictures/No Coin Upgrades.png">
<img id="reduced-fragments-challenge-icon" src="Pictures/Transparent Pictures/Work In Progress Challenge.png">
<img id="none-challenge-icon" src="Pictures/Transparent Pictures/Work In Progress Challenge.png">
</div>
<div class="challengeDescriptionContainer">
<p id="challenge-name">Testing</p>
<p id="challenge-description">This is a test of challenge mode!</p>
<p id="challenge-completions">0/25</p>
<p id="challenge-reward">+1 Swag Point.</p>
</div>
</div>
</div>
</main>
<aside id="resourceIndicators">
<div class="resourceIndicator">Level: </div>
<div class="resourceIndicator">EXP: </div>
<div class="resourceIndicator">CPS: </div>
<div class="resourceIndicator">Previous CPS: </div>
<div class="resourceIndicator">Worth: </div>
</aside>
</div>
</body>
</html>