hedgewars: comparison misc/hats_js

equal deleted inserted replaced

-:96d0e6149d3d
+:72c71c385579
 }
 a {
 color: #BFBED0;
 text-decoration: none;
 }
-.hat
+.hat, .hatLocal
 {
 margin-top: 12px;
 margin-left: 20px;
 float: left;
 height: 32px;
 width: 32px;
 color: transparent;
+}
+.hat
+{
 background-image: url("//hg.hedgewars.org/hedgewars/raw-file/tip/share/hedgewars/Data/Graphics/Hedgehog/Idle.png");
+}
+.hatLocal
+{
+background-image: url("../share/hedgewars/Data/Graphics/Hedgehog/Idle.png");
 }
 .girder
 {
 width: 100%;
 height: 30px;
 width: 32px;
 }
 </style>
 <script type="application/ecmascript">
 //<![CDATA[
-var IS_LOCAL=false; // set to true to fetch hats locally. Useful for testing.
+let IS_LOCAL=false; // set to true to fetch graves locally. Useful for testing.
-var masks;
+let masks;
 if (IS_LOCAL) {
 /* JavaScript version of a sprite sheet - this could be pretty trivially done in pure HTML, but maintenance
 would be easier with a server-side portion. list of sprites could be gotten from server, but would require XSS whitelisting */
 // Last updated: 1.0.0
 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',
 else
 {
 masks = [];
 }
-var themes = {
+let themes = {
 // Last updated: 1.0.0
 "Art":1,
 "Beach":1,
 "Bamboo":1,
 "Bath":1,
 "Planes":0,
 "Sheep":1,
 "Snow":1,
 "Stage":1,
 "Underwater":1};
-var girder;
+let girder;
-var animationInterval;
+let animationInterval;
-var staticMasks = [];
+let staticMasks = [];
 on_xml_loaded = function(ex)
 {
-var resp = this.responseText;
+let resp = this.responseText;
-var r = />([^<]*).png</g;
+let r = />([^<]*).png</g;
-var x;
+let x;
 while(x = r.exec(resp))
 {
 masks.push(x[1]);
 }
 on_hats_loaded();
 }
 on_xml_error = function()
 {
-var p = document.createElement("p");
+let p = document.createElement("p");
 p.appendChild(document.createTextNode("ERROR: List of hats could not be fetched from the server!"));
 document.body.appendChild(p);
 }
 window.onload = function()
 {
 // Load list of hats
 if (!IS_LOCAL) {
 // Request list of hats from repository URL
-var xml=new XMLHttpRequest();
+let xml=new XMLHttpRequest();
 xml.open("GET", "//hg.hedgewars.org/hedgewars/file/tip/share/hedgewars/Data/Graphics/Hats/");
 xml.addEventListener("error", on_xml_error);
 xml.onload = on_xml_loaded;
 xml.send();
 }
 on_hats_loaded = function()
 {
 // Exclude NoHat as uninteresting. Exclude team hats as we can't properly display them yet
 // TODO: Add support for team hats
-var disallowedMasks = {
+let disallowedMasks = {
 "NoHat":true,
 "hair_team":true,
 "cap_team":true,
 "TeamTophat":true,
 };
 // Render girders
-var s = document.styleSheets[0].cssRules;
+let s = document.styleSheets[0].cssRules;
-for(var i=0;i<s.length;i++)
+for(let i=0;i<s.length;i++)
 {
 if (s[i].selectorText.toLowerCase() === ".girder")
 girder = s[i];
 }
-var a = document.createElement("a");
+let a = document.createElement("a");
-var g = document.createElement("div");
+let g = document.createElement("div");
 g.className="girder";
-a.className="hat";
+if (IS_LOCAL) {
+a.className="hatLocal";
+} else {
+a.className="hat";
+}
 a.appendChild(document.createElement("div"));
 a.lastChild.appendChild(document.createTextNode(""));
 // Render hats
-var missingMasks = [];
+let missingMasks = [];
-var img;
+let img;
-var j = 0;
+let j = 0;
-var toDelete = [];
+let toDelete = [];
-for (var i=0;i<masks.length;i++)
+for (let i=0;i<masks.length;i++)
 {
 if (disallowedMasks[masks[i]] === true) {
 missingMasks.push(masks[i]);
 toDelete.push(i);
 continue;
 }
-var h = document.body.appendChild(a.cloneNode(true));
+let h = document.body.appendChild(a.cloneNode(true));
 if (IS_LOCAL)
 h.href = "../share/hedgewars/Data/Graphics/Hats/"+masks[i]+".png";
 else
 h.href = "//hg.hedgewars.org/hedgewars/raw-file/tip/share/hedgewars/Data/Graphics/Hats/"+masks[i]+".png";
 img = new Image();
 img.onload = function() {
-var name = this.id.substr(7);
+let name = this.id.substr(7);
 if (this.height === 32) {
 staticMasks[name] = true;
 }
 this.remove();
 }
 img.src = h.href;
 img.id = "__mask_"+masks[i];
 h.lastChild.style.backgroundImage = 'url("'+h.href+'")';
-h.lastChild.lastChild.data = masks[i];
 h.title = masks[i];
 h.idle = Math.floor(Math.random()*19);
 if (j%17 === 16 || i === masks.length-1)
 document.body.appendChild(g.cloneNode(false));
 j++;
 }
 // Cleanup masks array
-for (var i=0; i<toDelete.length; i++)
+for (let i=0; i<toDelete.length; i++)
 masks.splice(toDelete[i], 1);
 // List missing hats
 if (missingMasks.length > 0)
 {
-var pm = document.createElement("p");
+let pm = document.createElement("p");
 pm.appendChild(document.createTextNode("Other hats: "));
-for (var i=0; i<missingMasks.length; i++)
+for (let i=0; i<missingMasks.length; i++)
 {
 if (missingMasks[i] === "NoHat")
 continue;
-var link = document.createElement("a");
+let link = document.createElement("a");
 if (IS_LOCAL)
 link.href = "../share/hedgewars/Data/Graphics/Hats/"+missingMasks[i]+".png";
 else
 link.href = "//hg.hedgewars.org/hedgewars/raw-file/tip/share/hedgewars/Data/Graphics/Hats/"+missingMasks[i]+".png";
 link.appendChild(document.createTextNode(missingMasks[i]));
 pm.appendChild(link);
 if (i < missingMasks.length -1)
 pm.appendChild(document.createTextNode(", "));
 }
+document.body.appendChild(document.createElement("br"));
 document.body.appendChild(pm);
 }
 // Quick and dirty animation
 animationInterval = setInterval(animateHogs, 128);
 // Theme selection drop-down list
-var form = document.body.appendChild(document.createElement("form"));
+let form = document.body.appendChild(document.createElement("form"));
-var opt = document.createElement("option");
+let opt = document.createElement("option");
 opt.appendChild(document.createTextNode(""));
-var label = document.createElement("label");
+let label = document.createElement("label");
 label.htmlFor = "theme_select";
 label.appendChild(document.createTextNode("Theme: "));
 form.appendChild(label);
-var sel = form.appendChild(document.createElement("select"));
+let sel = form.appendChild(document.createElement("select"));
 sel.id = "theme_select";
 sel.onchange = switchTheme;
-for(var theme in themes)
+for(let theme in themes)
 {
 sel.appendChild(opt.cloneNode(true));
 sel.lastChild.value = theme;
 sel.lastChild.lastChild.data = theme;
 if(theme === "Nature")
 sel.lastChild.selected = true;
 }
 form.appendChild(document.createElement("br"));
 // Checkbox: Switch animation
-var chk = document.createElement("input");
+let chk = document.createElement("input");
 chk.id = "anim";
 chk.type = "checkbox";
 chk.onclick = switchAnim;
 chk.checked = true;
 form.appendChild(chk);
 label = document.createElement("label");
 label.htmlFor = "anim";
-label.appendChild(document.createTextNode("Animate hats"));
+label.appendChild(document.createTextNode(" Animate hats"));
 form.appendChild(label);
 form.appendChild(document.createElement("br"));
 // Checkbox: Hide girders
 chk.onclick = hideGirders;
 chk.checked = true;
 form.appendChild(chk);
 label = document.createElement("label");
 label.htmlFor = "hide_girders";
-label.appendChild(document.createTextNode("Show girders"));
+label.appendChild(document.createTextNode(" Show girders"));
 form.appendChild(label);
 document.body.appendChild(form);
+switchTheme();
 }
 function animateHogs()
 {
-var a = document.getElementsByTagName("a");
+let a = document.getElementsByTagName("a");
-for (var i=0;i<a.length;i++)
+for (let i=0;i<a.length;i++)
 {
-if (a[i].className !== "hat")
+if (a[i].className !== "hat" && a[i].className !== "hatLocal")
 continue;
 // Cycle through hedgehog and hat animation frames
 // Hedgehog
 a[i].style.backgroundPosition=Math.floor(a[i].idle/16)*-32+"px "+(a[i].idle%16)*-32+"px";
-var maskName = a[i].title;
+let maskName = a[i].title;
 // Hat
 if (staticMasks[maskName] === true) {
 // Hat offset for static hats
 if (a[i].idle === 2 || a[i].idle === 7 || a[i].idle === 12)
 a[i].firstChild.style.marginTop="-4px";
 }
 // Turn on or off girders
 function hideGirders()
 {
-var g = document.getElementsByClassName("girder");
+let g = document.getElementsByClassName("girder");
-for(var i=0;i<g.length;i++)
+for(let i=0;i<g.length;i++)
 if (this.checked)
 g[i].className = "girder";
 else
 g[i].className = "girder hide";
 }
 // Select theme according to drop-down list value
 function switchTheme()
 {
-var prefix;
+let prefix;
 if (!IS_LOCAL)
 prefix = "//hg.hedgewars.org/hedgewars/raw-file/tip";
 else
 prefix = "..";
-document.body.style.backgroundImage='url("'+prefix+'/share/hedgewars/Data/Themes/'+this.value+'/Sky.png")';
+let theme = this.value || "Nature";
-if (themes[this.value])
+document.body.style.backgroundImage='url("'+prefix+'/share/hedgewars/Data/Themes/'+theme+'/Sky.png")';
-girder.style.backgroundImage='url("'+prefix+'/share/hedgewars/Data/Themes/'+this.value+'/Girder.png")';
+if (themes[theme])
+girder.style.backgroundImage='url("'+prefix+'/share/hedgewars/Data/Themes/'+theme+'/Girder.png")';
 else
 girder.style.backgroundImage='url("'+prefix+'/share/hedgewars/Data/Graphics/Girder.png")';
 }
 //]]>
 </script>

branch	transitional_engine
changeset 16008	72c71c385579
parent 15978	20adaa127663