changeset 16007 | 20adaa127663 |
parent 16006 | f81fe8250ed9 |
16006:f81fe8250ed9 | 16007:20adaa127663 |
---|---|
67 width: 32px; |
67 width: 32px; |
68 } |
68 } |
69 </style> |
69 </style> |
70 <script type="application/ecmascript"> |
70 <script type="application/ecmascript"> |
71 //<![CDATA[ |
71 //<![CDATA[ |
72 var IS_LOCAL=false; // set to true to fetch hats locally. Useful for testing. |
72 let IS_LOCAL=false; // set to true to fetch graves locally. Useful for testing. |
73 var masks; |
73 let masks; |
74 if (IS_LOCAL) { |
74 if (IS_LOCAL) { |
75 /* JavaScript version of a sprite sheet - this could be pretty trivially done in pure HTML, but maintenance |
75 /* JavaScript version of a sprite sheet - this could be pretty trivially done in pure HTML, but maintenance |
76 would be easier with a server-side portion. list of sprites could be gotten from server, but would require XSS whitelisting */ |
76 would be easier with a server-side portion. list of sprites could be gotten from server, but would require XSS whitelisting */ |
77 // Last updated: 1.0.0 |
77 // Last updated: 1.0.0 |
78 masks = ['4gsuif','AkuAku','android','angel','anzac','Bandit','barrelhider','bb_bob','bb_bub','bb_cororon','bb_kululun','beefeater','beefeaterhat','bishop','bobby','bobby2v','bubble','bushhider','cap_blue','cap_green','cap_junior','cap_red','cap_thinking','cap_yellow','car','chef','chuckl','clown','clown-copper','clown-crossed','constructor','Coonskin3','Cowboy','cratehider','crown','cyborg1','cyborg2','cyclops','Dan','Dauber','DayAndNight','Disguise','dish_Ladle','dish_SauceBoatSilver','dish_Teacup','dish_Teapot','doctor','Dragon','dwarf','eastertop','Einstein','Elvis','Eva_00b','Eva_00y','Evil','flag_french','flag_germany','flag_italy','flag_usa','footballhelmet','fr_apple','fr_banana','fr_lemon','fr_orange','fr_pumpkin','fr_tomato','Gasmask','Glasses','hair_blue','hair_green','hair_grey','hair_orange','hair_pink','hair_purple','hair_red','hair_yellow','HogInTheHat','hogpharoah','IndianChief','InfernalHorns','Jason','jester','Joker','judo','kiss_criss','kiss_frehley','kiss_simmons','kiss_stanley','knight','lambda','lambdahat','Laminaria','lamp','laurel','leprechaun','mechanicaltoy','MegaHogX','metalband','Meteorhelmet','mexicansunbrero','mickey_ears','Moustache','Moustache_glasses','mp3','Mummy','mv_Spidey','mv_Venom','naruto','NinjaFull','NinjaStraight','NinjaTriangle','noface','ntd_Falcon','ntd_Kirby','ntd_Link','ntd_Samus','nurse','nursehat','OldMan','Pantsu','pinksunhat','pirate_bandana','pirate_eyepatch','pirate_hat','pirate_jack','pirate_jack_bandana','Plunger', |
78 masks = ['4gsuif','AkuAku','android','angel','anzac','Bandit','barrelhider','bb_bob','bb_bub','bb_cororon','bb_kululun','beefeater','beefeaterhat','bishop','bobby','bobby2v','bubble','bushhider','cap_blue','cap_green','cap_junior','cap_red','cap_thinking','cap_yellow','car','chef','chuckl','clown','clown-copper','clown-crossed','constructor','Coonskin3','Cowboy','cratehider','crown','cyborg1','cyborg2','cyclops','Dan','Dauber','DayAndNight','Disguise','dish_Ladle','dish_SauceBoatSilver','dish_Teacup','dish_Teapot','doctor','Dragon','dwarf','eastertop','Einstein','Elvis','Eva_00b','Eva_00y','Evil','flag_french','flag_germany','flag_italy','flag_usa','footballhelmet','fr_apple','fr_banana','fr_lemon','fr_orange','fr_pumpkin','fr_tomato','Gasmask','Glasses','hair_blue','hair_green','hair_grey','hair_orange','hair_pink','hair_purple','hair_red','hair_yellow','HogInTheHat','hogpharoah','IndianChief','InfernalHorns','Jason','jester','Joker','judo','kiss_criss','kiss_frehley','kiss_simmons','kiss_stanley','knight','lambda','lambdahat','Laminaria','lamp','laurel','leprechaun','mechanicaltoy','MegaHogX','metalband','Meteorhelmet','mexicansunbrero','mickey_ears','Moustache','Moustache_glasses','mp3','Mummy','mv_Spidey','mv_Venom','naruto','NinjaFull','NinjaStraight','NinjaTriangle','noface','ntd_Falcon','ntd_Kirby','ntd_Link','ntd_Samus','nurse','nursehat','OldMan','Pantsu','pinksunhat','pirate_bandana','pirate_eyepatch','pirate_hat','pirate_jack','pirate_jack_bandana','Plunger', |
84 else |
84 else |
85 { |
85 { |
86 masks = []; |
86 masks = []; |
87 } |
87 } |
88 |
88 |
89 var themes = { |
89 let themes = { |
90 // Last updated: 1.0.0 |
90 // Last updated: 1.0.0 |
91 "Art":1, |
91 "Art":1, |
92 "Beach":1, |
92 "Beach":1, |
93 "Bamboo":1, |
93 "Bamboo":1, |
94 "Bath":1, |
94 "Bath":1, |
119 "Planes":0, |
119 "Planes":0, |
120 "Sheep":1, |
120 "Sheep":1, |
121 "Snow":1, |
121 "Snow":1, |
122 "Stage":1, |
122 "Stage":1, |
123 "Underwater":1}; |
123 "Underwater":1}; |
124 var girder; |
124 let girder; |
125 var animationInterval; |
125 let animationInterval; |
126 |
126 |
127 var staticMasks = []; |
127 let staticMasks = []; |
128 |
128 |
129 on_xml_loaded = function(ex) |
129 on_xml_loaded = function(ex) |
130 { |
130 { |
131 var resp = this.responseText; |
131 let resp = this.responseText; |
132 var r = />([^<]*).png</g; |
132 let r = />([^<]*).png</g; |
133 var x; |
133 let x; |
134 while(x = r.exec(resp)) |
134 while(x = r.exec(resp)) |
135 { |
135 { |
136 masks.push(x[1]); |
136 masks.push(x[1]); |
137 } |
137 } |
138 on_hats_loaded(); |
138 on_hats_loaded(); |
139 } |
139 } |
140 |
140 |
141 on_xml_error = function() |
141 on_xml_error = function() |
142 { |
142 { |
143 var p = document.createElement("p"); |
143 let p = document.createElement("p"); |
144 p.appendChild(document.createTextNode("ERROR: List of hats could not be fetched from the server!")); |
144 p.appendChild(document.createTextNode("ERROR: List of hats could not be fetched from the server!")); |
145 document.body.appendChild(p); |
145 document.body.appendChild(p); |
146 } |
146 } |
147 |
147 |
148 window.onload = function() |
148 window.onload = function() |
149 { |
149 { |
150 // Load list of hats |
150 // Load list of hats |
151 if (!IS_LOCAL) { |
151 if (!IS_LOCAL) { |
152 // Request list of hats from repository URL |
152 // Request list of hats from repository URL |
153 var xml=new XMLHttpRequest(); |
153 let xml=new XMLHttpRequest(); |
154 xml.open("GET", "//hg.hedgewars.org/hedgewars/file/tip/share/hedgewars/Data/Graphics/Hats/"); |
154 xml.open("GET", "//hg.hedgewars.org/hedgewars/file/tip/share/hedgewars/Data/Graphics/Hats/"); |
155 xml.addEventListener("error", on_xml_error); |
155 xml.addEventListener("error", on_xml_error); |
156 xml.onload = on_xml_loaded; |
156 xml.onload = on_xml_loaded; |
157 xml.send(); |
157 xml.send(); |
158 } |
158 } |
164 |
164 |
165 on_hats_loaded = function() |
165 on_hats_loaded = function() |
166 { |
166 { |
167 // Exclude NoHat as uninteresting. Exclude team hats as we can't properly display them yet |
167 // Exclude NoHat as uninteresting. Exclude team hats as we can't properly display them yet |
168 // TODO: Add support for team hats |
168 // TODO: Add support for team hats |
169 var disallowedMasks = { |
169 let disallowedMasks = { |
170 "NoHat":true, |
170 "NoHat":true, |
171 "hair_team":true, |
171 "hair_team":true, |
172 "cap_team":true, |
172 "cap_team":true, |
173 "TeamTophat":true, |
173 "TeamTophat":true, |
174 }; |
174 }; |
175 |
175 |
176 // Render girders |
176 // Render girders |
177 var s = document.styleSheets[0].cssRules; |
177 let s = document.styleSheets[0].cssRules; |
178 for(var i=0;i<s.length;i++) |
178 for(let i=0;i<s.length;i++) |
179 { |
179 { |
180 if (s[i].selectorText.toLowerCase() === ".girder") |
180 if (s[i].selectorText.toLowerCase() === ".girder") |
181 girder = s[i]; |
181 girder = s[i]; |
182 } |
182 } |
183 |
183 |
184 var a = document.createElement("a"); |
184 let a = document.createElement("a"); |
185 var g = document.createElement("div"); |
185 let g = document.createElement("div"); |
186 g.className="girder"; |
186 g.className="girder"; |
187 if (IS_LOCAL) { |
187 if (IS_LOCAL) { |
188 a.className="hatLocal"; |
188 a.className="hatLocal"; |
189 } else { |
189 } else { |
190 a.className="hat"; |
190 a.className="hat"; |
191 } |
191 } |
192 a.appendChild(document.createElement("div")); |
192 a.appendChild(document.createElement("div")); |
193 a.lastChild.appendChild(document.createTextNode("")); |
193 a.lastChild.appendChild(document.createTextNode("")); |
194 |
194 |
195 // Render hats |
195 // Render hats |
196 var missingMasks = []; |
196 let missingMasks = []; |
197 var img; |
197 let img; |
198 var j = 0; |
198 let j = 0; |
199 var toDelete = []; |
199 let toDelete = []; |
200 for (var i=0;i<masks.length;i++) |
200 for (let i=0;i<masks.length;i++) |
201 { |
201 { |
202 if (disallowedMasks[masks[i]] === true) { |
202 if (disallowedMasks[masks[i]] === true) { |
203 missingMasks.push(masks[i]); |
203 missingMasks.push(masks[i]); |
204 toDelete.push(i); |
204 toDelete.push(i); |
205 continue; |
205 continue; |
206 } |
206 } |
207 var h = document.body.appendChild(a.cloneNode(true)); |
207 let h = document.body.appendChild(a.cloneNode(true)); |
208 if (IS_LOCAL) |
208 if (IS_LOCAL) |
209 h.href = "../share/hedgewars/Data/Graphics/Hats/"+masks[i]+".png"; |
209 h.href = "../share/hedgewars/Data/Graphics/Hats/"+masks[i]+".png"; |
210 else |
210 else |
211 h.href = "//hg.hedgewars.org/hedgewars/raw-file/tip/share/hedgewars/Data/Graphics/Hats/"+masks[i]+".png"; |
211 h.href = "//hg.hedgewars.org/hedgewars/raw-file/tip/share/hedgewars/Data/Graphics/Hats/"+masks[i]+".png"; |
212 |
212 |
213 img = new Image(); |
213 img = new Image(); |
214 img.onload = function() { |
214 img.onload = function() { |
215 var name = this.id.substr(7); |
215 let name = this.id.substr(7); |
216 if (this.height === 32) { |
216 if (this.height === 32) { |
217 staticMasks[name] = true; |
217 staticMasks[name] = true; |
218 } |
218 } |
219 this.remove(); |
219 this.remove(); |
220 } |
220 } |
227 if (j%17 === 16 || i === masks.length-1) |
227 if (j%17 === 16 || i === masks.length-1) |
228 document.body.appendChild(g.cloneNode(false)); |
228 document.body.appendChild(g.cloneNode(false)); |
229 j++; |
229 j++; |
230 } |
230 } |
231 // Cleanup masks array |
231 // Cleanup masks array |
232 for (var i=0; i<toDelete.length; i++) |
232 for (let i=0; i<toDelete.length; i++) |
233 masks.splice(toDelete[i], 1); |
233 masks.splice(toDelete[i], 1); |
234 |
234 |
235 // List missing hats |
235 // List missing hats |
236 if (missingMasks.length > 0) |
236 if (missingMasks.length > 0) |
237 { |
237 { |
238 var pm = document.createElement("p"); |
238 let pm = document.createElement("p"); |
239 pm.appendChild(document.createTextNode("Other hats: ")); |
239 pm.appendChild(document.createTextNode("Other hats: ")); |
240 for (var i=0; i<missingMasks.length; i++) |
240 for (let i=0; i<missingMasks.length; i++) |
241 { |
241 { |
242 if (missingMasks[i] === "NoHat") |
242 if (missingMasks[i] === "NoHat") |
243 continue; |
243 continue; |
244 var link = document.createElement("a"); |
244 let link = document.createElement("a"); |
245 if (IS_LOCAL) |
245 if (IS_LOCAL) |
246 link.href = "../share/hedgewars/Data/Graphics/Hats/"+missingMasks[i]+".png"; |
246 link.href = "../share/hedgewars/Data/Graphics/Hats/"+missingMasks[i]+".png"; |
247 else |
247 else |
248 link.href = "//hg.hedgewars.org/hedgewars/raw-file/tip/share/hedgewars/Data/Graphics/Hats/"+missingMasks[i]+".png"; |
248 link.href = "//hg.hedgewars.org/hedgewars/raw-file/tip/share/hedgewars/Data/Graphics/Hats/"+missingMasks[i]+".png"; |
249 link.appendChild(document.createTextNode(missingMasks[i])); |
249 link.appendChild(document.createTextNode(missingMasks[i])); |
257 |
257 |
258 // Quick and dirty animation |
258 // Quick and dirty animation |
259 animationInterval = setInterval(animateHogs, 128); |
259 animationInterval = setInterval(animateHogs, 128); |
260 |
260 |
261 // Theme selection drop-down list |
261 // Theme selection drop-down list |
262 var form = document.body.appendChild(document.createElement("form")); |
262 let form = document.body.appendChild(document.createElement("form")); |
263 |
263 |
264 var opt = document.createElement("option"); |
264 let opt = document.createElement("option"); |
265 opt.appendChild(document.createTextNode("")); |
265 opt.appendChild(document.createTextNode("")); |
266 |
266 |
267 var label = document.createElement("label"); |
267 let label = document.createElement("label"); |
268 label.htmlFor = "theme_select"; |
268 label.htmlFor = "theme_select"; |
269 label.appendChild(document.createTextNode("Theme: ")); |
269 label.appendChild(document.createTextNode("Theme: ")); |
270 form.appendChild(label); |
270 form.appendChild(label); |
271 |
271 |
272 var sel = form.appendChild(document.createElement("select")); |
272 let sel = form.appendChild(document.createElement("select")); |
273 sel.id = "theme_select"; |
273 sel.id = "theme_select"; |
274 sel.onchange = switchTheme; |
274 sel.onchange = switchTheme; |
275 for(var theme in themes) |
275 for(let theme in themes) |
276 { |
276 { |
277 sel.appendChild(opt.cloneNode(true)); |
277 sel.appendChild(opt.cloneNode(true)); |
278 sel.lastChild.value = theme; |
278 sel.lastChild.value = theme; |
279 sel.lastChild.lastChild.data = theme; |
279 sel.lastChild.lastChild.data = theme; |
280 if(theme === "Nature") |
280 if(theme === "Nature") |
281 sel.lastChild.selected = true; |
281 sel.lastChild.selected = true; |
282 } |
282 } |
283 form.appendChild(document.createElement("br")); |
283 form.appendChild(document.createElement("br")); |
284 |
284 |
285 // Checkbox: Switch animation |
285 // Checkbox: Switch animation |
286 var chk = document.createElement("input"); |
286 let chk = document.createElement("input"); |
287 chk.id = "anim"; |
287 chk.id = "anim"; |
288 chk.type = "checkbox"; |
288 chk.type = "checkbox"; |
289 chk.onclick = switchAnim; |
289 chk.onclick = switchAnim; |
290 chk.checked = true; |
290 chk.checked = true; |
291 form.appendChild(chk); |
291 form.appendChild(chk); |
313 switchTheme(); |
313 switchTheme(); |
314 } |
314 } |
315 |
315 |
316 function animateHogs() |
316 function animateHogs() |
317 { |
317 { |
318 var a = document.getElementsByTagName("a"); |
318 let a = document.getElementsByTagName("a"); |
319 for (var i=0;i<a.length;i++) |
319 for (let i=0;i<a.length;i++) |
320 { |
320 { |
321 if (a[i].className !== "hat" && a[i].className !== "hatLocal") |
321 if (a[i].className !== "hat" && a[i].className !== "hatLocal") |
322 continue; |
322 continue; |
323 // Cycle through hedgehog and hat animation frames |
323 // Cycle through hedgehog and hat animation frames |
324 |
324 |
325 // Hedgehog |
325 // Hedgehog |
326 a[i].style.backgroundPosition=Math.floor(a[i].idle/16)*-32+"px "+(a[i].idle%16)*-32+"px"; |
326 a[i].style.backgroundPosition=Math.floor(a[i].idle/16)*-32+"px "+(a[i].idle%16)*-32+"px"; |
327 |
327 |
328 var maskName = a[i].title; |
328 let maskName = a[i].title; |
329 // Hat |
329 // Hat |
330 if (staticMasks[maskName] === true) { |
330 if (staticMasks[maskName] === true) { |
331 // Hat offset for static hats |
331 // Hat offset for static hats |
332 if (a[i].idle === 2 || a[i].idle === 7 || a[i].idle === 12) |
332 if (a[i].idle === 2 || a[i].idle === 7 || a[i].idle === 12) |
333 a[i].firstChild.style.marginTop="-4px"; |
333 a[i].firstChild.style.marginTop="-4px"; |
363 } |
363 } |
364 |
364 |
365 // Turn on or off girders |
365 // Turn on or off girders |
366 function hideGirders() |
366 function hideGirders() |
367 { |
367 { |
368 var g = document.getElementsByClassName("girder"); |
368 let g = document.getElementsByClassName("girder"); |
369 for(var i=0;i<g.length;i++) |
369 for(let i=0;i<g.length;i++) |
370 if (this.checked) |
370 if (this.checked) |
371 g[i].className = "girder"; |
371 g[i].className = "girder"; |
372 else |
372 else |
373 g[i].className = "girder hide"; |
373 g[i].className = "girder hide"; |
374 |
374 |
375 } |
375 } |
376 |
376 |
377 // Select theme according to drop-down list value |
377 // Select theme according to drop-down list value |
378 function switchTheme() |
378 function switchTheme() |
379 { |
379 { |
380 var prefix; |
380 let prefix; |
381 if (!IS_LOCAL) |
381 if (!IS_LOCAL) |
382 prefix = "//hg.hedgewars.org/hedgewars/raw-file/tip"; |
382 prefix = "//hg.hedgewars.org/hedgewars/raw-file/tip"; |
383 else |
383 else |
384 prefix = ".."; |
384 prefix = ".."; |
385 var theme = this.value || "Nature"; |
385 let theme = this.value || "Nature"; |
386 document.body.style.backgroundImage='url("'+prefix+'/share/hedgewars/Data/Themes/'+theme+'/Sky.png")'; |
386 document.body.style.backgroundImage='url("'+prefix+'/share/hedgewars/Data/Themes/'+theme+'/Sky.png")'; |
387 if (themes[theme]) |
387 if (themes[theme]) |
388 girder.style.backgroundImage='url("'+prefix+'/share/hedgewars/Data/Themes/'+theme+'/Girder.png")'; |
388 girder.style.backgroundImage='url("'+prefix+'/share/hedgewars/Data/Themes/'+theme+'/Girder.png")'; |
389 else |
389 else |
390 girder.style.backgroundImage='url("'+prefix+'/share/hedgewars/Data/Graphics/Girder.png")'; |
390 girder.style.backgroundImage='url("'+prefix+'/share/hedgewars/Data/Graphics/Girder.png")'; |