1
|
<?
|
2
|
class Skilltree {
|
3
|
|
4
|
function getSkillTree(SimpleXMLElement $xml){
|
5
|
$skills = array();
|
6
|
|
7
|
foreach($xml->skills->children() as $node){
|
8
|
$name = (string) $node->getName();
|
9
|
$level = (int) $node;
|
10
|
$skills[$name]=$level;
|
11
|
}
|
12
|
ksort($skills);
|
13
|
|
14
|
|
15
|
$arr=array();
|
16
|
foreach($skills as $name => $level){
|
17
|
if($level<=20) $max=20;
|
18
|
elseif($level<=50) $max=50;
|
19
|
elseif($level<=100)$max=100;
|
20
|
elseif($level<=150)$max=150;
|
21
|
elseif($level<=200)$max=200;
|
22
|
else $max=250;
|
23
|
$arr[$name]=array('level' => $level, 'max_level'=>$max, 'childs' => array(), 'is_root'=>true);
|
24
|
|
25
|
for($i=strlen($name)-1;$i>0;$i--){
|
26
|
$sub=substr($name, 0, $i);
|
27
|
if(isset($arr[$sub])){
|
28
|
unset($arr[$name]['is_root']);
|
29
|
$arr[$sub]['childs'][$name]=&$arr[$name];
|
30
|
break;
|
31
|
}
|
32
|
}
|
33
|
}
|
34
|
|
35
|
|
36
|
$tree = array(
|
37
|
'sf' => $arr['sf'],
|
38
|
'sm' => $arr['sm'],
|
39
|
'sc' => $arr['sc'],
|
40
|
'sh' => $arr['sh'],
|
41
|
);
|
42
|
return $tree;
|
43
|
}
|
44
|
}
|
45
|
|
46
|
|
47
|
* Example:
|
48
|
*
|
49
|
<?
|
50
|
$tree = SkillTree::getSkilltree($xml);
|
51
|
|
52
|
echo '<div id="skillTree">';
|
53
|
display_tree($tree);
|
54
|
echo '</div>';
|
55
|
|
56
|
function display_tree($childs){
|
57
|
global $api;
|
58
|
echo '<ul>';
|
59
|
foreach($childs as $key => $node){
|
60
|
$txt=$api->translate($key.'.skill', 'en');
|
61
|
// check if skill is finished, or is not
|
62
|
if(empty($node['childs']) && $node['level']!=250){
|
63
|
$class=" unfinished";
|
64
|
}else{
|
65
|
$class=' finished';
|
66
|
}
|
67
|
echo '<li><span class="node'.$class.'">'.$txt.
|
68
|
'<span class="skill-level">'.$node['level'].'/'.$node['max_level'].'</span>'.
|
69
|
'</span>';
|
70
|
if(!empty($node['childs'])){
|
71
|
display_tree($node['childs']);
|
72
|
}
|
73
|
echo '</li>';
|
74
|
}
|
75
|
echo '</ul>';
|
76
|
}
|
77
|
?>
|
78
|
<style type="text/css">
|
79
|
.node { width: 160px; height: 30px; border: 1px solid black; display: block;
|
80
|
margin: 1px; font-size: 10px; text-align: center; color: white}
|
81
|
.skill-level {float: right}
|
82
|
.hover {background-color: #abcdef}
|
83
|
.finished {background-color: #747f1f}
|
84
|
.finished .skill-level { display: none}
|
85
|
.unfinished{background-color: #8a5617}
|
86
|
</style>
|
87
|
|
88
|
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.3/jquery.min.js"></script>
|
89
|
<script type="text/javascript">
|
90
|
// <![CDATA[
|
91
|
$(function(){
|
92
|
$("#skillTree").find(".node").css("cursor","pointer").click(function(){
|
93
|
// show next branch
|
94
|
$(this).parent().find(">ul").toggle();
|
95
|
}).end().find("li>ul").hide();
|
96
|
|
97
|
$("#skillTree .node").hover(function(){
|
98
|
$(this).addClass("hover");
|
99
|
},function(){
|
100
|
$(this).removeClass("hover");
|
101
|
})
|
102
|
});
|
103
|
// ]]>
|
104
|
</script>
|
105
|
*/
|
106
|
|
107
|
|