Commits

Sylvain Rouquette committed 080d21f

added character builder

  • Participants
  • Parent commits 78d9700

Comments (0)

Files changed (3)

 		<input type="text" name="filter"/>
 	</form>
 
-	<h2>Skills</h2>
+	<h2>Active Skills</h2>
 	<ul class="skills"></ul>
 	<h2>Passive Skills</h2>
 	<ul class="traits"></ul>
 </div>
 
 
+<div id="build">
+	<a id="bnet_calc" href="http://us.battle.net/d3/en/calculator/" target="blank_">Battle.net Calculator</a>
+	<ul class="skills"></ul>
+	<ul class="traits"></ul>
+</div>
+
+
 </div>
 </body>
 </html>
-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 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 HASH		= 'aZbYcXdWeVfUgThSiRjQkPlOmNnMoLpKqJrIsHtGuFvEwDxCyBzA0123456789+/';
 
-var SKILL_LI = '\
+var FILTER_SKILL_LI = '\
 	<li class="skill {class_skill}">\
-		<a class="desc" href="{href_skill}">\
+		<a class="desc" href="{href_skill}" data-hash="{hash_skill}" target="blank_">\
 			<div>\
-				<span class="d3-icon d3-icon-skill d3-icon-skill-42" style="background-image: url(\'{icon_skill}\'); width: 42px; height: 42px;">\
+				<span class="d3-icon d3-icon-skill d3-icon-skill-42" style="background-image: url(\'{icon_skill}\');">\
 					<span class="frame"/></span>\
 				</span>\
 				<span class="skill_name">{skill}</span>\
 			</div>\
 		</a>\
 		<ul class="runes">\
-			<li><a class="rune_4 d3-icon d3-icon-rune d3-icon-rune-medium" href="{href_rune_4}"><span class="rune-{type_rune_4}"></span></a></li>\
-			<li><a class="rune_3 d3-icon d3-icon-rune d3-icon-rune-medium" href="{href_rune_3}"><span class="rune-{type_rune_3}"></span></a></li>\
-			<li><a class="rune_2 d3-icon d3-icon-rune d3-icon-rune-medium" href="{href_rune_2}"><span class="rune-{type_rune_2}"></span></a></li>\
-			<li><a class="rune_1 d3-icon d3-icon-rune d3-icon-rune-medium" href="{href_rune_1}"><span class="rune-{type_rune_1}"></span></a></li>\
-			<li><a class="rune_0 d3-icon d3-icon-rune d3-icon-rune-medium" href="{href_rune_0}"><span class="rune-{type_rune_0}"></span></a></li>\
+			<li><a class="rune_4 d3-icon d3-icon-rune d3-icon-rune-medium" href="{href_rune_4}" data-hash="{hash_rune_4}" target="blank_">\
+				<span class="rune-{type_rune_4}"></span></a></li>\
+			<li><a class="rune_3 d3-icon d3-icon-rune d3-icon-rune-medium" href="{href_rune_3}" data-hash="{hash_rune_3}" target="blank_">\
+				<span class="rune-{type_rune_3}"></span></a></li>\
+			<li><a class="rune_2 d3-icon d3-icon-rune d3-icon-rune-medium" href="{href_rune_2}" data-hash="{hash_rune_2}" target="blank_">\
+				<span class="rune-{type_rune_2}"></span></a></li>\
+			<li><a class="rune_1 d3-icon d3-icon-rune d3-icon-rune-medium" href="{href_rune_1}" data-hash="{hash_rune_1}" target="blank_">\
+				<span class="rune-{type_rune_1}"></span></a></li>\
+			<li><a class="rune_0 d3-icon d3-icon-rune d3-icon-rune-medium" href="{href_rune_0}" data-hash="{hash_rune_0}" target="blank_">\
+				<span class="rune-{type_rune_0}"></span></a></li>\
 		</ul>\
 	</li>';
 
-var PASSIVE_LI = '\
+var FILTER_PASSIVE_LI = '\
 	<li class="skill {class_skill}">\
-		<a class="desc" href="{href_skill}">\
+		<a class="desc" href="{href_skill}" data-hash="{hash_skill}" target="blank_">\
 			<div>\
-				<span class="d3-icon d3-icon-skill d3-icon-skill-42" style="background-image: url(\'{icon_skill}\'); width: 42px; height: 42px;">\
+				<span class="d3-icon d3-icon-trait d3-icon-trait-42" style="background-image: url(\'{icon_skill}\');">\
 					<span class="frame"/></span>\
 				</span>\
 				<span class="skill_name">{skill}</span>\
 (function($) {
 $(document).ready(function() {
 
-	$('.skills').height(window.innerHeight / 2);
-	$('.traits').height(window.innerHeight - $('.traits').position().top);
+	$('#filter .skills').height(window.innerHeight / 2);
+	$('#filter .traits').height(window.innerHeight - $('.traits').position().top);
 
 	setTimeout('preloadClass()', 100);
 
 	$('#class_selector select').change(function() {
-		$('#filter .skills').html('');
-		$('#filter .traits').html('');
+		$('.skills').html('');
+		$('.traits').html('');
 		g_current_class = $(this).attr('value');
 		$('#class_selector input').attr('value', '');
 		preloadClass();
 		clearTimeout(g_filter_timer);
 		g_filter_timer = setTimeout('filterSkills("'+$(this).attr('value')+'")', 200);
 	});
+
+	bindSkills();
+	bindPassives();
 });
 })(jQuery);
 
 
+function bindSkills() {
+	$('#filter .skills a').live('click', function() {
+		if ($('#build .skills').children().length >= 6)
+			return false;
+
+		var skill = $(this).parents('.skill').clone();
+
+		var clicked_class = $(this).attr('class');
+		skill.find('.d3-icon-rune').not(function() {
+			return $(this).attr('class') == clicked_class;
+		}).remove();
+
+
+		skill.toggleClass('skill');
+		var build_skill = $('#build .skills').find('.' + skill.attr('class'));
+		skill.toggleClass('skill');
+		if (build_skill.length) {
+			build_skill.find('.runes').replaceWith(skill.find('.runes'));
+		}
+		else
+			$('#build .skills').append(skill);
+		refreshCalcUrl();
+		return false;
+	});
+
+	$('#build .skills a').live('click', function() {
+		$(this).parents('.skill').remove();
+		refreshCalcUrl();
+		return false;
+	});
+}
+
+
+function bindPassives() {
+	$('#filter .traits a').live('click', function() {
+		if ($('#build .traits').children().length >= 3)
+			return false;
+
+		var skill = $(this).parents('.skill').clone();
+
+		skill.find('.runes').remove();
+		skill.find('.skill_name').remove();
+
+		skill.toggleClass('skill');
+		if ($('#build .traits').find('.' + skill.attr('class')).length)
+			return false;
+		skill.toggleClass('skill');
+
+		$('#build .traits').append(skill);
+		refreshCalcUrl();
+		return false;
+	});
+
+	$('#build .traits a').live('click', function() {
+		$(this).parents('.skill').remove();
+		refreshCalcUrl();
+		return false;
+	});
+}
+
+
 function preloadClass() {
 	if (g_current_class in g_classes) {
 		setTimeout('refreshSkillVisual()', 1);
 		return;
 	}
 	$.getJSON('http://www.diabloapi.com/'+g_current_class+'?callback=?', function(data) {
-		console.log(data);
 		g_classes[g_current_class] = data;
 		setTimeout('refreshSkillVisual()', 1);
 	});
 			var obj = g_classes[g_current_class][type][skill];
 			var link = SKILL_URL + g_current_class;
 			if (type == 'skills') {
-				li = SKILL_LI.replace('{class_skill}', obj.slug)
+				li = FILTER_SKILL_LI.replace('{class_skill}', obj.slug)
+							 .replace('{hash_skill}', HASH.charAt(skill))
 							 .replace('{href_skill}', link + '/active/' + obj.slug)
 							 .replace('{icon_skill}', ICON_URL + obj.icon + '.png')
 							 .replace('{skill}', obj.name)
 				for (var rune in obj.runes) {
 					li = li.replace('{href_rune_'+rune+'}', RUNE_URL + obj.runes[rune].tooltipParams)
 						   .replace('{type_rune_'+rune+'}', obj.runes[rune].type)
+						   .replace('{hash_rune_'+rune+'}', HASH.charAt(rune))
 				}
 			}
 			else {
-				li = PASSIVE_LI.replace('{class_skill}', obj.slug)
+				li = FILTER_PASSIVE_LI.replace('{class_skill}', obj.slug)
+							 .replace('{hash_skill}', HASH.charAt(skill))
 							 .replace('{href_skill}', link + '/passive/' + obj.slug)
 							 .replace('{icon_skill}', ICON_URL + obj.icon + '.png')
 							 .replace('{skill}', obj.name)
 	}
 }
 
+
+function strOrEmpty(str) {
+	return str ? str : '';
+}
+
+
+function refreshCalcUrl() {
+	var url = CALC_URL + g_current_class + '#';
+	var skills = '';
+	var runes = '';
+	$('#build .skills .skill').each(function(i) {
+		skills	+= strOrEmpty($(this).find('.desc').attr('data-hash'));
+		runes	+= strOrEmpty($(this).find('.d3-icon-rune').attr('data-hash'));
+	});
+	url += skills + '!';
+	$('#build .traits .skill').each(function(i) {
+		url += strOrEmpty($(this).find('.desc').attr('data-hash'));
+	});
+	url += '!' + runes;
+	$('#bnet_calc').attr('href', url);
+}
+
 }
 #wrapper {
 	padding-top: 20px;
+	width: 850px;
+	margin: 0 auto;
+}
+#filter {
+	float: right;
 	width: 500px;
-	margin: 0 auto 0 auto;
+}
+#build {
+	float: left;
+	width: 320px;
+	text-align: center;
 }
 h2 {
 	margin: 40px 0px 20px 0px;
 .skill .d3-icon-skill {
 	margin: 3px 0px 0px 4px;
 }
-.skill .skill_name {
+.skill_name {
 	position: relative;
+	font-size: 20px;
+}
+.skills .skill_name {
 	top: -14px;
-	font-size: 20px;
+}
+.traits .skill_name {
+	top: -18px;
 }
 .runes li {
 	float: right;
 }
+#build .skills {
+	text-align: left;
+	margin-top: 90px;
+}
+#build .traits {
+	display: inline-block;
+	margin: 0 auto;
+	text-align: center;
+}
+#build .traits li {
+	background-color: #000;
+	display: inline;
+}
+#build .traits .desc {
+	display: inline;
+	width: auto;
+}