Merge pull request #23 from r-o-b-o-t-o/fix/add-on-loads
This commit is contained in:
Axel Cocat
GitHub
commit
c95ad80e3f
7 changed files with 742 additions and 728 deletions
|
|
@ -14,7 +14,7 @@ config.json
|
|||
.env
|
||||
|
||||
# Log files
|
||||
*.log
|
||||
logs/
|
||||
|
||||
# Git folder
|
||||
.git/
|
||||
|
|
|
|||
|
|
@ -69,192 +69,194 @@
|
|||
</div>
|
||||
|
||||
<script type="application/javascript">
|
||||
let achievementsData = {};
|
||||
let $openCategory;
|
||||
const $achievementTemplate = $("#achievement-template").detach().removeAttr("id");
|
||||
const $progressTemplate = $("#progress-template").detach().removeAttr("id");
|
||||
$(window).on("load", () => {
|
||||
let achievementsData = {};
|
||||
let $openCategory;
|
||||
const $achievementTemplate = $("#achievement-template").detach().removeAttr("id");
|
||||
const $progressTemplate = $("#progress-template").detach().removeAttr("id");
|
||||
|
||||
function makeCategoryLink(cat) {
|
||||
const $a = $("<a>")
|
||||
.attr("href", "#")
|
||||
.text(cat.nameLang0)
|
||||
.on("click", () => {
|
||||
if ($openCategory !== undefined && $openCategory !== $a && !$openCategory.data("children")[0].contains($a[0])) {
|
||||
closeCategory();
|
||||
}
|
||||
function makeCategoryLink(cat) {
|
||||
const $a = $("<a>")
|
||||
.attr("href", "#")
|
||||
.text(cat.nameLang0)
|
||||
.on("click", () => {
|
||||
if ($openCategory !== undefined && $openCategory !== $a && !$openCategory.data("children")[0].contains($a[0])) {
|
||||
closeCategory();
|
||||
}
|
||||
|
||||
const $children = $a.data("children");
|
||||
if ($children !== undefined) {
|
||||
$openCategory = $a;
|
||||
if (!$children.is(":visible")) {
|
||||
// Open the clicked category
|
||||
$children.slideDown();
|
||||
const $children = $a.data("children");
|
||||
if ($children !== undefined) {
|
||||
$openCategory = $a;
|
||||
if (!$children.is(":visible")) {
|
||||
// Open the clicked category
|
||||
$children.slideDown();
|
||||
}
|
||||
}
|
||||
openCategory(cat);
|
||||
return false;
|
||||
});
|
||||
return $a;
|
||||
}
|
||||
|
||||
function makeAchievement(achievement) {
|
||||
const isEarned = achievement.id in achievementsData.earned;
|
||||
if (!isEarned && achievement.category === 81) {
|
||||
// Show unlocked feats of strength only
|
||||
return;
|
||||
}
|
||||
|
||||
const $achievement = $achievementTemplate
|
||||
.clone(false)
|
||||
.appendTo($("#achievements"));
|
||||
$achievement.find(".name").text(achievement.title);
|
||||
$achievement.find(".description").text(achievement.description);
|
||||
$achievement.find(".points .value").text(achievement.points);
|
||||
if (achievement.points === 0) {
|
||||
$achievement.find(".points").addClass("no-points");
|
||||
}
|
||||
$achievement.find(".iconlarge .icon").css("background-image", `url("{{aowow}}/static/images/wow/icons/large/${achievement.icon}.jpg")`);
|
||||
$achievement.find("a").attr("href", `{{aowow}}?achievement=${achievement.id}`);
|
||||
|
||||
if (isEarned) {
|
||||
const date = new Date(achievementsData.earned[achievement.id] * 1000);
|
||||
$achievement.find(".earned-date").text(date.toLocaleDateString());
|
||||
$achievement.addClass("earned");
|
||||
}
|
||||
|
||||
return $achievement;
|
||||
}
|
||||
|
||||
function openCategory(cat) {
|
||||
const categoryAchievements = achievementsData.achievements.filter(ach => ach.category === cat.id);
|
||||
|
||||
$("#achievements").empty();
|
||||
$(".summary").hide();
|
||||
|
||||
for (const achievement of categoryAchievements) {
|
||||
makeAchievement(achievement);
|
||||
}
|
||||
}
|
||||
|
||||
function closeCategory() {
|
||||
if ($openCategory === undefined || $openCategory.data("children") === undefined) {
|
||||
return;
|
||||
}
|
||||
|
||||
$openCategory
|
||||
.data("children")
|
||||
.slideUp();
|
||||
}
|
||||
|
||||
function openSummary() {
|
||||
closeCategory();
|
||||
$("#achievements").empty();
|
||||
const achievements = Object.keys(achievementsData.earned)
|
||||
.filter(key => achievementsData.earned.hasOwnProperty(key))
|
||||
.map(key => parseInt(key, 10))
|
||||
.map(achievement => {
|
||||
return {
|
||||
achievement,
|
||||
...achievementsData.earned[achievement],
|
||||
};
|
||||
});
|
||||
const mostRecent = achievements.sort((a, b) => b.date - a.date).slice(0, 4);
|
||||
for (const row of mostRecent) {
|
||||
const achievement = achievementsData.achievements.find(ach => ach.id === row.achievement);
|
||||
makeAchievement(achievement);
|
||||
}
|
||||
|
||||
$(".summary").show();
|
||||
}
|
||||
|
||||
function makeProgressBarRow(barsData) {
|
||||
const $row = $("<div>").addClass("columns");
|
||||
$("#progress-bars").append($row);
|
||||
|
||||
for (const bar of barsData) {
|
||||
let $bar = $progressTemplate.clone(false);
|
||||
$bar.find(".title").text(bar.name);
|
||||
$bar.find(".value").text(`${bar.earned} / ${bar.total}`);
|
||||
$bar.find(".progress").attr("value", bar.earned).attr("max", bar.total);
|
||||
$row.append($bar);
|
||||
}
|
||||
|
||||
return $row;
|
||||
}
|
||||
|
||||
function makeProgressBars() {
|
||||
let totalAchievements = 0;
|
||||
let totalAchievementsEarned = 0;
|
||||
|
||||
const findProgress = (catId) => {
|
||||
const cat = achievementsData.categories.find(cat => cat.id === catId);
|
||||
const subCategories = achievementsData.categories.filter(cat => cat.parent === catId);
|
||||
const categoryAchievements = achievementsData.achievements.filter(ach => ach.category === cat.id || subCategories.some(cat => cat.id === ach.category));
|
||||
let earned = 0;
|
||||
for (const ach of categoryAchievements) {
|
||||
if (ach.id in achievementsData.earned) {
|
||||
++earned;
|
||||
}
|
||||
}
|
||||
openCategory(cat);
|
||||
return false;
|
||||
});
|
||||
return $a;
|
||||
}
|
||||
totalAchievementsEarned += earned;
|
||||
totalAchievements += categoryAchievements.length;
|
||||
|
||||
function makeAchievement(achievement) {
|
||||
const isEarned = achievement.id in achievementsData.earned;
|
||||
if (!isEarned && achievement.category === 81) {
|
||||
// Show unlocked feats of strength only
|
||||
return;
|
||||
}
|
||||
|
||||
const $achievement = $achievementTemplate
|
||||
.clone(false)
|
||||
.appendTo($("#achievements"));
|
||||
$achievement.find(".name").text(achievement.title);
|
||||
$achievement.find(".description").text(achievement.description);
|
||||
$achievement.find(".points .value").text(achievement.points);
|
||||
if (achievement.points === 0) {
|
||||
$achievement.find(".points").addClass("no-points");
|
||||
}
|
||||
$achievement.find(".iconlarge .icon").css("background-image", `url("{{aowow}}/static/images/wow/icons/large/${achievement.icon}.jpg")`);
|
||||
$achievement.find("a").attr("href", `{{aowow}}?achievement=${achievement.id}`);
|
||||
|
||||
if (isEarned) {
|
||||
const date = new Date(achievementsData.earned[achievement.id] * 1000);
|
||||
$achievement.find(".earned-date").text(date.toLocaleDateString());
|
||||
$achievement.addClass("earned");
|
||||
}
|
||||
|
||||
return $achievement;
|
||||
}
|
||||
|
||||
function openCategory(cat) {
|
||||
const categoryAchievements = achievementsData.achievements.filter(ach => ach.category === cat.id);
|
||||
|
||||
$("#achievements").empty();
|
||||
$(".summary").hide();
|
||||
|
||||
for (const achievement of categoryAchievements) {
|
||||
makeAchievement(achievement);
|
||||
}
|
||||
}
|
||||
|
||||
function closeCategory() {
|
||||
if ($openCategory === undefined || $openCategory.data("children") === undefined) {
|
||||
return;
|
||||
}
|
||||
|
||||
$openCategory
|
||||
.data("children")
|
||||
.slideUp();
|
||||
}
|
||||
|
||||
function openSummary() {
|
||||
closeCategory();
|
||||
$("#achievements").empty();
|
||||
const achievements = Object.keys(achievementsData.earned)
|
||||
.filter(key => achievementsData.earned.hasOwnProperty(key))
|
||||
.map(key => parseInt(key, 10))
|
||||
.map(achievement => {
|
||||
return {
|
||||
achievement,
|
||||
...achievementsData.earned[achievement],
|
||||
name: cat.nameLang0,
|
||||
earned,
|
||||
total: categoryAchievements.length,
|
||||
};
|
||||
});
|
||||
const mostRecent = achievements.sort((a, b) => b.date - a.date).slice(0, 4);
|
||||
for (const row of mostRecent) {
|
||||
const achievement = achievementsData.achievements.find(ach => ach.id === row.achievement);
|
||||
makeAchievement(achievement);
|
||||
}
|
||||
|
||||
$(".summary").show();
|
||||
}
|
||||
|
||||
function makeProgressBarRow(barsData) {
|
||||
const $row = $("<div>").addClass("columns");
|
||||
$("#progress-bars").append($row);
|
||||
|
||||
for (const bar of barsData) {
|
||||
let $bar = $progressTemplate.clone(false);
|
||||
$bar.find(".title").text(bar.name);
|
||||
$bar.find(".value").text(`${bar.earned} / ${bar.total}`);
|
||||
$bar.find(".progress").attr("value", bar.earned).attr("max", bar.total);
|
||||
$row.append($bar);
|
||||
}
|
||||
|
||||
return $row;
|
||||
}
|
||||
|
||||
function makeProgressBars() {
|
||||
let totalAchievements = 0;
|
||||
let totalAchievementsEarned = 0;
|
||||
|
||||
const findProgress = (catId) => {
|
||||
const cat = achievementsData.categories.find(cat => cat.id === catId);
|
||||
const subCategories = achievementsData.categories.filter(cat => cat.parent === catId);
|
||||
const categoryAchievements = achievementsData.achievements.filter(ach => ach.category === cat.id || subCategories.some(cat => cat.id === ach.category));
|
||||
let earned = 0;
|
||||
for (const ach of categoryAchievements) {
|
||||
if (ach.id in achievementsData.earned) {
|
||||
++earned;
|
||||
}
|
||||
}
|
||||
totalAchievementsEarned += earned;
|
||||
totalAchievements += categoryAchievements.length;
|
||||
|
||||
return {
|
||||
name: cat.nameLang0,
|
||||
earned,
|
||||
total: categoryAchievements.length,
|
||||
};
|
||||
};
|
||||
makeProgressBarRow([{ ...findProgress(92) }, { ...findProgress(96) }]);
|
||||
makeProgressBarRow([{ ...findProgress(97) }, { ...findProgress(95) }]);
|
||||
makeProgressBarRow([{ ...findProgress(168) }, { ...findProgress(169) }]);
|
||||
makeProgressBarRow([{ ...findProgress(201) }, { ...findProgress(155) }]);
|
||||
const $totalRow = makeProgressBarRow([{ name: "Achievements Earned", earned: totalAchievementsEarned, total: totalAchievements }]);
|
||||
$totalRow.prependTo($("#progress-bars")); // Move the total bar to the top
|
||||
}
|
||||
makeProgressBarRow([{ ...findProgress(92) }, { ...findProgress(96) }]);
|
||||
makeProgressBarRow([{ ...findProgress(97) }, { ...findProgress(95) }]);
|
||||
makeProgressBarRow([{ ...findProgress(168) }, { ...findProgress(169) }]);
|
||||
makeProgressBarRow([{ ...findProgress(201) }, { ...findProgress(155) }]);
|
||||
const $totalRow = makeProgressBarRow([{ name: "Achievements Earned", earned: totalAchievementsEarned, total: totalAchievements }]);
|
||||
$totalRow.prependTo($("#progress-bars")); // Move the total bar to the top
|
||||
}
|
||||
|
||||
$.getJSON(`{{websiteRoot}}/character/{{realm}}/{{guid}}/achievements/data`, (data) => {
|
||||
achievementsData = data;
|
||||
$.getJSON(`{{websiteRoot}}/character/{{realm}}/{{guid}}/achievements/data`, (data) => {
|
||||
achievementsData = data;
|
||||
|
||||
const $summaryLink = $("<a>")
|
||||
.attr("href", "#")
|
||||
.text("Summary")
|
||||
.on("click", openSummary)
|
||||
.appendTo($("#categories"));
|
||||
const $summaryLink = $("<a>")
|
||||
.attr("href", "#")
|
||||
.text("Summary")
|
||||
.on("click", openSummary)
|
||||
.appendTo($("#categories"));
|
||||
|
||||
for (const cat of achievementsData.categories.filter(c => c.parent < 0)) {
|
||||
if (cat.id === 1) {
|
||||
// Skip Statistics category
|
||||
continue;
|
||||
}
|
||||
const children = achievementsData.categories.filter(c => c.parent === cat.id);
|
||||
|
||||
const $cat = makeCategoryLink(cat);
|
||||
$("#categories").append($cat);
|
||||
|
||||
if (children.length > 0) {
|
||||
const $children = $("<div>")
|
||||
.hide()
|
||||
.addClass("subcategories");
|
||||
$cat.data("children", $children);
|
||||
for (const child of children) {
|
||||
const $child = makeCategoryLink(child);
|
||||
$child.appendTo($children);
|
||||
for (const cat of achievementsData.categories.filter(c => c.parent < 0)) {
|
||||
if (cat.id === 1) {
|
||||
// Skip Statistics category
|
||||
continue;
|
||||
}
|
||||
const children = achievementsData.categories.filter(c => c.parent === cat.id);
|
||||
|
||||
$("#categories").append($children);
|
||||
const $cat = makeCategoryLink(cat);
|
||||
$("#categories").append($cat);
|
||||
|
||||
if (children.length > 0) {
|
||||
const $children = $("<div>")
|
||||
.hide()
|
||||
.addClass("subcategories");
|
||||
$cat.data("children", $children);
|
||||
for (const child of children) {
|
||||
const $child = makeCategoryLink(child);
|
||||
$child.appendTo($children);
|
||||
}
|
||||
|
||||
$("#categories").append($children);
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
let totalPoints = 0;
|
||||
for (const ach of achievementsData.achievements) {
|
||||
if (ach.id in achievementsData.earned) {
|
||||
totalPoints += ach.points;
|
||||
let totalPoints = 0;
|
||||
for (const ach of achievementsData.achievements) {
|
||||
if (ach.id in achievementsData.earned) {
|
||||
totalPoints += ach.points;
|
||||
}
|
||||
}
|
||||
}
|
||||
$("#total-points").text(totalPoints);
|
||||
$("#total-points").text(totalPoints);
|
||||
|
||||
makeProgressBars();
|
||||
openSummary();
|
||||
makeProgressBars();
|
||||
openSummary();
|
||||
});
|
||||
});
|
||||
</script>
|
||||
|
|
|
|||
|
|
@ -36,7 +36,9 @@
|
|||
</div>
|
||||
|
||||
<script type="application/javascript">
|
||||
{{#each arenaTeams}}
|
||||
createArenaEmblem({{this.type}}, {{{JSONstringify this.emblem}}}, $(".arena-team[data-team-id={{this.id}}] .arena-emblem")[0]);
|
||||
{{/each}}
|
||||
$(window).on("load", () => {
|
||||
{{#each arenaTeams}}
|
||||
createArenaEmblem({{this.type}}, {{{JSONstringify this.emblem}}}, $(".arena-team[data-team-id={{this.id}}] .arena-emblem")[0]);
|
||||
{{/each}}
|
||||
});
|
||||
</script>
|
||||
|
|
|
|||
|
|
@ -3,7 +3,6 @@
|
|||
<script type="application/javascript">
|
||||
const aowow_tooltips = { "renamelinks": true, };
|
||||
</script>
|
||||
<script type="application/javascript" src="{{aowow}}/static/widgets/power.js"></script>
|
||||
|
||||
{{> character-header }}
|
||||
|
||||
|
|
@ -47,189 +46,193 @@
|
|||
</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 = {{{JSONstringify data}}};
|
||||
$(window).on("load", () => {
|
||||
const talentsData = {{{JSONstringify data}}};
|
||||
|
||||
for (let spec = 0; spec < 2; ++spec) {
|
||||
const $spec = $(`#talents-spec-${spec}`);
|
||||
function createTree(data, learnedTalents, container) {
|
||||
const $columns = $(container).find(".col");
|
||||
let points = 0;
|
||||
|
||||
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) {
|
||||
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;
|
||||
}
|
||||
learned[s.id] = {
|
||||
spell: s,
|
||||
rank: idx + 1,
|
||||
};
|
||||
++nbLearned;
|
||||
break;
|
||||
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);
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
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]);
|
||||
$(container).find(".header .points").text(points);
|
||||
}
|
||||
|
||||
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;
|
||||
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`);
|
||||
}
|
||||
for (let j = 0; j <= nbRows; ++j) {
|
||||
$("<div>")
|
||||
.addClass("iconmedium")
|
||||
.appendTo($column);
|
||||
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);
|
||||
}
|
||||
|
||||
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);
|
||||
function main() {
|
||||
for (let spec = 0; spec < 2; ++spec) {
|
||||
const $spec = $(`#talents-spec-${spec}`);
|
||||
|
||||
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);
|
||||
}
|
||||
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;
|
||||
}
|
||||
}
|
||||
|
||||
$placeholder.replaceWith($talent);
|
||||
}
|
||||
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);
|
||||
|
||||
// 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) {
|
||||
createTree(tree, learned, $tree[0]);
|
||||
}
|
||||
|
||||
if (nbLearned === 0 && spec !== 0) {
|
||||
$spec.addClass("hidden");
|
||||
$("#spec-links").hide();
|
||||
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);
|
||||
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);
|
||||
}
|
||||
}
|
||||
|
||||
$(container).find(".header .points").text(points);
|
||||
}
|
||||
$("#link-spec-0").on("click", () => {
|
||||
$("#talents-spec-0").removeClass("hidden");
|
||||
$("#talents-spec-1").addClass("hidden");
|
||||
});
|
||||
|
||||
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-1").on("click", () => {
|
||||
$("#talents-spec-1").removeClass("hidden");
|
||||
$("#talents-spec-0").addClass("hidden");
|
||||
});
|
||||
|
||||
$("#link-spec-0").on("click", () => {
|
||||
$("#talents-spec-0").removeClass("hidden");
|
||||
$("#talents-spec-1").addClass("hidden");
|
||||
if (location.hash === "#1") {
|
||||
$("#link-spec-1").click();
|
||||
}
|
||||
|
||||
$("<script>")
|
||||
.attr("src", "{{aowow}}/static/widgets/power.js")
|
||||
.appendTo("body");
|
||||
}
|
||||
main();
|
||||
});
|
||||
|
||||
$("#link-spec-1").on("click", () => {
|
||||
$("#talents-spec-1").removeClass("hidden");
|
||||
$("#talents-spec-0").addClass("hidden");
|
||||
});
|
||||
|
||||
if (location.hash === "#1") {
|
||||
$("#link-spec-1").click();
|
||||
}
|
||||
</script>
|
||||
|
|
|
|||
|
|
@ -71,346 +71,349 @@
|
|||
</div>
|
||||
|
||||
<script type="application/javascript">
|
||||
const $model = $("#model");
|
||||
const $itemSlotTemplate = $("#item-slot-template").detach().removeAttr("id");
|
||||
const $mountTemplate = $("#mount-template").detach().removeAttr("id");
|
||||
$(window).on("load", () => {
|
||||
const $model = $("#model");
|
||||
const $itemSlotTemplate = $("#item-slot-template").detach().removeAttr("id");
|
||||
const $mountTemplate = $("#mount-template").detach().removeAttr("id");
|
||||
|
||||
window.WH = {
|
||||
//debug: console.log,
|
||||
debug: () => { },
|
||||
};
|
||||
window.WH = {
|
||||
//debug: console.log,
|
||||
debug: () => { },
|
||||
};
|
||||
|
||||
const charData = {{{ JSONstringify data }}};
|
||||
const races = {
|
||||
1: "human",
|
||||
2: "orc",
|
||||
3: "dwarf",
|
||||
4: "nightelf",
|
||||
5: "scourge",
|
||||
6: "tauren",
|
||||
7: "gnome",
|
||||
8: "troll",
|
||||
10: "bloodelf",
|
||||
11: "draenei",
|
||||
};
|
||||
const genders = ["male", "female"];
|
||||
const charData = {{{ JSONstringify data }}};
|
||||
const races = {
|
||||
1: "human",
|
||||
2: "orc",
|
||||
3: "dwarf",
|
||||
4: "nightelf",
|
||||
5: "scourge",
|
||||
6: "tauren",
|
||||
7: "gnome",
|
||||
8: "troll",
|
||||
10: "bloodelf",
|
||||
11: "draenei",
|
||||
};
|
||||
const genders = ["male", "female"];
|
||||
|
||||
if (Cookies.get("disable-3d-viewer") === "1") {
|
||||
$("#3d-viewer-options").hide();
|
||||
} else {
|
||||
$("#cb-enable-3d-viewer").prop("checked", true);
|
||||
}
|
||||
$("#cb-enable-3d-viewer").change(() => {
|
||||
const enabled = $("#cb-enable-3d-viewer").prop("checked");
|
||||
|
||||
if (enabled) {
|
||||
Cookies.remove("disable-3d-viewer");
|
||||
createViewer();
|
||||
$("#3d-viewer-options").slideDown("fast");
|
||||
} else {
|
||||
Cookies.set("disable-3d-viewer", "1");
|
||||
viewer?.destroy();
|
||||
$("#3d-viewer-options").slideUp("fast");
|
||||
}
|
||||
});
|
||||
|
||||
const hideHelm = (charData.flags & 0x0400) === 0x0400;
|
||||
$("#cb-hide-helmet").prop("checked", hideHelm);
|
||||
const hideCloak = (charData.flags & 0x0800) === 0x0800;
|
||||
$("#cb-hide-cloak").prop("checked", hideCloak);
|
||||
|
||||
$("#cb-hide-helmet").change(() => {
|
||||
const hide = $("#cb-hide-helmet").prop("checked");
|
||||
setSlotVisible(1, !hide);
|
||||
});
|
||||
$("#cb-hide-cloak").change(() => {
|
||||
const hide = $("#cb-hide-cloak").prop("checked");
|
||||
setSlotVisible(16, !hide);
|
||||
});
|
||||
$("#cb-hide-tabard").change(() => {
|
||||
const hide = $("#cb-hide-tabard").prop("checked");
|
||||
setSlotVisible(19, !hide);
|
||||
});
|
||||
if (charData.characterModelTransmogs === undefined) {
|
||||
$("#cb-hide-transmogs").parent().hide();
|
||||
}
|
||||
$("#cb-hide-transmogs").change(() => {
|
||||
const hide = $("#cb-hide-transmogs").prop("checked");
|
||||
const items = hide ? charData.characterModelItems : charData.characterModelTransmogs;
|
||||
for (const slot of (items.map((item) => item[0]))) {
|
||||
clearSlots([slot]);
|
||||
}
|
||||
|
||||
const hideHelm = $("#cb-hide-helmet").prop("checked");
|
||||
const hideCloak = $("#cb-hide-cloak").prop("checked");
|
||||
setItems(items.filter(item => !((item[0] === 1 && hideHelm) || (item[0] === 16 && hideCloak))));
|
||||
});
|
||||
|
||||
let viewer;
|
||||
function createViewer() {
|
||||
if (Cookies.get("disable-3d-viewer") === "1") {
|
||||
return;
|
||||
}
|
||||
|
||||
viewer?.destroy();
|
||||
viewer = new ZamModelViewer(characterModel);
|
||||
const isLoadedInterval = setInterval(() => {
|
||||
if (viewer.method("isLoaded")) {
|
||||
clearInterval(isLoadedInterval);
|
||||
setBackground("background.png");
|
||||
}
|
||||
}, 100);
|
||||
}
|
||||
|
||||
function setSlotVisible(slot, visible) {
|
||||
if (visible) {
|
||||
const transmogged = !$("#cb-hide-transmogs").prop("checked");
|
||||
const items = transmogged ? charData.characterModelTransmogs : charData.characterModelItems;
|
||||
const item = items.find(([sl, appearance]) => sl === slot);
|
||||
if (item !== undefined) {
|
||||
setItems([item]);
|
||||
}
|
||||
$("#3d-viewer-options").hide();
|
||||
} else {
|
||||
clearSlots([slot]);
|
||||
$("#cb-enable-3d-viewer").prop("checked", true);
|
||||
}
|
||||
}
|
||||
$("#cb-enable-3d-viewer").change(() => {
|
||||
const enabled = $("#cb-enable-3d-viewer").prop("checked");
|
||||
|
||||
function clearSlots(slots) {
|
||||
viewer.method("clearSlots", slots.join(","));
|
||||
characterModel.items = characterModel.items.filter(item => !slots.includes(item[0]));
|
||||
}
|
||||
|
||||
function setItems(items) {
|
||||
const data = items.map(([slot, display]) => {
|
||||
return {
|
||||
slot,
|
||||
display,
|
||||
};
|
||||
});
|
||||
viewer.method("setItems", [data]);
|
||||
|
||||
characterModel.items = characterModel.items.filter(item => !items.some(item2 => item[0] === item2[0]));
|
||||
characterModel.items.push(...items);
|
||||
}
|
||||
|
||||
function createItemSlot(item, invSlot, icon, quality, rel, container) {
|
||||
const $item = $itemSlotTemplate.clone();
|
||||
$item
|
||||
.data("icon", icon)
|
||||
.data("quality", quality)
|
||||
.find(".inventory-slot")
|
||||
.css("background-image", `url("{{websiteRoot}}/img/inventory-slot/${invSlot}.png")`);
|
||||
if (item !== undefined) {
|
||||
$item.data("item", item);
|
||||
$item.find("a").attr("href", `{{aowow}}/?item=${item}`);
|
||||
$item.find("a").attr("rel", rel);
|
||||
}
|
||||
$item.appendTo($(container));
|
||||
}
|
||||
const invSlotContainers = [
|
||||
{ element: "#equipment-col-left", slots: [0, 1, 2, 14, 4, 3, 18, 8] },
|
||||
{ element: "#equipment-col-right", slots: [9, 5, 6, 7, 10, 11, 12, 13] },
|
||||
{ element: "#equipment-bottom", slots: [15, 16, 17] }
|
||||
];
|
||||
for (const side of invSlotContainers) {
|
||||
for (const slot of side.slots) {
|
||||
const item = charData.equipment.find(item => item.slot === slot);
|
||||
const rel = [];
|
||||
if (item !== undefined) {
|
||||
rel.push("pcs=" + charData.equipment.map(item => item.itemEntry).join(":"));
|
||||
if (item.gems.length !== 0) {
|
||||
rel.push("gems=" + item.gems.join(":"));
|
||||
}
|
||||
if (item.enchantments.length !== 0) {
|
||||
rel.push("ench=" + item.enchantments.join(":"));
|
||||
}
|
||||
if (item.randomPropertyId !== 0) {
|
||||
rel.push("rand=" + item.randomPropertyId);
|
||||
}
|
||||
}
|
||||
createItemSlot(item?.itemEntry, slot, item?.icon?.toLowerCase(), item?.quality, rel.join("&"), side.element);
|
||||
}
|
||||
}
|
||||
const nbItemRows = Math.max($("#equipment-col-left").children().length, $("#equipment-col-right").children().length);
|
||||
|
||||
function onResize(init = false) {
|
||||
const iconSize = $(".icon-size:visible").data("icon-size");
|
||||
const iconSizePx = iconSize === "medium" ? 44 : 68;
|
||||
|
||||
$("#model-container").css("height", (iconSizePx * nbItemRows) + "px");
|
||||
|
||||
$(".item-slot")
|
||||
.removeClass("iconmedium iconlarge")
|
||||
.addClass(`icon${iconSize}`)
|
||||
.each((idx, el) => {
|
||||
const $item = $(el);
|
||||
const item = $item.data("item");
|
||||
const icon = $item.data("icon");
|
||||
const quality = $item.data("quality");
|
||||
if (item !== undefined) {
|
||||
$item.find(".icon").css("background-image", `url("{{aowow}}/static/images/wow/icons/${iconSize}/${icon}.jpg")`);
|
||||
}
|
||||
if (quality !== undefined) {
|
||||
$item.find(".border").css("background-image", `url("{{websiteRoot}}/img/icon-border/${iconSize}/q${quality}.png")`);
|
||||
}
|
||||
});
|
||||
|
||||
if (!init) {
|
||||
characterModel.aspect = $model.outerWidth() / $model.outerHeight();
|
||||
createViewer();
|
||||
}
|
||||
}
|
||||
onResize(true);
|
||||
|
||||
function setMount(mountId) {
|
||||
if (characterModel.mount.id === mountId) {
|
||||
return;
|
||||
}
|
||||
|
||||
if (mountId !== 0) {
|
||||
const mainHand = charData.equipment.find(e => e.slot === 15);
|
||||
const offHand = charData.equipment.find(e => e.slot === 16);
|
||||
const ranged = charData.equipment.find(e => e.slot === 17);
|
||||
|
||||
characterModel.charCustomization.sheathMain = sheathTypes[mainHand.classId][mainHand.subclassId];
|
||||
if (offHand !== undefined) {
|
||||
characterModel.charCustomization.sheathOff = sheathTypes[offHand.classId][offHand.subclassId];
|
||||
} else if (ranged !== undefined) {
|
||||
characterModel.charCustomization.sheathOff = sheathTypes[ranged.classId][ranged.subclassId];
|
||||
if (enabled) {
|
||||
Cookies.remove("disable-3d-viewer");
|
||||
createViewer();
|
||||
$("#3d-viewer-options").slideDown("fast");
|
||||
} else {
|
||||
Cookies.set("disable-3d-viewer", "1");
|
||||
viewer?.destroy();
|
||||
$("#3d-viewer-options").slideUp("fast");
|
||||
}
|
||||
});
|
||||
|
||||
const hideHelm = (charData.flags & 0x0400) === 0x0400;
|
||||
$("#cb-hide-helmet").prop("checked", hideHelm);
|
||||
const hideCloak = (charData.flags & 0x0800) === 0x0800;
|
||||
$("#cb-hide-cloak").prop("checked", hideCloak);
|
||||
|
||||
$("#cb-hide-helmet").change(() => {
|
||||
const hide = $("#cb-hide-helmet").prop("checked");
|
||||
setSlotVisible(1, !hide);
|
||||
});
|
||||
$("#cb-hide-cloak").change(() => {
|
||||
const hide = $("#cb-hide-cloak").prop("checked");
|
||||
setSlotVisible(16, !hide);
|
||||
});
|
||||
$("#cb-hide-tabard").change(() => {
|
||||
const hide = $("#cb-hide-tabard").prop("checked");
|
||||
setSlotVisible(19, !hide);
|
||||
});
|
||||
if (charData.characterModelTransmogs === undefined) {
|
||||
$("#cb-hide-transmogs").parent().hide();
|
||||
}
|
||||
$("#cb-hide-transmogs").change(() => {
|
||||
const hide = $("#cb-hide-transmogs").prop("checked");
|
||||
const items = hide ? charData.characterModelItems : charData.characterModelTransmogs;
|
||||
for (const slot of (items.map((item) => item[0]))) {
|
||||
clearSlots([slot]);
|
||||
}
|
||||
|
||||
const hideHelm = $("#cb-hide-helmet").prop("checked");
|
||||
const hideCloak = $("#cb-hide-cloak").prop("checked");
|
||||
setItems(items.filter(item => !((item[0] === 1 && hideHelm) || (item[0] === 16 && hideCloak))));
|
||||
});
|
||||
|
||||
let viewer;
|
||||
function createViewer() {
|
||||
if (Cookies.get("disable-3d-viewer") === "1") {
|
||||
return;
|
||||
}
|
||||
|
||||
viewer?.destroy();
|
||||
viewer = new ZamModelViewer(characterModel);
|
||||
const isLoadedInterval = setInterval(() => {
|
||||
if (viewer.method("isLoaded")) {
|
||||
clearInterval(isLoadedInterval);
|
||||
setBackground("background.png");
|
||||
}
|
||||
}, 100);
|
||||
}
|
||||
|
||||
function setSlotVisible(slot, visible) {
|
||||
if (visible) {
|
||||
const transmogged = !$("#cb-hide-transmogs").prop("checked");
|
||||
const items = transmogged ? charData.characterModelTransmogs : charData.characterModelItems;
|
||||
const item = items.find(([sl, appearance]) => sl === slot);
|
||||
if (item !== undefined) {
|
||||
setItems([item]);
|
||||
}
|
||||
} else {
|
||||
clearSlots([slot]);
|
||||
}
|
||||
}
|
||||
|
||||
function clearSlots(slots) {
|
||||
viewer.method("clearSlots", slots.join(","));
|
||||
characterModel.items = characterModel.items.filter(item => !slots.includes(item[0]));
|
||||
}
|
||||
|
||||
function setItems(items) {
|
||||
const data = items.map(([slot, display]) => {
|
||||
return {
|
||||
slot,
|
||||
display,
|
||||
};
|
||||
});
|
||||
viewer.method("setItems", [data]);
|
||||
|
||||
characterModel.items = characterModel.items.filter(item => !items.some(item2 => item[0] === item2[0]));
|
||||
characterModel.items.push(...items);
|
||||
}
|
||||
|
||||
function createItemSlot(item, invSlot, icon, quality, rel, container) {
|
||||
const $item = $itemSlotTemplate.clone();
|
||||
$item
|
||||
.data("icon", icon)
|
||||
.data("quality", quality)
|
||||
.find(".inventory-slot")
|
||||
.css("background-image", `url("{{websiteRoot}}/img/inventory-slot/${invSlot}.png")`);
|
||||
if (item !== undefined) {
|
||||
$item.data("item", item);
|
||||
$item.find("a").attr("href", `{{aowow}}/?item=${item}`);
|
||||
$item.find("a").attr("rel", rel);
|
||||
}
|
||||
$item.appendTo($(container));
|
||||
}
|
||||
const invSlotContainers = [
|
||||
{ element: "#equipment-col-left", slots: [0, 1, 2, 14, 4, 3, 18, 8] },
|
||||
{ element: "#equipment-col-right", slots: [9, 5, 6, 7, 10, 11, 12, 13] },
|
||||
{ element: "#equipment-bottom", slots: [15, 16, 17] }
|
||||
];
|
||||
for (const side of invSlotContainers) {
|
||||
for (const slot of side.slots) {
|
||||
const item = charData.equipment.find(item => item.slot === slot);
|
||||
const rel = [];
|
||||
if (item !== undefined) {
|
||||
rel.push("pcs=" + charData.equipment.map(item => item.itemEntry).join(":"));
|
||||
if (item.gems.length !== 0) {
|
||||
rel.push("gems=" + item.gems.join(":"));
|
||||
}
|
||||
if (item.enchantments.length !== 0) {
|
||||
rel.push("ench=" + item.enchantments.join(":"));
|
||||
}
|
||||
if (item.randomPropertyId !== 0) {
|
||||
rel.push("rand=" + item.randomPropertyId);
|
||||
}
|
||||
}
|
||||
createItemSlot(item?.itemEntry, slot, item?.icon?.toLowerCase(), item?.quality, rel.join("&"), side.element);
|
||||
}
|
||||
}
|
||||
const nbItemRows = Math.max($("#equipment-col-left").children().length, $("#equipment-col-right").children().length);
|
||||
|
||||
function onResize(init = false) {
|
||||
const iconSize = $(".icon-size:visible").data("icon-size");
|
||||
const iconSizePx = iconSize === "medium" ? 44 : 68;
|
||||
|
||||
$("#model-container").css("height", (iconSizePx * nbItemRows) + "px");
|
||||
|
||||
$(".item-slot")
|
||||
.removeClass("iconmedium iconlarge")
|
||||
.addClass(`icon${iconSize}`)
|
||||
.each((idx, el) => {
|
||||
const $item = $(el);
|
||||
const item = $item.data("item");
|
||||
const icon = $item.data("icon");
|
||||
const quality = $item.data("quality");
|
||||
if (item !== undefined) {
|
||||
$item.find(".icon").css("background-image", `url("{{aowow}}/static/images/wow/icons/${iconSize}/${icon}.jpg")`);
|
||||
}
|
||||
if (quality !== undefined) {
|
||||
$item.find(".border").css("background-image", `url("{{websiteRoot}}/img/icon-border/${iconSize}/q${quality}.png")`);
|
||||
}
|
||||
});
|
||||
|
||||
if (!init) {
|
||||
characterModel.aspect = $model.outerWidth() / $model.outerHeight();
|
||||
createViewer();
|
||||
}
|
||||
}
|
||||
onResize(true);
|
||||
|
||||
function setMount(mountId) {
|
||||
if (characterModel.mount.id === mountId) {
|
||||
return;
|
||||
}
|
||||
|
||||
if (mountId !== 0) {
|
||||
const mainHand = charData.equipment.find(e => e.slot === 15);
|
||||
const offHand = charData.equipment.find(e => e.slot === 16);
|
||||
const ranged = charData.equipment.find(e => e.slot === 17);
|
||||
|
||||
characterModel.charCustomization.sheathMain = sheathTypes[mainHand.classId][mainHand.subclassId];
|
||||
if (offHand !== undefined) {
|
||||
characterModel.charCustomization.sheathOff = sheathTypes[offHand.classId][offHand.subclassId];
|
||||
} else if (ranged !== undefined) {
|
||||
characterModel.charCustomization.sheathOff = sheathTypes[ranged.classId][ranged.subclassId];
|
||||
} else {
|
||||
characterModel.charCustomization.sheathOff = -1;
|
||||
}
|
||||
|
||||
if (characterModel.charCustomization.sheathMain === undefined) {
|
||||
characterModel.charCustomization.sheathMain = 0;
|
||||
}
|
||||
if (characterModel.charCustomization.sheathOff === undefined) {
|
||||
characterModel.charCustomization.sheathOff = 0;
|
||||
}
|
||||
} else {
|
||||
characterModel.charCustomization.sheathMain = -1;
|
||||
characterModel.charCustomization.sheathOff = -1;
|
||||
}
|
||||
|
||||
if (characterModel.charCustomization.sheathMain === undefined) {
|
||||
characterModel.charCustomization.sheathMain = 0;
|
||||
}
|
||||
if (characterModel.charCustomization.sheathOff === undefined) {
|
||||
characterModel.charCustomization.sheathOff = 0;
|
||||
characterModel.mount.id = mountId;
|
||||
createViewer();
|
||||
}
|
||||
|
||||
function setBackground(file) {
|
||||
if (!viewer) {
|
||||
return;
|
||||
}
|
||||
|
||||
const originalContentPath = viewer.options.contentPath;
|
||||
viewer.options.contentPath = "{{websiteRoot}}/data/";
|
||||
viewer.options.background = file;
|
||||
viewer.renderer.loadBackground();
|
||||
viewer.options.contentPath = originalContentPath;
|
||||
viewer.options.background = undefined;
|
||||
}
|
||||
|
||||
if (charData.mounts.length === 0) {
|
||||
$("#mounts-container").hide();
|
||||
} else {
|
||||
characterModel.charCustomization.sheathMain = -1;
|
||||
characterModel.charCustomization.sheathOff = -1;
|
||||
}
|
||||
|
||||
characterModel.mount.id = mountId;
|
||||
createViewer();
|
||||
}
|
||||
|
||||
function setBackground(file) {
|
||||
if (!viewer) {
|
||||
return;
|
||||
}
|
||||
|
||||
const originalContentPath = viewer.options.contentPath;
|
||||
viewer.options.contentPath = "{{websiteRoot}}/data/";
|
||||
viewer.options.background = file;
|
||||
viewer.renderer.loadBackground();
|
||||
viewer.options.contentPath = originalContentPath;
|
||||
}
|
||||
|
||||
if (charData.mounts.length === 0) {
|
||||
$("#mounts-container").hide();
|
||||
} else {
|
||||
const $dismount = $mountTemplate.clone();
|
||||
$dismount.find(".icon").css("background-image", `url("{{websiteRoot}}/img/UI-GearManager-LeaveItem.png")`);
|
||||
$dismount.find("a")
|
||||
.on("click", () => {
|
||||
setMount(0);
|
||||
return false;
|
||||
});
|
||||
$("#mounts").append($dismount);
|
||||
|
||||
for (const mount of charData.mounts) {
|
||||
const $mount = $mountTemplate.clone();
|
||||
$mount.find(".icon").css("background-image", `url("{{aowow}}/static/images/wow/icons/medium/${mount.icon}.jpg")`);
|
||||
$mount.find("a")
|
||||
.attr("href", `{{aowow}}/?spell=${mount.spell}`)
|
||||
const $dismount = $mountTemplate.clone();
|
||||
$dismount.find(".icon").css("background-image", `url("{{websiteRoot}}/img/UI-GearManager-LeaveItem.png")`);
|
||||
$dismount.find("a")
|
||||
.on("click", () => {
|
||||
setMount(mount.creatureDisplayId);
|
||||
setMount(0);
|
||||
return false;
|
||||
});
|
||||
$("#mounts").append($mount);
|
||||
$("#mounts").append($dismount);
|
||||
|
||||
for (const mount of charData.mounts) {
|
||||
const $mount = $mountTemplate.clone();
|
||||
$mount.find(".icon").css("background-image", `url("{{aowow}}/static/images/wow/icons/medium/${mount.icon}.jpg")`);
|
||||
$mount.find("a")
|
||||
.attr("href", `{{aowow}}/?spell=${mount.spell}`)
|
||||
.on("click", () => {
|
||||
setMount(mount.creatureDisplayId);
|
||||
return false;
|
||||
});
|
||||
$("#mounts").append($mount);
|
||||
}
|
||||
}
|
||||
}
|
||||
$("#btn-mounts").on("click", () => {
|
||||
$("#mounts").slideToggle("fast");
|
||||
});
|
||||
$("#btn-mounts").on("click", () => {
|
||||
$("#mounts").slideToggle("fast");
|
||||
});
|
||||
|
||||
const sheathTypes = {
|
||||
2: {
|
||||
// One handed weapons
|
||||
0: 3,
|
||||
4: 3,
|
||||
7: 3,
|
||||
14: 3,
|
||||
15: 3,
|
||||
17: 3,
|
||||
20: 3,
|
||||
const sheathTypes = {
|
||||
2: {
|
||||
// One handed weapons
|
||||
0: 3,
|
||||
4: 3,
|
||||
7: 3,
|
||||
14: 3,
|
||||
15: 3,
|
||||
17: 3,
|
||||
20: 3,
|
||||
|
||||
// Two handed weapons
|
||||
1: 1,
|
||||
5: 1,
|
||||
8: 1,
|
||||
// Two handed weapons
|
||||
1: 1,
|
||||
5: 1,
|
||||
8: 1,
|
||||
|
||||
// Others
|
||||
10: 2, // Staff
|
||||
6: 1, // Polearm
|
||||
2: 4, // Bow
|
||||
3: 4, // Gun
|
||||
18: 4, // Crossbow
|
||||
13: 0, // Fist weapons
|
||||
19: 3, // Wand
|
||||
20: 1, // Fishing pole
|
||||
},
|
||||
4: {
|
||||
0: 3, // Held in off-hand
|
||||
6: 9, // Shield
|
||||
},
|
||||
};
|
||||
|
||||
const characterModel = {
|
||||
type: ZamModelViewer.WOW,
|
||||
contentPath: "{{ contentPath }}",
|
||||
container: $model,
|
||||
hd: true,
|
||||
aspect: $model.outerWidth() / $model.outerHeight(),
|
||||
charCustomization: {
|
||||
race: charData.race,
|
||||
gender: charData.gender,
|
||||
options: charData.customizationOptions,
|
||||
sheathMain: -1,
|
||||
sheathOff: -1,
|
||||
},
|
||||
cls: charData.class,
|
||||
items: (charData.characterModelTransmogs ?? charData.characterModelItems).filter(item => !((item[0] === 1 && hideHelm) || (item[0] === 16 && hideCloak))),
|
||||
models: {
|
||||
type: ZamModelViewer.Wow.Types.CHARACTER,
|
||||
id: `${races[charData.race]}${genders[charData.gender]}`,
|
||||
},
|
||||
mount: {
|
||||
type: ZamModelViewer.Wow.Types.NPC,
|
||||
id: 0,
|
||||
},
|
||||
};
|
||||
createViewer();
|
||||
|
||||
function debounce(func, timeout) {
|
||||
let timer;
|
||||
return (...args) => {
|
||||
clearTimeout(timer);
|
||||
timer = setTimeout(() => { func.apply(this, args); }, timeout);
|
||||
// Others
|
||||
10: 2, // Staff
|
||||
6: 1, // Polearm
|
||||
2: 4, // Bow
|
||||
3: 4, // Gun
|
||||
18: 4, // Crossbow
|
||||
13: 0, // Fist weapons
|
||||
19: 3, // Wand
|
||||
20: 1, // Fishing pole
|
||||
},
|
||||
4: {
|
||||
0: 3, // Held in off-hand
|
||||
6: 9, // Shield
|
||||
},
|
||||
};
|
||||
}
|
||||
|
||||
let windowWidth = $(window).width();
|
||||
$(window).resize(debounce(() => {
|
||||
const newWidth = $(window).width();
|
||||
if (windowWidth === newWidth) {
|
||||
// Do nothing if only the height changed.
|
||||
// This prevents triggering a resize when the navigation bar moves on mobile when scrolling.
|
||||
return;
|
||||
const characterModel = {
|
||||
type: ZamModelViewer.WOW,
|
||||
contentPath: "{{ contentPath }}",
|
||||
container: $model,
|
||||
hd: true,
|
||||
aspect: $model.outerWidth() / $model.outerHeight(),
|
||||
charCustomization: {
|
||||
race: charData.race,
|
||||
gender: charData.gender,
|
||||
options: charData.customizationOptions,
|
||||
sheathMain: -1,
|
||||
sheathOff: -1,
|
||||
},
|
||||
cls: charData.class,
|
||||
items: (charData.characterModelTransmogs ?? charData.characterModelItems).filter(item => !((item[0] === 1 && hideHelm) || (item[0] === 16 && hideCloak))),
|
||||
models: {
|
||||
type: ZamModelViewer.Wow.Types.CHARACTER,
|
||||
id: `${races[charData.race]}${genders[charData.gender]}`,
|
||||
},
|
||||
mount: {
|
||||
type: ZamModelViewer.Wow.Types.NPC,
|
||||
id: 0,
|
||||
},
|
||||
};
|
||||
createViewer();
|
||||
|
||||
function debounce(func, timeout) {
|
||||
let timer;
|
||||
return (...args) => {
|
||||
clearTimeout(timer);
|
||||
timer = setTimeout(() => { func.apply(this, args); }, timeout);
|
||||
};
|
||||
}
|
||||
windowWidth = newWidth;
|
||||
onResize();
|
||||
}, 500));
|
||||
|
||||
let windowWidth = $(window).width();
|
||||
$(window).resize(debounce(() => {
|
||||
const newWidth = $(window).width();
|
||||
if (windowWidth === newWidth) {
|
||||
// Do nothing if only the height changed.
|
||||
// This prevents triggering a resize when the navigation bar moves on mobile when scrolling.
|
||||
return;
|
||||
}
|
||||
windowWidth = newWidth;
|
||||
onResize();
|
||||
}, 500));
|
||||
});
|
||||
</script>
|
||||
|
|
|
|||
|
|
@ -59,43 +59,45 @@
|
|||
</table>
|
||||
|
||||
<script type="application/javascript">
|
||||
createGuildEmblem({{{ JSONstringify emblem }}}, $(".emblem-container .guild-emblem")[0]);
|
||||
$(window).on("load", () => {
|
||||
createGuildEmblem({{{ JSONstringify emblem }}}, $(".emblem-container .guild-emblem")[0]);
|
||||
|
||||
dt = $("#members").DataTable({
|
||||
processing: true,
|
||||
serverSide: true,
|
||||
searchDelay: 800,
|
||||
ajax: {
|
||||
url: `{{websiteRoot}}/guild/{{realm}}/{{id}}/members`,
|
||||
},
|
||||
columnDefs: [
|
||||
{
|
||||
targets: 0,
|
||||
render: (name) => `<a href="{{websiteRoot}}/character/{{realm}}/${name}">${name}</a>`,
|
||||
dt = $("#members").DataTable({
|
||||
processing: true,
|
||||
serverSide: true,
|
||||
searchDelay: 800,
|
||||
ajax: {
|
||||
url: `{{websiteRoot}}/guild/{{realm}}/{{id}}/members`,
|
||||
},
|
||||
{
|
||||
targets: 1,
|
||||
render: (rank, type, row, meta) => meta.settings.json.ranks[rank],
|
||||
columnDefs: [
|
||||
{
|
||||
targets: 0,
|
||||
render: (name) => `<a href="{{websiteRoot}}/character/{{realm}}/${name}">${name}</a>`,
|
||||
},
|
||||
{
|
||||
targets: 1,
|
||||
render: (rank, type, row, meta) => meta.settings.json.ranks[rank],
|
||||
},
|
||||
{
|
||||
searchable: false,
|
||||
targets: 3,
|
||||
render: data => `<img src="{{aowow}}/static/images/wow/icons/medium/class_${data}.jpg">`,
|
||||
},
|
||||
{
|
||||
searchable: false,
|
||||
targets: 4,
|
||||
render: data => `<img src="{{aowow}}/static/images/wow/icons/medium/race_${data}.jpg">`,
|
||||
},
|
||||
{
|
||||
searchable: false,
|
||||
targets: 5,
|
||||
render: online => online ? "🟢" : "🔴",
|
||||
},
|
||||
],
|
||||
responsive: {
|
||||
details: true,
|
||||
},
|
||||
{
|
||||
searchable: false,
|
||||
targets: 3,
|
||||
render: data => `<img src="{{aowow}}/static/images/wow/icons/medium/class_${data}.jpg">`,
|
||||
},
|
||||
{
|
||||
searchable: false,
|
||||
targets: 4,
|
||||
render: data => `<img src="{{aowow}}/static/images/wow/icons/medium/race_${data}.jpg">`,
|
||||
},
|
||||
{
|
||||
searchable: false,
|
||||
targets: 5,
|
||||
render: online => online ? "🟢" : "🔴",
|
||||
},
|
||||
],
|
||||
responsive: {
|
||||
details: true,
|
||||
},
|
||||
order: [[1, "asc"]],
|
||||
order: [[1, "asc"]],
|
||||
});
|
||||
});
|
||||
</script>
|
||||
|
|
|
|||
|
|
@ -34,49 +34,51 @@
|
|||
</table>
|
||||
|
||||
<script type="application/javascript">
|
||||
let dt;
|
||||
$(window).on("load", () => {
|
||||
let dt;
|
||||
|
||||
$("#select-realm").on("change", () => {
|
||||
dt.draw();
|
||||
});
|
||||
$("#select-realm").on("change", () => {
|
||||
dt.draw();
|
||||
});
|
||||
|
||||
dt = $("#results").DataTable({
|
||||
processing: true,
|
||||
serverSide: true,
|
||||
searchDelay: 800,
|
||||
ajax: {
|
||||
url: `{{websiteRoot}}/search`,
|
||||
data: d => {
|
||||
d.realm = $("#select-realm").val();
|
||||
dt = $("#results").DataTable({
|
||||
processing: true,
|
||||
serverSide: true,
|
||||
searchDelay: 800,
|
||||
ajax: {
|
||||
url: `{{websiteRoot}}/search`,
|
||||
data: d => {
|
||||
d.realm = $("#select-realm").val();
|
||||
},
|
||||
},
|
||||
},
|
||||
columnDefs: [
|
||||
{
|
||||
targets: 0,
|
||||
render: (name, type, row, meta) => `<a href="{{websiteRoot}}/character/${meta.settings.json.realm}/${name}">${name}</a>`,
|
||||
columnDefs: [
|
||||
{
|
||||
targets: 0,
|
||||
render: (name, type, row, meta) => `<a href="{{websiteRoot}}/character/${meta.settings.json.realm}/${name}">${name}</a>`,
|
||||
},
|
||||
{
|
||||
targets: 1,
|
||||
render: (guild, type, row, meta) => guild === null ? "" : `<a href="{{websiteRoot}}/guild/${meta.settings.json.realm}/${guild}">${guild}</a>`,
|
||||
},
|
||||
{
|
||||
searchable: false,
|
||||
targets: 3,
|
||||
render: data => `<img src="{{aowow}}/static/images/wow/icons/medium/class_${data}.jpg">`,
|
||||
},
|
||||
{
|
||||
searchable: false,
|
||||
targets: 4,
|
||||
render: data => `<img src="{{aowow}}/static/images/wow/icons/medium/race_${data}.jpg">`,
|
||||
},
|
||||
{
|
||||
searchable: false,
|
||||
targets: 5,
|
||||
render: online => online ? "🟢" : "🔴",
|
||||
},
|
||||
],
|
||||
responsive: {
|
||||
details: true,
|
||||
},
|
||||
{
|
||||
targets: 1,
|
||||
render: (guild, type, row, meta) => guild === null ? "" : `<a href="{{websiteRoot}}/guild/${meta.settings.json.realm}/${guild}">${guild}</a>`,
|
||||
},
|
||||
{
|
||||
searchable: false,
|
||||
targets: 3,
|
||||
render: data => `<img src="{{aowow}}/static/images/wow/icons/medium/class_${data}.jpg">`,
|
||||
},
|
||||
{
|
||||
searchable: false,
|
||||
targets: 4,
|
||||
render: data => `<img src="{{aowow}}/static/images/wow/icons/medium/race_${data}.jpg">`,
|
||||
},
|
||||
{
|
||||
searchable: false,
|
||||
targets: 5,
|
||||
render: online => online ? "🟢" : "🔴",
|
||||
},
|
||||
],
|
||||
responsive: {
|
||||
details: true,
|
||||
},
|
||||
});
|
||||
});
|
||||
</script>
|
||||
|
|
|
|||
Loading…
Add table
Add a link
Reference in a new issue