yrtria/azerothcore-armory
1
0
Fork 0
Code Issues Pull requests Projects Releases 1 Packages Activity Actions

feat(character): add mounts

Browse source
This commit is contained in:
Axel Cocat 2022-01-21 14:52:19 +01:00
parent d0eb86daa7
commit b19bd0b0a3
11 changed files with 239 additions and 121 deletions
Download patch file Download diff file Expand all files Collapse all files

22
static/character-talents.html
View file

@ -1,17 +1,5 @@
<link rel="stylesheet" href="/css/character-talents.css">
<style>
.iconmedium a {
background: url("{{aowow}}/static/images/Icon/medium/hilite/default.png") no-repeat 38px 0;
}
.iconmedium .border {
background-image: url("{{aowow}}/static/images/Icon/medium/border/default.png");
}
.iconmedium .icon-border {
background-image: url("{{aowow}}/static/images/TalentCalc/border.gif");
}
</style>
<link rel="stylesheet" type="text/css" href="/css/character-talents.css">
{{> icons }}
<script type="application/javascript">
const aowow_tooltips = { "renamelinks": true, };
</script>
@ -19,8 +7,8 @@
{{> character-header }}
<div id="talent-template" class="iconmedium empty">
<div class="talent"></div>
<div id="talent-template" class="iconmedium icontalent empty">
<div class="icon"></div>
<div class="border"></div>
<div class="icon-border"></div>
<a target="_blank"></a>
@ -140,7 +128,7 @@
const $template = $("#talent-template");
const $talent = $template.clone(false);
$talent.removeAttr("id");
$talent.find(".talent").css("background-image", `url("{{aowow}}/static/images/wow/icons/medium/${spell.icon}.jpg")`);
$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);

93
static/character.html
View file

@ -1,13 +1,5 @@
<link rel="stylesheet" href="/css/character.css">
<style>
.iconlarge .border {
background-image: url("{{aowow}}/static/images/Icon/large/border/default.png");
}
.iconlarge a {
background: url("{{aowow}}/static/images/Icon/large/hilite/default.png") no-repeat 62px 0;
}
</style>
<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>
@ -25,17 +17,32 @@
<div style="flex: 12%;"></div>
</div>
<input id="cb-hide-helmet" type="checkbox">
<label for="cb-hide-helmet">Hide helmet</label>
<br>
<table id="char-options">
<tr>
<td>
<input id="cb-hide-helmet" type="checkbox">
<label for="cb-hide-helmet">Hide helmet</label>
<br>
<input id="cb-hide-cloak" type="checkbox">
<label for="cb-hide-cloak">Hide cloak</label>
<br>
<input id="cb-hide-cloak" type="checkbox">
<label for="cb-hide-cloak">Hide cloak</label>
<br>
<input id="cb-hide-tabard" type="checkbox">
<label for="cb-hide-tabard">Hide tabard</label>
<br>
<input id="cb-hide-tabard" type="checkbox">
<label for="cb-hide-tabard">Hide tabard</label>
</td>
<td id="mounts-container">
<button id="btn-mounts">Mounts</button>
<div id="mount-template" class="iconmedium">
<div class="icon"></div>
<div class="border"></div>
<a target="_blank"></a>
</div>
<div id="mounts" style="display: none;"></div>
</td>
</tr>
</table>
<div id="item-slot-template" class="iconlarge">
<div class="inventory-slot"></div>
@ -92,11 +99,16 @@
},
mount: {
type: ZamModelViewer.Wow.Types.NPC,
//id: 25280,
id: 0,
},
};
const viewer = new ZamModelViewer(characterModel);
let viewer;
function createViewer() {
viewer?.destroy();
viewer = new ZamModelViewer(characterModel);
}
createViewer();
$("#cb-hide-helmet").change(() => {
const hide = $("#cb-hide-helmet").prop("checked");
@ -124,6 +136,7 @@
function clearSlots(slots) {
viewer.method("clearSlots", slots.join(","));
characterModel.items = characterModel.items.filter(item => !slots.includes(item[0]));
}
function setItems(items) {
@ -134,6 +147,9 @@
};
});
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) {
@ -172,4 +188,39 @@
createItemSlot(item?.itemEntry, slot, item?.icon?.toLowerCase(), rel.join("&"), side.element);
}
}
function setMount(mountId) {
if (characterModel.mount.id !== mountId) {
characterModel.mount.id = mountId;
createViewer();
}
}
if (charData.mounts.length === 0) {
$("#mounts-container").hide();
} else {
const $dismount = $("#mount-template").clone(false).removeAttr("id");
$dismount.find(".icon").css("background-image", `url("/img/UI-GearManager-LeaveItem-small.png")`);
$dismount.find("a")
.on("click", () => {
setMount(0);
return false;
});
$("#mounts").append($dismount);
for (const mount of charData.mounts) {
const $mount = $("#mount-template").clone(false).removeAttr("id");
$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");
});
</script>

39
static/css/character-talents.css
View file

@ -3,28 +3,11 @@
display: none;
}
.iconmedium {
width: 44px;
height: 44px;
position: relative;
display: inline-block;
overflow: visible;
}
.iconmedium .talent {
width: 36px;
height: 36px;
left: 4px;
top: 4px;
position: absolute;
background-repeat: no-repeat;
}
.iconmedium.empty .icon-border {
background-position: 0px 0px;
}
.iconmedium.empty .talent {
.iconmedium.empty .icon {
filter: grayscale(100%);
opacity: 0.7;
}
@ -37,14 +20,6 @@
background-position: -42px 0px;
}
.iconmedium .border {
width: 44px;
height: 44px;
left: 0px;
top: 0px;
background-repeat: no-repeat;
}
.iconmedium .icon-border {
width: 42px;
height: 42px;
@ -54,22 +29,10 @@
background-repeat: no-repeat;
}
.iconmedium a {
width: 38px;
height: 38px;
position: absolute;
left: 3px;
top: 3px;
}
.iconmedium a span {
display: none;
}
.iconmedium a:hover {
background-position: 0 0;
}
.iconmedium::after {
content: attr(rank);
background-color: black;

50
static/css/character.css
View file

@ -1,14 +1,8 @@
#item-slot-template {
#item-slot-template,
#mount-template {
display: none;
}
.iconlarge {
width: 68px;
height: 68px;
position: relative;
display: inline-block;
}
.iconlarge .inventory-slot {
width: 56px;
height: 56px;
@ -16,38 +10,18 @@
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;
position: absolute;
left: 0;
top: 0;
background-repeat: no-repeat;
}
.iconlarge a {
width: 62px;
height: 62px;
position: absolute;
left: 3px;
top: 3px;
}
.iconlarge a:hover {
background-position: 0 0;
z-index: -2;
}
.wowhead-tooltip .whtt-sellprice {
display: none;
}
#mounts {
max-width: 400px;
}
#char-options td {
vertical-align: top;
padding-right: 32px;
}

75
static/css/icons.css Normal file
View file

@ -0,0 +1,75 @@
.iconmedium {
width: 44px;
height: 44px;
position: relative;
display: inline-block;
overflow: visible;
}
.iconmedium .icon {
width: 36px;
height: 36px;
left: 4px;
top: 4px;
position: absolute;
background-repeat: no-repeat;
z-index: -1;
}
.iconmedium .border {
width: 44px;
height: 44px;
left: 0px;
top: 0px;
background-repeat: no-repeat;
}
.iconmedium a {
width: 38px;
height: 38px;
position: absolute;
left: 3px;
top: 3px;
}
.iconmedium a:hover {
background-position: 0 0;
}
.iconlarge {
width: 68px;
height: 68px;
position: relative;
display: inline-block;
}
.iconlarge .icon {
width: 56px;
height: 56px;
left: 6px;
top: 6px;
position: absolute;
background-repeat: no-repeat;
z-index: -1;
}
.iconlarge .border {
width: 68px;
height: 68px;
position: absolute;
left: 0;
top: 0;
background-repeat: no-repeat;
}
.iconlarge a {
width: 62px;
height: 62px;
position: absolute;
left: 3px;
top: 3px;
}
.iconlarge a:hover {
background-position: 0 0;
}

BIN
static/img/UI-GearManager-LeaveItem-small.png Normal file
View file

Binary file not shown.
Side by side

After

Width:  |  Height:  |  Size: 1.2 KiB

6
static/index.html
View file

@ -1,6 +1,6 @@
<link rel="stylesheet" href="/css/index.css">
<link rel="stylesheet" href="https://cdn.datatables.net/1.11.3/css/jquery.dataTables.min.css">
<link rel="stylesheet" href="/css/datatables.css">
<link rel="stylesheet" type="text/css" href="/css/index.css">
<link rel="stylesheet" type="text/css" href="https://cdn.datatables.net/1.11.3/css/jquery.dataTables.min.css">
<link rel="stylesheet" type="text/css" href="/css/datatables.css">
<script type="application/javascript" src="https://cdn.datatables.net/1.11.3/js/jquery.dataTables.min.js"></script>
<h1>Armory</h1>

2
static/layout.html
View file

@ -6,7 +6,7 @@
<meta name="viewport" content="width=device-width, initial-scale=1" />
<title>{{title}}</title>
<link rel="stylesheet" href="/css/armory.css">
<link rel="stylesheet" type="text/css" href="/css/armory.css">
<script type="application/javascript" src="/js/sync-url.js"></script>
</head>

22
static/partials/icons.html Normal file
View file

@ -0,0 +1,22 @@
<link rel="stylesheet" type="text/css" href="/css/icons.css">
<style>
.iconlarge .border {
background-image: url("{{aowow}}/static/images/Icon/large/border/default.png");
}
.iconlarge a {
background: url("{{aowow}}/static/images/Icon/large/hilite/default.png") no-repeat 62px 0;
}
.iconmedium .border {
background-image: url("{{aowow}}/static/images/Icon/medium/border/default.png");
}
.iconmedium a {
background: url("{{aowow}}/static/images/Icon/medium/hilite/default.png") no-repeat 38px 0;
}
.iconmedium.icontalent .icon-border {
background-image: url("{{aowow}}/static/images/TalentCalc/border.gif");
}
</style>