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

add quest comparison page

Browse source
This commit is contained in:
smthbh 2025-04-28 20:27:30 -04:00
parent cf903daa71
commit e6b1d1b09b
5 changed files with 302 additions and 1 deletions
Download patch file Download diff file Expand all files Collapse all files

127
static/character-quests-compare.hbs Normal file
View file

@ -0,0 +1,127 @@
<link rel="stylesheet" type="text/css" href="{{websiteRoot}}/css/character-quests.css">
{{> icons }}
<script type="application/javascript">
const aowow_tooltips = { "renamelinks": true, };
</script>
{{> character-header }}
<div class="quest-compare-section" style="margin-bottom: 20px;">
<div class="field is-horizontal">
<div class="field-label is-normal">
<label class="label">Compare with:</label>
</div>
<div class="field-body">
<div class="field has-addons">
<div class="control is-expanded">
<div class="select is-fullwidth">
<select id="compareCharacter">
<option value="">Select a character...</option>
{{#each data.otherCharacters}}
<option value="{{this.realmName}}/{{this.name}}"
{{#if (eq this.realmName ../data.char2.realm)}}
{{#if (eq this.name ../data.char2.name)}}
selected
{{/if}}
{{/if}}>
{{this.name}} ({{this.realmName}})
</option>
{{/each}}
</select>
</div>
</div>
<div class="control">
<button class="button is-info" id="compareButton" disabled>
Compare Quests
</button>
</div>
</div>
</div>
</div>
</div>
<div class="quest-comparison-header">
<h2>Quest Comparison</h2>
<div class="characters">
<span class="char1">
{{#if (eq data.char2.realm data.char1.realm)}}
{{data.char1.name}}
{{else}}
{{data.char1.realm}}/{{data.char1.name}}
{{/if}}
</span>
vs
<span class="char2">
<a href="{{websiteRoot}}/character/{{data.char2.realm}}/{{data.char2.name}}/quests/compare/{{data.char1.realm}}/{{data.char1.name}}">
{{#if (eq data.char2.realm data.char1.realm)}}
{{data.char2.name}}
{{else}}
{{data.char2.realm}}/{{data.char2.name}}
{{/if}}
</a>
</span>
</div>
</div>
{{#each data.categories as |quests category|}}
<div class="quests-table" style="margin-bottom: 20px;">
<h2 class="is-size-4 category-header collapsible">
{{@key}}
<span class="collapse-icon">▼</span>
</h2>
<div class="category-content">
<table class="table is-striped is-hoverable is-fullwidth">
<thead>
<tr>
<th>Quest</th>
<th>Level</th>
<th>{{../data.char1.name}}</th>
<th>{{../data.char2.name}}</th>
</tr>
</thead>
<tbody>
{{#each this}}
<tr class="{{getDiffClass this}}">
<td class="quest-name">
<a href="{{@root.aowow}}/?quest={{this.id}}">{{this.title}}</a>
</td>
<td class="quest-level">{{this.questLevel}}</td>
<td class="quest-status {{this.char1Status}}">{{this.char1Status}}</td>
<td class="quest-status {{this.char2Status}}">{{this.char2Status}}</td>
</tr>
{{/each}}
</tbody>
</table>
</div>
</div>
{{/each}}
<script>
document.addEventListener('DOMContentLoaded', function() {
document.querySelectorAll('.collapsible').forEach(header => {
header.addEventListener('click', function() {
const content = this.nextElementSibling;
content.classList.toggle('expanded');
this.classList.toggle('expanded');
});
});
const compareSelect = document.getElementById('compareCharacter');
const compareButton = document.getElementById('compareButton');
compareSelect.addEventListener('change', function() {
compareButton.disabled = !compareSelect.value;
});
compareButton.addEventListener('click', function() {
const selected = compareSelect.value;
if (selected) {
const [realm, name] = selected.split('/');
// Get the base path by removing everything after /quests/compare/
const basePath = window.location.pathname.split('/quests/compare/')[0];
window.location.href = `${basePath}/quests/compare/${realm}/${name}`;
}
});
});
</script>

42
static/character-quests.hbs
View file

@ -6,6 +6,33 @@
{{> character-header }}
<div class="quest-compare-section" style="margin-bottom: 20px;">
<div class="field is-horizontal">
<div class="field-label is-normal">
<label class="label">Compare with:</label>
</div>
<div class="field-body">
<div class="field has-addons">
<div class="control is-expanded">
<div class="select is-fullwidth">
<select id="compareCharacter">
<option value="">Select a character...</option>
{{#each data.otherCharacters}}
<option value="{{this.realmName}}/{{this.name}}">{{this.name}} ({{this.realmName}})</option>
{{/each}}
</select>
</div>
</div>
<div class="control">
<button class="button is-info" id="compareButton" disabled>
Compare Quests
</button>
</div>
</div>
</div>
</div>
</div>
{{#each data.categories as |quests category|}}
<div class="quests-table" style="margin-bottom: 20px;">
{{#if (hasInProgressQuests quests)}}
@ -93,5 +120,20 @@ document.addEventListener('DOMContentLoaded', function() {
this.classList.toggle('expanded');
});
});
const compareSelect = document.getElementById('compareCharacter');
const compareButton = document.getElementById('compareButton');
compareSelect.addEventListener('change', function() {
compareButton.disabled = !this.value;
});
compareButton.addEventListener('click', function() {
const selected = compareSelect.value;
if (selected) {
const [realm, name] = selected.split('/');
window.location.href = `${window.location.pathname}/compare/${realm}/${name}`;
}
});
});
</script>

36
static/css/character-quests.css
View file

@ -105,4 +105,40 @@
.category-header:not(.expanded) .collapse-icon {
transform: rotate(-90deg);
}
.quest-comparison-header {
margin-bottom: 20px;
text-align: center;
max-width: 500px;
}
.quest-comparison-header .characters {
font-size: 1.2em;
margin-top: 10px;
}
.quest-comparison-header .char1,
.quest-comparison-header .char2 {
font-weight: bold;
}
tr.quest-diff {
background-color: rgba(255, 255, 0, 0.2) !important;
}
tr.quest-missing-1 td:nth-child(3) {
background-color: rgba(255, 0, 0, 0.2) !important;
}
tr.quest-missing-2 td:nth-child(4) {
background-color: rgba(255, 0, 0, 0.2) !important;
}
.quest-compare-section {
max-width: 500px;
}
.quest-compare-section .select select {
min-width: 200px;
}