1. Sylvain Rouquette
  2. d3-skill-filter

Commits

Sylvain Rouquette  committed 9c0cdf9

added signature

  • Participants
  • Parent commits f628701
  • Branches default

Comments (0)

Files changed (4)

File index.html

View file
  • Ignore whitespace
 	<ul class="skills"></ul>
 	<br/>
 	<ul class="traits"></ul>
+
+	<div id="display_sig">
+	<h2><a id="save_sig" href="#">Signature</a></h2>
+	<svg id="signature" width="400px" height="200px" xmlns="http://www.w3.org/2000/svg" version="1.1">
+		<defs>
+			<svg id="frame" width="21" height="21" preserveAspectRatio="xMinYMin slice">
+				<image width="42" height="42" xlink:href="http://us.battle.net/d3/static/images/icons/frames/trait-21.png" />
+			</svg>
+			<svg id="rune_none" />
+			<svg id="rune_0" width="16" height="16" preserveAspectRatio="xMinYMin slice">
+				<image width="96" height="16" xlink:href="http://us.battle.net/d3/static/images/icons/runes/small.png" xmlns:xlink="http://www.w3.org/1999/xlink" />
+			</svg>
+			<svg id="rune_1" width="16" height="16" preserveAspectRatio="xMinYMin slice">
+				<image width="96" height="16" xlink:href="http://us.battle.net/d3/static/images/icons/runes/small.png" xmlns:xlink="http://www.w3.org/1999/xlink" x="-16" />
+			</svg>
+			<svg id="rune_2" width="16" height="16" preserveAspectRatio="xMinYMin slice">
+				<image width="96" height="16" xlink:href="http://us.battle.net/d3/static/images/icons/runes/small.png" xmlns:xlink="http://www.w3.org/1999/xlink" x="-32" />
+			</svg>
+			<svg id="rune_3" width="16" height="16" preserveAspectRatio="xMinYMin slice">
+				<image width="96" height="16" xlink:href="http://us.battle.net/d3/static/images/icons/runes/small.png" xmlns:xlink="http://www.w3.org/1999/xlink" x="-48" />
+			</svg>
+			<svg id="rune_4" width="16" height="16" preserveAspectRatio="xMinYMin slice">
+				<image width="96" height="16" xlink:href="http://us.battle.net/d3/static/images/icons/runes/small.png" xmlns:xlink="http://www.w3.org/1999/xlink" x="-64" />
+			</svg>
+		</defs>
+
+		<image id="crest" x="50%" y="0" width="200" height="100%" transform="translate(-100, 0)" xlink:href="" xmlns:xlink="http://www.w3.org/1999/xlink" />
+
+
+		<svg preserveAspectRatio="xMinYMax meet" viewBox="0 0 400 140">
+			<rect x="0" y="0" width="100%" height="90" style="fill: #000000; opacity: 0.7;" rx="10" ry="10"/>
+
+			<svg y="10" width="185">
+				<svg id="skill_0">
+					<image x="100%" y="0"  transform="translate(-21, 0)" width="21" height="21" xlink:href="" xmlns:xlink="http://www.w3.org/1999/xlink" />
+					<use   x="100%" y="2"  transform="translate(-42, 0)" xlink:href="#rune_0"/>
+					<text  x="100%" y="13" transform="translate(-48, 0)" fill="#D7851A" width="100%" font-family="Palatino Linotype" font-size="12" style="text-anchor: end;">
+					</text>
+				</svg>
+				<svg y="24" id="skill_2">
+					<image x="100%" y="0"  transform="translate(-21, 0)" width="21" height="21" xlink:href="" xmlns:xlink="http://www.w3.org/1999/xlink" />
+					<use   x="100%" y="2"  transform="translate(-42, 0)" xlink:href="#rune_1"/>
+					<text  x="100%" y="13" transform="translate(-48, 0)" fill="#D7851A" width="100%" font-family="Palatino Linotype" font-size="12" style="text-anchor: end;">
+					</text>
+				</svg>
+				<svg y="48" id="skill_4">
+					<image x="100%" y="0"  transform="translate(-21, 0)" width="21" height="21" xlink:href="" xmlns:xlink="http://www.w3.org/1999/xlink" />
+					<use   x="100%" y="2"  transform="translate(-42, 0)" xlink:href="#rune_1"/>
+					<text  x="100%" y="13" transform="translate(-48, 0)" fill="#D7851A" width="100%" font-family="Palatino Linotype" font-size="12" style="text-anchor: end;">
+					</text>
+				</svg>
+			</svg>
+
+
+			<svg x="190" y="10" width="21">
+				<svg id="trait_0">
+					<image width="21" height="21" xlink:href="" xmlns:xlink="http://www.w3.org/1999/xlink" />
+					<use xlink:href="#frame"/>
+				</svg>
+				<svg id="trait_1">
+					<image y="24" width="21" height="21" xlink:href="" xmlns:xlink="http://www.w3.org/1999/xlink" />
+					<use y="24" xlink:href="#frame"/>
+				</svg>
+				<svg id="trait_2">
+					<image y="48" width="21" height="21" xlink:href="" xmlns:xlink="http://www.w3.org/1999/xlink" />
+					<use y="48" xlink:href="#frame"/>
+				</svg>
+			</svg>
+
+
+			<svg x="215" y="10" width="185">
+				<svg id="skill_1">
+					<image x="0"  y="0" width="21" height="21" xlink:href="" xmlns:xlink="http://www.w3.org/1999/xlink" />
+					<use   x="26" y="2" xlink:href="#rune_2"/>
+					<text  x="48" y="13" fill="#D7851A" width="100%" font-family="Palatino Linotype" font-size="12">
+					</text>
+				</svg>
+				<svg y="24" id="skill_3">
+					<image x="0"  y="0" width="21" height="21" xlink:href="" xmlns:xlink="http://www.w3.org/1999/xlink" />
+					<use   x="26" y="2" xlink:href="#rune_3"/>
+					<text  x="48" y="13" fill="#D7851A" width="100%" font-family="Palatino Linotype" font-size="12">
+					</text>
+				</svg>
+				<svg y="48" id="skill_5">
+					<image x="0"  y="0" width="21" height="21" xlink:href="" xmlns:xlink="http://www.w3.org/1999/xlink" />
+					<use   x="26" y="2" xlink:href="#rune_4"/>
+					<text  x="48" y="13" fill="#D7851A" width="100%" font-family="Palatino Linotype" font-size="12">
+					</text>
+				</svg>
+			</svg>
+
+		</svg>
+
+	</svg>
+	</div>
+
 </div>
 
-
 </div>
 </body>
 </html>
-

File js/main.js

View file
  • Ignore whitespace
 var CALC_URL	= 'http://us.battle.net/d3/en/calculator/';
 var SKILL_URL	= 'http://us.battle.net/d3/en/class/';
 var RUNE_URL	= 'http://us.battle.net/d3/en/';
-var ICON_URL	= 'http://us.media.blizzard.com/d3/icons/skills/42/';
+var ICON_42_URL	= 'http://us.media.blizzard.com/d3/icons/skills/42/';
+var ICON_21_URL	= 'http://us.media.blizzard.com/d3/icons/skills/21/';
+var CREST_URL	= 'http://us.battle.net/d3/static/images/hero/';
 var HASH		= 'aZbYcXdWeVfUgThSiRjQkPlOmNnMoLpKqJrIsHtGuFvEwDxCyBzA0123456789+/';
 
 var FILTER_SKILL_LI = '\
 		g_filter_timer = setTimeout('filterSkills("'+$(this).attr('value')+'")', 200);
 	});
 
+	$('#save_sig').click(function() {
+		var serializer = new XMLSerializer();
+		var xml = serializer.serializeToString(document.getElementById('signature'));
+		open("data:image/svg+xml;base64," + btoa(xml));
+		return false;
+	});
+
 	bindSkills();
 	bindPassives();
 });
 				.skills[hashToPos(skill.find('.desc'))]
 				.runes[hashToPos(skill.find('.d3-icon-rune'))].name);
 		else
-			skill.find('.name_rune').html('Unruned');
+			skill.find('.name_rune').html('None');
 
 		var build_skill = $('#build .skills [data-skill="'+skill.attr('data-skill')+'"]');
 		if (build_skill.length) {
 					.skills[hashToPos(skill.find('.desc'))]
 					.runes[hashToPos(skill.find('.d3-icon-rune'))].name);
 			else
-				build_skill.find('.name_rune').html('Unruned');
+				build_skill.find('.name_rune').html('None');
 			build_skill.find('.runes').replaceWith(skill.find('.runes'));
 		}
 		else if ($('#build .skills').children().length >= 6)
 		for (var type in data) {
 			for (var skill in data[type]) {
 				var obj = data[type][skill];
-				obj['hash'] = HASH.charAt(skill);
+				obj.hash = HASH.charAt(skill);
 				if (type == 'skills') {
-					for (var rune in obj.runes)
-						obj.runes[rune]['hash'] = HASH.charAt(rune);
+					for (var rune in obj.runes) {
+						obj.runes[rune].hash = HASH.charAt(rune);
+						obj.runes[rune].svg = '#rune_' + rune;
+					}
 				}
 			}
 		}
 			if (type == 'skills') {
 				li = FILTER_SKILL_LI.replace('{slug_skill}', obj.slug)
 							 .replace('{hash_skill}', obj.hash)
-							 .replace('{icon_skill}', ICON_URL + obj.icon + '.png')
+							 .replace('{icon_skill}', ICON_42_URL + obj.icon + '.png')
 							 .replace('{name_skill}', obj.name)
 
 				single_rune = false;
 					li = li.replace('{href_skill}', link + '/active/' + obj.slug + '#' + rune_type);
 				else
 					li = li.replace('{href_skill}', link + '/active/' + obj.slug)
-				li = li.replace('{name_rune}', 'Unruned');
+				li = li.replace('{name_rune}', 'None');
 
 			}
 			else {
 				li = FILTER_PASSIVE_LI.replace('{slug_skill}', obj.slug)
 							 .replace('{hash_skill}', obj.hash)
 							 .replace('{href_skill}', link + '/passive/' + obj.slug)
-							 .replace('{icon_skill}', ICON_URL + obj.icon + '.png')
+							 .replace('{icon_skill}', ICON_42_URL + obj.icon + '.png')
 							 .replace('{name_skill}', obj.name);
 			}
 			ul += li;
 	var skills = '';
 	var runes = '';
 	var level = 1;
-	var skill, rune;
+	var count = 0;
+	var skill, rune, svg;
 
+	$('#crest').attr('xlink:href', CREST_URL + g_current_class + '/crest.png');
 	$('#build .skills .skill').each(function(i) {
+		count++;
 		skill	= $(this).find('.desc');
 		rune	= $(this).find('.d3-icon-rune:not(.hidden)');
 		skills	+= strOrEmpty(skill.attr('data-hash'));
 			level = skill.requiredLevel;
 		if (rune && level < rune.requiredLevel)
 			level = rune.requiredLevel;
+
+		svg = $('#skill_'+i);
+		if (rune) {
+			svg.find('use').attr('xlink:href', rune.svg);
+			svg.find('text').text(rune.name);
+		}
+		else {
+			svg.find('use').attr('xlink:href', '#rune_none');
+			svg.find('text').text('None');
+		}
+		svg.find('image').attr('xlink:href', ICON_21_URL + skill.icon + '.png');
 	});
 	params += skills + '!';
 	$('#build .traits .skill').each(function(i) {
+		count++;
 		skill	= $(this).find('.desc');
 		params += strOrEmpty(skill.attr('data-hash'));
 		skill	= g_classes[g_current_class].traits[HASH.indexOf(skill.attr('data-hash'))];
 		if (level < skill.requiredLevel)
 			level = skill.requiredLevel;
+		$('#trait_'+i).find('image').attr('xlink:href', ICON_21_URL + skill.icon + '.png');
 	});
 	params += '!' + runes;
 	$('#bnet_calc').attr('href', CALC_URL + params);
 		$('#level').html(' (level '+level+')');
 	else
 		$('#level').html('');
+
+	console.log(count);
+	if (count == 9)
+		$('#display_sig').show();
+	else
+		$('#display_sig').hide();
 }

File js/tooltips.js

View file
  • Ignore whitespace
 	function bindEvents() {
 
 		$.bindEvent(document, 'mouseover', function(e) {
+			if (!e)
+				return;
 
 			var link = getLinkFromEvent(e);
 			if(link) {
 		});
 
 		$.bindEvent(document, 'mouseout', function(e) {
+			if (!e)
+				return;
 
 			var link = getLinkFromEvent(e);
 			if(link) {
 	}
 
 	function getLinkFromEvent(e) {
+		if (!e)
+			return null;
 
 		e = $.normalizeEvent(e);
 
 		var target = e.target;
 		var tries = 0;
 
-		while(target && ++tries <= 5) {
+		while(target && target.nodeName && ++tries <= 5) {
 
 			if(target.nodeName.toUpperCase() == 'A') {
 				return target;
 		if(!params.key || currentLink == link) {
 			return;
 		}
-		
+
 		currentLink = link;
 		currentParams = params;
 

File style.css

View file
  • Ignore whitespace
 }
 #wrapper {
 	padding-top: 20px;
-	width: 900px;
+	width: 950px;
 	margin: 0 auto;
 }
 #filter {
 }
 #build {
 	float: left;
-	width: 350px;
+	width: 400px;
 	text-align: center;
 }
-h2 {
+#display_sig {
+	display: none;
+}
+h2, #save_sig {
 	margin: 40px 0px 20px 0px;
 	text-align: center;
 	font-family: "Diablo", "Palatino Linotype", "Times", serif;
 	color: #FD7;
 }
+#save_sig {
+	text-decoration: none;
+}
 #level {
 	font-size: 16px;
 	opacity: 0.2;
 }
 .skill .desc {
 	float: left;
-	width: 290px;
+	width: 280px;
 	text-decoration: none;
 }
 .skill .d3-icon-skill {