235 lines
8 KiB
HTML
235 lines
8 KiB
HTML
<link rel="stylesheet" type="text/css" href="/css/character-talents.css">
|
|
{{> icons }}
|
|
<script type="application/javascript">
|
|
const aowow_tooltips = { "renamelinks": true, };
|
|
</script>
|
|
<script type="application/javascript" src="{{aowow}}/static/widgets/power.js"></script>
|
|
|
|
{{> character-header }}
|
|
|
|
<div id="talent-template" class="iconmedium icontalent empty">
|
|
<div class="icon"></div>
|
|
<div class="border"></div>
|
|
<div class="icon-border"></div>
|
|
<a target="_blank"></a>
|
|
</div>
|
|
|
|
<div id="talent-tree-template" class="talent-tree column is-full-touch is-one-quarter-desktop">
|
|
<div class="header">
|
|
<img class="image">
|
|
<span class="name is-size-4"></span>
|
|
<span class="points is-size-5"></span>
|
|
</div>
|
|
<div class="cols">
|
|
<div class="col"></div>
|
|
<div class="col"></div>
|
|
<div class="col"></div>
|
|
<div class="col"></div>
|
|
</div>
|
|
</div>
|
|
|
|
<div id="spec-links" class="is-size-4">
|
|
<a href="#0" id="link-spec-0" class="is-block-touch">Primary specialization</a>
|
|
<span class="is-hidden-touch"> | </span>
|
|
<a href="#1" id="link-spec-1" class="is-block-touch">Secondary specialization</a>
|
|
</div>
|
|
|
|
<div id="talents-spec-0" class="columns talents-spec is-multiline has-text-centered">
|
|
<div class="column is-one-quarter-desktop">
|
|
<span class="is-size-4">Glyphs</span>
|
|
<div class="glyphs"></div>
|
|
</div>
|
|
</div>
|
|
<div id="talents-spec-1" class="columns talents-spec is-multiline has-text-centered hidden">
|
|
<div class="column is-one-quarter-desktop">
|
|
<span class="is-size-4">Glyphs</span>
|
|
<div class="glyphs"></div>
|
|
</div>
|
|
</div>
|
|
|
|
<div style="display: none;">
|
|
<!-- Hackfix for aowow's tooltip opening when the page loads -->
|
|
<a href="{{aowow}}/?spell=10"></a>
|
|
</div>
|
|
|
|
<script type="application/javascript">
|
|
const talentsData = JSON.parse(`{{{data}}}`);
|
|
|
|
for (let spec = 0; spec < 2; ++spec) {
|
|
const $spec = $(`#talents-spec-${spec}`);
|
|
|
|
let nbLearned = 0;
|
|
for (const tree of talentsData.trees) {
|
|
const learned = {};
|
|
for (const talent of talentsData.talents[spec]) {
|
|
for (const s of tree.spells) {
|
|
const ranks = [s.spellRank0, s.spellRank1, s.spellRank2, s.spellRank3, s.spellRank4];
|
|
const idx = ranks.indexOf(talent);
|
|
if (idx === -1) {
|
|
continue;
|
|
}
|
|
learned[s.id] = {
|
|
spell: s,
|
|
rank: idx + 1,
|
|
};
|
|
++nbLearned;
|
|
break;
|
|
}
|
|
}
|
|
|
|
const $tree = $("#talent-tree-template")
|
|
.clone(false)
|
|
.removeAttr("id")
|
|
.appendTo($spec);
|
|
$tree.find(".header .image").attr("src", `{{aowow}}/static/images/wow/icons/medium/${tree.icon}.jpg`);
|
|
$tree.find(".header .name").text(tree.name);
|
|
|
|
createTree(tree, learned, $tree[0]);
|
|
}
|
|
|
|
if (nbLearned === 0 && spec !== 0) {
|
|
$spec.addClass("hidden");
|
|
$("#spec-links").hide();
|
|
continue;
|
|
}
|
|
|
|
const $glyphs = $spec.find(".glyphs");
|
|
for (const spell of talentsData.glyphs[spec]) {
|
|
const $a = $("<a>");
|
|
$a.attr("href", `{{aowow}}?spell=${spell}`);
|
|
$glyphs.append($a);
|
|
$glyphs.append("<br>");
|
|
}
|
|
$glyphs.parent().appendTo($spec);
|
|
}
|
|
|
|
function createTree(data, learnedTalents, container) {
|
|
const $columns = $(container).find(".col");
|
|
let points = 0;
|
|
|
|
for (let i = 0; i < 4; ++i) {
|
|
const nbRows = Math.max(...data.spells.filter(s => s.columnIndex === i).map(s => s.tierId));
|
|
const $column = $columns.eq(i);
|
|
if (nbRows < 0) {
|
|
// Remove empty column
|
|
$column.remove();
|
|
continue;
|
|
}
|
|
for (let j = 0; j <= nbRows; ++j) {
|
|
$("<div>")
|
|
.addClass("iconmedium")
|
|
.appendTo($column);
|
|
}
|
|
}
|
|
|
|
for (const spell of data.spells) {
|
|
const $column = $columns.eq(spell.columnIndex);
|
|
const $placeholder = $column.find(".iconmedium").eq(spell.tierId);
|
|
const $template = $("#talent-template");
|
|
const $talent = $template.clone(false);
|
|
$talent.removeAttr("id");
|
|
$talent.find(".icon").css("background-image", `url("{{aowow}}/static/images/wow/icons/medium/${spell.icon}.jpg")`);
|
|
const rank = spell.id in learnedTalents ? (learnedTalents[spell.id].rank - 1) : 0;
|
|
$talent.find("a").attr("href", `{{aowow}}/?spell=${spell["spellRank" + rank]}`);
|
|
$talent.data("id", spell.id);
|
|
|
|
if (spell.id in learnedTalents) {
|
|
points += learnedTalents[spell.id].rank;
|
|
const ranks = [spell.spellRank0, spell.spellRank1, spell.spellRank2, spell.spellRank3, spell.spellRank4].filter(r => r !== 0).length;
|
|
const maxRank = learnedTalents[spell.id].rank === ranks;
|
|
$talent
|
|
.removeClass("empty")
|
|
.addClass(maxRank ? "full" : "notfull");
|
|
$talent.attr("rank", `${learnedTalents[spell.id].rank}/${ranks}`);
|
|
$talent.data("rank", learnedTalents[spell.id].rank);
|
|
}
|
|
|
|
$placeholder.replaceWith($talent);
|
|
}
|
|
|
|
// Add arrows
|
|
for (let i = 0; i < 4; ++i) {
|
|
const $column = $columns.eq(i);
|
|
for (const icon of $column.find(".iconmedium")) {
|
|
const $icon = $(icon);
|
|
const spell = data.spells.find(s => s.id === $icon.data("id"));
|
|
if (spell === undefined || spell.prereqTalent0 === 0) {
|
|
continue;
|
|
}
|
|
const req = data.spells.find(s => s.id === spell.prereqTalent0);
|
|
if (req === undefined) {
|
|
continue;
|
|
}
|
|
if (req.columnIndex === spell.columnIndex) {
|
|
// Down
|
|
const height = (44 + 14) * (spell.tierId - req.tierId - 1) + 25;
|
|
const arrowFile = $icon.data("rank") > 0 ? "2" : "";
|
|
createArrow(15, height, 16, undefined, -(height - 8), "down" + arrowFile, "center bottom", $icon);
|
|
} else if (req.tierId === spell.tierId && req.columnIndex < spell.columnIndex) {
|
|
// Right
|
|
const width = (44 + 14) * (spell.columnIndex - req.columnIndex - 1) + 23;
|
|
const arrowFile = $icon.data("rank") > 0 ? "2" : "";
|
|
createArrow(width, 15, -(width - 8), undefined, 16, "right" + arrowFile, "right center", $icon);
|
|
} else if (req.tierId === spell.tierId && req.columnIndex > spell.columnIndex) {
|
|
// Left
|
|
const width = (44 + 14) * (req.columnIndex - spell.columnIndex - 1) + 23;
|
|
const arrowFile = $icon.data("rank") > 0 ? "2" : "";
|
|
createArrow(width, 15, undefined, -(width - 8), 16, "left" + arrowFile, "left center", $icon)
|
|
} else if (req.tierId < spell.tierId && req.columnIndex < spell.columnIndex) {
|
|
// Right Down
|
|
const width = 44 * (spell.columnIndex - req.columnIndex) + 2;
|
|
const left = -((44 + 14) * (spell.columnIndex - req.columnIndex - 1) + 15);
|
|
const top = -((44 + 14) * (spell.tierId - req.tierId) - 14);
|
|
const arrowFile = $icon.data("rank") > 0 ? "2" : "";
|
|
createArrow(width, 15, left, undefined, top, "rightdown" + arrowFile, "right center", $icon);
|
|
|
|
const height = (44 + 14) * (spell.tierId - req.tierId - 1) + 40;
|
|
createArrow(15, height, 16, undefined, -(height - 8), "down" + arrowFile, "center bottom", $icon);
|
|
} else {
|
|
// Left Down
|
|
const width = 44 * (req.columnIndex - spell.columnIndex) - 1;
|
|
const right = -((44 + 14) * (req.columnIndex - spell.columnIndex - 1) + 15);
|
|
const top = -((44 + 14) * (spell.tierId - req.tierId) - 14);
|
|
const arrowFile = $icon.data("rank") > 0 ? "2" : "";
|
|
createArrow(width, 15, undefined, right, top, "leftdown" + arrowFile, "left center", $icon);
|
|
|
|
const height = (44 + 14) * (spell.tierId - req.tierId - 1) + 40;
|
|
createArrow(15, height, 16, undefined, -(height - 8), "down" + arrowFile, "center bottom", $icon);
|
|
}
|
|
}
|
|
}
|
|
|
|
$(container).find(".header .points").text(points);
|
|
}
|
|
|
|
function createArrow(width, height, left, right, top, file, bgPos, container) {
|
|
const $arrow = $("<div>");
|
|
$arrow.css("position", "absolute");
|
|
if (left !== undefined) {
|
|
$arrow.css("left", `${left}px`);
|
|
}
|
|
if (right !== undefined) {
|
|
$arrow.css("right", `${right}px`);
|
|
}
|
|
$arrow.css("top", `${top}px`);
|
|
$arrow.css("width", `${width}px`);
|
|
$arrow.css("height", `${height}px`);
|
|
$arrow.css("background-image", `url("{{aowow}}/static/images/TalentCalc/arrows/${file}.png")`);
|
|
$arrow.css("background-position", bgPos);
|
|
$(container).append($arrow);
|
|
}
|
|
|
|
$("#link-spec-0").on("click", () => {
|
|
$("#talents-spec-0").removeClass("hidden");
|
|
$("#talents-spec-1").addClass("hidden");
|
|
});
|
|
|
|
$("#link-spec-1").on("click", () => {
|
|
$("#talents-spec-1").removeClass("hidden");
|
|
$("#talents-spec-0").addClass("hidden");
|
|
});
|
|
|
|
if (location.hash === "#1") {
|
|
$("#link-spec-1").click();
|
|
}
|
|
</script>
|