-
Notifications
You must be signed in to change notification settings - Fork 0
/
index.html
416 lines (346 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
287
288
289
290
291
292
293
294
295
296
297
298
299
300
301
302
303
304
305
306
307
308
309
310
311
312
313
314
315
316
317
318
319
320
321
322
323
324
325
326
327
328
329
330
331
332
333
334
335
336
337
338
339
340
341
342
343
344
345
346
347
348
349
350
351
352
353
354
355
356
357
358
359
360
361
362
363
364
365
366
367
368
369
370
371
372
373
374
375
376
377
378
379
380
381
382
383
384
385
386
387
388
389
390
391
392
393
394
395
396
397
398
399
400
401
402
403
404
405
406
407
408
409
410
411
412
413
414
415
416
<!--
**********************************************************************
THEATRE OF WAR
Programmed & designed by Ryan Hadley (eagleTears) 2021 - 2022
See JS files for details.
**********************************************************************
This program utilises the SweetAlert JS alert library and JQVMap API.
A huge, HUGE thank you to the creators of both.
Audio & script containing 'credits' function is loaded inside the head tag due to their use within the HTML.
-->
<!DOCTYPE html>
<html lang="en-GB" dir="ltr" class="lock-display">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta name="description" content="A global strategy game using SweetAlert">
<meta name="keywords" content="JavaScript, war, game, strategy">
<meta name="author" content="Ryan Hadley">
<title>Theatre of War</title>
<link rel="icon" type="image/jpg" sizes="32x32" href="images/blast.png">
<link href="jqvmap-master/dist/jqvmap.css" media="screen" rel="stylesheet">
<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=Amethysta&family=Libre+Franklin&display=swap" rel="stylesheet">
<link rel="stylesheet" href="styles.css">
<script src="https://code.jquery.com/jquery-1.11.3.min.js"></script>
<script src="jqvmap-master/dist/jquery.vmap.js"></script>
<script src="jqvmap-master/dist/maps/jquery.vmap.world.js"></script>
<script src="https://unpkg.com/sweetalert/dist/sweetalert.min.js"></script>
<script src="scripts/audio.js"></script>
<script src="scripts/credits.js"></script>
</head>
<body class="lock-display">
<img class="bg-intro-img" src="images/theater-of-war.jpg" alt="theatre of war main image" />
<!-- Calendar / time passing displays & game option buttons -->
<div class="game-hud">
<h1 class="wargate fire">Theatre of War</h1>
<button type="button" id="fast-fwd-btn">Fast FWD</button>
<button type="button" id="status-overlay-btn">Status</button>
<button type="button" id="sidebar-btn">Commands</button>
<h3 id="day">DAY: 0</h3>
<h3 id="week">WEEK: 1</h3>
<h3 id="month">MONTH: 1</h3>
<h3 id="year">YEAR: 2022</h3>
<!-- After nation is selected, its logo will appear here -->
<div id="logo-section"></div>
</div>
<!-- Renders the JQV world map object in the browser with this div element -->
<div id="vmap" class="scroll-target-map"></div>
<!-- Radar with sweep animation -->
<div class="radar">
<div class="sweep"></div>
</div>
<!-- Title overlay displaying game's story and title screen via css animations -->
<div class="title-overlay darken-overlay">
<button id="skip-intro-btn">Quick Start</button>
<div class="title-overlay-text">
<div class="title-screen">
<div id="story-scroll-text">
In 2022, the world teeters on the brink of destruction.<br>
An unexpected and violent coup has taken place in the People's Republic of China. Their nuclear stockpile has become unaccounted for, distributed globally by a secret society aiming to bring about a nuclear future for currently unknown reasons.<br><br>
Nuclear weapons are now widely available. Access to the world's most powerful arsenals has emboldened even the smallest nations, whom have now militarised to unprecedented levels. Conflict has become the new diplomacy.<br><br>
And the new diplomacy is war.<br><br>
<img src="images/burning-city.jpg" alt="image of destroyed city" class="intro-img" /><br><br>
Only two nations stand ready to act.<br><br>
Bring order to chaos as the United States of America.<br>
Or bring the world to heel as the resurgent Russian Federation.<br><br>
The United States.<br> Russia.<br><br> Who will you lead?<br><br>
Whichever country rises up, an inescapable reality remains...
</div>
<div class="main-titles">
<h2 class="title-animation-1">In the 21st century</h2>
<h2 class="title-animation-1-5">There is only the...</h2>
<h1 class="wargate">
<span class="title-animation-2">Theatre</span>
<span class="title-animation-3">of</span>
<span class="title-animation-4">War</span>
</h1>
<button type="button" id="start-game-btn" class="wargate">Wage War</button>
</div>
<!-- Credits: USA -->
<div class="end-titles-usa">
<h2>Congratulations, commander.</h2>
The United States of America has achieved peace through power.<br>
All the world's nations are considering dismantling their arsenals.<br>
A new age of peace has begun.<br><br>
<section class="credits"></section>
<script>
credits()
</script>
</div>
<!-- Credits: Russia -->
<div class="end-titles-russia">
<h2>Congratulations, commander.</h2>
The Russian Federation has gone from resurgent to almighty.<br>
All the world's nations are falling into line through fear and respect.<br>
A new age of power has begun.<br><br>
<section class="credits"></section>
<script>
credits()
</script>
</div>
<div class="victory-img-section">
<h3 class="victory-heading">Thank you for playing</h3>
<h2 class="wargate">
<span class="end-text-1">Theatre</span>
<span class="end-text-2">of</span>
<span class="end-text-3">War</span>
</h2>
<h3 class="authour-credit">A
<a href="https://github.com/eaglesTear">
Ryan Hadley
</a> game
</h3>
<button type="button" id="reload-btn">RELOAD GAME</button>
</div>
</div>
</div>
</div>
<!-- Status overlay that displays various current data about the player's nation -->
<div class="status-overlay">
<a class="status-closebtn">×</a>
<div class="status-overlay-content">
<div id="removable-status-content">
<img src="images/report.png" class="status-img" alt="report icon" />
<h2 id="nation-name"></h2>
<ul id="overview"></ul>
</div>
</div>
</div>
<!-- Sidebar action UI: functions that require a target nation to be selected -->
<div class="sidebar">
<a href="javascript:void(0)" class="sidebar-close-btn">×</a>
<div>
<img src="images/soldiers.png" class="cp-image" alt="soldiers">
<button type="button" id="deploy-btn">Deploy Military</button>
<button type="button" id="attack-btn">Attack</button>
<select class="agents-imprisoned hidden"></select>
<button type="button" id="rescue-btn">Rescue</button>
<button type="button" id="conscription-btn">Conscription</button>
</div>
<div>
<img src="images/agent.png" class="cp-image" alt="agent">
<button type="button" id="intel-btn">Gather Intel</button>
<button type="button" id="sabotage-btn">Sabotage</button>
<button type="button" id="incite-btn">Incite Rebellion</button>
<button type="button" id="spying-btn">Satellite Surveillance</button>
<button type="button" id="hack-btn">Cyberattack</button>
</div>
<div>
<img src="images/govt.png" class="cp-image" alt="parliament icon">
<button type="button" id="diplomacy-btn">Diplomacy</button>
<button type="button" id="reinforcement-btn">Request Alliance Reinforcements</button>
<button type="button" id="ransom-btn">Pay Hostage Ransom</button>
</div>
<div>
<img src="images/danger.png" class="cp-image" alt="danger icon">
<button type="button" id="nuclear-btn">Launch Nuclear Strike</button>
<button type="button" class="hidden" id="p-cannon-btn">Particle Cannon Strike</button>
</div>
</div>
<!-- Options slider or carousel: Minimises scrolling and UI clutter -->
<section class="options-container" id="scroll-target-cpanel">
<div class="slider">
<input type="radio" name="slider" title="Facilities" checked="checked" class="slider__nav" />
<input type="radio" name="slider" title="Units" class="slider__nav" />
<input type="radio" name="slider" title="Tactical" class="slider__nav" />
<input type="radio" name="slider" title="Manufacturing" class="slider__nav" />
<input type="radio" name="slider" title="Research" class="slider__nav" />
<input type="radio" name="slider" title="Upgrades" class="slider__nav" />
<div class="slider__inner">
<!-- Base Construction -->
<div class="slider__contents">
<div>
<div class="flex-column">
<img src="images/intel.svg" class="cp-image" title="$280000000" alt="intel building">
<button type="button" id="intel-ops">IntelOps</button>
<img src="images/runway.png" class="cp-image" title="$5470000000" alt="runway">
<button type="button" id="airbase">Airbase</button>
</div>
<div class="flex-column">
<img src="images/barracks.svg" class="cp-image" title="$2000000" alt="barracks">
<button type="button" id="barracks">Barracks</button>
<img src="images/gold-anchor.svg" class="cp-image" title="$2600000000" alt="gold anchor">
<button type="button" id="naval-yard">Naval Yard</button>
</div>
<div class="flex-column">
<img src="images/factory.png" class="cp-image" title="$11300000000" alt="factory building">
<button type="button" id="war-factory">War Factory</button>
<img src="images/launch.svg" class="cp-image" title="$444000000" alt="rocket launch image">
<button type="button" id="launch-pad">Launch Pad</button>
</div>
<div class="flex-column">
<img src="images/centre.svg" class="cp-image" title="$48859900" alt="research centre">
<button type="button" id="research-centre">Research Centre</button>
<img src="images/missile.png" class="cp-image" title="$120000000" alt="missile launching">
<button type="button" id="missile-silo">Missile Silo</button>
</div>
</div>
</div>
<!-- Unit training & construction -->
<div class="slider__contents">
<div class="military-units">
<div class="flex-column">
<img src="images/tank.png" class="cp-image" title="$5000000" alt="tank">
<input type="number" id="tanks" min="0" max="1000" step="10" value="50">
<button type="button" id="purchase-tanks">Build Tanks</button>
</div>
<div class="flex-column">
<img src="images/soldier.png" class="cp-image" title="$80000" alt="soldier with rifle">
<input type="number" id="infantry" min="0" max="10000" step="1000" value="0">
<button type="button" id="purchase-infantry">Train Infantry</button>
</div>
<div class="flex-column">
<img src="images/jet.png" class="cp-image" title="$64000000" alt="fighter jet">
<input type="number" id="aircraft" min="0" max="500" step="10" value="0">
<button type="button" id="purchase-aircraft">Build Aircraft</button>
</div>
<div class="flex-column">
<img src="images/warship.png" class="cp-image" title="$100000000" alt="warship">
<input type="number" id="warships" min="0" max="50" step="1" value="0">
<button type="button" id="purchase-warships">Build Warships</button>
</div>
<div class="flex-column">
<img src="images/spy.png" class="cp-image" title="$100000" alt="spy">
<input type="number" id="field-agents" min="1" max="5" step="1" value="1">
<button type="button" id="train-agents">Train Agents</button>
</div>
</div>
</div>
<!-- Tactical: satellite, missile shield & nuclear weapon construction -->
<div class="slider__contents">
<div>
<div class="flex-column">
<img src="images/satellite.png" class="cp-image" title="$470000000" alt="satellite">
<input type="number" id="satellites" min="1" max="1" step="1" value="1">
<button type="button" id="launch-satellite">Build & Launch Satellite</button>
</div>
<div class="flex-column">
<img src="images/nuclear.svg" class="cp-image" title="$28000000" alt="nuclear bomb">
<input type="number" id="warheads" min="0" max="10" step="1" value="0">
<button type="button" id="build-nukes">Develop Nuclear Weapons</button>
</div>
<div class="flex-column">
<img src="images/anti-nuke.png" class="cp-image" title="$38000000" alt="missile shield">
<input type="number" id="shield" min="0" max="10" step="1" value="0">
<button type="button" id="build-shield">Develop Missile Shield</button>
</div>
</div>
</div>
<!-- Manufacturing options & sell surplus oil or weapon reserves -->
<div class="slider__contents">
<div>
<div>
<div class="flex-column">
<img src="images/oil.png" class="cp-image" alt="oil derrick">
<input type="number" id="oil" min="10000" max="1000000" step="10000" value="10000">
<button id="sell-oil" type="button">Sell Oil</button>
</div>
<div class="flex-column">
<img src="images/rifle.png" class="cp-image-rifle" title="$700" alt="rifle">
<input type="number" id="weapons-to-sell" min="50" max="10000" step="50" value="100">
<button id="sell-weapons" type="button">Sell Weapons</button>
</div>
</div>
<div class="flex-column">
<img src="images/machine.png" class="cp-image" alt="industrial machine">
<input type="number" id="weapons-to-build" min="50" max="100000" step="50" value="50">
<button id="make-small-arms" type="button">Manufacture Arms</button>
</div>
</div>
</div>
<!-- Research & hiring research personnel -->
<div class="slider__contents">
<div>
<span class="research-span">Researchers Employed:<span id="researchers-employed"></span></span>
<span class="research-span">Researchers Available:<span id="researchers-available"></span></span>
</div>
<div class="research">
<img src="images/atom.png" class="cp-image" alt="atom nucleus">
<select id="research-options">
<option value="hypersonicMissiles">Hypersonic Missiles: $100000000</option>
<option value="cyreAssaultRifle">Cyre Assault Rifle: $250000000</option>
<option value="railguns">Rail Guns: $550000000</option>
<option value="kineticArmour">Kinetic Armour: $750000000</option>
<option value="particleCannon">Particle Cannon: $800000000</option>
</select>
<div class="flex-column">
<input type="number" id="researchers" min="10" max="100" step="5" value="1">
<button type="button" id="hire-researchers">Hire Researchers</button>
</div>
<div class="flex-column">
<input type="number" id="researcher-allocation" min="10" max="1000" step="5" value="10">
<button type="button" id="assign">Assign</button>
</div>
</div>
</div>
<!-- Upgrades -->
<div class="slider__contents">
<div>
<div class="flex-column">
<img src="images/shield.png" class="cp-image" title="$10000000" alt="up arrow">
<button type="button" id="upgrade-aircraft">Ceramic Armour</button>
</div>
<div class="flex-column">
<img src="images/carrier.png" class="cp-image" title="$20000000" alt="up arrow">
<button type="button" id="upgrade-navy">Aircraft Carrier</button>
</div>
<div class="flex-column">
<img src="images/syringe.svg" class="cp-image" title="$2000 per soldier" alt="up arrow">
<button type="button" id="upgrade-infantry">NeuroStims</button>
</div>
<div class="flex-column">
<img src="images/shell.png" class="cp-image" title="$40000000" alt="up arrow">
<button type="button" id="upgrade-armour">Depleted Uranium Projectiles</button>
</div>
</div>
</div>
</div>
</div>
</section>
<!-- Footer with links to GitHub and LinkedIn pages -->
<footer>
<div>
Copyright ©
<script>
document.write(new Date().getFullYear());
</script>
Ryan Hadley (eaglesTear)
<a href="https://www.linkedin.com/in/ryan-had">
<img src="images/linkedin.png" alt="LinkedIn logo" />
</a>
<a href="https://github.com/eaglesTear">
<img src="images/github.png" alt="GitHub logo" />
</a>
</div>
</footer>
<!-- Game scripts -->
<script src="scripts/functions.js"></script>
<script src="scripts/classes.js"></script>
<script src="scripts/globals.js"></script>
<script src="scripts/global_regions.js"></script>
<script src="scripts/core-script.js"></script>
<script src="scripts/ui.js"></script>
</body>
</html>