misc/hats_js_anim.xhtml
changeset 16007 20adaa127663
parent 16006 f81fe8250ed9
equal deleted inserted replaced
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")';