Merge pull request #10 from smthbh/Update-SkillsGraphics
add better graphics for skills page
This commit is contained in:
Brad
GitHub
commit
c8cc222e18
3 changed files with 247 additions and 16 deletions
|
|
@ -74,6 +74,7 @@ interface IArenaTeam {
|
|||
|
||||
interface ISkills {
|
||||
id: number;
|
||||
categoryId: number
|
||||
skill: string;
|
||||
value: number;
|
||||
max: number ;
|
||||
|
|
@ -285,12 +286,24 @@ export class CharacterController {
|
|||
// Could not find character
|
||||
return next(404);
|
||||
}
|
||||
|
||||
const skills = await this.getSkills(realm.name, charData.guid);
|
||||
const professions = skills.filter((skill) => skill.categoryId === 11);
|
||||
const secondarySkills = skills.filter((skill) => skill.categoryId === 9);
|
||||
const weaponSkills = skills.filter((skill) => skill.categoryId === 6);
|
||||
const classSkills = skills.filter((skill) => skill.categoryId === 7);
|
||||
const armorSkills = skills.filter((skill) => skill.categoryId === 8);
|
||||
const languages = skills.filter((skill) => skill.categoryId === 10);
|
||||
res.render("character-skills.hbs", {
|
||||
title: `Armory - ${charData.name} - Skills`,
|
||||
...this.makeSharedDataObject(realm, charData),
|
||||
data: {
|
||||
skills: await this.getSkills(realm.name, charData.guid),
|
||||
skills: skills,
|
||||
professions: professions,
|
||||
secondarySkills: secondarySkills,
|
||||
weaponSkills: weaponSkills,
|
||||
classSkills: classSkills,
|
||||
armorSkills: armorSkills,
|
||||
languages: languages,
|
||||
},
|
||||
});
|
||||
}
|
||||
|
|
@ -1017,10 +1030,11 @@ export class CharacterController {
|
|||
timeout: this.armory.config.dbQueryTimeout,
|
||||
});
|
||||
|
||||
const skills: { id: number, skill: string; value: number; max: number }[] = [];
|
||||
const skills: { id: number, categoryId: number, skill: string; value: number; max: number }[] = [];
|
||||
for (const row of rows as RowDataPacket[]) {
|
||||
skills.push({
|
||||
id: row.skill,
|
||||
categoryId: this.skillById[row.skill].categoryId,
|
||||
skill: this.skillById[row.skill].name,
|
||||
value: row.value,
|
||||
max: row.max,
|
||||
|
|
|
|||
|
|
@ -1,4 +1,4 @@
|
|||
<link rel="stylesheet" type="text/css" href="{{websiteRoot}}/css/character-talents.css">
|
||||
<link rel="stylesheet" type="text/css" href="{{websiteRoot}}/css/character-skills.css">
|
||||
{{> icons }}
|
||||
<script type="application/javascript">
|
||||
const aowow_tooltips = { "renamelinks": true, };
|
||||
|
|
@ -6,24 +6,121 @@
|
|||
|
||||
{{> character-header }}
|
||||
|
||||
<div class="skills-table">
|
||||
<h2 class="is-size-4">Character Skills</h2>
|
||||
<table class="table is-striped is-hoverable is-fullwidth">
|
||||
<div class="skills-table" style="margin-bottom: 20px;">
|
||||
<h2 class="is-size-4">Professions</h2>
|
||||
<table class="table is-striped is-hoverable is-quarter-desktop">
|
||||
<thead>
|
||||
<tr>
|
||||
{{!-- <th>Skill ID</th> --}}
|
||||
<th>Skill Name</th>
|
||||
<th>Skill Value</th>
|
||||
<th>Max Value</th>
|
||||
<th>Name</th>
|
||||
{{!-- <th>Level</th> --}}
|
||||
{{!-- <th>Max</th> --}}
|
||||
</tr>
|
||||
</thead>
|
||||
<tbody>
|
||||
{{#each data.skills}}
|
||||
{{#each data.professions}}
|
||||
<tr>
|
||||
{{!-- <td>{{this.id}}</td> --}}
|
||||
<td>{{this.skill}}</td>
|
||||
<td>{{this.value}}</td>
|
||||
<td>{{this.max}}</td>
|
||||
<!-- Skill ID: {{this.id}} -->
|
||||
<td>
|
||||
<div class="progress-bar-container">
|
||||
<div class="progress-bar" style="width: {{multiply (divide this.value this.max) 100}}%;"></div>
|
||||
<span class="progress-text"><span class="gold-text">{{this.skill}}</span> {{this.value}}/{{this.max}}</span>
|
||||
</div>
|
||||
</td>
|
||||
</tr>
|
||||
{{/each}}
|
||||
</tbody>
|
||||
</table>
|
||||
</div>
|
||||
|
||||
<div class="skills-table" style="margin-bottom: 20px;">
|
||||
<h2 class="is-size-4">Secondary Skills</h2>
|
||||
<table class="table is-striped is-hoverable is-quarter-desktop">
|
||||
<tbody>
|
||||
{{#each data.secondarySkills}}
|
||||
<tr>
|
||||
<!-- Skill ID: {{this.id}} -->
|
||||
<td>
|
||||
<div class="progress-bar-container">
|
||||
<div class="progress-bar" style="width: {{multiply (divide this.value this.max) 100}}%;"></div>
|
||||
<span class="progress-text"><span class="gold-text">{{this.skill}}</span> {{this.value}}/{{this.max}}</span>
|
||||
</div>
|
||||
</td>
|
||||
</tr>
|
||||
{{/each}}
|
||||
</tbody>
|
||||
</table>
|
||||
</div>
|
||||
|
||||
<div class="skills-table" style="margin-bottom: 20px;">
|
||||
<h2 class="is-size-4">Weapon Skills</h2>
|
||||
<table class="table is-striped is-hoverable is-quarter-desktop">
|
||||
<tbody>
|
||||
{{#each data.weaponSkills}}
|
||||
<tr>
|
||||
<!-- Skill ID: {{this.id}} -->
|
||||
<td>
|
||||
<div class="progress-bar-container">
|
||||
<div class="progress-bar" style="width: {{multiply (divide this.value this.max) 100}}%;"></div>
|
||||
<span class="progress-text"><span class="gold-text">{{this.skill}}</span> {{this.value}}/{{this.max}}</span>
|
||||
</div>
|
||||
</td>
|
||||
</tr>
|
||||
{{/each}}
|
||||
</tbody>
|
||||
</table>
|
||||
</div>
|
||||
|
||||
<div class="skills-table" style="margin-bottom: 20px;">
|
||||
<h2 class="is-size-4">Class Skills</h2>
|
||||
<table class="table is-striped is-hoverable is-quarter-desktop">
|
||||
<tbody>
|
||||
{{#each data.classSkills}}
|
||||
<tr>
|
||||
<!-- Skill ID: {{this.id}} -->
|
||||
<td>
|
||||
<div class="progress-bar-container">
|
||||
<div class="progress-bar" style="width: {{multiply (divide this.value this.max) 100}}%;"></div>
|
||||
<span class="progress-text"><span class="gold-text">{{this.skill}}</span> {{this.value}}/{{this.max}}</span>
|
||||
</div>
|
||||
</td>
|
||||
</tr>
|
||||
{{/each}}
|
||||
</tbody>
|
||||
</table>
|
||||
</div>
|
||||
|
||||
<div class="skills-table" style="margin-bottom: 20px;">
|
||||
<h2 class="is-size-4">Armor Proficiencies</h2>
|
||||
<table class="table is-striped is-hoverable is-quarter-desktop">
|
||||
<tbody>
|
||||
{{#each data.armorSkills}}
|
||||
<tr>
|
||||
<!-- Skill ID: {{this.id}} -->
|
||||
<td>
|
||||
<div class="progress-bar-container">
|
||||
<div class="progress-bar" style="width: {{multiply (divide this.value this.max) 100}}%;"></div>
|
||||
<span class="progress-text"><span class="gold-text">{{this.skill}}</span> {{this.value}}/{{this.max}}</span>
|
||||
</div>
|
||||
</td>
|
||||
</tr>
|
||||
{{/each}}
|
||||
</tbody>
|
||||
</table>
|
||||
</div>
|
||||
|
||||
<div class="skills-table" style="margin-bottom: 20px;">
|
||||
<h2 class="is-size-4">Languages</h2>
|
||||
<table class="table is-striped is-hoverable is-quarter-desktop">
|
||||
<tbody>
|
||||
{{#each data.languages}}
|
||||
<tr>
|
||||
<!-- Skill ID: {{this.id}} -->
|
||||
<td>
|
||||
<div class="progress-bar-container">
|
||||
<div class="progress-bar" style="width: {{multiply (divide this.value this.max) 100}}%;"></div>
|
||||
<span class="progress-text"><span class="gold-text">{{this.skill}}</span> {{this.value}}/{{this.max}}</span>
|
||||
</div>
|
||||
</td>
|
||||
</tr>
|
||||
{{/each}}
|
||||
</tbody>
|
||||
|
|
|
|||
120
static/css/character-skills.css
Normal file
120
static/css/character-skills.css
Normal file
|
|
@ -0,0 +1,120 @@
|
|||
#talent-template,
|
||||
#talent-tree-template {
|
||||
display: none;
|
||||
}
|
||||
|
||||
.iconmedium.empty .icon-border {
|
||||
background-position: 0px 0px;
|
||||
}
|
||||
|
||||
.iconmedium.empty .icon {
|
||||
filter: grayscale(100%);
|
||||
opacity: 0.7;
|
||||
}
|
||||
|
||||
.iconmedium.notfull .icon-border {
|
||||
background-position: -84px 0px;
|
||||
}
|
||||
|
||||
.iconmedium.full .icon-border {
|
||||
background-position: -42px 0px;
|
||||
}
|
||||
|
||||
.iconmedium .icon-border {
|
||||
width: 42px;
|
||||
height: 42px;
|
||||
position: absolute;
|
||||
left: 1px;
|
||||
top: 1px;
|
||||
background-repeat: no-repeat;
|
||||
}
|
||||
|
||||
.iconmedium a span {
|
||||
display: none;
|
||||
}
|
||||
|
||||
.iconmedium::after {
|
||||
content: attr(rank);
|
||||
background-color: black;
|
||||
position: absolute;
|
||||
top: 30px;
|
||||
left: 30px;
|
||||
font-size: 14px;
|
||||
padding: 0px 2px;
|
||||
z-index: 4;
|
||||
}
|
||||
|
||||
.iconmedium.empty::after {
|
||||
display: none;
|
||||
}
|
||||
|
||||
.iconmedium.full::after,
|
||||
.iconmedium.notfull::after {
|
||||
border-radius: 4px;
|
||||
cursor: default;
|
||||
user-select: none;
|
||||
pointer-events: none;
|
||||
}
|
||||
|
||||
.iconmedium.notfull::after {
|
||||
color: #30ec30;
|
||||
border: 1px solid #30ec30;
|
||||
}
|
||||
|
||||
.iconmedium.full::after {
|
||||
color: #ffcf00;
|
||||
border: 1px solid #ffcf00;
|
||||
}
|
||||
|
||||
.skills-table {
|
||||
width: 33%; /* Ensures all tables take up the full width of the container */
|
||||
}
|
||||
|
||||
.skills-table table {
|
||||
width: 100%; /* Ensures all tables inside .skills-table are the same width */
|
||||
table-layout: fixed; /* Ensures consistent column widths */
|
||||
}
|
||||
|
||||
.skills-table th,
|
||||
.skills-table td {
|
||||
width: 33.33%;
|
||||
}
|
||||
|
||||
.progress-bar-container {
|
||||
width: 100%;
|
||||
background-color: #020018;
|
||||
border-radius: 5px;
|
||||
overflow: hidden;
|
||||
height: 20px;
|
||||
position: relative; /* Enables positioning of child elements */
|
||||
}
|
||||
|
||||
.progress-bar {
|
||||
height: 100%;
|
||||
background-color: #000852;
|
||||
position: absolute; /* Allows the bar to stay behind the text */
|
||||
width: 0%;
|
||||
transition: width 0.3s ease;
|
||||
z-index: 1; /* Ensures the bar is behind the text */
|
||||
}
|
||||
|
||||
.progress-text {
|
||||
position: absolute; /* Positions the text over the bar */
|
||||
top: 50%; /* Centers the text vertically */
|
||||
left: 10px; /* Aligns the text to the left with some padding */
|
||||
transform: translateY(-50%); /* Vertically centers the text */
|
||||
z-index: 2; /* Ensures the text is above the bar */
|
||||
color: white; /* Makes the text visible on the bar */
|
||||
font-weight: bold;
|
||||
font-size: 12px;
|
||||
white-space: nowrap; /* Prevents text from wrapping */
|
||||
}
|
||||
|
||||
#spec-links {
|
||||
margin-bottom: 32px;
|
||||
}
|
||||
|
||||
.gold-text {
|
||||
color: #FFD700; /* Gold color */
|
||||
font-weight: bold; /* Optional: Make the text bold */
|
||||
}
|
||||
Loading…
Add table
Add a link
Reference in a new issue