feat(character): add equipment tooltips
Axel Cocat
|
|
@ -1,4 +1,18 @@
|
|||
<div id="model" style="max-width: 608px; max-height: 800px;"></div>
|
||||
<link rel="stylesheet" href="/css/character.css">
|
||||
|
||||
<script type="application/javascript" src="/js/viewer.min.js"></script>
|
||||
<script type="application/javascript" src="https://wotlkdb.com/static/widgets/power.js"></script>
|
||||
|
||||
<div style="display: flex; max-width: 580px; height: 580px;">
|
||||
<div id="equipment-col-left" style="flex: 12%;"></div>
|
||||
<div id="model" style="flex: 76%; height: 100%;"></div>
|
||||
<div id="equipment-col-right" style="flex: 12%;"></div>
|
||||
</div>
|
||||
<div style="display: flex; max-width: 580px; height: 70px; text-align: center;">
|
||||
<div style="flex: 12%;"></div>
|
||||
<div id="equipment-bottom" style="flex: 76%; height: 100%;"></div>
|
||||
<div style="flex: 12%;"></div>
|
||||
</div>
|
||||
|
||||
<input id="cb-hide-helmet" type="checkbox">
|
||||
<label for="cb-hide-helmet">Hide helmet</label>
|
||||
|
|
@ -12,7 +26,13 @@
|
|||
<label for="cb-hide-tabard">Hide tabard</label>
|
||||
<br>
|
||||
|
||||
<script type="application/javascript" src="/js/viewer.min.js"></script>
|
||||
<div id="item-slot-template">
|
||||
<div class="inventory-slot"></div>
|
||||
<div class="icon"></div>
|
||||
<div class="border"></div>
|
||||
<a target="_blank"></a>
|
||||
</div>
|
||||
|
||||
<script type="application/javascript">
|
||||
window.WH = {
|
||||
//debug: console.log,
|
||||
|
|
@ -99,4 +119,40 @@
|
|||
});
|
||||
viewer.method("setItems", [data]);
|
||||
}
|
||||
|
||||
function createItemSlot(item, invSlot, icon, rel, container) {
|
||||
const $template = $("#item-slot-template");
|
||||
const $item = $template.clone(false);
|
||||
$item
|
||||
.removeAttr("id")
|
||||
.addClass("iconlarge");
|
||||
$item.find(".inventory-slot").css("background-image", `url("/img/inventory-slot/${invSlot}.png")`);
|
||||
if (item !== undefined) {
|
||||
$item.find(".icon").css("background-image", `url("https://wotlkdb.com/static/images/wow/icons/large/${icon}.jpg")`);
|
||||
$item.find("a").attr("href", `https://wotlkdb.com/?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(":"));
|
||||
}
|
||||
}
|
||||
createItemSlot(item?.itemEntry, slot, item?.icon?.toLowerCase(), rel.join("&"), side.element);
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
|
|
|||
|
|
@ -2,7 +2,3 @@ html {
|
|||
background-color: #202124;
|
||||
color: white;
|
||||
}
|
||||
|
||||
#model {
|
||||
margin-bottom: 16px;
|
||||
}
|
||||
|
|
|
|||
55
static/css/character.css
Normal file
|
|
@ -0,0 +1,55 @@
|
|||
#item-slot-template {
|
||||
display: none;
|
||||
}
|
||||
|
||||
.iconlarge {
|
||||
width: 68px;
|
||||
height: 68px;
|
||||
position: relative;
|
||||
display: inline-block;
|
||||
}
|
||||
|
||||
.iconlarge .inventory-slot {
|
||||
width: 56px;
|
||||
height: 56px;
|
||||
left: 6px;
|
||||
top: 6px;
|
||||
position: absolute;
|
||||
background-repeat: no-repeat;
|
||||
}
|
||||
|
||||
.iconlarge .icon {
|
||||
width: 56px;
|
||||
height: 56px;
|
||||
left: 6px;
|
||||
top: 6px;
|
||||
position: absolute;
|
||||
background-repeat: no-repeat;
|
||||
}
|
||||
|
||||
.iconlarge .border {
|
||||
width: 68px;
|
||||
height: 68px;
|
||||
background-image: url("https://wotlkdb.com/static/images/Icon/large/border/default.png");
|
||||
position: absolute;
|
||||
left: 0;
|
||||
top: 0;
|
||||
background-repeat: no-repeat;
|
||||
}
|
||||
|
||||
.iconlarge a {
|
||||
width: 62px;
|
||||
height: 62px;
|
||||
background: url("https://wotlkdb.com/static/images/Icon/large/hilite/default.png") no-repeat 62px 0;
|
||||
position: absolute;
|
||||
left: 3px;
|
||||
top: 3px;
|
||||
}
|
||||
|
||||
.iconlarge a:hover {
|
||||
background-position: 0 0;
|
||||
}
|
||||
|
||||
.wowhead-tooltip .whtt-sellprice {
|
||||
display: none;
|
||||
}
|
||||
BIN
static/img/inventory-slot/0.png
Normal file
|
After Width: | Height: | Size: 4.3 KiB |
BIN
static/img/inventory-slot/1.png
Normal file
|
After Width: | Height: | Size: 3.4 KiB |
BIN
static/img/inventory-slot/10.png
Normal file
|
After Width: | Height: | Size: 3.3 KiB |
BIN
static/img/inventory-slot/11.png
Normal file
|
After Width: | Height: | Size: 3.3 KiB |
BIN
static/img/inventory-slot/12.png
Normal file
|
After Width: | Height: | Size: 3.8 KiB |
BIN
static/img/inventory-slot/13.png
Normal file
|
After Width: | Height: | Size: 3.8 KiB |
BIN
static/img/inventory-slot/14.png
Normal file
|
After Width: | Height: | Size: 4.7 KiB |
BIN
static/img/inventory-slot/15.png
Normal file
|
After Width: | Height: | Size: 5.7 KiB |
BIN
static/img/inventory-slot/16.png
Normal file
|
After Width: | Height: | Size: 4.5 KiB |
BIN
static/img/inventory-slot/17.png
Normal file
|
After Width: | Height: | Size: 3.5 KiB |
BIN
static/img/inventory-slot/18.png
Normal file
|
After Width: | Height: | Size: 4 KiB |
BIN
static/img/inventory-slot/19.png
Normal file
|
After Width: | Height: | Size: 3.9 KiB |
BIN
static/img/inventory-slot/2.png
Normal file
|
After Width: | Height: | Size: 4 KiB |
BIN
static/img/inventory-slot/3.png
Normal file
|
After Width: | Height: | Size: 4.7 KiB |
BIN
static/img/inventory-slot/4.png
Normal file
|
After Width: | Height: | Size: 4.7 KiB |
BIN
static/img/inventory-slot/5.png
Normal file
|
After Width: | Height: | Size: 4.5 KiB |
BIN
static/img/inventory-slot/6.png
Normal file
|
After Width: | Height: | Size: 4.7 KiB |
BIN
static/img/inventory-slot/7.png
Normal file
|
After Width: | Height: | Size: 5.1 KiB |
BIN
static/img/inventory-slot/8.png
Normal file
|
After Width: | Height: | Size: 4.8 KiB |
BIN
static/img/inventory-slot/9.png
Normal file
|
After Width: | Height: | Size: 4.6 KiB |
|
|
@ -3,7 +3,7 @@
|
|||
|
||||
<head>
|
||||
<meta charset="utf-8" />
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1">
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1" />
|
||||
<title>{{title}}</title>
|
||||
|
||||
<link rel="stylesheet" href="/css/armory.css">
|
||||
|
|
|
|||