Commits

Sylvain Rouquette committed d1c34b5

rewrote the site with the new api. display and filter runes.

Comments (0)

Files changed (5)

 	<meta http-equiv="X-UA-Compatible" content="IE=Edge"/>
 	<link rel="stylesheet" type="text/css" href="style.css" />
 	<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js"></script>
+	<!--script type="text/javascript" src="http://us.battle.net/d3/static/js/tooltips.js"></script-->
 	<script type="text/javascript" src="js/tooltips.js"></script>
-	<script type="text/javascript" src="js/skills.js"></script>
 	<script type="text/javascript" src="js/main.js"></script>
 	<title>Diablo3 Skill Filter</title>
 </head>
 <body>
 <div id="wrapper">
 
-
-<div id="skills">
+<div id="filter">
 	<form id="class_selector">
 		<select>
 			<option value="barbarian" selected>Barbarian</option>
 	</form>
 
 	<h2>Skills</h2>
-	<ul class="active"></ul>
+	<ul class="skills"></ul>
 	<h2>Passive Skills</h2>
-	<ul class="passive"></ul>
+	<ul class="traits"></ul>
 </div>
 
 
-var BASE_URL = 'http://us.battle.net/d3/en/class/';
-var BASE_KEY = 'us-en-skill-';
+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/64/';
 
+var SKILL_LI = '\
+	<li class="skill {class_skill}">\
+		<a class="desc" href="{href_skill}">\
+			<div>\
+				<span class="d3-icon d3-icon-skill d3-icon-skill-32" style="background-image: url(\'{icon_skill}\'); width: 32px; height: 32px;">\
+					<span class="frame"/></span>\
+				</span>\
+				<span class="skill_name">{skill}</span>\
+			</div>\
+		</a>\
+		<ul class="runes">\
+			<li><a class="rune_0 d3-icon d3-icon-rune d3-icon-rune-medium" href="{href_rune_0}"><span class="rune-a"></span></a></li>\
+			<li><a class="rune_1 d3-icon d3-icon-rune d3-icon-rune-medium" href="{href_rune_1}"><span class="rune-b"></span></a></li>\
+			<li><a class="rune_2 d3-icon d3-icon-rune d3-icon-rune-medium" href="{href_rune_2}"><span class="rune-c"></span></a></li>\
+			<li><a class="rune_3 d3-icon d3-icon-rune d3-icon-rune-medium" href="{href_rune_3}"><span class="rune-d"></span></a></li>\
+			<li><a class="rune_4 d3-icon d3-icon-rune d3-icon-rune-medium" href="{href_rune_4}"><span class="rune-e"></span></a></li>\
+		</ul>\
+	</li>';
+
+var PASSIVE_LI = '\
+	<li class="skill {class_skill}">\
+		<a class="desc" href="{href_skill}">\
+			<div>\
+				<span class="d3-icon d3-icon-skill d3-icon-skill-32" style="background-image: url(\'{icon_skill}\'); width: 32px; height: 32px;">\
+					<span class="frame"/></span>\
+				</span>\
+				<span class="skill_name">{skill}</span>\
+			</div>\
+		</a>\
+	</li>';
+
+var g_classes = {};
 var g_current_class = 'barbarian';
 var g_filter_timer = 0;
 
 (function($) {
 $(document).ready(function() {
 
-	$('.active').height(window.innerHeight / 2);
-	$('.passive').height(window.innerHeight - $('.passive').position().top);
+	$('.skills').height(window.innerHeight / 2);
+	$('.traits').height(window.innerHeight - $('.traits').position().top);
 
-	setTimeout('preloadClass("'+g_current_class+'")', 500);
+	setTimeout('preloadClass()', 100);
 
 	$('#class_selector select').change(function() {
-		$('#skills .active').html('');
-		$('#skills .passive').html('');
+		$('#filter .skills').html('');
+		$('#filter .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);
 	});
-
 });
 })(jQuery);
 
 
-function preloadLink(link) {
-	var params = {};
-
-	Bnet.D3.Tooltips.parseUrl({ href: link }, params);
-
-	if(!params.key) {
+function preloadClass() {
+	if (g_current_class in g_classes) {
+		setTimeout('refreshSkillVisual()', 1);
 		return;
 	}
-
-	Bnet.D3.Tooltips.getTooltip(params);
+	$.getJSON('http://www.diabloapi.com/'+g_current_class+'?callback=?', function(data) {
+		console.log(data);
+		g_classes[g_current_class] = data;
+		setTimeout('refreshSkillVisual()', 1);
+	});
 }
 
 
-function preloadClass() {
-	for (var type in g_skills[g_current_class]) {
-		var ul_content = '';
-		for (var skill in g_skills[g_current_class][type]) {
-			var link = BASE_URL + g_current_class + '/' + type + '/' + skill;
-			preloadLink(link);
-			ul_content += '<li class="'+skill+'"></li>';
+function refreshSkillVisual() {
+	var li;
+	for (var type in g_classes[g_current_class]) {
+		var ul = '';
+		for (var skill in g_classes[g_current_class][type]) {
+			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)
+							 .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)
+				}
+			}
+			else {
+				li = PASSIVE_LI.replace('{class_skill}', obj.slug)
+							 .replace('{href_skill}', link + '/passive/' + obj.slug)
+							 .replace('{icon_skill}', ICON_URL + obj.icon + '.png')
+							 .replace('{skill}', obj.name)
+			}
+			ul += li;
 		}
-		$('#skills .' + type).html(ul_content);
+		$('#filter .' + type).html(ul);
 	}
-	setTimeout('refreshSkillVisual()', 1);
 }
 
-
-function refreshSkillVisual() {
-	for (var type in g_skills[g_current_class]) {
-		for (var skill in g_skills[g_current_class][type]) {
-			if (!((BASE_KEY + skill) in Bnet.D3.Tooltips.dataCache)) {
-				setTimeout('refreshSkillVisual()', 500);
-				return;
-			}
-			$('#skills .' + type + ' .' + skill).html(
-				'<div class="d3-tooltip-wrapper"><div class="d3-tooltip-wrapper-inner">'+
-				Bnet.D3.Tooltips.dataCache[BASE_KEY + skill].tooltipHtml+
-				'</div></div>');
-		}
-	}
-	//console.log(Bnet.D3.Tooltips.dataCache);
-}
-
-
 function filterSkills(filter) {
 	var words = filter.split(' ');
 	if (words[words.length - 1].length == 0)
 		words.pop();
 	var re = new RegExp('^(?=.*'+words.join(')(?=.*')+')','gim');
-	for (var type in g_skills[g_current_class]) {
-		for (var skill in g_skills[g_current_class][type]) {
-			if (!((BASE_KEY + skill) in Bnet.D3.Tooltips.dataCache)) {
-				return;
+	for (var type in g_classes[g_current_class]) {
+		for (var skill in g_classes[g_current_class][type]) {
+			var obj = g_classes[g_current_class][type][skill];
+			var element = $('#filter .' + obj.slug);
+			if (filter.length <= 2) {
+				if ('runes' in obj)
+					for (var rune in obj.runes)
+						element.find('.rune_' + rune).show();
+				element.show('fast');
+				continue;
 			}
-			if (filter.length <= 2 || re.exec(Bnet.D3.Tooltips.dataCache[BASE_KEY + skill].tooltipHtml))
-				$('#skills .' + type + ' .' + skill).show('fast');
-			else
-				$('#skills .' + type + ' .' + skill).hide('fast');
+			var show = re.exec(obj.name) ||
+				re.exec(obj.description) ||
+				re.exec(obj.simpleDescription);
+			if ('runes' in obj) {
+				if (!show) {
+					for (var rune in obj.runes) {
+						show = re.exec(obj.runes[rune].name) ||
+							re.exec(obj.runes[rune].description) ||
+							re.exec(obj.runes[rune].simpleDescription);
+						if (show)
+							break;
+					}
+				}
+				if (show) {
+					for (var rune in obj.runes) {
+						var show_rune = re.exec(obj.runes[rune].name) ||
+							re.exec(obj.runes[rune].description) ||
+							re.exec(obj.runes[rune].simpleDescription);
+						if (show_rune)
+							element.find('.rune_' + rune).show();
+						else
+							element.find('.rune_' + rune).hide();
+					}
+				}
+			}
+			if (show && element.is(':hidden'))
+				element.show('fast');
+			else if (!show && element.is(':visible'))
+				element.hide('fast');
 		}
 	}
 }

js/skills.js

-var g_skills = {
-	'barbarian': {
-		'active': {
-			'bash': ['instigation', 'onslaught', 'clobber', 'punish', 'pulverize'],
-			'hammer-of-the-ancients': null,
-			'cleave': null,
-			'threatening-shout': null,
-			'rend': null,
-			'ground-stomp': null,
-			'leap-attack': null,
-			'frenzy': null,
-			'battle-rage': null,
-			'weapon-throw': null,
-			'sprint': null,
-			'overpower': null,
-			'earthquake': null,
-			'seismic-slam': null,
-			'furious-charge': null,
-			'war-cry': null,
-			'ignore-pain': null,
-			'revenge': null,
-			'call-of-the-ancients': null,
-			'whirlwind': null,
-			'ancient-spear': null,
-			'wrath-of-the-berserker': null
-		},
-		'passive': {
-			'pound-of-flesh': null,
-			'ruthless': null,
-			'nerves-of-steel': null,
-			'weapons-master': null,
-			'inspiring-presence': null,
-			'berserker-rage': null,
-			'bloodthirst': null,
-			'animosity': null,
-			'superstition': null,
-			'tough-as-nails': null,
-			'no-escape': null,
-			'relentless': null,
-			'brawler': null,
-			'juggernaut': null,
-			'unforgiving': null,
-			'boon-of-bulkathos': null
-		}
-	},
-	'demon-hunter': {
-		'active': {
-			'hungering-arrow': null,
-			'impale': null,
-			'bola-shot': null,
-			'caltrops': null,
-			'rapid-fire': null,
-			'evasive-fire': null,
-			'strafe': null,
-			'entangling-shot': null,
-			'chakram': null,
-			'vault': null,
-			'grenades': null,
-			'marked-for-death': null,
-			'fan-of-knives': null,
-			'spike-trap': null,
-			'preparation': null,
-			'elemental-arrow': null,
-			'sentry': null,
-			'multishot': null,
-			'smoke-screen': null,
-			'companion': null,
-			'rain-of-vengeance': null,
-			'cluster-arrow': null,
-			'shadow-power': null
-		},
-		'passive': {
-			'tactical-advantage': null,
-			'thrill-of-the-hunt': null,
-			'vengeance': null,
-			'steady-aim': null,
-			'cull-the-weak': null,
-			'night-stalker': null,
-			'brooding': null,
-			'hot-pursuit': null,
-			'archery': null,
-			'numbing-traps': null,
-			'perfectionist': null,
-			'custom-engineering': null,
-			'grenadier': null,
-			'sharpshooter': null,
-			'ballistics': null
-		}
-	},
-	'monk': {
-		'active': {
-			'fists-of-thunder': null,
-			'dashing-strike': null,
-			'deadly-reach': null,
-			'blinding-flash': null,
-			'lashing-tail-kick': null,
-			'breath-of-heaven': null,
-			'mantra-of-evasion': null,
-			'exploding-palm': null,
-			'tempest-rush': null,
-			'crippling-wave': null,
-			'mantra-of-retribution': null,
-			'serenity': null,
-			'sevensided-strike': null,
-			'wave-of-light': null,
-			'mantra-of-healing': null,
-			'inner-sanctuary': null,
-			'sweeping-wind': null,
-			'cyclone-strike': null,
-			'mantra-of-conviction': null,
-			'way-of-the-hundred-fists': null,
-			'mystic-ally': null
-		},
-		'passive': {
-			'resolve': null,
-			'the-guardians-path': null,
-			'fleet-footed': null,
-			'transcendence': null,
-			'chant-of-resonance': null,
-			'seize-the-initiative': null,
-			'exalted-soul': null,
-			'sixth-sense': null,
-			'pacifism': null,
-			'near-death-experience': null,
-			'guiding-light': null,
-			'one-with-everything': null,
-			'combination-strike': null
-		}
-	},
-	'witch-doctor': {
-		'active': {
-			'poison-dart': null,
-			'grasp-of-the-dead': null,
-			'corpse-spiders': null,
-			'summon-zombie-dogs': null,
-			'plague-of-toads': null,
-			'hex': null,
-			'haunt': null,
-			'horrify': null,
-			'firebomb': null,
-			'firebats': null,
-			'zombie-charger': null,
-			'spirit-walk': null,
-			'spirit-barrage': null,
-			'gargantuan': null,
-			'locust-swarm': null,
-			'sacrifice': null,
-			'acid-cloud': null,
-			'soul-harvest': null,
-			'big-bad-voodoo': null,
-			'mass-confusion': null,
-			'wall-of-zombies': null,
-			'fetish-army': null
-		},
-		'passive': {
-			'jungle-fortitude': null,
-			'vermin': null,
-			'circle-of-life': null,
-			'spiritual-attunement': null,
-			'gruesome-feast': null,
-			'blood-ritual': null,
-			'bad-medecine': null,
-			'zombie-handler': null,
-			'pierce-the-veil': null,
-			'spirit-vessel': null,
-			'fetish-sycophants': null,
-			'rush-of-essence': null,
-			'vision-quest': null,
-			'death-trance': null,
-			'grave-injustice': null,
-			'tribal-rites': null
-		}
-	},
-	'wizard': {
-		'active': {
-			'magic-missile': null,
-			'arcane-orb': null,
-			'shock-pulse': null,
-			'frost-nova': null,
-			'ray-of-frost': null,
-			'diamond-skin': null,
-			'spectral-blade': null,
-			'wave-of-force': null,
-			'electrocute': null,
-			'arcane-torrent': null,
-			'ice-armor': null,
-			'energy-twister': null,
-			'slow-time': null,
-			'storm-armor': null,
-			'explosive-blast': null,
-			'disintegrate': null,
-			'hydra': null,
-			'magic-weapon': null,
-			'teleport': null,
-			'meteor': null,
-			'mirror-image': null,
-			'blizzard': null,
-			'familiar': null,
-			'energy-armor': null,
-			'archon': null
-		},
-		'passive': {
-			'power-hungry': null,
-			'temporal-flux': null,
-			'critical-mass': null,
-			'glass-cannon': null,
-			'prodigy': null,
-			'astral-presence': null,
-			'illusionist': null,
-			'black-ice': null,
-			'conflagration': null,
-			'paralysis': null,
-			'galvanizing-ward': null,
-			'blur': null,
-			'evocation': null,
-			'arcane-dynamo': null,
-			'unstable-anomaly': null
-		}
-	}
-};
-
 			type: 'skill',
 			url: 'skill/{folder}/{key}'
 		},
+		rune: {
+			type: 'rune',
+			url: 'rune/{folder}/{key}'
+		},
 		calculator: {
 			type: 'calculator',
 			url: 'calculator/{folder}/{key}'
 				type: 'skill'
 			}
 		},
+		// rune/{skillSlug}/{runeType}
+		{
+			regex: new RegExp('^rune/([^/]+)/([^#\\?]+)$'),
+			params: {
+				type: 'rune'
+			}
+		},
 		// class/{classSlug}/passive/{skillSlug}
 		{
 			regex: new RegExp('^class/([^/]+)/passive/([^#\\?]+)$'),
 	}
 
 	function loadData(params) {
-
 		var cacheKey = getCacheKeyFromParams(params);
 		return dataCache[cacheKey];
 	}
 
 	function getCacheKeyFromParams(params) {
+		if (params.type == 'rune' && 'folder' in params)
+			return [
+				params.region,
+				params.locale,
+				params.type,
+				params.folder,
+				params.key
+			].join('-');
+
 		return [
 			params.region,
 			params.locale,
 	// Public methods
 	this.registerData = registerData;
 
-	// Syl: added
-	this.dataCache = dataCache;
-	this.parseUrl = parseUrl;
-	this.parseOptions = parseOptions;
-	this.getTooltip = getTooltip;
 
 
 	// HTML Helpers
 	margin: 0;
 	padding: 0;
 	list-style-type: none;
+	color: #F3E6D0;
+	font-family: "Palatino Linotype", "Times", serif;
 }
-/* fix centered div in IE */
-/*body {
+body, select, input {
+	background-color: #000;
+}
+form {
 	text-align: center;
-}*/
+}
 #wrapper {
 	padding-top: 20px;
-	width: 600px;
+	width: 500px;
 	margin: 0 auto 0 auto;
 }
-.active, .passive {
+h2 {
+	margin: 40px 0px 20px 0px;
+	text-align: center;
+	font-family: "Palatino Linotype", "Times", serif;
+	color: #FD7;
+}
+.skills, .traits {
 	overflow: auto;
 }
-#skills li, #build li {
-	margin-bottom: 10px;
+.skill {
+	height:	48px;
+	clear: both;
 }
-#skills .tooltip-extension,
-#skills .special,
-#skills .subtle {
-	display: none;
+.skill:hover {
+	background-color: #333;
 }
-#skills .d3-tooltip-wrapper {
+.skill .desc {
+	float: left;
+	width: 260px;
+	text-decoration: none;
+}
+.skill .d3-icon-skill {
+	margin: 8px 4px 0px 8px;
+}
+.skill .skill_name {
 	position: relative;
-	margin: 10px 0 0 10px;
-	max-width: 560px;
+	top: -12px;
+	font-size: 18px;
 }
-#skills .d3-tooltip-wrapper-inner {
-	min-height: 120px;
+.runes li {
+	float: right;
 }
-#skills .d3-tooltip .tooltip-head {
-	background: none;
-	padding: auto 10px;
-	height: 30px;
-	width: 90%;
-	text-align: left;
-}
+