|
1 <!DOCTYPE HTML> |
|
2 <html xmlns="http://www.w3.org/1999/xhtml"> |
|
3 <head> |
|
4 <!-- There is, at present, no official xsd for (X)HTML5. A pity. Usefulness would depend on the parser and extensions made by the site. --> |
|
5 <title>Hedgewars Hats</title> |
|
6 |
|
7 <style type="text/css"> |
|
8 * {padding: 0; margin: 0; } |
|
9 body |
|
10 { |
|
11 background: url('http://hedgewars.googlecode.com/hg/share/hedgewars/Data/Themes/Nature/Sky.png') fixed no-repeat bottom left; |
|
12 -moz-background-size: 200%; |
|
13 background-size: 200%; |
|
14 font-family: sans-serif; |
|
15 overflow: hidden; |
|
16 } |
|
17 h1 { text-shadow: 0 0 2px white; } |
|
18 a |
|
19 { |
|
20 margin-top: 12px; |
|
21 margin-left: 20px; |
|
22 float: left; |
|
23 height: 32px; |
|
24 width: 32px; |
|
25 color: transparent; |
|
26 background-image: url("http://hedgewars.googlecode.com/hg/share/hedgewars/Data/Graphics/Hedgehog/Idle.png"); |
|
27 } |
|
28 .girder |
|
29 { |
|
30 width: 100%; |
|
31 height: 30px; |
|
32 clear: left; |
|
33 background-image: url('http://hedgewars.googlecode.com/hg/share/hedgewars/Data/Themes/Nature/Girder.png'); |
|
34 background-repeat: repeat-x; |
|
35 } |
|
36 .hide { visibility: hidden; } |
|
37 a div |
|
38 { |
|
39 margin-top: -5px; |
|
40 height: 32px; |
|
41 width: 32px; |
|
42 } |
|
43 </style> |
|
44 <script type="application/ecmascript"> |
|
45 //<![CDATA[ |
|
46 /* javascript version of a sprite sheet - this could be pretty trivially done in pure HTML, but maintenance |
|
47 would be easier with a server-side portion. list of sprites could be gotten from googlecode, but would require XSS whitelisting */ |
|
48 var masks = [ |
|
49 '4gsuif', 'Coonskin3', 'jigglypuff', 'NinjaStraight', 'Ryu', 'sth_Super', |
|
50 'AkuAku', 'Cororon', 'judo', 'NinjaTriangle', 'Samurai', 'sth_Tails', |
|
51 'android', 'Cowboy', 'junior', 'OldMan', 'Samus', 'stormcloud', |
|
52 'angel', 'crown', 'Ken', 'OrangeHair', 'Santa', 'stormtrooper', |
|
53 'anzac', 'cyborg', 'KirbyMask', 'orange', 'SauceBoatSilver', 'StrawHatEyes', |
|
54 'apple', 'darthvader', 'kiss_criss', 'Pantsu', 'ShaggyYeti', 'StrawHatFacial', |
|
55 'ash', 'Deer', 'kiss_frehley', 'Pig', 'sheep', 'StrawHat', |
|
56 'Balrog', 'diglett', 'kiss_simmons', 'pikachu', 'ShortHair_Black', 'Sunglasses', |
|
57 'banana', 'Disguise', 'kiss_stanley', 'PinkHair', 'ShortHair_Brown', 'SunWukong', |
|
58 'Bandit', 'Dragon', 'knight', 'pinksunhat', 'ShortHair_Grey', 'Teacup', |
|
59 'beaver', 'dwarf', 'Kululun', 'pirate_jack_bandana', 'ShortHair_Red', 'Teapot', |
|
60 'beefeater', 'eastertop', 'Ladle', 'pirate_jack', 'ShortHair_Yellow', 'Terminator_Glasses', |
|
61 'Blanka', 'Elvis', 'lambda', 'Plunger', 'Skull', 'test', |
|
62 'BlankaToothless', 'Eva_00b', 'Laminaria', 'policecap', 'Sleepwalker', 'thug', |
|
63 'BlueCap', 'Eva_00y', 'laurel', 'porkey', 'slowpoke', 'Toad', |
|
64 'BlueHair', 'Falcon', 'lemon', 'PrincessDaisy', 'Sniper', 'tophats', |
|
65 'Bob', 'Gasmask', 'link', 'PrincessPeach', 'Sonic', 'ushanka', |
|
66 'BrainSlugMouth', 'Geordi', 'lugia', 'Pumpkin_Hat', 'SparkleSuperFun', 'Vega', |
|
67 'BrainSlug', 'Glasses', 'Luigi', 'PurpleHair', 'spartan', 'venom', |
|
68 'Bub', 'GreenCap', 'Mario', 'quotecap', 'spidey', 'Viking', |
|
69 'Bunny', 'GreenHair', 'MegaHogX', 'Rain', 'squirtle', 'voltorb', |
|
70 'charmander', 'GreyHair', 'mickey_ears', 'Rambo', 'sth_AmyClassic', 'Wario', |
|
71 'chef', 'Guile', 'Moose', 'rasta', 'sth_Amy', 'WhySoSerious', |
|
72 'chikorita', 'HogInTheHat', 'mp3', 'RedCap', 'sth_Eggman', 'WizardHat', |
|
73 'Chunli', 'Honda', 'mudkip', 'RedHair', 'sth_Knux', 'YellowCap', |
|
74 'clown-copper', 'IndianChief', 'Mummy', 'RobinHood', 'sth_Metal', 'YellowHair', |
|
75 'clown-crossed', 'InfernalHorns', 'naruto', 'royalguard', 'sth_Shadow', 'Zombi', |
|
76 'clown', 'Jason', 'NinjaFull', 'RSR', 'sth_Sonic']; |
|
77 var themes = { |
|
78 "Stage":1, |
|
79 "Island":0, |
|
80 "Eyes":0, |
|
81 "Deepspace":0, |
|
82 "Jungle":1, |
|
83 "Cake":0, |
|
84 "Compost":1, |
|
85 "Planes":0, |
|
86 "Olympics":1, |
|
87 "Bath":1, |
|
88 "Cheese":0, |
|
89 "Desert":1, |
|
90 "Christmas":1, |
|
91 "CrazyMission":0, |
|
92 "Sheep":1, |
|
93 "Brick":0, |
|
94 "Underwater":1, |
|
95 "City":1, |
|
96 "EarthRise":0, |
|
97 "Blox":0, |
|
98 "Hell":0, |
|
99 "Bamboo":1, |
|
100 "Freeway":0, |
|
101 "Nature":1, |
|
102 "Art":1, |
|
103 "Halloween":1, |
|
104 "Snow":1, |
|
105 "Castle":1}; |
|
106 var girder; |
|
107 var animationInterval; |
|
108 window.onload = function() |
|
109 { |
|
110 var opt = document.createElement("option"); |
|
111 opt.appendChild(document.createTextNode("")); |
|
112 var sel = document.body.appendChild(document.createElement("select")); |
|
113 sel.onchange = switchTheme; |
|
114 for(var theme in themes) |
|
115 { |
|
116 sel.appendChild(opt.cloneNode(true)); |
|
117 sel.lastChild.value = theme; |
|
118 sel.lastChild.lastChild.data = theme; |
|
119 if(theme == "Nature") sel.lastChild.selected = true; |
|
120 } |
|
121 var chk = document.createElement("input"); |
|
122 chk.type = "checkbox"; |
|
123 chk.onclick = switchAnim; |
|
124 document.body.appendChild(chk); |
|
125 chk = chk.cloneNode(false); |
|
126 chk.onclick = hideGirders; |
|
127 document.body.appendChild(chk); |
|
128 var s = document.styleSheets[0].cssRules; |
|
129 for(var i=0;i<s.length;i++) |
|
130 if (s[i].selectorText.toLowerCase()==".girder") girder = s[i]; |
|
131 |
|
132 var a = document.createElement("a"); |
|
133 var g = document.createElement("div"); |
|
134 g.className="girder"; |
|
135 a.appendChild(document.createElement("div")); |
|
136 a.lastChild.appendChild(document.createTextNode("")); |
|
137 for (var i=0;i<masks.length;i++) |
|
138 { |
|
139 var h = document.body.appendChild(a.cloneNode(true)); |
|
140 h.href = "http://hedgewars.googlecode.com/hg/share/hedgewars/Data/Graphics/Hats/"+masks[i]+".png"; |
|
141 h.lastChild.style.backgroundImage = 'url("'+h.href+'")'; |
|
142 h.lastChild.lastChild.data = masks[i]; |
|
143 h.title = masks[i]; |
|
144 h.idle = Math.floor(Math.random()*19); |
|
145 if (i%17==16 || i==masks.length-1) document.body.appendChild(g.cloneNode(false)); |
|
146 } |
|
147 |
|
148 /* quick and dirty animation */ |
|
149 animationInterval = setInterval(animateHogs, 128); |
|
150 } |
|
151 |
|
152 function animateHogs() |
|
153 { |
|
154 var a = document.getElementsByTagName("a"); |
|
155 for (var i=0;i<a.length;i++) |
|
156 { |
|
157 a[i].style.backgroundPosition=Math.floor(a[i].idle/16)*-32+"px "+(a[i].idle%16)*-32+"px"; |
|
158 a[i].firstChild.style.backgroundPosition=Math.floor(a[i].idle/16)*-32+"px "+(a[i].idle%16)*-32+"px"; |
|
159 a[i].idle++; |
|
160 if (a[i].idle > 18) a[i].idle = 0; |
|
161 } |
|
162 } |
|
163 |
|
164 function switchAnim() |
|
165 { |
|
166 if (animationInterval) |
|
167 { |
|
168 clearInterval(animationInterval); |
|
169 animationInterval = null; |
|
170 } |
|
171 else animationInterval = setInterval(animateHogs, 128); |
|
172 } |
|
173 |
|
174 function hideGirders() |
|
175 { |
|
176 var g = document.getElementsByClassName("girder"); |
|
177 for(var i=0;i<g.length;i++) |
|
178 if (this.checked) |
|
179 g[i].className = "girder hide"; |
|
180 else |
|
181 g[i].className = "girder"; |
|
182 |
|
183 } |
|
184 |
|
185 function switchTheme() |
|
186 { |
|
187 document.body.style.backgroundImage='url("http://hedgewars.googlecode.com/hg/share/hedgewars/Data/Themes/'+this.value+'/Sky.png")'; |
|
188 if (themes[this.value]) |
|
189 girder.style.backgroundImage='url("http://hedgewars.googlecode.com/hg/share/hedgewars/Data/Themes/'+this.value+'/Girder.png")'; |
|
190 else |
|
191 girder.style.backgroundImage='url("http://hedgewars.googlecode.com/hg/share/hedgewars/Data/Graphics/Girder.png")'; |
|
192 } |
|
193 //]]> |
|
194 </script> |
|
195 </head> |
|
196 <body> |
|
197 <h1>List of Hedgewars hats</h1> |
|
198 </body> |
|
199 </html> |