0.9 (missing XML)

class/AASkillsCalculator.php

@@ -0,0 +1,162 @@
+<?php
+
+/*
+	Archeage Skill Calculator
+	2014/05/17
+*/
+
+class AASkillsCalculator {
+	
+	var $_xml;	// Contenu xml
+
+	function AASkillsCalculator ($xml="xml/aa_skillsLists.xml") {
+		// Chargement du XML
+		$this->_xml = new DomDocument();
+		$this->_xml->load($xml);
+	}
+
+	/*
+		Return the calculator's HTML
+	*/
+	function getTree() {
+		// Affichage de la page
+		$html = '<div id="tal_box">';
+		$html .= '<p>You can still use <span id="skillPoints">23</span> points.</p>';
+		$html .= '<div class="tal_tree">';
+		$html .= $this->createTree();
+		$html .= '</div>';
+		$html .= '<div class="tal_tree">';
+		$html .= $this->createTree();
+		$html .= '</div>';
+		$html .= '<div class="tal_tree">';
+		$html .= $this->createTree();
+		$html .= '</div>';
+		$html .= '<div id="tal_linkBox">';
+		$html .= '<button onClick="createLink()">Create a link</button>';
+		$html .= '<p id="tal_buildLink"></p>';
+		$html .= '</div>';
+		return $html;
+	}
+
+	/*
+		Return one tree's HTML
+	*/
+	function createTree() {
+		$tree = $this->_xml->getElementsByTagName('ecole');
+		$html = $this->getSpec($tree);
+		$html .= '<div class="tal_clear"></div>';
+		$html .= $this->getSkills($tree);
+
+		return $html;
+	}
+
+
+	/*
+		Return the skills's HTML from one tree
+		@tree 	: 	Tree's XML node (ecole)
+	*/
+	function getSkills($node) {
+		$html ='';
+		foreach ($node as $branch) {
+			$html .= '<div id="'.$branch->getAttribute('id').'" class="tal_invisible">';
+			$html .= $this->getActive($branch);
+			$html .= $this->getPassive($branch);
+			$html .= '</div>';
+		}
+
+		return $html;
+	}
+
+	/*
+		Return the list of the skill trees
+		@node 	:	 Tree's XML node (ecole)
+	*/
+	function getSpec($node) {
+		$html = '<div id="tal_ecoles">';
+		$html .= '<select id="tal_listEcoles" onchange="tal_display(this)">';
+		$html .= '<option value="0" selected="" disabled="">Choose...</option>';
+		foreach ($node as $branch) {
+			$html .= '<option value="'.$branch->getAttribute('id').'">'.$branch->getAttribute('name').'</option>';
+		}
+		$html .= '</select>';
+		$html .= '</div>';
+
+		return $html;
+	}
+
+	/*
+		Return the active skills from one tree
+		@node 	:	Active's XML node (ecole > active)
+	*/
+	function getActive($node) {
+		$active = $node->getElementsByTagName('active');
+		foreach ($active as $a) {
+			$skill = $a->getElementsByTagName('skill');
+			$html = '<div class="tal_activeSkills">';
+			foreach ($skill as $s) {
+				$html .= '<li onClick="toggleSkill(this)">
+					<img src="'.$s->getAttribute('img').'" onMouseOver="displayStats(this)" onMouseOut="hideStats(this)" />';
+				$html .= '<div class="tal_stats">'.$this->getSkillDetail($s).'</div>';
+				$html .= '</li>';
+			}
+			$html .= '</div>';
+		}
+
+		return $html;
+	}
+
+	/*
+		Return the active skills from one tree
+		@node 	:	Passive's XML node (ecole > passive)
+	*/
+	function getPassive($node) {
+		$active = $node->getElementsByTagName('passive');
+		foreach ($active as $a) {
+			$skill = $a->getElementsByTagName('skill');
+			$html ='<div class="tal_passiveSkills">';
+			foreach ($skill as $s) {
+				$html .= '<li class="tal_passive" data-req="'.$s->getAttribute('req').'" onClick="toggleSkill(this)">
+					<img src="'.$s->getAttribute('img').'" onMouseOver="displayStats(this)" onMouseOut="hideStats(this)" />';
+				$html .= '<div class="tal_stats">'.$this->getSkillDetail($s).'</div>';
+				$html .= '</li>';
+			}
+			$html .= '</div>';
+		}
+
+		return $html;
+	}
+
+	/*
+		Get the skill details (mana, cooldown, etc)
+		@node 	:	Skill's XML node (ecole > passive/active > skill)
+	*/
+	function getSkillDetail($node) {
+		$html = '<h3>'.$node->getAttribute('name').'</h2>';
+		$stat = $node->getElementsByTagName('stat');
+		$desc = $node->getElementsByTagName('description');
+		foreach ($desc as $d) {
+			$html .= '<p>'.utf8_decode($this->renderTags($d->nodeValue)).'</p>';
+		}
+		$html .= '<div class="statBox">';
+		foreach ($stat as $s) {
+			$html .= '<p class="statLine"><span class="tal_sTitle">'.ucfirst(utf8_decode($s->getAttribute('name'))).'</span>: '.utf8_decode($s->nodeValue).'</p>';
+		}
+		$html .= '</div>';
+
+
+		return $html;
+	}
+
+	/*
+		Transform custom tag into HTML tag
+		@str 	: 	String
+		@Custom tag
+			--b-- / ++b++ 	=> 	<b> / </b>
+	*/
+	function renderTags($str) {
+		return str_replace(array('--b--', '++b++'), array('<b>', '</b>'), $str);
+	}
+}
+
+
+?>

css/style_aaSkillsCalculator.css

@@ -0,0 +1,28 @@
+/* Généralités */
+#tal_box {margin: 0; padding: 0;}
+.tal_clear {clear: both;}
+.tal_invisible {display: none;}
+p #skillPoints {font-weight: bold; font-size: 1.1em;}
+
+/* Trees's list */
+.tal_tree {float: left; margin-right: 10px; min-height: 150px; width: 220px;}
+
+/* Skill tree */
+.tal_invisible li {float: left; list-style: none; padding-left: 2px; padding-right: 2px; 
+	height: 42px; margin-bottom: 5px; overflow: hidden;}
+.tal_activeSkills, .tal_passiveSkills {float: left; margin-top: 30px;}
+.tal_activeSkills {width: 150px;}
+.tal_passiveSkills {width: 50px;}
+
+
+
+/* Skill details - Mouseover */
+.tal_stats {display: none; position: absolute; background-image: url('../img/background_skillDetails.jpg'); border: 1px solid #CFB07C; 
+	margin-top: 40px; margin-left: -40px; padding: 5px; font-size: 0.8em; color: #3D3D3D; width: 250px;}
+.tal_sTitle {font-weight: bold; color: #4F3D15;}
+p.statLine {float: left; width: 115px; margin: 0;}
+.statBox {border-top: 1px solid #E8DDCA; margin-top: 10px; padding-top: 5px;}
+.tal_stats h3 {color: #4F3D15; font-size: 1.6em; margin: 0;}
+
+/* Link box */
+#tal_linkBox {clear: both; padding-top: 50px;}

index.php

@@ -0,0 +1,28 @@
+<?php
+
+require_once 'class/AASkillsCalculator.php';
+
+$AASkillsCalculator = new AASkillsCalculator();
+?>
+
+<html>
+<head>
+	<meta charset="utf-8">
+	<link rel="stylesheet" type="text/css" href="tmp/tmp_style.css">
+	<link rel="stylesheet" type="text/css" href="css/style_aaSkillsCalculator.css">
+	<script type="text/javascript" src="js/aa_skillsCalculator.js"></script>
+	<title>Archeage Skills Calculator</title>
+</head>
+
+<body>
+	<div id="container">
+		<div id="logo">
+			<img src="tmp/archeage_logo.png" />
+		</div>
+		<div id="skillCalculator">
+			<?php echo $AASkillsCalculator->getTree(); ?>
+		</div>
+	</div>
+</body>
+
+</html>

js/aa_skillsCalculator.js

@@ -0,0 +1,326 @@
+/*
+	Archeage Skill Calculator
+	2014/05/17
+*/
+
+var points = 23; // Maximum for Archeage at lvl 50
+var mTop = '-42px'; // Height of half the skill's image
+
+/* 
+	Code template: 21000110001001001x30011100000010010x81100010100100110
+	First number: Number of the skill tree
+	2 to 12: Active skills inside that tree
+	13 to end: Passive skills inside that tree 
+*/
+
+
+/* ====================
+	LISTS RELATED
+==================== */
+
+/*
+	Display the skills tree
+	@el 	: 	HTML Element from the click (this)
+*/
+function tal_display(el) {
+	var list = el.parentNode.parentNode.getElementsByTagName('div');
+	for (var i=0; i<list.length; i++) {
+		if (list[i].id != '') {
+			if (list[i].style.display == 'inline') {
+				restore(list[i]);
+				list[i].style.display = 'none';
+				unlock(list[i].id);
+			}
+			if (list[i].id == el.value) {
+				list[i].style.display = 'inline';
+				lock(el.value);
+			}
+		}
+	}
+}
+
+/*
+	Lock a skill tree in the other select when already selected in one
+	@str 	: 	ID of the skill tree
+*/
+function lock(str) {
+	var opt = document.getElementsByTagName('option');
+	for (var i=0; i<opt.length; i++) {
+		if (opt[i].value == str) {
+			opt[i].disabled = true;
+		}
+	}
+}
+
+/*
+	Unlock a skill tree when the user change in another
+	@str 	: 	ID of the skill tree
+*/
+function unlock(str) {
+	var opt = document.getElementsByTagName('option');
+	for (var i=0; i<opt.length; i++) {
+		if (opt[i].value == str) {
+			opt[i].disabled = false;
+		}
+	}
+}
+
+
+/* ====================
+	SKILLS RELATED
+==================== */
+
+/*
+	Display the skill details
+	@el 	: 	HTML Element from the mouse over (this)
+*/
+function displayStats(el) {
+	el.parentNode.childNodes[2].style.display = 'inline';
+}
+
+/*
+	Hide the skill details
+	@el 	: 	HTML Element from the mouse out (this)
+*/
+function hideStats(el) {
+	el.parentNode.childNodes[2].style.display = 'none';
+}
+
+/*
+	Toggle the skill to add or remove it
+	@el 	: 	HTML Element from the click (this)
+*/
+function toggleSkill(el) {
+	var marginValue = el.getElementsByTagName('img')[0].style.marginTop;
+	if (marginValue == mTop) {
+		if (validRemove(el)) {
+			points++;
+			el.getElementsByTagName('img')[0].style.marginTop = '0px';
+		} else {
+			alert('You can\'t remove this skill yet');
+		}
+	} else {
+		if (el.dataset.req) {
+			if (nbElements(el) >= el.dataset.req) {
+				el.getElementsByTagName('img')[0].style.marginTop = mTop;
+				points--;
+			} else {
+				alert('You can\'t skill this yet');
+			}
+		} else {
+			el.getElementsByTagName('img')[0].style.marginTop = mTop;
+			points--;
+		}
+	}
+	updatePoints();
+}
+
+/*
+	Restore the state of a skill tree when you change from the select
+	@el 	: 	DIV element representing the skill tree
+*/
+function restore(el) {
+	var tmp = el.getElementsByTagName('img');
+	for (var i=0; i<tmp.length; i++) {
+		if (tmp[i].style.marginTop == mTop) {
+			points++;
+			updatePoints();
+			tmp[i].style.marginTop = '0px';
+		}
+	}
+}
+
+
+/* ====================
+	POINTS RELATED
+==================== */
+
+/*
+	Update the skill points in the HTML
+*/
+function updatePoints() {
+	document.getElementById('skillPoints').innerHTML = points;
+}
+
+/*
+	Count the skills already added
+	@el 	: 	HTML Element from the click (this)
+*/
+function nbElements(el) {
+	var count = 0;
+	var list = el.parentNode.parentNode.getElementsByTagName('img');
+	for (var i=0; i<list.length; i++) {
+		if (list[i].style.marginTop == mTop) {
+			count++;
+		}
+	}
+	return count;
+}
+
+/*
+	Check if removing the skill don't mess with some requirements
+	@el 	: 	HTML Element from the click (this)
+*/
+function validRemove(el) {
+	var highestRequirement = 0;
+	var list = el.parentNode.parentNode.getElementsByTagName('li');
+	for (var i=0; i<list.length; i++) {
+		if (list[i] != el && list[i].className == 'tal_passive' && list[i].childNodes[0].style.marginTop == mTop) {
+			if (list[i].dataset.req > highestRequirement) {
+				highestRequirement = list[i].dataset.req;
+			}
+		}
+	}
+	if (highestRequirement > (nbElements(el) - 2) && highestRequirement != 0) {
+		return false;
+	} else {
+		return true;
+	}
+}
+
+
+/* ====================
+	URL / LINK RELATED
+==================== */
+
+/*
+	Highlight the active skills from URL parameters
+	@t 		: 	The parameter element for the trees (17 digits)
+	@node 	: 	The HTML node that include the active skills elements
+*/
+function highlightActiveSkills(t, node) {
+	for (var i=1; i<12; i++) {
+		if (parseInt(t[i]) == 1) {
+			var el = node.childNodes[i-1];
+			var img = el.getElementsByTagName('img');
+			img[0].style.marginTop = mTop;
+			points--;
+		}
+	}
+	updatePoints();
+}
+
+/*
+	Highlight the passive skills from URL parameters
+	@t 		: 	The parameter element for the trees (17 digits)
+	@node 	: 	The HTML node that include the passive skills elements
+*/
+function highlightPassiveSkills(t, node) {
+	for (var i=12; i<17; i++) {
+		if (parseInt(t[i]) == 1) {
+			var el = node.childNodes[i-12];
+			var img = el.getElementsByTagName('img');
+			img[0].style.marginTop = mTop;
+			points--;
+		}
+	}
+	updatePoints();
+}
+
+/*
+	Returns the "number" of the skill's tree selected
+	@el 	: 	HTML node of the SELECT
+*/
+function countSkillTree(el) {
+	var select = el.childNodes[0];
+	var i=0;
+	var bool = false;
+	while (i<select.childNodes.length && !bool) {
+		if (select.childNodes[i].selected) {
+			bool = true;
+		}
+		i++;
+	}
+	if (bool = false) {
+		return 0;
+	} else {
+		// -2 because we iterate i one more every time 
+		// and because of the text element in the select
+		return i-2;
+	}
+}
+
+/*
+	Create the parameter's string
+	@el 	: 	HTML node of the skill tree selected
+	@nb 	: 	Number of the childnode's (0 active / 1 passive)
+*/
+function createParameterString(el, nb) {
+	var node = el.childNodes[nb];
+	var s = '';
+	for (var i=0; i<node.childNodes.length; i++) {
+		if (node.childNodes[i].getElementsByTagName('img')[0].style.marginTop == mTop) {
+			s += '1';
+		} else {
+			s += '0';
+		}
+	}
+	return s;
+}
+
+/*
+	Return the string parameter of the skills selected within the tree
+	@el 	: 	HTML node of the skill tree selected
+*/
+function countSkills(el) {
+	var aStr = createParameterString(el, 0); // Active skills
+	var pStr = createParameterString(el, 1); // Passive skills
+	return aStr + pStr;
+}
+
+/*
+	Create the link to "save" the build
+*/
+function createLink() {
+	var dom = document.getElementById('tal_box');
+	var urlParam = '';
+
+	// Create the 3 block of the parameter
+	for (var i=0; i<3; i++) {
+		var tree = dom.childNodes[1+i];
+		var nbTree = countSkillTree(tree.childNodes[0]);
+		var skillString = countSkills(tree.childNodes[nbTree+2]);
+		if (i<2) {
+			urlParam += nbTree.toString() + skillString + 'x';
+		} else {
+			urlParam += nbTree.toString() + skillString;
+		}
+		
+	}
+
+	// Display the link
+	var url = window.location.protocol + '//' +
+		window.location.host + 
+		window.location.pathname +
+		'?talCode=' + urlParam;
+	document.getElementById('tal_buildLink').innerHTML = '<a href="' + url + '">' +
+		url + '</a>';
+}
+
+/*
+	Display particular build link if there is an URL parameter (talCode)
+*/
+window.onload = function () {
+	if (document.URL.indexOf('talCode=') > 0) {
+		var tab = document.URL.split('=')[1].split('x');
+		var dom = document.getElementById('tal_box');
+
+		for (var i=0; i<tab.length; i++) {
+			// Display a particular tree
+			var t = tab[i].split('');
+			var tree = dom.childNodes[1+i];
+			var el = tree.childNodes[parseInt(t[0])+2];
+			el.style.display = 'inline';
+
+			// Lock and display the select accordingly
+			tree.childNodes[0].childNodes[0].childNodes[parseInt(t[0])+1].selected = true;
+			lock(tree.childNodes[0].childNodes[0].childNodes[parseInt(t[0])+1].value);
+			
+			// Highlight the particular skills in that tree
+			var nodeA = el.childNodes[0]; // Active skills
+			var nodeP = el.childNodes[1]; // Passive skills
+			highlightActiveSkills(t, nodeA);
+			highlightPassiveSkills(t, nodeP);
+		}
+	}
+}