-
Notifications
You must be signed in to change notification settings - Fork 0
/
index.html
298 lines (288 loc) · 12.7 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
<html>
<head>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.1/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.1/js/bootstrap.min.js"></script>
<link href="./style.css" rel="stylesheet" />
<script type="text/javascript" src="./gif.worker.js"></script>
<script type="text/javascript" src="./gif.js"></script>
<script type="text/javascript" src="./classes.js"></script>
<script type="text/javascript" src="./animation.js"></script>
<script type="text/javascript" src="./script.js"></script>
<title>Pokémon Encounter Generator</title>
<meta name="viewport" content="width=device-width, initial-scale=1">
</head>
<body>
<h2 class="text-center">Pokémon Encounter Generator</h2>
<div class="all">
<div class="container">
<canvas id="container" width="234" height="170"></canvas>
</div>
<div class="inputs">
<div class="form-group">
<label>Pokémon</label>
<select class="form-control" onchange="changePokemon(this);" id="pokemons">
<option>001 Bulbasaur.png</option>
<option>002 Ivysaur.png</option>
<option>003 Venusaur♀.png</option>
<option>003 Venusaur♂.png</option>
<option>004 Charmander.png</option>
<option>005 Charmeleon.png</option>
<option>006 Charizard.png</option>
<option>007 Squirtle.png</option>
<option>008 Wartortle.png</option>
<option>009 Blastoise.png</option>
<option>010 Caterpie.png</option>
<option>011 Metapod.png</option>
<option>012 Butterfree♀.png</option>
<option>012 Butterfree♂.png</option>
<option>013 Weedle.png</option>
<option>014 Kakuna.png</option>
<option>015 Beedrill.png</option>
<option>016 Pidgey.png</option>
<option>017 Pidgeotto.png</option>
<option>018 Pidgeot.png</option>
<option>019 Rattata♀.png</option>
<option>019 Rattata♂.png</option>
<option>020 Raticate♀.png</option>
<option>020 Raticate♂.png</option>
<option>021 Spearow.png</option>
<option>022 Fearow.png</option>
<option>023 Ekans.png</option>
<option>024 Arbok.png</option>
<option>025 Pikachu♀.png</option>
<option>025 Pikachu♂.png</option>
<option>026 Raichu♀.png</option>
<option>026 Raichu♂.png</option>
<option>027 Sandshrew.png</option>
<option>028 Sandslash.png</option>
<option>029 Nidoran♀.png</option>
<option>030 Nidorina.png</option>
<option>031 Nidoqueen.png</option>
<option>032 Nidoran♂.png</option>
<option>033 Nidorino.png</option>
<option>034 Nidoking.png</option>
<option>035 Clefairy.png</option>
<option>036 Clefable.png</option>
<option>037 Vulpix.png</option>
<option>038 Ninetales.png</option>
<option>039 Jigglypuff.png</option>
<option>040 Wigglytuff.png</option>
<option>041 Zubat♀.png</option>
<option>041 Zubat♂.png</option>
<option>042 Golbat♀.png</option>
<option>042 Golbat♂.png</option>
<option>043 Oddish.png</option>
<option>044 Gloom♀.png</option>
<option>044 Gloom♂.png</option>
<option>045 Vileplume♀.png</option>
<option>045 Vileplume♂.png</option>
<option>046 Paras.png</option>
<option>047 Parasect.png</option>
<option>048 Venonat.png</option>
<option>049 Venomoth.png</option>
<option>050 Diglett.png</option>
<option>051 Dugtrio.png</option>
<option>052 Meowth.png</option>
<option>053 Persian.png</option>
<option>054 Psyduck.png</option>
<option>055 Golduck.png</option>
<option>056 Mankey.png</option>
<option>057 Primeape.png</option>
<option>058 Growlithe.png</option>
<option>059 Arcanine.png</option>
<option>060 Poliwag.png</option>
<option>061 Poliwhirl.png</option>
<option>062 Poliwrath.png</option>
<option>063 Abra.png</option>
<option>064 Kadabra♀.png</option>
<option>064 Kadabra♂.png</option>
<option>065 Alakazam♀.png</option>
<option>065 Alakazam♂.png</option>
<option>066 Machop.png</option>
<option>067 Machoke.png</option>
<option>068 Machamp.png</option>
<option>069 Bellsprout.png</option>
<option>070 Weepinbell.png</option>
<option>071 Victreebel.png</option>
<option>072 Tentacool.png</option>
<option>073 Tentacruel.png</option>
<option>074 Geodude.png</option>
<option>075 Graveler.png</option>
<option>076 Golem.png</option>
<option>077 Ponyta.png</option>
<option>078 Rapidash.png</option>
<option>079 Slowpoke.png</option>
<option>080 Slowbro.png</option>
<option>081 Magnemite.png</option>
<option>082 Magneton.png</option>
<option>083 Farfetch'd.png</option>
<option>084 Doduo♀.png</option>
<option>084 Doduo♂.png</option>
<option>085 Dodrio♀.png</option>
<option>085 Dodrio♂.png</option>
<option>086 Seel.png</option>
<option>087 Dewgong.png</option>
<option>088 Grimer.png</option>
<option>089 Muk.png</option>
<option>090 Shellder.png</option>
<option>091 Cloyster.png</option>
<option>092 Gastly.png</option>
<option>093 Haunter.png</option>
<option>094 Gengar.png</option>
<option>095 Onix.png</option>
<option>096 Drowzee.png</option>
<option>097 Hypno♀.png</option>
<option>097 Hypno♂.png</option>
<option>098 Krabby.png</option>
<option>099 Kingler.png</option>
<option>100 Voltorb.png</option>
<option>101 Electrode.png</option>
<option>102 Exeggcute.png</option>
<option>103 Exeggutor.png</option>
<option>104 Cubone.png</option>
<option>105 Marowak.png</option>
<option>106 Hitmonlee.png</option>
<option>107 Hitmonchan.png</option>
<option>108 Lickitung.png</option>
<option>109 Koffing.png</option>
<option>110 Weezing.png</option>
<option>111 Rhyhorn♀.png</option>
<option>111 Rhyhorn♂.png</option>
<option>112 Rhydon♀.png</option>
<option>112 Rhydon♂.png</option>
<option>113 Chansey.png</option>
<option>114 Tangela.png</option>
<option>115 Kangaskhan.png</option>
<option>116 Horsea.png</option>
<option>117 Seadra.png</option>
<option>118 Goldeen♀.png</option>
<option>118 Goldeen♂.png</option>
<option>119 Seaking♀.png</option>
<option>119 Seaking♂.png</option>
<option>120 Staryu.png</option>
<option>121 Starmie.png</option>
<option>122 Mr. Mime.png</option>
<option>123 Scyther♀.png</option>
<option>123 Scyther♂.png</option>
<option>124 Jynx.png</option>
<option>125 Electabuzz.png</option>
<option>126 Magmar.png</option>
<option>127 Pinsir.png</option>
<option>128 Tauros.png</option>
<option>129 Magikarp♀.png</option>
<option>129 Magikarp♂.png</option>
<option>130 Gyarados♀.png</option>
<option>130 Gyarados♂.png</option>
<option>131 Lapras.png</option>
<option>132 Ditto.png</option>
<option>133 Eevee.png</option>
<option>134 Vaporeon.png</option>
<option>135 Jolteon.png</option>
<option>136 Flareon.png</option>
<option>137 Porygon.png</option>
<option>138 Omanyte.png</option>
<option>139 Omastar.png</option>
<option>140 Kabuto.png</option>
<option>141 Kabutops.png</option>
<option>142 Aerodactyl.png</option>
<option>143 Snorlax.png</option>
<option>144 Articuno.png</option>
<option>145 Zapdos.png</option>
<option>146 Moltres.png</option>
<option>147 Dratini.png</option>
<option>148 Dragonair.png</option>
<option>149 Dragonite.png</option>
<option>150 Mewtwo.png</option>
<option>151 Mew.png</option>
<option>152 Chikorita.png</option>
<option>153 Bayleef.png</option>
<option>154 Meganium♀.png</option>
<option>154 Meganium♂.png</option>
<option>155 Cyndaquil.png</option>
<option>156 Quilava.png</option>
<option>157 Typhlosion.png</option>
<option>158 Totodile.png</option>
<option>159 Croconaw.png</option>
<option>160 Feraligatr.png</option>
<option>161 Sentret.png</option>
<option>162 Furret.png</option>
<option>163 Hoothoot.png</option>
<option>164 Noctowl.png</option>
<option>165 Ledyba♀.png</option>
<option>165 Ledyba♂.png</option>
<option>166 Ledian♀.png</option>
<option>166 Ledian♂.png</option>
<option>167 Spinarak.png</option>
<option>168 Ariados.png</option>
<option>169 Crobat.png</option>
<option>170 Chinchou.png</option>
<option>171 Lanturn.png</option>
<option>172 Pichu.png</option>
<option>173 Cleffa.png</option>
<option>174 Igglybuff.png</option>
<option>175 Togepi.png</option>
<option>176 Togetic.png</option>
<option>177 Natu.png</option>
<option>178 Xatu♀.png</option>
<option>178 Xatu♂.png</option>
<option>179 Mareep.png</option>
<option>180 Flaaffy.png</option>
<option>181 Ampharos.png</option>
<option>182 Bellossom.png</option>
<option>183 Marill.png</option>
<option>184 Azumarill.png</option>
<option>185 Sudowoodo♀.png</option>
<option>185 Sudowoodo♂.png</option>
<option>186 Politoed♀.png</option>
<option>186 Politoed♂.png</option>
<option>187 Hoppip.png</option>
<option>188 Skiploom.png</option>
<option>189 Jumpluff.png</option>
<option>190 Aipom♀.png</option>
<option>190 Aipom♂.png</option>
<option>191 Sunkern.png</option>
<option>192 Sunflora.png</option>
<option>193 Yanma.png</option>
<option>194 Wooper♀.png</option>
<option>194 Wooper♂.png</option>
<option>195 Quagsire♀.png</option>
<option>195 Quagsire♂.png</option>
<option>196 Espeon.png</option>
<option>197 Umbreon.png</option>
<option>198 Murkrow♀.png</option>
<option>198 Murkrow♂.png</option>
<option>199 Slowking.png</option>
<option>200 Misdreavus.png</option>
<option>201 Unown.png</option>
</select>
</div>
<div class="form-group">
<label>First text</label>
<textarea class="form-control" id="textarea-1" >A wild pokémon appeared!</textarea>
</div>
<div class="form-group">
<label>Second text</label>
<textarea class="form-control" id="textarea-2" >It's a Bulbasaur!</textarea>
</div>
<div class="form-group">
<label>Speed:</label>
<input type="range" min="3" max="50" value="4" step="1" class="slider" id="speed">
</div>
<button id="generate-button" type="button" class="btn btn-default" data-toggle="modal" data-target="#myModal" onclick="startRecording();">Generate gif</button>
</div>
</div>
<div class="modal fade" id="myModal" role="dialog">
<div class="modal-dialog modal-sm">
<div class="modal-content">
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal">×</button>
<h4 class="modal-title" id="modal-title">Generating gif...</h4>
</div>
<div class="modal-body" id="modal-body">
</div>
</div>
</div>
</div>
</body>
</html>