Adding a hat test page to version control. Also kind of a test to see if it will be served with the right content type by google code
authornemo
Tue, 29 Mar 2011 16:47:54 -0400
changeset 5071 0b931e96bee9
parent 5070 fab320646828
child 5072 863b9fe83c2f
Adding a hat test page to version control. Also kind of a test to see if it will be served with the right content type by google code
misc/hats_js_anim.xhtml
--- /dev/null	Thu Jan 01 00:00:00 1970 +0000
+++ b/misc/hats_js_anim.xhtml	Tue Mar 29 16:47:54 2011 -0400
@@ -0,0 +1,199 @@
+<!DOCTYPE HTML>
+<html xmlns="http://www.w3.org/1999/xhtml">
+<head>
+<!-- There is, at present, no official xsd for (X)HTML5. A pity. Usefulness would depend on the parser and extensions made by the site.  -->
+    <title>Hedgewars Hats</title>
+
+    <style type="text/css">
+* {padding: 0; margin: 0; }
+body 
+{
+    background: url('http://hedgewars.googlecode.com/hg/share/hedgewars/Data/Themes/Nature/Sky.png') fixed no-repeat bottom left;
+    -moz-background-size: 200%;
+    background-size: 200%;
+    font-family: sans-serif;
+    overflow: hidden;
+}
+h1 { text-shadow: 0 0 2px white; }
+a 
+{
+    margin-top: 12px;
+    margin-left: 20px;
+    float: left;
+    height: 32px;
+    width: 32px;
+    color: transparent;
+    background-image: url("http://hedgewars.googlecode.com/hg/share/hedgewars/Data/Graphics/Hedgehog/Idle.png");
+}
+.girder
+{
+    width: 100%;
+    height: 30px;
+    clear: left;
+    background-image: url('http://hedgewars.googlecode.com/hg/share/hedgewars/Data/Themes/Nature/Girder.png');
+    background-repeat: repeat-x;
+}
+.hide { visibility: hidden; }
+a div
+{
+    margin-top: -5px;
+    height: 32px;
+    width: 32px;
+}
+    </style>
+    <script type="application/ecmascript">
+//<![CDATA[
+/* 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 googlecode, but would require XSS whitelisting */
+var masks = [
+'4gsuif',          'Coonskin3',     'jigglypuff',   'NinjaStraight',       'Ryu',              'sth_Super',
+'AkuAku',          'Cororon',       'judo',         'NinjaTriangle',       'Samurai',          'sth_Tails',
+'android',         'Cowboy',        'junior',       'OldMan',              'Samus',            'stormcloud',
+'angel',           'crown',         'Ken',          'OrangeHair',          'Santa',            'stormtrooper',
+'anzac',           'cyborg',        'KirbyMask',    'orange',              'SauceBoatSilver',  'StrawHatEyes',
+'apple',           'darthvader',    'kiss_criss',   'Pantsu',              'ShaggyYeti',       'StrawHatFacial',
+'ash',             'Deer',          'kiss_frehley', 'Pig',                 'sheep',            'StrawHat',
+'Balrog',          'diglett',       'kiss_simmons', 'pikachu',             'ShortHair_Black',  'Sunglasses',
+'banana',          'Disguise',      'kiss_stanley', 'PinkHair',            'ShortHair_Brown',  'SunWukong',
+'Bandit',          'Dragon',        'knight',       'pinksunhat',          'ShortHair_Grey',   'Teacup',
+'beaver',          'dwarf',         'Kululun',      'pirate_jack_bandana', 'ShortHair_Red',    'Teapot',
+'beefeater',       'eastertop',     'Ladle',        'pirate_jack',         'ShortHair_Yellow', 'Terminator_Glasses',
+'Blanka',          'Elvis',         'lambda',       'Plunger',             'Skull',            'test',
+'BlankaToothless', 'Eva_00b',       'Laminaria',    'policecap',           'Sleepwalker',      'thug',
+'BlueCap',         'Eva_00y',       'laurel',       'porkey',              'slowpoke',         'Toad',
+'BlueHair',        'Falcon',        'lemon',        'PrincessDaisy',       'Sniper',           'tophats',
+'Bob',             'Gasmask',       'link',         'PrincessPeach',       'Sonic',            'ushanka',
+'BrainSlugMouth',  'Geordi',        'lugia',        'Pumpkin_Hat',         'SparkleSuperFun',  'Vega',
+'BrainSlug',       'Glasses',       'Luigi',        'PurpleHair',          'spartan',          'venom',
+'Bub',             'GreenCap',      'Mario',        'quotecap',            'spidey',           'Viking',
+'Bunny',           'GreenHair',     'MegaHogX',     'Rain',                'squirtle',         'voltorb',
+'charmander',      'GreyHair',      'mickey_ears',  'Rambo',               'sth_AmyClassic',   'Wario',
+'chef',            'Guile',         'Moose',        'rasta',               'sth_Amy',          'WhySoSerious',
+'chikorita',       'HogInTheHat',   'mp3',          'RedCap',              'sth_Eggman',       'WizardHat',
+'Chunli',          'Honda',         'mudkip',       'RedHair',             'sth_Knux',         'YellowCap',
+'clown-copper',    'IndianChief',   'Mummy',        'RobinHood',           'sth_Metal',        'YellowHair',
+'clown-crossed',   'InfernalHorns', 'naruto',       'royalguard',          'sth_Shadow',       'Zombi',
+'clown',           'Jason',         'NinjaFull',    'RSR',                 'sth_Sonic'];
+var themes = {
+"Stage":1,
+"Island":0,
+"Eyes":0,
+"Deepspace":0,
+"Jungle":1,
+"Cake":0,
+"Compost":1,
+"Planes":0,
+"Olympics":1,
+"Bath":1,
+"Cheese":0,
+"Desert":1,
+"Christmas":1,
+"CrazyMission":0,
+"Sheep":1,
+"Brick":0,
+"Underwater":1,
+"City":1,
+"EarthRise":0,
+"Blox":0,
+"Hell":0,
+"Bamboo":1,
+"Freeway":0,
+"Nature":1,
+"Art":1,
+"Halloween":1,
+"Snow":1,
+"Castle":1};
+var girder;
+var animationInterval;
+window.onload = function()
+{
+    var opt = document.createElement("option");
+    opt.appendChild(document.createTextNode(""));
+    var sel = document.body.appendChild(document.createElement("select"));
+    sel.onchange = switchTheme;
+    for(var theme in themes)
+    {
+        sel.appendChild(opt.cloneNode(true));
+        sel.lastChild.value = theme;
+        sel.lastChild.lastChild.data = theme;
+        if(theme == "Nature") sel.lastChild.selected = true;
+    }
+    var chk = document.createElement("input");
+    chk.type = "checkbox";
+    chk.onclick = switchAnim;
+    document.body.appendChild(chk);
+    chk = chk.cloneNode(false);
+    chk.onclick = hideGirders;
+    document.body.appendChild(chk);
+    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.appendChild(document.createElement("div"));
+    a.lastChild.appendChild(document.createTextNode(""));
+    for (var i=0;i<masks.length;i++)
+    {
+        var h = document.body.appendChild(a.cloneNode(true));
+        h.href = "http://hedgewars.googlecode.com/hg/share/hedgewars/Data/Graphics/Hats/"+masks[i]+".png";
+        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 (i%17==16 || i==masks.length-1) document.body.appendChild(g.cloneNode(false));
+    }
+    
+/* quick and dirty animation */
+animationInterval = setInterval(animateHogs, 128);
+}
+
+function animateHogs()
+{
+    var a = document.getElementsByTagName("a");
+    for (var i=0;i<a.length;i++)
+    {
+        a[i].style.backgroundPosition=Math.floor(a[i].idle/16)*-32+"px "+(a[i].idle%16)*-32+"px";
+        a[i].firstChild.style.backgroundPosition=Math.floor(a[i].idle/16)*-32+"px "+(a[i].idle%16)*-32+"px";
+        a[i].idle++;
+        if (a[i].idle > 18) a[i].idle = 0;
+    }
+}
+
+function switchAnim()
+{
+    if (animationInterval) 
+    {
+        clearInterval(animationInterval);
+        animationInterval = null;
+    }
+    else animationInterval = setInterval(animateHogs, 128);
+}
+
+function hideGirders()
+{
+    var g = document.getElementsByClassName("girder");
+    for(var i=0;i<g.length;i++) 
+        if (this.checked)
+            g[i].className = "girder hide";
+        else
+            g[i].className = "girder";
+    
+}
+
+function switchTheme()
+{
+    document.body.style.backgroundImage='url("http://hedgewars.googlecode.com/hg/share/hedgewars/Data/Themes/'+this.value+'/Sky.png")';
+    if (themes[this.value])
+        girder.style.backgroundImage='url("http://hedgewars.googlecode.com/hg/share/hedgewars/Data/Themes/'+this.value+'/Girder.png")';
+    else
+        girder.style.backgroundImage='url("http://hedgewars.googlecode.com/hg/share/hedgewars/Data/Graphics/Girder.png")';
+}
+//]]>
+    </script>
+</head>
+<body>
+<h1>List of Hedgewars hats</h1>
+</body>
+</html>