-
Notifications
You must be signed in to change notification settings - Fork 0
/
gameplay.html
226 lines (173 loc) · 7.56 KB
/
gameplay.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
<!-- @author: Jimin Lee -->
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Through the Ages Gameplay</title>
<link rel="stylesheet" type="text/css" href="style.css">
<script src="script.js"></script>
<!-- Bootstrap -->
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap@4.3.1/dist/css/bootstrap.min.css" integrity="sha384-ggOyR0iXCbMQv3Xipma34MD+dH/1fQ784/j6cY/iJTQUOhcWr7x9JvoRxT2MZw1T" crossorigin="anonymous">
</head>
<body>
<div id="gameplay">
<br>
<h1 id="title">THROUGH THE AGES: ARMAGEDDON</h1>
<br>
<div class="container">
<div class="row">
<div class="col-sm">
<!-- current information -->
<div id="currentInformation" class="section">
<h4>CURRENT TIME</h4>
<p id="time">The very beginning<br>~4.5 billion years ago</p>
<h4>TIME DESCRIPTION</h4>
<p id="timeDescription">Welcome to the beginning of the world. This is the earth as far back as we know it.</p>
</div>
<br>
<!-- history log -->
<div id="historyLog" class="section">
<h4>HISTORY LOG</h4>
<ul id="history"></ul>
</div>
</div>
<div class="col-sm">
<!-- earth image -->
<img src="images/planet0.png" id="planetIMG">
<!-- time control buttons -->
<div id="buttons">
<button onclick="moveTime(-1)" id="backward">GO BACKWARD</button>
<button onclick="moveTime(1)" id="forward">MOVE FORWARD</button>
</div>
</div>
<div class="col-sm">
<!-- crisis descriptions -->
<div id="crisis" class="section">
<h4>CURRENT CRISIS</h4>
<!-- image that flashes when a crisis exists -->
<div class="hiddenCrisis" id="crisisIMGdiv">
<img src="images/crisis.png" alt="crisis.png" id="crisisIMG">
</div>
<!-- description of the crisis situation -->
<p id="currentCrisis">There is no crisis as of now. Move forward in time to proceed.</p>
<!-- different choices the user can pick to proceed with dealing with the crisis
should only be visible when there is a crisis to deal with -->
<div class="hiddenCrisis" id="crisisBtn">
<button onclick="crisisOption(0)" id="crisis0"></button><br><br>
<button onclick="crisisOption(1)" id="crisis1"></button><br><br>
<p id="currentChoice">Current Choice: <br><label id="crisisChoice"></label></p>
</div>
</div>
<br>
<!-- additional information -->
<div id="additionalInfo" class="ending-headings">
<!-- btn to reset simulation; takes user back to index.html -->
<button onclick="reset()">RESET SIMULATION</button>
</div>
</div>
</div>
</div>
</div>
<!-- ending pages -->
<div class="body-ending">
<!-- ending1 -->
<div class="body-div endings" id="ending1">
<h1 class="ending-headings">ENDING #1: DEATH BY FAMINE</h1><br>
<h3>OUTCOME</h3>
<p>Oh no! It seems the civilization has died due to famine.
Make sure the people have the ability to make or access food!</p>
<br>
<div>
<h3>YOUR CHOICES</h3>
<ul id="end1"></ul>
</div>
<br>
<div class="ending-headings">
<button onclick="reset()" class="button">GO BACK?</button>
</div>
</div>
<!-- ending2 -->
<div class="body-div endings" id="ending2">
<h1 class="ending-headings">ENDING #2: DEATH BY DISEASE</h1><br>
<h3>OUTCOME</h3>
<p>Oh no! It seems the civilization has died due to disease.
Better stay inside, and stay protected!</p>
<br>
<div>
<h3>YOUR CHOICES</h3>
<ul id="end2"></ul>
</div>
<br>
<div class="ending-headings">
<button onclick="reset()" class="button">GO BACK?</button>
</div>
</div>
<!-- ending3 -->
<div class="body-div endings" id="ending3">
<h1 class="ending-headings">ENDING #3: YOU DIED?!</h1><br>
<h3>OUTCOME</h3>
<p>Whilst trying to save the past, it seems you got caught up in some historical business.
Perhaps you should stay out of some of it. We need you alive to save the world, after all...</p>
<br>
<div>
<h3>YOUR CHOICES</h3>
<ul id="end3"></ul>
</div>
<br>
<div class="ending-headings">
<button onclick="reset()" class="button">GO BACK?</button>
</div>
</div>
<!-- ending4 -->
<div class="body-div endings" id="ending4">
<h1 class="ending-headings">ENDING #4: DEATH BY WAR</h1><br>
<h3>OUTCOME</h3>
<p>Oh no! It seems the infighting led to the civilization self-destructing each other.
Known as Mutually Assured Destruction (MAD), try not to encourage them...</p>
<br>
<div>
<h3>YOUR CHOICES</h3>
<ul id="end4"></ul>
</div>
<br>
<div class="ending-headings">
<button onclick="reset()" class="button">GO BACK?</button>
</div>
</div>
<!-- ending5 -->
<div class="body-div endings" id="ending5">
<h1 class="ending-headings">ENDING #5: DEATH BY CLIMATE CHANGE</h1><br>
<h3>OUTCOME</h3>
<p>Oh no! It seems the civilization has died due to climate change.
Since this is what killed everyone off in 2050, please try your best to fulfill your duty
and make sure we don't repeat this mistake!</p>
<br>
<div>
<h3>YOUR CHOICES</h3>
<ul id="end5"></ul>
</div>
<br>
<div class="ending-headings">
<button onclick="reset()" class="button">GO BACK?</button>
</div>
</div>
<!-- ending6 -->
<div class="body-div endings" id="ending6">
<h1 class="ending-headings">ENDING #6: YOU DID IT!!</h1><br>
<h3>OUTCOME</h3>
<p>Congratulations! You have successfully led humanity back to the present time, and guided them to the right path!
You are awarded the Nobel Peace Price for your efforts.</p>
<img src="images/nobel.png" id="nobel">
<br>
<div>
<h3>YOUR CHOICES</h3>
<ul id="end6"></ul>
</div>
<br>
<div class="ending-headings">
<button onclick="reset()" class="button">GO BACK?</button>
</div>
</div>
</div>
</body>
</html>