-
Notifications
You must be signed in to change notification settings - Fork 0
/
index.html
182 lines (178 loc) · 8.24 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
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<link rel="icon" type="image/svg+xml" href="/src/assets/misc/decoration-drive.png" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Celestron</title>
<meta name="description" content="Celestron is a replit-based tower defense"/>
<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=Oxanium:wght@200;300;400;500;600;700;800&display=swap" rel="stylesheet">
</head>
<body>
<div id="app">
<!-- Menu -->
<section id="Menu">
<!--<h1 id="title">Celestron</h1>-->
<img src="/src/assets/title.svg" id="title-img" alt="Celestron Title"/>
<div id="navigator">
<button class="menu-btn" id="StartBtn">Start Game</button>
<button class="menu-btn" id="HowBtn">How to Play</button>
<button class="menu-btn" id="LeaderBoardBtn">Leaderboard</button>
<button class="menu-btn" id="CreditsBtn">Credits</button>
</div>
<button id="login-button" class="metalbtn hexagon">Log In</button>
<div id="loggedin-indicator" class="Hidden">
<img alt="profile indicator" src="/src/assets/interface/user.svg"/>
<span id="username-indicator">Username</span>
</div>
<div id="login-overlay"></div>
<div id="login-modal">
<h2>Log In</h2>
<p>If you would like to be on the leaderboard, please log in with replit.</p>
<button id="login-replit-btn" class="metalbtn hexagon">Authorize Celestron</button>
<button id="close-login-btn" class="metalbtn hexagon">Continue Anonymous</button>
</div>
</section>
<!-- Game -->
<section id="Game" class="Hidden">
<div id="interface">
<!--Tower Button-->
<div id="centerbtn">
<!-- <button id="special-attack-btn">Special</button> -->
<button id="tower-menu-btn">Towers</button>
</div>
<!--Corner Stats Interface-->
<div id="stats">
<div>
Wave <span id="wave-count">0</span><br>
<img alt="Currency Icon" src="/src/assets/interface/money.png" class="icon-money"><span class="money-count" id="money"></span>
</div>
<button class="hexagon metalbtn" style="margin-top: 10px;" id="nextwave">Next Wave</button>
</div>
<!--Zoom Buttons-->
<div id="zoom-btns">
<button id="zoomin">+</button>
<button id="zoomout">-</button>
<button id="speed">x1</button>
</div>
<!-- Store -->
<div class="Store Hidden" id="storeBody">
<div class="tflex"></div>
</div>
<!--Messages-->
<div id="message-overlay"></div>
<div id="msg" class="Hidden message">
<div style="margin-right: 10px;">
<img alt="Repler Image" id="repler-image"/>
<button id="nextmsg" class="metalbtn hexagon" style="display: block;width: 100%;margin-top: 5px;">Next</button>
</div>
<div id="flex-msg">
<div id="repler-name"></div>
<div id="repler-message"></div>
</div>
</div>
<!-- Game Over -->
<!-- <div id="message-overlay"></div> -->
<div id="gameover" class="message Hidden">
<h1>GAME OVER!</h1>
<p>Good job! Check your rank on the leaderboard!</p>
<div class="btns">
<button class="metalbtn hexagon" id="HomeBtn4">Menu</button>
</div>
</div>
<!--Pause Overlay-->
<div id="pause-overlay" class="Hidden">
<h1>Game Paused</h1>
</div>
<!--Pause Button-->
<div id="pause-button">||</div>
</div>
</section>
<!-- Credits -->
<section id="CreditsScene" class="TextPage Hidden">
<div id='stars'></div>
<div id='stars2'></div>
<div id='stars3'></div>
<button class="metalbtn hexagon" id="HomeBtn1">Home</button>
<div class="page-container">
<div class="container">
<h1 class="header">Credits</h1>
<div class="info">
<p><strong>SpotAndJake</strong> - Game Mechanics, world generation, and all the hard stuff.</p>
<p><strong>Jdog787</strong> - UI, Sound Effects, Music, Leaderboard, Server-side functions, and other random things.</p>
<p><strong>IroncladDev</strong> - Story, graphics & art, interface, and a little dabble of bug fixes everywhere.</p>
<p>Sound effects retrieved from <a href="https://storyblocks.com" target="_blank">https://storyblocks.com</a>, some altered and edited with <a href="https://mp3cut.net/" target="_blank">https://mp3cut.net/</a></p>
<p>Animated star background retrieved fromm <a href="https://codepen.io/sarazond/pen/LYGbwj">https://codepen.io/sarazond/pen/LYGbwj</a></p>
<p>© SpotAndJake, JDOG787, and IroncladDev 2022. All rights Reserved.</p>
</div>
</div>
</div>
</section>
<!-- How To Play -->
<section id="HowToPlay" class="TextPage Hidden">
<div id='stars'></div>
<div id='stars2'></div>
<div id='stars3'></div>
<button class="metalbtn hexagon" id="HomeBtn2">Home</button>
<div class="page-container">
<div class="container">
<h1 class="header">How to Play</h1>
<div class="info">
<p>Your goal is to survive as many waves as possible and move your way up the leaderboard by defending replit's headquarters from bugs, malicious users and repls, and more.</p>
<p>Place towers by opening up the tower menu at the bottom of the screen. Towers will upgrade automatically after getting a certain number of kills.</p>
<p>Typically, you can use the mouse, but there are some shortcut keys:</p>
<p>
<ul>
<li>Arrow Keys : move map</li>
<li>Spacebar : dismiss messages/start wave</li>
<li>+/- : zoom</li>
</ul>
</p>
</div>
</div>
</div>
</section>
<!-- LeaderBoard -->
<section class="Hidden TextPage" id="LeaderBoard">
<div id='stars'></div>
<div id='stars2'></div>
<div id='stars3'></div>
<div class="page-container">
<div class="left">
<button class="metalbtn hexagon" id="HomeBtn3">Home</button>
<div class="profile">
<h2>Profile</h2>
<h3 id="profile-name">Username</h3>
<div class="stats">
<span>Highest Wave: <span id="profile-high">0</span></span>
</div>
</div>
</div>
<div class="right">
<div class="lb">
<h2>Leaderboard</h2>
<div class="lb-container">
<!-- <div class="row"><span>1. JDOG787</span><span>1004</span></div>
<div class="row"><span>2. JDOG787</span><span>1004</span></div>
<div class="row"><span>3. JDOG787</span><span>1004</span></div>
<div class="row"><span>4. JDOG787</span><span>1004</span></div>
<div class="row"><span>5. JDOG787</span><span>1004</span></div>
<div class="row"><span>6. JDOG787</span><span>1004</span></div>
<div class="row"><span>7. JDOG787</span><span>1004</span></div>
<div class="row"><span>8. JDOG787</span><span>1004</span></div>
<div class="row"><span>9. JDOG787</span><span>1004</span></div>
<div class="row"><span>10. JDOG787</span><span>1004</span></div>
<div class="row"><span>12. JDOG787</span><span>1004</span></div>
<div class="row"><span>13. JDOG787</span><span>1004</span></div>
<div class="row"><span>14. JDOG787</span><span>1004</span></div> -->
</div>
</div>
</div>
</div>
</section>
</div>
<script type="module" src="/src/main.ts"></script>
</body>
</html>