0.9 (missing XML)
This commit is contained in:
Mimu
@@ -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);
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
?>
|
||||
@@ -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;}
|
||||
Binary file not shown.
|
After Width: | Height: | Size: 1.5 KiB |
BIN
Binary file not shown.
|
After Width: | Height: | Size: 9.2 KiB |
@@ -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>
|
||||
@@ -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);
|
||||
}
|
||||
}
|
||||
}
|
||||
File diff suppressed because it is too large
Load Diff
Reference in New Issue
Block a user