misc/hats_js_anim.xhtml
changeset 15977 f81fe8250ed9
parent 15568 de1b31c2d2f2
child 15978 20adaa127663
equal deleted inserted replaced
15976:4d682779bd29 15977:f81fe8250ed9
    32 }
    32 }
    33 a {
    33 a {
    34     color: #BFBED0;
    34     color: #BFBED0;
    35     text-decoration: none;
    35     text-decoration: none;
    36 }
    36 }
    37 .hat
    37 .hat, .hatLocal
    38 {
    38 {
    39     margin-top: 12px;
    39     margin-top: 12px;
    40     margin-left: 20px;
    40     margin-left: 20px;
    41     float: left;
    41     float: left;
    42     height: 32px;
    42     height: 32px;
    43     width: 32px;
    43     width: 32px;
    44     color: transparent;
    44     color: transparent;
       
    45 }
       
    46 .hat
       
    47 {
    45     background-image: url("//hg.hedgewars.org/hedgewars/raw-file/tip/share/hedgewars/Data/Graphics/Hedgehog/Idle.png");
    48     background-image: url("//hg.hedgewars.org/hedgewars/raw-file/tip/share/hedgewars/Data/Graphics/Hedgehog/Idle.png");
       
    49 }
       
    50 .hatLocal
       
    51 {
       
    52     background-image: url("../share/hedgewars/Data/Graphics/Hedgehog/Idle.png");
    46 }
    53 }
    47 .girder
    54 .girder
    48 {
    55 {
    49     width: 100%;
    56     width: 100%;
    50     height: 30px;
    57     height: 30px;
   175     }
   182     }
   176 
   183 
   177     var a = document.createElement("a");
   184     var a = document.createElement("a");
   178     var g = document.createElement("div");
   185     var g = document.createElement("div");
   179     g.className="girder";
   186     g.className="girder";
   180     a.className="hat";
   187     if (IS_LOCAL) {
       
   188         a.className="hatLocal";
       
   189     } else {
       
   190         a.className="hat";
       
   191     }
   181     a.appendChild(document.createElement("div"));
   192     a.appendChild(document.createElement("div"));
   182     a.lastChild.appendChild(document.createTextNode(""));
   193     a.lastChild.appendChild(document.createTextNode(""));
   183 
   194 
   184     // Render hats
   195     // Render hats
   185     var missingMasks = [];
   196     var missingMasks = [];
   209         }
   220         }
   210         img.src = h.href;
   221         img.src = h.href;
   211         img.id = "__mask_"+masks[i];
   222         img.id = "__mask_"+masks[i];
   212 
   223 
   213         h.lastChild.style.backgroundImage = 'url("'+h.href+'")';
   224         h.lastChild.style.backgroundImage = 'url("'+h.href+'")';
   214         h.lastChild.lastChild.data = masks[i];
       
   215         h.title = masks[i];
   225         h.title = masks[i];
   216         h.idle = Math.floor(Math.random()*19);
   226         h.idle = Math.floor(Math.random()*19);
   217         if (j%17 === 16 || i === masks.length-1)
   227         if (j%17 === 16 || i === masks.length-1)
   218             document.body.appendChild(g.cloneNode(false));
   228             document.body.appendChild(g.cloneNode(false));
   219         j++;
   229         j++;
   239             link.appendChild(document.createTextNode(missingMasks[i]));
   249             link.appendChild(document.createTextNode(missingMasks[i]));
   240             pm.appendChild(link);
   250             pm.appendChild(link);
   241             if (i < missingMasks.length -1)
   251             if (i < missingMasks.length -1)
   242                 pm.appendChild(document.createTextNode(", "));
   252                 pm.appendChild(document.createTextNode(", "));
   243         }
   253         }
       
   254         document.body.appendChild(document.createElement("br"));
   244         document.body.appendChild(pm);
   255         document.body.appendChild(pm);
   245     }
   256     }
   246 
   257 
   247     // Quick and dirty animation
   258     // Quick and dirty animation
   248     animationInterval = setInterval(animateHogs, 128);
   259     animationInterval = setInterval(animateHogs, 128);
   278     chk.onclick = switchAnim;
   289     chk.onclick = switchAnim;
   279     chk.checked = true;
   290     chk.checked = true;
   280     form.appendChild(chk);
   291     form.appendChild(chk);
   281     label = document.createElement("label");
   292     label = document.createElement("label");
   282     label.htmlFor = "anim";
   293     label.htmlFor = "anim";
   283     label.appendChild(document.createTextNode("Animate hats"));
   294     label.appendChild(document.createTextNode(" Animate hats"));
   284     form.appendChild(label);
   295     form.appendChild(label);
   285 
   296 
   286     form.appendChild(document.createElement("br"));
   297     form.appendChild(document.createElement("br"));
   287 
   298 
   288     // Checkbox: Hide girders
   299     // Checkbox: Hide girders
   292     chk.onclick = hideGirders;
   303     chk.onclick = hideGirders;
   293     chk.checked = true;
   304     chk.checked = true;
   294     form.appendChild(chk);
   305     form.appendChild(chk);
   295     label = document.createElement("label");
   306     label = document.createElement("label");
   296     label.htmlFor = "hide_girders";
   307     label.htmlFor = "hide_girders";
   297     label.appendChild(document.createTextNode("Show girders"));
   308     label.appendChild(document.createTextNode(" Show girders"));
   298     form.appendChild(label);
   309     form.appendChild(label);
   299 
   310 
   300     document.body.appendChild(form);
   311     document.body.appendChild(form);
   301 
   312 
   302 
   313     switchTheme();
   303 }
   314 }
   304 
   315 
   305 function animateHogs()
   316 function animateHogs()
   306 {
   317 {
   307     var a = document.getElementsByTagName("a");
   318     var a = document.getElementsByTagName("a");
   308     for (var i=0;i<a.length;i++)
   319     for (var i=0;i<a.length;i++)
   309     {
   320     {
   310         if (a[i].className !== "hat")
   321         if (a[i].className !== "hat" && a[i].className !== "hatLocal")
   311             continue;
   322             continue;
   312         // Cycle through hedgehog and hat animation frames
   323         // Cycle through hedgehog and hat animation frames
   313 
   324 
   314         // Hedgehog
   325         // Hedgehog
   315         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";
   369     var prefix;
   380     var prefix;
   370     if (!IS_LOCAL)
   381     if (!IS_LOCAL)
   371         prefix = "//hg.hedgewars.org/hedgewars/raw-file/tip";
   382         prefix = "//hg.hedgewars.org/hedgewars/raw-file/tip";
   372     else
   383     else
   373         prefix = "..";
   384         prefix = "..";
   374     document.body.style.backgroundImage='url("'+prefix+'/share/hedgewars/Data/Themes/'+this.value+'/Sky.png")';
   385     var theme = this.value || "Nature";
   375     if (themes[this.value])
   386     document.body.style.backgroundImage='url("'+prefix+'/share/hedgewars/Data/Themes/'+theme+'/Sky.png")';
   376         girder.style.backgroundImage='url("'+prefix+'/share/hedgewars/Data/Themes/'+this.value+'/Girder.png")';
   387     if (themes[theme])
       
   388         girder.style.backgroundImage='url("'+prefix+'/share/hedgewars/Data/Themes/'+theme+'/Girder.png")';
   377     else
   389     else
   378         girder.style.backgroundImage='url("'+prefix+'/share/hedgewars/Data/Graphics/Girder.png")';
   390         girder.style.backgroundImage='url("'+prefix+'/share/hedgewars/Data/Graphics/Girder.png")';
   379 }
   391 }
   380 //]]>
   392 //]]>
   381     </script>
   393     </script>