-
Notifications
You must be signed in to change notification settings - Fork 0
/
Copy pathindex.html
131 lines (124 loc) · 5.04 KB
/
index.html
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Chronicon</title>
<link rel="stylesheet" href="css/reset.css" />
<link href="https://fonts.googleapis.com/css?family=Alegreya+Sans" rel="stylesheet">
<link rel="stylesheet" href="css/style.css" />
</head>
<body>
<header>
<h1 class="title">Chronicon Skill Tree Tool</h1>
</header>
<main>
<div class="tool-container">
<select>
<option>Warlock</option>
</select>
<div class="skill-tree"></div>
<div class="character"></div>
</div>
</main>
<footer>
<p>© RJ Industries 2017</p>
</footer>
</body>
<script src="js/jquery-3.2.1.min.js"></script>
<script src="js/js.js"></script>
<script>
document.oncontextmenu = function() {
return false;
};
$(() => {
const skillTree = $('.skill-tree');
function populateSkills() {
let newMastery;
for (const mastery in warlockMastery) {
const currentMastery = warlockMastery[mastery];
newMastery = new $('<div />');
newMastery.addClass('mastery');
const newContainer = new $('<div />');
newContainer.addClass('skills-container');
for (const skill in currentMastery) {
const divContainer = new $('<div />');
divContainer.addClass('skill');
const imgSrc = currentMastery[skill].image;
const skillImg = new $('<img />', {'src': imgSrc} );
skillImg.addClass('skill-img');
skillImg.attr('alt', skill);
skillImg.attr('max', currentMastery[skill].maxRank);
skillImg.attr('mastery', mastery);
skillImg.attr('skill', skill);
skillImg.attr('character', 'warlockMastery');
divContainer.append(skillImg);
const counter = new $('<p />');
counter.html('0');
divContainer.append(counter);
newContainer.append(divContainer);
}
newMastery.append(newContainer);
skillTree.append(newMastery);
}
}
function populateCharacter() {
const characterContainer = $('.character');
characterContainer.empty();
for(const attribute in characterWarlock) {
if(attribute === 'name') {
const label = new $('<p />', {text: characterWarlock[attribute]});
characterContainer.append(label)
} else {
const data = characterWarlock[attribute]();
const stat = new $('<p />', {text: `${data.name}: ${data.value}`});
characterContainer.append(stat);
}
}
}
$(document).on('click', '.skill-img', function(e) {
let current = parseInt($(this).next().html());
let rowCurrent = parseInt($(this).parent().parent().children(':first-child').children(':first-child').next().html());
if(current < $(this).attr('max') && ($(this).attr('max')) !== undefined) {
if($(this).parent().prev().children(':last-child').html() === '0' && ($(this).parent().prev().children(':first-child').attr('max')) !== undefined){
alert('Skill into previous skill')
} else {
current += 1;
rowCurrent += 1;
$(this).next().html(current);
$(this).parent().parent().children(':first-child').children(':first-child').next().html(rowCurrent);
const skillMastery = $(this).attr('mastery');
const skillName = $(this).attr('skill');
const character = $(this).attr('character');
window[character][skillMastery][skillName].currentRank += 1;
window[character][skillMastery][Object.keys(window[character][skillMastery])[0]].currentRank += 1;
}
}
populateCharacter();
});
$(document).on('mousedown', '.skill-img', function(e){
if(e.which === 3) {
let current = parseInt($(this).next().html());
let rowCurrent = parseInt($(this).parent().parent().children(':first-child').children(':first-child').next().html());
if(current > 0 && ($(this).attr('max')) !== undefined) {
if($(this).parent().next().children(':first-child').next().html() > 0 && current === 1) {
alert('Cannot remove until skills to the right are empty')
} else {
current -= 1;
rowCurrent -= 1;
$(this).next().html(current);
$(this).parent().parent().children(':first-child').children(':first-child').next().html(rowCurrent);
const skillMastery = $(this).attr('mastery');
const skillName = $(this).attr('skill');
const character = $(this).attr('character');
window[character][skillMastery][skillName].currentRank -= 1;
window[character][skillMastery][Object.keys(window[character][skillMastery])[0]].currentRank -= 1;
}
}
}
populateCharacter();
});
populateSkills();
populateCharacter();
});
</script>
</html>