chg: usr: add filter to the Profile page's recent plays and an infite list too #7
This commit is contained in:
@@ -29,3 +29,28 @@ if (battleRoot) {
|
||||
<BattleDialog games={JSON.parse(battleRoot.dataset.games)} />,
|
||||
);
|
||||
}
|
||||
|
||||
const list = document.querySelector('.profile-games');
|
||||
const loadMoreBtn = document.querySelector('[data-load-more]');
|
||||
if (list && loadMoreBtn) {
|
||||
const batchSize = parseInt(list.dataset.batchSize, 10) || 5;
|
||||
loadMoreBtn.addEventListener('click', () => {
|
||||
const hidden = list.querySelectorAll('.profile-game--hidden');
|
||||
Array.from(hidden).slice(0, batchSize).forEach((el) => el.classList.remove('profile-game--hidden'));
|
||||
if (list.querySelectorAll('.profile-game--hidden').length === 0) {
|
||||
loadMoreBtn.remove();
|
||||
}
|
||||
});
|
||||
}
|
||||
|
||||
const filterInput = document.querySelector('[data-filter]');
|
||||
if (list && filterInput) {
|
||||
filterInput.addEventListener('input', () => {
|
||||
const term = filterInput.value.trim().toLowerCase();
|
||||
list.classList.toggle('is-filtering', term.length > 0);
|
||||
list.querySelectorAll('.profile-game').forEach((card) => {
|
||||
const opp = card.querySelector('.profile-game__opponent')?.textContent.trim().toLowerCase() ?? '';
|
||||
card.classList.toggle('profile-game--filtered-out', term.length > 0 && !opp.includes(term));
|
||||
});
|
||||
});
|
||||
}
|
||||
|
||||
Reference in New Issue
Block a user