# HG changeset patch # User nemo # Date 1301431674 14400 # Node ID 0b931e96bee9342ff98e6f2ca28d4670be97301e # Parent fab32064682833696be8fea420cbebd756d1dc02 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 diff -r fab320646828 -r 0b931e96bee9 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>