body

    background: url('https://hg.hedgewars.org/hedgewars/raw-file/tip/share/hedgewars/Data/Themes/Nature/Sky.png') fixed no-repeat bottom left;

form, p

{

    background-color: #0B203D;

    padding: 1em;

    margin: 1em;

    border-style: solid;

    border-radius: 5px;

    border-width: 2px;

    border-color: #FFD902;

}

h1 {

    text-shadow: 0 0 2px white;

    color: black;

    margin:10px;

}

a {

    color: #BFBED0;

    text-decoration: none;

}

.hat

    background-image: url("https://hg.hedgewars.org/hedgewars/raw-file/tip/share/hedgewars/Data/Graphics/Hedgehog/Idle.png");

    background-image: url('https://hg.hedgewars.org/hedgewars/raw-file/tip/share/hedgewars/Data/Themes/Nature/Girder.png');

var IS_LOCAL=false; // set to true to fetch hats locally. Useful for testing.

var masks;

if (IS_LOCAL) {

/* JavaScript version of a sprite sheet - this could be pretty trivially done in pure HTML, but maintenance

// 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',

'poke_ash','poke_ash_hat','poke_charmander','poke_chikorita','poke_diglett','poke_jigglypuff','poke_lugia','poke_mudkip','poke_pikachu','poke_slowpoke','poke_squirtle','poke_voltorb','policecap','policegirl','punkman','quotecap','Rain','Rambo','RamboClean','rasta','RobinHood','royalguard','RSR','Samurai','Santa','scif_2001O','scif_2001Y','scif_BrainSlug','scif_BrainSlug2','scif_cosmonaut','scif_cyberpunk','scif_Geordi','scif_SparkssHelmet','scif_swDarthvader','scif_swStormtrooper','sf_balrog','sf_blanka','sf_blankatoothless','sf_chunli','sf_guile','sf_guile_hat','sf_honda','sf_ken','sf_ryu','sf_vega','sf_vega_hat','ShaggyYeti','ShortHair_Black','ShortHair_Brown','ShortHair_Grey','ShortHair_Red','ShortHair_Yellow','simple_green','simple_red','simple_yellow','Skull','Sleepwalker','sm_daisy','sm_luigi','sm_mario','sm_peach','sm_toad','sm_wario','Sniper','snorkel','snowhog','SparkleSuperFun','spartan','spcartman','spkenny','spkyle','spstan','sth_Amy','sth_AmyClassic','sth_Eggman','sth_Knux','sth_Metal','sth_Shadow','sth_Sonic','sth_SonicClassic','sth_Super','sth_Tails','stormcloud',

'StrawHat','StrawHatEyes','StrawHatFacial','Sunglasses','SunWukong','swordsmensquire','TeamHeadband','TeamSoldier','TeamWheatley','Terminator_Glasses','tf_demoman','tf_scout','thug','thugclean','tiara','tophats','touhou_chen','touhou_marisa','touhou_patchouli','touhou_remelia','touhou_suwako','touhou_yukari','ushanka','vampirichog','vc_gakupo','vc_gumi','vc_kaito','vc_len','vc_luka','vc_meiko','vc_miku','vc_rin','Viking','war_airwarden02','war_airwarden03','war_americanww2helmet','war_britmedic','war_britpthhelmet','war_britsapper','war_desertgrenadier1','war_desertgrenadier2','war_desertgrenadier4','war_desertgrenadier5','war_desertmedic','war_desertofficer','war_desertsapper1','war_desertsapper2','war_frenchww1gasmask','war_frenchww1helmet','war_germanww1helmet2','war_germanww1tankhelm','war_germanww2medic','war_germanww2pith','war_grenadier1','war_plainpith','war_sovietcomrade1','war_sovietcomrade2','war_trenchfrench01','war_trenchfrench02','war_trenchgrenadier1','war_trenchgrenadier2','war_trenchgrenadier3','war_UNPeacekeeper01','war_UNPeacekeeper02','WhySoSerious','WizardHat','Zombi','zoo_Bat','zoo_Beaver','zoo_Bunny','zoo_chicken','zoo_crocodile','zoo_Deer','zoo_elephant','zoo_fish','zoo_frog','zoo_Hedgehog','zoo_Moose','zoo_octopus','zoo_Pig','zoo_Porkey','zoo_Sheep','zoo_snail','zoo_turtle'

,'NoHat','cap_team','hair_team','TeamTophat'

];

}

else

{

masks = [];

}

// Last updated: 1.0.0

"Art":1,

"Beach":1,

"Bamboo":1,

"Bath":1,

//"Blox":0, //unused, has no Sky.png or Border.png

"Brick":0,

"Cake":0,

"Castle":1,

"City":1,

"Compost":1,

"Deepspace":0,

"Desert":1,

"Eyes":0,

"Freeway":0,

"Fruit":1,

"Halloween":1,

"Hoggywood":1,

"Island":0,

"Jungle":1,

"Golf":1,

"Olympics":1,

"Planes":0,

"Sheep":1,

"Stage":1,

"Underwater":1};

var staticMasks = [];

on_xml_loaded = function(ex)

{

    var resp = this.responseText;

    var r = />([^<]*).png</g;

    var x;

    while(x = r.exec(resp))

    {

        masks.push(x[1]);

    }

    on_hats_loaded();

}

on_xml_error = function()

{

    var p = document.createElement("p");

    p.appendChild(document.createTextNode("ERROR: List of hats could not be fetched from the server!"));

    document.body.appendChild(p);

}

    // Load list of hats

    if (!IS_LOCAL) {

        // Request list of hats from repository URL

        var xml=new XMLHttpRequest();

        xml.open("GET", "https://hg.hedgewars.org/hedgewars/file/tip/share/hedgewars/Data/Graphics/Hats/");

        xml.addEventListener("error", on_xml_error);

        xml.onload = on_xml_loaded;

        xml.send();

    }

    else

    {

        on_hats_loaded();

    }

}

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 = {

        "NoHat":true,

        "hair_team":true,

        "cap_team":true,

        "TeamTophat":true,

    };

    // Render girders

    var s = document.styleSheets[0].cssRules;

    for(var i=0;i<s.length;i++)

    {

        if (s[i].selectorText.toLowerCase() === ".girder")

            girder = s[i];

    }

    var a = document.createElement("a");

    var g = document.createElement("div");

    g.className="girder";

    a.className="hat";

    a.appendChild(document.createElement("div"));

    a.lastChild.appendChild(document.createTextNode(""));

    // Render hats

    var missingMasks = [];

    var img;

    var j = 0;

    var toDelete = [];

    for (var 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));

        if (IS_LOCAL)

            h.href = "../share/hedgewars/Data/Graphics/Hats/"+masks[i]+".png";

        else

            h.href = "https://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);

            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++)

        masks.splice(toDelete[i], 1);

    // List missing hats

    if (missingMasks.length > 0)

    {

        var pm = document.createElement("p");

        pm.appendChild(document.createTextNode("Other hats: "));

        for (var i=0; i<missingMasks.length; i++)

        {

            if (missingMasks[i] === "NoHat")

                continue;

            var link = document.createElement("a");

            if (IS_LOCAL)

                link.href = "../share/hedgewars/Data/Graphics/Hats/"+masks[i]+".png";

            else

                link.href = "https://hg.hedgewars.org/hedgewars/raw-file/tip/share/hedgewars/Data/Graphics/Hats/"+masks[i]+".png";

            link.appendChild(document.createTextNode(masks[i]));

            pm.appendChild(link);

            if (i < missingMasks.length -1)

                pm.appendChild(document.createTextNode(", "));

        }

        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"));

    var label = document.createElement("label");

    label.htmlFor = "theme_select";

    label.appendChild(document.createTextNode("Theme: "));

    form.appendChild(label);

    var sel = form.appendChild(document.createElement("select"));

    sel.id = "theme_select";

        if(theme === "Nature")

            sel.lastChild.selected = true;

    form.appendChild(document.createElement("br"));

    // Checkbox: Switch animation

    chk.id = "anim";

    chk.checked = true;

    form.appendChild(chk);

    label = document.createElement("label");

    label.htmlFor = "anim";

    label.appendChild(document.createTextNode("Animate hats"));

    form.appendChild(label);

    form.appendChild(document.createElement("br"));

    // Checkbox: Hide girders

    chk = document.createElement("input");

    chk.id = "hide_girders";

    chk.type = "checkbox";

    chk.checked = true;

    form.appendChild(chk);

    label = document.createElement("label");

    label.htmlFor = "hide_girders";

    label.appendChild(document.createTextNode("Show girders"));

    form.appendChild(label);

    document.body.appendChild(form);

        if (a.className === "hat")

            continue;

        // Cycle through hedgehog and hat animation frames

        // Hedgehog

        // Hat

        if (staticMasks[masks[i]] === 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";

            else if (a[i].idle === 16)

                a[i].firstChild.style.marginTop="-6px";

            else

                a[i].firstChild.style.marginTop="-5px";

            a[i].firstChild.style.backgroundPosition="0px 0px";

        }

        else

        {

            // Animated hat frames

            a[i].firstChild.style.backgroundPosition=Math.floor(a[i].idle/16)*-32+"px "+(a[i].idle%16)*-32+"px";

        }

        // Next frame

        if (a[i].idle > 18)

            a[i].idle = 0;

// Turn on or off hog+hat animation

    if (animationInterval)

// Turn on or off girders

    for(var i=0;i<g.length;i++)

            g[i].className = "girder";

        else

// Select theme according to drop-down list value

    var prefix;

    if (!IS_LOCAL)

        prefix = "https://hg.hedgewars.org/hedgewars/raw-file/tip";

    else

        prefix = "..";

    document.body.style.backgroundImage='url("'+prefix+'/share/hedgewars/Data/Themes/'+this.value+'/Sky.png")';

        girder.style.backgroundImage='url("'+prefix+'/share/hedgewars/Data/Themes/'+this.value+'/Girder.png")';

        girder.style.backgroundImage='url("'+prefix+'/share/hedgewars/Data/Graphics/Girder.png")';

<p><strong>ERROR</strong>: We're so sorry, but this webpage only works with JavaScript enabled. It seems JavaScript is disabled or not supported in your browser.<br/>

Normally, this webpage would display an animated preview of the hats in Hedgewars.</p>