Commits

Sylvain Rouquette committed ecbdb0d

added build loader

Comments (0)

Files changed (5)

favicon.png

Old
Old image
New
New image

favicon_new.png

Added
New image
 <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>
+	<br/>
 	<ul class="traits"></ul>
 </div>
 
 
 (function($) {
 $(document).ready(function() {
-
+	var cls = getURLParameter('class');
+	if (cls != 'null') {
+		g_current_class = cls;
+		$('#class_selector select').val(cls).attr('selected', 'selected');
+	}
+	
 	$('#filter .skills').height(window.innerHeight / 2);
 	$('#filter .traits').height(window.innerHeight - $('.traits').position().top);
 
-	setTimeout('preloadClass()', 100);
+	setTimeout('preloadClass(true)', 100);
 
 	$('#class_selector select').change(function() {
 		$('.skills').html('');
 		$('#bnet_calc').attr('href', '#');
 		g_current_class = $(this).attr('value');
 		$('#class_selector input').attr('value', '');
-		preloadClass();
+		preloadClass(false);
+		refreshUrl();
 	});
 
 	$('#class_selector input').keyup(function() {
 })(jQuery);
 
 
+function getURLParameter(name) {
+	return decodeURIComponent(
+		(RegExp(name + '=' + '(.+?)(&|$)').exec(location.search)||[,null])[1]
+	);
+}
+
+
 function bindSkills() {
 	$('#filter .skills a').live('click', function() {
 		if ($('#build .skills').children().length >= 6)
 		}
 		else
 			$('#build .skills').append(skill);
-		refreshCalcUrl();
+		refreshUrl();
 		return false;
 	});
 
 	$('#build .skills a').live('click', function() {
 		$(this).parents('.skill').remove();
-		refreshCalcUrl();
+		refreshUrl();
 		return false;
 	});
 }
 		skill.toggleClass('skill');
 
 		$('#build .traits').append(skill);
-		refreshCalcUrl();
+		refreshUrl();
 		return false;
 	});
 
 	$('#build .traits a').live('click', function() {
 		$(this).parents('.skill').remove();
-		refreshCalcUrl();
+		refreshUrl();
 		return false;
 	});
 }
 
 
-function preloadClass() {
+function preloadClass(build) {
 	if (g_current_class in g_classes) {
-		setTimeout('refreshSkillVisual()', 1);
+		setTimeout('refreshSkills("#filter", g_classes[g_current_class])', 1);
 		return;
 	}
 	$.getJSON('http://www.diabloapi.com/'+g_current_class+'?callback=?', function(data) {
 		g_classes[g_current_class] = data;
-		setTimeout('refreshSkillVisual()', 1);
+		if (build)
+			createBuild();
+		setTimeout('refreshSkills("#filter", g_classes[g_current_class])', 1);
 	});
 }
 
 
-function refreshSkillVisual() {
+function refreshSkills(target, skills) {
 	var li;
-	for (var type in g_classes[g_current_class]) {
+	for (var type in skills) {
 		var ul = '';
-		for (var skill in g_classes[g_current_class][type]) {
-			var obj = g_classes[g_current_class][type][skill];
+		for (var skill in skills[type]) {
+			var obj = skills[type][skill];
 			var link = SKILL_URL + g_current_class;
 			if (type == 'skills') {
 				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)
+							 .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))
+					if (obj.runes[rune])
+						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 = li.replace('rune_'+rune, 'hidden')
+							   .replace('{hash_rune_'+rune+'}', HASH.charAt(rune));
 				}
 			}
 			else {
 							 .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)
+							 .replace('{skill}', obj.name);
 			}
 			ul += li;
 		}
-		$('#filter .' + type).html(ul);
+		$(target + ' .' + type).html(ul);
 	}
 }
 
+
+function createBuild() {
+	if (location.hash.length <= 2)
+		return;
+	var hash = location.hash.slice(1).split('!');
+	var skills = { skills: [], traits: [] };
+	for (var i = 0; i < hash[0].length; ++i) {
+		skills.skills.push(jQuery.extend({}, g_classes[g_current_class].skills[HASH.indexOf(hash[0].charAt(i))]));
+		if (hash[2].charAt(i) == '.')
+			skills.skills[i].runes = [null, null, null, null, null];
+		else {
+			var rune = HASH.indexOf(hash[2].charAt(i));
+			skills.skills[i].runes = skills.skills[i].runes.slice(0);
+			for (var j = 0; j < skills.skills[i].runes.length; ++j)
+				if (j != rune)
+					skills.skills[i].runes[j] = null;
+		}
+	}
+	for (var i = 0; i < hash[1].length; ++i) {
+		skills.traits.push(jQuery.extend({}, g_classes[g_current_class].traits[HASH.indexOf(hash[1].charAt(i))]));
+		skills.traits[i].name = '';
+	}
+	console.log(skills);
+	refreshSkills('#build', skills);
+	refreshUrl();
+}
+
+
 function filterSkills(filter) {
 	var words = filter.split(' ');
 	if (words[words.length - 1].length == 0)
 }
 
 
-function refreshCalcUrl() {
-	var url = CALC_URL + g_current_class + '#';
+function refreshUrl() {
+	var params = 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'));
+		runes	+= strOrEmpty($(this).find('.d3-icon-rune:not(.hidden)').attr('data-hash'));
 	});
-	url += skills + '!';
+	params += skills + '!';
 	$('#build .traits .skill').each(function(i) {
-		url += strOrEmpty($(this).find('.desc').attr('data-hash'));
+		params += strOrEmpty($(this).find('.desc').attr('data-hash'));
 	});
-	url += '!' + runes;
-	$('#bnet_calc').attr('href', url);
+	params += '!' + runes;
+	$('#bnet_calc').attr('href', CALC_URL + params);
+	window.history.replaceState(null, null, '?class=' + params);
 }
 
 	color: #FD7;
 }
 #filter .skills, #filter .traits {
-	overflow-y: scroll;
+	overflow-y: auto;
+	clear: both;
 }
 .skill {
 	height:	48px;
 }
 #build .traits {
 	display: inline-block;
-	margin: 0 auto;
-	text-align: center;
 }
 #build .traits li {
 	background-color: #000;
 	color: #F3E6D0;
 	-webkit-box-shadow: inset 0 0 0 1px #CFB991, inset 0 0 0 6px #111;
 }
+.hidden {
+	display: none !important;
+}