refactor: use .hbs extension
This commit is contained in:
Axel Cocat
parent
ab5dcd3640
commit
28432b6523
11 changed files with 9 additions and 9 deletions
|
|
@ -1,282 +0,0 @@
|
|||
<link rel="stylesheet" type="text/css" href="/css/character.css">
|
||||
{{> icons }}
|
||||
|
||||
<script type="application/javascript" src="/js/viewer.min.js"></script>
|
||||
<script type="application/javascript" src="{{aowow}}/static/widgets/power.js"></script>
|
||||
|
||||
{{> character-header }}
|
||||
|
||||
<div id="model-container">
|
||||
<div id="equipment-col-left"></div>
|
||||
<div id="model"></div>
|
||||
<div id="equipment-col-right"></div>
|
||||
</div>
|
||||
<div id="equipment-bottom"></div>
|
||||
|
||||
<span data-icon-size="large" class="icon-size is-hidden-mobile"></span>
|
||||
<span data-icon-size="medium" class="icon-size is-hidden-tablet"></span>
|
||||
|
||||
<br>
|
||||
<div id="char-options" class="columns">
|
||||
<div class="column is-one-quarter">
|
||||
<label class="checkbox">
|
||||
<input id="cb-hide-helmet" type="checkbox">
|
||||
Hide helmet
|
||||
</label>
|
||||
<br>
|
||||
|
||||
<label class="checkbox">
|
||||
<input id="cb-hide-cloak" type="checkbox">
|
||||
Hide cloak
|
||||
</label>
|
||||
<br>
|
||||
|
||||
<label class="checkbox">
|
||||
<input id="cb-hide-tabard" type="checkbox">
|
||||
Hide tabard
|
||||
</label>
|
||||
</div>
|
||||
|
||||
<div id="mounts-container" class="column">
|
||||
<button id="btn-mounts" class="button is-primary">Mounts</button>
|
||||
|
||||
<div id="mount-template" class="iconmedium">
|
||||
<div class="icon"></div>
|
||||
<div class="border"></div>
|
||||
<a target="_blank"></a>
|
||||
</div>
|
||||
<div id="mounts" class="box" style="display: none;"></div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div id="item-slot-template" class="item-slot">
|
||||
<div class="inventory-slot"></div>
|
||||
<div class="icon"></div>
|
||||
<div class="border"></div>
|
||||
<a target="_blank"></a>
|
||||
</div>
|
||||
|
||||
<script type="application/javascript">
|
||||
const $model = $("#model");
|
||||
const $itemSlotTemplate = $("#item-slot-template").detach().removeAttr("id");
|
||||
const $mountTemplate = $("#mount-template").detach().removeAttr("id");
|
||||
|
||||
window.WH = {
|
||||
//debug: console.log,
|
||||
debug: () => { },
|
||||
};
|
||||
|
||||
const charData = JSON.parse(`{{{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 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);
|
||||
});
|
||||
|
||||
let viewer;
|
||||
function createViewer() {
|
||||
viewer?.destroy();
|
||||
viewer = new ZamModelViewer(characterModel);
|
||||
}
|
||||
|
||||
function setSlotVisible(slot, visible) {
|
||||
if (visible) {
|
||||
const item = charData.characterModelItems.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, rel, container) {
|
||||
const $item = $itemSlotTemplate.clone();
|
||||
$item
|
||||
.data("icon", icon)
|
||||
.find(".inventory-slot")
|
||||
.css("background-image", `url("/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(), 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");
|
||||
if (item !== undefined) {
|
||||
$item.find(".icon").css("background-image", `url("{{aowow}}/static/images/wow/icons/${iconSize}/${icon}.jpg")`);
|
||||
}
|
||||
});
|
||||
|
||||
if (!init) {
|
||||
characterModel.aspect = $model.outerWidth() / $model.outerHeight();
|
||||
createViewer();
|
||||
}
|
||||
}
|
||||
onResize(true);
|
||||
|
||||
function setMount(mountId) {
|
||||
if (characterModel.mount.id !== mountId) {
|
||||
characterModel.mount.id = mountId;
|
||||
createViewer();
|
||||
}
|
||||
}
|
||||
|
||||
if (charData.mounts.length === 0) {
|
||||
$("#mounts-container").hide();
|
||||
} else {
|
||||
const $dismount = $mountTemplate.clone();
|
||||
$dismount.find(".icon").css("background-image", `url("/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", () => {
|
||||
setMount(mount.creatureDisplayId);
|
||||
return false;
|
||||
});
|
||||
$("#mounts").append($mount);
|
||||
}
|
||||
}
|
||||
$("#btn-mounts").on("click", () => {
|
||||
$("#mounts").slideToggle("fast");
|
||||
});
|
||||
|
||||
const characterModel = {
|
||||
type: ZamModelViewer.WOW,
|
||||
contentPath: "/data/",
|
||||
background: "background.png",
|
||||
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.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();
|
||||
$(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>
|
||||
Loading…
Add table
Add a link
Reference in a new issue