fix: run js scripts on window load
This commit is contained in:
Axel Cocat
parent
843d5f856c
commit
f34edb0ea0
6 changed files with 740 additions and 727 deletions
|
|
@ -69,192 +69,194 @@
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
<script type="application/javascript">
|
<script type="application/javascript">
|
||||||
let achievementsData = {};
|
$(window).on("load", () => {
|
||||||
let $openCategory;
|
let achievementsData = {};
|
||||||
const $achievementTemplate = $("#achievement-template").detach().removeAttr("id");
|
let $openCategory;
|
||||||
const $progressTemplate = $("#progress-template").detach().removeAttr("id");
|
const $achievementTemplate = $("#achievement-template").detach().removeAttr("id");
|
||||||
|
const $progressTemplate = $("#progress-template").detach().removeAttr("id");
|
||||||
|
|
||||||
function makeCategoryLink(cat) {
|
function makeCategoryLink(cat) {
|
||||||
const $a = $("<a>")
|
const $a = $("<a>")
|
||||||
.attr("href", "#")
|
.attr("href", "#")
|
||||||
.text(cat.nameLang0)
|
.text(cat.nameLang0)
|
||||||
.on("click", () => {
|
.on("click", () => {
|
||||||
if ($openCategory !== undefined && $openCategory !== $a && !$openCategory.data("children")[0].contains($a[0])) {
|
if ($openCategory !== undefined && $openCategory !== $a && !$openCategory.data("children")[0].contains($a[0])) {
|
||||||
closeCategory();
|
closeCategory();
|
||||||
}
|
}
|
||||||
|
|
||||||
const $children = $a.data("children");
|
const $children = $a.data("children");
|
||||||
if ($children !== undefined) {
|
if ($children !== undefined) {
|
||||||
$openCategory = $a;
|
$openCategory = $a;
|
||||||
if (!$children.is(":visible")) {
|
if (!$children.is(":visible")) {
|
||||||
// Open the clicked category
|
// Open the clicked category
|
||||||
$children.slideDown();
|
$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);
|
totalAchievementsEarned += earned;
|
||||||
return false;
|
totalAchievements += categoryAchievements.length;
|
||||||
});
|
|
||||||
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 {
|
return {
|
||||||
achievement,
|
name: cat.nameLang0,
|
||||||
...achievementsData.earned[achievement],
|
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(92) }, { ...findProgress(96) }]);
|
makeProgressBarRow([{ ...findProgress(97) }, { ...findProgress(95) }]);
|
||||||
makeProgressBarRow([{ ...findProgress(97) }, { ...findProgress(95) }]);
|
makeProgressBarRow([{ ...findProgress(168) }, { ...findProgress(169) }]);
|
||||||
makeProgressBarRow([{ ...findProgress(168) }, { ...findProgress(169) }]);
|
makeProgressBarRow([{ ...findProgress(201) }, { ...findProgress(155) }]);
|
||||||
makeProgressBarRow([{ ...findProgress(201) }, { ...findProgress(155) }]);
|
const $totalRow = makeProgressBarRow([{ name: "Achievements Earned", earned: totalAchievementsEarned, total: totalAchievements }]);
|
||||||
const $totalRow = makeProgressBarRow([{ name: "Achievements Earned", earned: totalAchievementsEarned, total: totalAchievements }]);
|
$totalRow.prependTo($("#progress-bars")); // Move the total bar to the top
|
||||||
$totalRow.prependTo($("#progress-bars")); // Move the total bar to the top
|
}
|
||||||
}
|
|
||||||
|
|
||||||
$.getJSON(`{{websiteRoot}}/character/{{realm}}/{{guid}}/achievements/data`, (data) => {
|
$.getJSON(`{{websiteRoot}}/character/{{realm}}/{{guid}}/achievements/data`, (data) => {
|
||||||
achievementsData = data;
|
achievementsData = data;
|
||||||
|
|
||||||
const $summaryLink = $("<a>")
|
const $summaryLink = $("<a>")
|
||||||
.attr("href", "#")
|
.attr("href", "#")
|
||||||
.text("Summary")
|
.text("Summary")
|
||||||
.on("click", openSummary)
|
.on("click", openSummary)
|
||||||
.appendTo($("#categories"));
|
.appendTo($("#categories"));
|
||||||
|
|
||||||
for (const cat of achievementsData.categories.filter(c => c.parent < 0)) {
|
for (const cat of achievementsData.categories.filter(c => c.parent < 0)) {
|
||||||
if (cat.id === 1) {
|
if (cat.id === 1) {
|
||||||
// Skip Statistics category
|
// Skip Statistics category
|
||||||
continue;
|
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);
|
|
||||||
}
|
}
|
||||||
|
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;
|
let totalPoints = 0;
|
||||||
for (const ach of achievementsData.achievements) {
|
for (const ach of achievementsData.achievements) {
|
||||||
if (ach.id in achievementsData.earned) {
|
if (ach.id in achievementsData.earned) {
|
||||||
totalPoints += ach.points;
|
totalPoints += ach.points;
|
||||||
|
}
|
||||||
}
|
}
|
||||||
}
|
$("#total-points").text(totalPoints);
|
||||||
$("#total-points").text(totalPoints);
|
|
||||||
|
|
||||||
makeProgressBars();
|
makeProgressBars();
|
||||||
openSummary();
|
openSummary();
|
||||||
|
});
|
||||||
});
|
});
|
||||||
</script>
|
</script>
|
||||||
|
|
|
||||||
|
|
@ -36,7 +36,9 @@
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
<script type="application/javascript">
|
<script type="application/javascript">
|
||||||
{{#each arenaTeams}}
|
$(window).on("load", () => {
|
||||||
createArenaEmblem({{this.type}}, {{{JSONstringify this.emblem}}}, $(".arena-team[data-team-id={{this.id}}] .arena-emblem")[0]);
|
{{#each arenaTeams}}
|
||||||
{{/each}}
|
createArenaEmblem({{this.type}}, {{{JSONstringify this.emblem}}}, $(".arena-team[data-team-id={{this.id}}] .arena-emblem")[0]);
|
||||||
|
{{/each}}
|
||||||
|
});
|
||||||
</script>
|
</script>
|
||||||
|
|
|
||||||
|
|
@ -3,7 +3,6 @@
|
||||||
<script type="application/javascript">
|
<script type="application/javascript">
|
||||||
const aowow_tooltips = { "renamelinks": true, };
|
const aowow_tooltips = { "renamelinks": true, };
|
||||||
</script>
|
</script>
|
||||||
<script type="application/javascript" src="{{aowow}}/static/widgets/power.js"></script>
|
|
||||||
|
|
||||||
{{> character-header }}
|
{{> character-header }}
|
||||||
|
|
||||||
|
|
@ -47,189 +46,193 @@
|
||||||
</div>
|
</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">
|
<script type="application/javascript">
|
||||||
const talentsData = {{{JSONstringify data}}};
|
$(window).on("load", () => {
|
||||||
|
const talentsData = {{{JSONstringify data}}};
|
||||||
|
|
||||||
for (let spec = 0; spec < 2; ++spec) {
|
function createTree(data, learnedTalents, container) {
|
||||||
const $spec = $(`#talents-spec-${spec}`);
|
const $columns = $(container).find(".col");
|
||||||
|
let points = 0;
|
||||||
|
|
||||||
let nbLearned = 0;
|
for (let i = 0; i < 4; ++i) {
|
||||||
for (const tree of talentsData.trees) {
|
const nbRows = Math.max(...data.spells.filter(s => s.columnIndex === i).map(s => s.tierId));
|
||||||
const learned = {};
|
const $column = $columns.eq(i);
|
||||||
for (const talent of talentsData.talents[spec]) {
|
if (nbRows < 0) {
|
||||||
for (const s of tree.spells) {
|
// Remove empty column
|
||||||
const ranks = [s.spellRank0, s.spellRank1, s.spellRank2, s.spellRank3, s.spellRank4];
|
$column.remove();
|
||||||
const idx = ranks.indexOf(talent);
|
continue;
|
||||||
if (idx === -1) {
|
}
|
||||||
|
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;
|
continue;
|
||||||
}
|
}
|
||||||
learned[s.id] = {
|
const req = data.spells.find(s => s.id === spell.prereqTalent0);
|
||||||
spell: s,
|
if (req === undefined) {
|
||||||
rank: idx + 1,
|
continue;
|
||||||
};
|
}
|
||||||
++nbLearned;
|
if (req.columnIndex === spell.columnIndex) {
|
||||||
break;
|
// 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")
|
$(container).find(".header .points").text(points);
|
||||||
.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) {
|
function createArrow(width, height, left, right, top, file, bgPos, container) {
|
||||||
$spec.addClass("hidden");
|
const $arrow = $("<div>");
|
||||||
$("#spec-links").hide();
|
$arrow.css("position", "absolute");
|
||||||
continue;
|
if (left !== undefined) {
|
||||||
}
|
$arrow.css("left", `${left}px`);
|
||||||
|
|
||||||
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) {
|
if (right !== undefined) {
|
||||||
$("<div>")
|
$arrow.css("right", `${right}px`);
|
||||||
.addClass("iconmedium")
|
|
||||||
.appendTo($column);
|
|
||||||
}
|
}
|
||||||
|
$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) {
|
function main() {
|
||||||
const $column = $columns.eq(spell.columnIndex);
|
for (let spec = 0; spec < 2; ++spec) {
|
||||||
const $placeholder = $column.find(".iconmedium").eq(spell.tierId);
|
const $spec = $(`#talents-spec-${spec}`);
|
||||||
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) {
|
let nbLearned = 0;
|
||||||
points += learnedTalents[spell.id].rank;
|
for (const tree of talentsData.trees) {
|
||||||
const ranks = [spell.spellRank0, spell.spellRank1, spell.spellRank2, spell.spellRank3, spell.spellRank4].filter(r => r !== 0).length;
|
const learned = {};
|
||||||
const maxRank = learnedTalents[spell.id].rank === ranks;
|
for (const talent of talentsData.talents[spec]) {
|
||||||
$talent
|
for (const s of tree.spells) {
|
||||||
.removeClass("empty")
|
const ranks = [s.spellRank0, s.spellRank1, s.spellRank2, s.spellRank3, s.spellRank4];
|
||||||
.addClass(maxRank ? "full" : "notfull");
|
const idx = ranks.indexOf(talent);
|
||||||
$talent.attr("rank", `${learnedTalents[spell.id].rank}/${ranks}`);
|
if (idx === -1) {
|
||||||
$talent.data("rank", learnedTalents[spell.id].rank);
|
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
|
createTree(tree, learned, $tree[0]);
|
||||||
for (let i = 0; i < 4; ++i) {
|
}
|
||||||
const $column = $columns.eq(i);
|
|
||||||
for (const icon of $column.find(".iconmedium")) {
|
if (nbLearned === 0 && spec !== 0) {
|
||||||
const $icon = $(icon);
|
$spec.addClass("hidden");
|
||||||
const spell = data.spells.find(s => s.id === $icon.data("id"));
|
$("#spec-links").hide();
|
||||||
if (spell === undefined || spell.prereqTalent0 === 0) {
|
|
||||||
continue;
|
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;
|
const $glyphs = $spec.find(".glyphs");
|
||||||
createArrow(15, height, 16, undefined, -(height - 8), "down" + arrowFile, "center bottom", $icon);
|
for (const spell of talentsData.glyphs[spec]) {
|
||||||
} else {
|
const $a = $("<a>");
|
||||||
// Left Down
|
$a.attr("href", `{{aowow}}?spell=${spell}`);
|
||||||
const width = 44 * (req.columnIndex - spell.columnIndex) - 1;
|
$glyphs.append($a);
|
||||||
const right = -((44 + 14) * (req.columnIndex - spell.columnIndex - 1) + 15);
|
$glyphs.append("<br>");
|
||||||
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);
|
|
||||||
}
|
}
|
||||||
|
$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) {
|
$("#link-spec-1").on("click", () => {
|
||||||
const $arrow = $("<div>");
|
$("#talents-spec-1").removeClass("hidden");
|
||||||
$arrow.css("position", "absolute");
|
$("#talents-spec-0").addClass("hidden");
|
||||||
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", () => {
|
if (location.hash === "#1") {
|
||||||
$("#talents-spec-0").removeClass("hidden");
|
$("#link-spec-1").click();
|
||||||
$("#talents-spec-1").addClass("hidden");
|
}
|
||||||
|
|
||||||
|
$("<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>
|
</script>
|
||||||
|
|
|
||||||
|
|
@ -71,346 +71,348 @@
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
<script type="application/javascript">
|
<script type="application/javascript">
|
||||||
const $model = $("#model");
|
$(window).on("load", () => {
|
||||||
const $itemSlotTemplate = $("#item-slot-template").detach().removeAttr("id");
|
const $model = $("#model");
|
||||||
const $mountTemplate = $("#mount-template").detach().removeAttr("id");
|
const $itemSlotTemplate = $("#item-slot-template").detach().removeAttr("id");
|
||||||
|
const $mountTemplate = $("#mount-template").detach().removeAttr("id");
|
||||||
|
|
||||||
window.WH = {
|
window.WH = {
|
||||||
//debug: console.log,
|
//debug: console.log,
|
||||||
debug: () => { },
|
debug: () => { },
|
||||||
};
|
};
|
||||||
|
|
||||||
const charData = {{{ JSONstringify data }}};
|
const charData = {{{ JSONstringify data }}};
|
||||||
const races = {
|
const races = {
|
||||||
1: "human",
|
1: "human",
|
||||||
2: "orc",
|
2: "orc",
|
||||||
3: "dwarf",
|
3: "dwarf",
|
||||||
4: "nightelf",
|
4: "nightelf",
|
||||||
5: "scourge",
|
5: "scourge",
|
||||||
6: "tauren",
|
6: "tauren",
|
||||||
7: "gnome",
|
7: "gnome",
|
||||||
8: "troll",
|
8: "troll",
|
||||||
10: "bloodelf",
|
10: "bloodelf",
|
||||||
11: "draenei",
|
11: "draenei",
|
||||||
};
|
};
|
||||||
const genders = ["male", "female"];
|
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") {
|
if (Cookies.get("disable-3d-viewer") === "1") {
|
||||||
return;
|
$("#3d-viewer-options").hide();
|
||||||
}
|
|
||||||
|
|
||||||
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 {
|
} 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) {
|
if (enabled) {
|
||||||
viewer.method("clearSlots", slots.join(","));
|
Cookies.remove("disable-3d-viewer");
|
||||||
characterModel.items = characterModel.items.filter(item => !slots.includes(item[0]));
|
createViewer();
|
||||||
}
|
$("#3d-viewer-options").slideDown("fast");
|
||||||
|
|
||||||
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 {
|
} 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;
|
characterModel.charCustomization.sheathOff = -1;
|
||||||
}
|
}
|
||||||
|
|
||||||
if (characterModel.charCustomization.sheathMain === undefined) {
|
characterModel.mount.id = mountId;
|
||||||
characterModel.charCustomization.sheathMain = 0;
|
createViewer();
|
||||||
}
|
}
|
||||||
if (characterModel.charCustomization.sheathOff === undefined) {
|
|
||||||
characterModel.charCustomization.sheathOff = 0;
|
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 {
|
} else {
|
||||||
characterModel.charCustomization.sheathMain = -1;
|
const $dismount = $mountTemplate.clone();
|
||||||
characterModel.charCustomization.sheathOff = -1;
|
$dismount.find(".icon").css("background-image", `url("{{websiteRoot}}/img/UI-GearManager-LeaveItem.png")`);
|
||||||
}
|
$dismount.find("a")
|
||||||
|
|
||||||
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}`)
|
|
||||||
.on("click", () => {
|
.on("click", () => {
|
||||||
setMount(mount.creatureDisplayId);
|
setMount(0);
|
||||||
return false;
|
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", () => {
|
||||||
$("#btn-mounts").on("click", () => {
|
$("#mounts").slideToggle("fast");
|
||||||
$("#mounts").slideToggle("fast");
|
});
|
||||||
});
|
|
||||||
|
|
||||||
const sheathTypes = {
|
const sheathTypes = {
|
||||||
2: {
|
2: {
|
||||||
// One handed weapons
|
// One handed weapons
|
||||||
0: 3,
|
0: 3,
|
||||||
4: 3,
|
4: 3,
|
||||||
7: 3,
|
7: 3,
|
||||||
14: 3,
|
14: 3,
|
||||||
15: 3,
|
15: 3,
|
||||||
17: 3,
|
17: 3,
|
||||||
20: 3,
|
20: 3,
|
||||||
|
|
||||||
// Two handed weapons
|
// Two handed weapons
|
||||||
1: 1,
|
1: 1,
|
||||||
5: 1,
|
5: 1,
|
||||||
8: 1,
|
8: 1,
|
||||||
|
|
||||||
// Others
|
// Others
|
||||||
10: 2, // Staff
|
10: 2, // Staff
|
||||||
6: 1, // Polearm
|
6: 1, // Polearm
|
||||||
2: 4, // Bow
|
2: 4, // Bow
|
||||||
3: 4, // Gun
|
3: 4, // Gun
|
||||||
18: 4, // Crossbow
|
18: 4, // Crossbow
|
||||||
13: 0, // Fist weapons
|
13: 0, // Fist weapons
|
||||||
19: 3, // Wand
|
19: 3, // Wand
|
||||||
20: 1, // Fishing pole
|
20: 1, // Fishing pole
|
||||||
},
|
},
|
||||||
4: {
|
4: {
|
||||||
0: 3, // Held in off-hand
|
0: 3, // Held in off-hand
|
||||||
6: 9, // Shield
|
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);
|
|
||||||
};
|
};
|
||||||
}
|
|
||||||
|
|
||||||
let windowWidth = $(window).width();
|
const characterModel = {
|
||||||
$(window).resize(debounce(() => {
|
type: ZamModelViewer.WOW,
|
||||||
const newWidth = $(window).width();
|
contentPath: "{{ contentPath }}",
|
||||||
if (windowWidth === newWidth) {
|
container: $model,
|
||||||
// Do nothing if only the height changed.
|
hd: true,
|
||||||
// This prevents triggering a resize when the navigation bar moves on mobile when scrolling.
|
aspect: $model.outerWidth() / $model.outerHeight(),
|
||||||
return;
|
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();
|
let windowWidth = $(window).width();
|
||||||
}, 500));
|
$(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>
|
</script>
|
||||||
|
|
|
||||||
|
|
@ -59,43 +59,45 @@
|
||||||
</table>
|
</table>
|
||||||
|
|
||||||
<script type="application/javascript">
|
<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({
|
dt = $("#members").DataTable({
|
||||||
processing: true,
|
processing: true,
|
||||||
serverSide: true,
|
serverSide: true,
|
||||||
searchDelay: 800,
|
searchDelay: 800,
|
||||||
ajax: {
|
ajax: {
|
||||||
url: `{{websiteRoot}}/guild/{{realm}}/{{id}}/members`,
|
url: `{{websiteRoot}}/guild/{{realm}}/{{id}}/members`,
|
||||||
},
|
|
||||||
columnDefs: [
|
|
||||||
{
|
|
||||||
targets: 0,
|
|
||||||
render: (name) => `<a href="{{websiteRoot}}/character/{{realm}}/${name}">${name}</a>`,
|
|
||||||
},
|
},
|
||||||
{
|
columnDefs: [
|
||||||
targets: 1,
|
{
|
||||||
render: (rank, type, row, meta) => meta.settings.json.ranks[rank],
|
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,
|
||||||
},
|
},
|
||||||
{
|
order: [[1, "asc"]],
|
||||||
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"]],
|
|
||||||
});
|
});
|
||||||
</script>
|
</script>
|
||||||
|
|
|
||||||
|
|
@ -34,49 +34,51 @@
|
||||||
</table>
|
</table>
|
||||||
|
|
||||||
<script type="application/javascript">
|
<script type="application/javascript">
|
||||||
let dt;
|
$(window).on("load", () => {
|
||||||
|
let dt;
|
||||||
|
|
||||||
$("#select-realm").on("change", () => {
|
$("#select-realm").on("change", () => {
|
||||||
dt.draw();
|
dt.draw();
|
||||||
});
|
});
|
||||||
|
|
||||||
dt = $("#results").DataTable({
|
dt = $("#results").DataTable({
|
||||||
processing: true,
|
processing: true,
|
||||||
serverSide: true,
|
serverSide: true,
|
||||||
searchDelay: 800,
|
searchDelay: 800,
|
||||||
ajax: {
|
ajax: {
|
||||||
url: `{{websiteRoot}}/search`,
|
url: `{{websiteRoot}}/search`,
|
||||||
data: d => {
|
data: d => {
|
||||||
d.realm = $("#select-realm").val();
|
d.realm = $("#select-realm").val();
|
||||||
|
},
|
||||||
},
|
},
|
||||||
},
|
columnDefs: [
|
||||||
columnDefs: [
|
{
|
||||||
{
|
targets: 0,
|
||||||
targets: 0,
|
render: (name, type, row, meta) => `<a href="{{websiteRoot}}/character/${meta.settings.json.realm}/${name}">${name}</a>`,
|
||||||
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>
|
</script>
|
||||||
|
|
|
||||||
Loading…
Add table
Add a link
Reference in a new issue