-
Notifications
You must be signed in to change notification settings - Fork 0
/
Copy pathindex.html
269 lines (268 loc) · 19.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
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<meta http-equiv="X-UA-Compatible" content="ie=edge" />
<title>Polluty</title>
<link rel="stylesheet" href="style.css" />
<link
href="https://fonts.googleapis.com/css?family=Playfair+Display:400,700,900,400italic,700italic,900italic|Droid+Serif:400,700,400italic,700italic"
rel="stylesheet"
type="text/css"
/>
</head>
<body>
<div class="game">
<div class="map">
<div class="bg">
<img class="bg-first" src="./src/img/bg1.png" />
<img class="bg-second" src="./src/img/bg2.png" />
</div>
<div class="hud">
<p id="money"></p>
<p id="population"></p>
<p id="pollution-water">💡</p>
<p id="pollution-air">💡</p>
<p id="pollution-earth">💡</p>
</div>
<div id="map-img">
<svg width="965" height="612" xmlns="http://www.w3.org/2000/svg">
<defs>
<linearGradient
id="bubble-gradient"
x1="0%"
y1="0%"
x2="0%"
y2="100%"
>
<stop offset="0%" style="stop-color:#ffc500;stop-opacity:1" />
<stop offset="100%" style="stop-color:#c21500;stop-opacity:1" />
</linearGradient>
</defs>
<g>
<path
id="north-america-main"
class="continent north-america"
d="m64.494001,34.503104c0,0 -64.000884,44.000608 -65.000897,44.000608c-1.000014,0 74.001022,-6.000083 74.001022,-6.000083c0,0 3.000041,50.00069 3.000041,50.00069c0,0 -27.000373,28.000387 -26.000359,29.0004c1.000014,1.000014 18.000249,56.000773 19.000262,56.000773c1.000014,0 10.000138,-25.000345 8.00011,-24.000331c-2.000028,1.000014 17.000235,35.000483 18.000249,35.000483c1.000014,0 77.001063,48.000663 77.001063,47.000649c0,-1.000014 -26.000359,-57.000787 -26.000359,-57.000787c0,0 -18.000249,12.000166 -18.000249,12.000166c0,0 -9.000124,-35.000483 -9.000124,-35.000483c0,0 42.00058,-12.000166 42.00058,-11.000152c0,1.000014 15.000207,19.000262 15.000207,18.000249c0,-1.000014 8.00011,-27.000373 8.00011,-27.000373c0,0 51.000704,-43.000594 51.000704,-42.00058c0,1.000014 48.000663,-18.000249 48.000663,-19.000262c0,-1.000014 -16.000221,-37.000511 -16.000221,-37.000511c0,0 -43.000594,2.000028 -43.000594,2.000028c0,0 -17.000235,18.000249 -17.000235,18.000249c0,0 -16.000221,-19.000262 -16.000221,-19.000262c0,0 29.0004,-28.000387 29.0004,-28.000387c0,0 -156.002154,-6.000083 -156.002154,-6.000083z"
stroke-width="2.5"
stroke="#000"
fill="#fff"
/>
<path
id="svg_16"
class="continent north-america"
d="m256.495782,22.002859c0,0 -16.000221,8.00011 -15.000207,8.00011c1.000014,0 29.0004,18.000249 28.000387,18.000249c-1.000014,0 -20.000276,5.000069 -19.000262,5.000069c1.000014,0 17.000235,8.00011 17.000235,7.000097c0,-1.000014 19.000262,-13.000179 19.000262,-13.000179c0,0 -8.00011,-19.000262 -8.00011,-20.000276c0,-1.000014 -22.000304,-5.000069 -22.000304,-5.000069z"
stroke-width="2.5"
stroke="#000"
fill="#fff"
/>
<path
id="svg_17"
class="continent north-america"
d="m299.496376,10.002693c0,0 19.000262,15.000207 19.000262,15.000207c0,0 -3.000041,26.000359 -3.000041,26.000359c0,0 15.000207,25.000345 15.000207,24.000331c0,-1.000014 22.000304,-27.000373 22.000304,-27.000373c0,0 43.000594,-20.000276 43.000594,-20.000276c0,0 27.000373,-28.000387 25.000345,-27.000373c-2.000028,1.000014 -121.001671,9.000124 -121.001671,9.000124z"
stroke-width="2.5"
stroke="#000"
fill="#fff"
/>
<path
id="south-america-main"
class="continent south-america"
d="m186.494816,267.006242c0,0 77.001063,0 77.001063,-2.000028c0,-2.000028 5.000069,27.000373 5.000069,27.000373c0,0 55.000759,20.000276 55.000759,20.000276c0,0 -17.000235,59.000815 -17.000235,59.000815c0,0 -22.000304,18.000249 -22.000304,17.000235c0,-1.000014 -2.000028,29.0004 -2.000028,29.0004c0,0 -33.000456,25.000345 -33.000456,24.000331c0,-1.000014 -2.000028,28.000387 -1.000014,28.000387c1.000014,0 14.000193,28.000387 14.000193,28.000387c0,0 -53.000732,-40.000552 -52.000718,-43.000594c1.000014,-3.000041 4.000055,-84.00116 3.000041,-85.001174c-1.000014,-1.000014 -43.000594,-70.000966 -44.000608,-70.000966c-1.000014,0 17.000235,-32.000442 17.000235,-32.000442z"
stroke-width="2.5"
stroke="#000"
fill="#fff"
/>
<path
id="svg_19"
class="continent africa"
d="m419.498033,161.004778c-1.000014,1.000014 -37.000511,43.000594 -37.000511,44.000608c0,1.000014 5.000069,62.000856 3.000041,61.000842c-2.000028,-1.000014 36.000497,15.000207 36.000497,14.000193c0,-1.000014 47.000649,-9.000124 47.000649,-9.000124c0,0 16.000221,69.000953 16.000221,69.000953c0,0 -16.000221,16.000221 -14.000193,16.000221c2.000028,0 30.000414,65.000897 30.000414,65.000897c0,0 27.000373,3.000041 27.000373,2.000028c0,-1.000014 21.00029,-27.000373 21.00029,-27.000373c0,0 0,-39.000538 0,-38.000525c0,1.000014 26.000359,-13.000179 25.000345,-14.000193c-1.000014,-1.000014 -4.000055,-36.000497 -3.000041,-36.000497c1.000014,0 36.000497,-59.000815 35.000483,-58.000801c-1.000014,1.000014 -29.0004,4.000055 -29.0004,4.000055c0,0 -39.000538,-69.000953 -39.000538,-69.000953c0,0 10.000138,-8.00011 10.000138,-8.00011c0,0 -33.000456,-7.000097 -34.000469,-7.000097c-1.000014,0 -13.000179,11.000152 -13.000179,11.000152c0,0 -30.000414,-13.000179 -30.000414,-13.000179c0,0 0,-14.000193 0,-14.000193c0,0 -50.00069,6.000083 -51.000704,7.000097z"
stroke-width="2.5"
stroke="#000"
fill="#fff"
/>
<path
id="europe-main"
class="continent europe"
d="m457.936018,55.965215c0,0.499934 0,14.998035 0,14.998035c0,0 13.998166,-4.49941 13.998166,-4.49941c0,0 9.99869,12.498362 9.498755,11.998428c-0.499934,-0.499934 21.997117,-34.49548 21.997117,-34.49548c0,0 0.999869,18.497576 0.999869,18.497576c0,0 16.497838,3.499541 15.997904,2.999607c-0.499934,-0.499934 -16.497838,11.998428 -16.497838,11.998428c0,0 -34.995414,7.499017 -34.995414,7.998952c0,0.499934 -6.999083,-7.499017 -6.999083,-7.499017c0,0 -1.999738,8.998821 -1.999738,8.998821c0,0 -28.496266,15.497969 -28.496266,15.497969c0,0 -3.999476,21.497183 -3.999476,21.497183c0,0 -18.497576,-4.49941 -18.497576,-3.999476c0,0.499934 -0.499934,27.496397 -0.499934,27.496397c0,0 16.497838,3.499541 15.997904,3.999476c-0.499934,0.499934 40.994628,-31.495873 40.994628,-31.495873c0,0 23.996855,26.496528 23.496921,26.496528c-0.499934,0 5.499279,-13.998166 4.999345,-13.998166c-0.499934,0 -14.998035,-17.997642 -14.998035,-17.997642c0,0 23.496921,12.998297 23.496921,12.998297c0,0 7.998952,27.496397 7.499017,26.496528c-0.499934,-0.999869 8.998821,-22.497052 9.498755,-22.497052c0.499934,0 11.498493,-4.49941 10.998559,-4.49941c-0.499934,0 6.499148,-18.497576 6.999083,-18.497576c0.499934,0 21.997117,16.997773 21.997117,16.497838c0,-0.499934 -7.499017,-79.489583 -7.499017,-79.489583c0,0 -36.495218,-18.497576 -36.495218,-18.497576c0,0 -26.996462,7.998952 -26.996462,7.998952c0,0 -30.496004,20.497314 -30.496004,20.997248z"
stroke-width="2.5"
stroke="#000"
fill="#fff"
/>
<path
id="svg_22"
class="continent europe"
d="m434.439362,66.46384c0,0 7.499017,25.496659 7.499017,25.496659c0,0 -17.997642,1.499803 -17.997642,0.999869c0,-0.499934 8.498886,-9.99869 8.498886,-9.99869c0,0 1.999738,-16.497838 1.999738,-16.497838z"
stroke-width="2.5"
stroke="#000"
fill="#fff"
/>
<path
id="svg_23"
class="continent europe"
d="m418.441459,81.461874c0,0 -3.499541,12.998297 -3.499541,12.998297c0,0 7.998952,-7.499017 7.998952,-7.499017c0,0 -4.49941,-5.499279 -4.49941,-5.499279z"
stroke-width="2.5"
stroke="#000"
fill="#fff"
/>
<path
id="asia-main"
class="continent asia"
d="m561.422855,38.468038c0.499934,0.499934 49.493514,0.499934 48.99358,0.499934c-0.499934,0 10.498624,-11.998428 10.998559,-12.498362c0.499934,-0.499934 28.496266,-1.499803 27.996331,-1.499803c-0.499934,0 24.49679,-11.998428 24.49679,-11.498493c0,0.499934 94.987553,19.497445 95.487487,19.497445c0.499934,0 139.981656,13.498231 139.981656,13.498231c0,0 -9.498755,9.498755 -9.498755,9.498755c0,0 9.99869,5.499279 8.498886,5.999214c-1.499803,0.499934 -8.498886,11.498493 -8.498886,11.498493c0,0 -11.998428,-3.999476 -12.498362,-3.999476c-0.499934,0 13.998166,33.495611 13.998166,33.495611c0,0 -26.996462,-16.997773 -26.496528,-16.997773c0.499934,0 1.999738,-20.997248 1.999738,-20.997248c0,0 -40.994628,7.499017 -40.994628,7.998952c0,0.499934 -10.498624,15.997904 -10.998559,15.997904c-0.499934,0 21.997117,12.498362 21.997117,12.498362c0,0 8.498886,25.996593 8.498886,25.996593c0,0 -14.998035,10.998559 -14.4981,11.498493c0.499934,0.499934 7.998952,26.496528 7.499017,26.496528c-0.499934,0 -19.497445,-19.997379 -18.997511,-19.997379c0.499934,0 -21.997117,-3.999476 -20.997248,-3.499541c0.999869,0.499934 11.498493,22.996986 11.498493,22.996986c0,0 16.497838,17.497707 15.497969,16.997773c-0.999869,-0.499934 -9.99869,21.997117 -9.99869,21.997117c0,0 -20.497314,8.498886 -20.497314,8.498886c0,0 -21.497183,5.499279 -20.997248,5.499279c0.499934,0 19.997379,30.995938 19.997379,30.995938c0,0 -16.497838,16.997773 -15.997904,15.997904c0.499934,-0.999869 -13.998166,-21.497183 -13.998166,-20.997248c0,0.499934 0,15.997904 0.499934,15.997904c0.499934,0 13.498231,27.496397 13.498231,26.496528c0,-0.999869 -20.997248,-24.996724 -20.997248,-24.996724c0,0 -4.49941,-34.49548 -4.49941,-34.49548c0,0 -9.99869,6.999083 -9.99869,6.999083c0,0 -15.497969,-25.996593 -16.497838,-25.496659c-0.999869,0.499934 -30.995938,29.996069 -30.496004,29.996069c0.499934,0 0,17.497707 0,17.997642c0,0.499934 -10.998559,5.999214 -10.498624,5.499279c0.499934,-0.499934 -16.497838,-48.99358 -15.997904,-49.493514c0.499934,-0.499934 -6.499148,2.499672 -6.499148,2.499672c0,0 -17.497707,-17.997642 -16.997773,-17.997642c0.499934,0 -27.996331,-4.49941 -27.496397,-3.499541c0.499934,0.999869 -27.996331,-12.498362 -26.496528,-12.498362c1.499803,0 3.499541,19.997379 4.49941,19.997379c0.999869,0 16.497838,-5.499279 16.497838,-4.999345c0,0.499934 14.4981,14.4981 14.4981,14.4981c0,0 -52.993056,33.495611 -52.493121,33.495611c0.499934,0 -31.495873,-57.992401 -30.995938,-57.992401c0.499934,0 1.999738,-29.996069 1.999738,-29.996069c0,0 -26.996462,1.499803 -26.496528,1.499803c0.499934,0 -1.999738,-15.997904 -1.999738,-15.997904c0,0 9.99869,-2.999607 10.498624,-2.999607c0.499934,0 5.999214,-17.497707 5.999214,-17.497707c0,0 23.996855,15.497969 23.996855,15.497969c0,0 -9.498755,-90.488142 -9.498755,-89.988208c0,0.499934 2.999607,-8.498886 3.499541,-7.998952z"
fill-opacity="null"
stroke-opacity="null"
stroke-width="2.5"
stroke="#000"
fill="#fff"
/>
<path
id="svg_25"
class="continent asia"
d="m887.880207,124.956969c0,0 -18.997511,2.499672 -18.997511,2.999607c0,0.499934 6.499148,26.996462 6.499148,26.996462c0,0 -12.498362,1.499803 -12.498362,1.499803c0,0 -8.498886,15.497969 -7.998952,15.497969c0.499934,0 14.998035,-0.499934 14.998035,-0.499934c0,0 13.998166,-15.997904 13.998166,-16.497838c0,-0.499934 -7.499017,-18.997511 -7.499017,-18.997511c0,0 7.998952,1.499803 7.998952,1.499803c0,0 3.499541,-12.498362 3.499541,-12.498362z"
fill-opacity="null"
stroke-opacity="null"
stroke-width="2.5"
stroke="#000"
fill="#fff"
/>
<path
id="svg_26"
class="continent asia"
d="m829.887542,260.93862c0,0 -14.4981,17.497707 -14.4981,17.497707c0,0 -16.997773,1.499803 -15.997904,1.999738c0.999869,0.499934 10.498624,21.497183 10.998559,21.497183c0.499934,0 18.997511,2.999607 18.997511,2.999607c0,0 9.498755,-37.495087 9.498755,-37.495087c0,0 -8.998821,-6.499148 -8.998821,-6.499148z"
fill-opacity="null"
stroke-opacity="null"
stroke-width="2.5"
stroke="#000"
fill="#fff"
/>
<path
id="svg_28"
class="continent australia"
d="m879.974196,294.31889c-0.666648,-0.666648 14.666251,19.999433 14.666251,19.999433c0,0 26.66591,7.333125 26.66591,7.999773c0,0.666648 14.666251,10.666364 14.666251,10.666364c0,0 -5.99983,-14.666251 -5.99983,-14.666251c0,0 7.999773,-4.666534 7.999773,-4.666534c0,0 -24.665967,-14.666251 -24.665967,-14.666251c0,0 -19.332785,-1.333296 -18.666137,-1.333296c0.666648,0 -13.999603,-2.666591 -14.666251,-3.333239z"
fill-opacity="null"
stroke-opacity="null"
stroke-width="2.5"
stroke="#000"
fill="#fff"
/>
<path
id="australia-main"
class="continent australia"
d="m857.308172,342.317528c0,-0.666648 -48.665286,33.999035 -48.665286,33.999035c0,0 0,48.665286 -0.666648,46.665343c-0.666648,-1.999943 54.665116,-11.99966 53.998468,-11.333012c-0.666648,0.666648 8.666421,13.999603 8.666421,13.999603c0,0 11.333012,3.333239 10.666364,3.333239c-0.666648,0 0,5.333182 0,5.333182c0,0 27.999206,2.666591 27.999206,1.999943c0,-0.666648 28.665853,-49.998581 28.665853,-49.998581c0,0 -17.999489,-23.332671 -17.999489,-23.332671c0,0 -7.333125,-32.66574 -7.333125,-32.66574c0,0 -8.666421,23.999319 -8.666421,23.999319c0,0 -14.666251,-9.999716 -14.666251,-9.333069c0,0.666648 5.99983,-7.999773 5.333182,-7.999773c-0.666648,0 -17.332842,-3.999887 -17.332842,-3.333239c0,0.666648 -7.333125,12.666307 -7.333125,12.666307c0,0 -12.666307,-3.333239 -12.666307,-3.999887z"
fill-opacity="null"
stroke-opacity="null"
stroke-width="2.5"
stroke="#000"
fill="#fff"
/>
<path
id="antarctica-main"
class="continent antarctica"
d="m37.499242,606.000815c-1,0 -13.00002,-30.00005 -13.00002,-30.00005c0,0 139.00019,-12.00001 138.00019,-13.00001c-1,-1 -15.00002,-14.00002 -13.00002,-14.00002c2,0 110.00015,7.00001 110.00015,7.00001c0,0 21.00003,-28.00004 21.00003,-28.00004c0,0 6.00001,34.00005 6.00001,34.00005c0,0 -30.00004,37.00005 -27.00004,36.00004c3.00001,-1 147.0002,-7.00001 146.0002,-7.00001c-1,0 26.00003,-30.00004 26.00003,-30.00004c0,0 106.00015,-3 107.00015,-4c1,-1 42.00006,-13.00002 42.00006,-14.00002c0,-1 32.00004,6.00001 32.00004,6.00001c0,0 -7.00001,23.00003 -7.00001,22.00003c0,-1 97.00013,-17.00003 98.00013,-19.00003c1,-2 201.00028,-4 201.00028,-4c0,0 60.00008,29.00004 59.00008,28.00003c-1.00001,-1 -30.00004,36.00005 -30.00004,35.00005c0,-1 -895.00122,-5 -896.00122,-5z"
fill-opacity="null"
stroke-opacity="null"
stroke-width="2.5"
stroke="#000"
fill="#fff"
/>
<text id="bubble-north-america" class="bouble" x="140" y="100">
💵
</text>
<text id="bubble-south-america" class="bouble" x="250" y="340">
💵
</text>
<text id="bubble-europe" class="bouble" x="500" y="100">💵</text>
<text id="bubble-asia" class="bouble" x="700" y="100">💵</text>
<text id="bubble-africa" class="bouble" x="480" y="240">
💵
</text>
<text id="bubble-australia" class="bouble" x="860" y="400">
💵
</text>
<text id="bubble-antarctica" class="bouble" x="500" y="560">
💵
</text>
</g>
</svg>
</div>
</div>
<div id="events">
<div class="events-header">
<hr class="small" />
<hr class="big" />
<h1>World News</h1>
<span id="events-year">A.D. 1800</span>
<hr class="small" />
<hr class="small" />
</div>
<div id="events-feed"></div>
<div class="overlay"></div>
<div id="modifiers"></div>
</div>
</div>
<div id="game-over" class="game-over">
<div class="over-newspaper">
<div class="over-header">
<hr class="small" />
<hr class="big" />
<h1 id="over-title">Ju Łin</h1>
<hr class="small" />
<hr class="small" />
</div>
<div class="columns">
<div class="column">
<h2 class="column-title">sss</h2>
<p>
Lorem ipsum dolor sit, amet consectetur adipisicing elit.
Praesentium ex exercitationem magni atque, excepturi nobis numquam
consequatur ipsa provident pariatur distinctio consectetur tempora
illum. Maxime quaerat ex quam minima aut!
</p>
</div>
<div class="column">
<h2 class="column-title">sss</h2>
<p>
Lorem ipsum dolor sit amet consectetur adipisicing elit. A at
quasi officia nemo et tempora facilis rerum placeat ex tempore
beatae quos sed obcaecati saepe laudantium, laboriosam, deserunt
rem illum!
</p>
</div>
<div class="column">
<h2 class="column-title">sss</h2>
<p>
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Eaque
beatae molestiae odit culpa temporibus natus amet vero maxime
labore, inventore maiores nobis dicta optio sint consequatur, eum
autem commodi! Odio.
</p>
</div>
</div>
</div>
<a href="javascript:window.location.reload(true)">New Game</a>
</div>
<div class="start" id="start">
<h1 class="game-title">Polluty</h1>
<div class="normal" id="normal">
<h1>Normal mode</h1>
</div>
<div class="20s" id="20s">
<h1>20'' mode</h1>
</div>
</div>
<script src="./src/modifiers/modifier.js"></script>
<script src="./src/modifiers/1960_useBicycles.js"></script>
<script src="./src/modifiers/1970_plantForest.js"></script>
<script src="./src/modifiers/2006_limitCO2EmissionsInEU.js"></script>
<script src="./src/modifiers/2010_useScientificResearch.js"></script>
<script src="./src/modifiers/2021_modernOceanCleaningSystem.js"></script>
<script src="./src/modifiers/2026_limitCO2EmissionsInAsia.js"></script>
<script src="./src/modifiers/2050_closeCoalMines.js"></script>
<script src="./src/pollution.js"></script>
<script src="./src/moneyBubble.js"></script>
<script src="./src/worldEvent.js"></script>
<script src="./src/eventGenerator.js"></script>
<script src="./src/bubbles.js"></script>
<script src="./src/main.js"></script>
</body>
</html>