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

add reputation page

Browse source
This commit is contained in:
smthbh 2025-04-22 13:06:01 -04:00
parent 0a04f3bc81
commit 56732a68c1
7 changed files with 712 additions and 0 deletions
Download patch file Download diff file Expand all files Collapse all files

82
static/character-reputation.hbs Normal file
View file

@ -0,0 +1,82 @@
<link rel="stylesheet" type="text/css" href="{{websiteRoot}}/css/character-reputation.css">
{{> icons }}
<script type="application/javascript">
const aowow_tooltips = { "renamelinks": true, };
</script>
{{> character-header }}
<div class="reputation-table" style="margin-bottom: 20px;">
<h2 class="is-size-4">Classic Reputations</h2>
<table class="table is-striped is-hoverable is-fullwidth">
<tbody>
{{#each data.classic}}
<tr>
<!-- Faction ID: {{this.id}} -->
<td>
<div class="reputation-row">
<span class="faction-name">{{this.name}}</span>
<div class="progress-section">
<div class="progress-bar-container">
<div class="progress-bar {{this.standing}}" style="width: {{multiply (divide this.valueInGrade this.max) 100}}%;"></div>
<span class="standing-text">{{this.standing}}</span>
<span class="value-text">{{this.valueInGrade}} / {{this.max}}</span>
</div>
</div>
</div>
</td>
</tr>
{{/each}}
</tbody>
</table>
</div>
<div class="reputation-table" style="margin-bottom: 20px;">
<h2 class="is-size-4">The Burning Crusade</h2>
<table class="table is-striped is-hoverable is-fullwidth">
<tbody>
{{#each data.tbc}}
<tr>
<!-- Faction ID: {{this.id}} -->
<td>
<div class="reputation-row">
<span class="faction-name">{{this.name}}</span>
<div class="progress-section">
<div class="progress-bar-container">
<div class="progress-bar {{this.standing}}" style="width: {{multiply (divide this.valueInGrade this.max) 100}}%;"></div>
<span class="standing-text">{{this.standing}}</span>
<span class="value-text">{{this.valueInGrade}} / {{this.max}}</span>
</div>
</div>
</div>
</td>
</tr>
{{/each}}
</tbody>
</table>
</div>
<div class="reputation-table" style="margin-bottom: 20px;">
<h2 class="is-size-4">Wrath of the Lich King</h2>
<table class="table is-striped is-hoverable is-fullwidth">
<tbody>
{{#each data.wotlk}}
<tr>
<!-- Faction ID: {{this.id}} -->
<td>
<div class="reputation-row">
<span class="faction-name">{{this.name}}</span>
<div class="progress-section">
<div class="progress-bar-container">
<div class="progress-bar {{this.standing}}" style="width: {{multiply (divide this.valueInGrade this.max) 100}}%;"></div>
<span class="standing-text">{{this.standing}}</span>
<span class="value-text">{{this.valueInGrade}} / {{this.max}}</span>
</div>
</div>
</div>
</td>
</tr>
{{/each}}
</tbody>
</table>
</div>

108
static/css/character-reputation.css Normal file
View file

@ -0,0 +1,108 @@
.reputation-table {
max-width: 500px;
width: 100%;
}
.reputation-table h2 {
color: #FFD700; /* Gold color for section titles */
}
.reputation-row {
display: flex;
align-items: center;
gap: 20px;
}
.faction-name {
min-width: 150px;
font-weight: bold;
color: white; /* White color for faction names */
}
.progress-section {
flex: 1;
display: flex;
gap: 10px;
}
.progress-bar-container {
flex: 1;
background-color: #020018;
border-radius: 5px;
overflow: hidden;
height: 20px;
position: relative;
}
.progress-bar-container:hover .standing-text {
display: none;
}
.progress-bar-container:hover .value-text {
display: block;
}
.progress-bar {
height: 100%;
position: absolute;
top: 0;
left: 0;
}
/* Reputation colors */
.progress-bar.Neutral {
background-color: #B8A44A; /* More muted yellow */
}
.progress-bar.Friendly,
.progress-bar.Honored,
.progress-bar.Revered,
.progress-bar.Exalted {
background-color: #4CAF50; /* More muted green */
}
.progress-bar.Hostile,
.progress-bar.Hated {
background-color: #D32F2F; /* More muted red */
}
.progress-text {
position: absolute;
top: 50%;
left: 10px;
transform: translateY(-50%);
z-index: 2;
color: white;
font-weight: bold;
font-size: 12px;
white-space: nowrap;
}
.standing-text {
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
z-index: 2;
color: white;
text-shadow: 1px 1px 1px rgba(0, 0, 0, 0.7);
font-size: 12px;
font-weight: bold;
}
.value-text {
display: none;
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
z-index: 2;
color: white;
text-shadow: 1px 1px 1px rgba(0, 0, 0, 0.7);
font-size: 12px;
font-weight: bold;
}
.gold-text {
color: #FFD700;
}

1
static/partials/character-header.hbs
View file

@ -4,6 +4,7 @@
<a href="{{websiteRoot}}/character/{{realm}}/{{name}}">Character</a>&emsp;
<a href="{{websiteRoot}}/character/{{realm}}/{{name}}/talents">Talents</a>&emsp;
<a href="{{websiteRoot}}/character/{{realm}}/{{name}}/skills">Skills</a>&emsp;
<a href="{{websiteRoot}}/character/{{realm}}/{{name}}/reputation">Reputation</a>&emsp;
<a href="{{websiteRoot}}/character/{{realm}}/{{name}}/achievements">Achievements</a>&emsp;
<a href="{{websiteRoot}}/character/{{realm}}/{{name}}/pvp">PvP</a>&emsp;
<br>