chg: dev: massive refactor on front-end for unification and readiness #8
This commit is contained in:
@@ -1,18 +1,30 @@
|
||||
/**
|
||||
* This file is part of the SplendidBear Websites' projects.
|
||||
*
|
||||
* Copyright (c) 2026 @ www.splendidbear.org
|
||||
*
|
||||
* For the full copyright and license information, please view the LICENSE
|
||||
* file that was distributed with this source code.
|
||||
*/
|
||||
|
||||
import React from 'react';
|
||||
import { createRoot } from 'react-dom/client';
|
||||
import ProfileCharts from './components/ProfileCharts';
|
||||
import BattleDialog from './components/BattleDialog';
|
||||
import AvatarUpload from './components/AvatarUpload';
|
||||
import { QueryClient, QueryClientProvider } from '@tanstack/react-query';
|
||||
import { AvatarUpload, BattleDialog, ProfileCharts } from '@global-components';
|
||||
|
||||
const queryClient = new QueryClient();
|
||||
|
||||
const avatarRoot = document.getElementById('profile-avatar-root');
|
||||
if (avatarRoot) {
|
||||
const { uploadUrl, thumbUrl, initials } = avatarRoot.dataset;
|
||||
createRoot(avatarRoot).render(
|
||||
<AvatarUpload
|
||||
uploadUrl={uploadUrl}
|
||||
initialThumbUrl={thumbUrl || null}
|
||||
initials={initials}
|
||||
/>,
|
||||
<QueryClientProvider client={queryClient}>
|
||||
<AvatarUpload
|
||||
uploadUrl={uploadUrl}
|
||||
initialThumbUrl={thumbUrl || null}
|
||||
initials={initials}
|
||||
/>
|
||||
</QueryClientProvider>,
|
||||
);
|
||||
}
|
||||
|
||||
@@ -36,8 +48,8 @@ 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) {
|
||||
Array.from(hidden).slice(0, batchSize).forEach(el => el.classList.remove('profile-game--hidden'));
|
||||
if (0 === list.querySelectorAll('.profile-game--hidden').length) {
|
||||
loadMoreBtn.remove();
|
||||
}
|
||||
});
|
||||
@@ -47,10 +59,10 @@ 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) => {
|
||||
list.classList.toggle('is-filtering', 0 < term.length);
|
||||
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));
|
||||
card.classList.toggle('profile-game--filtered-out', 0 < term.length && !opp.includes(term));
|
||||
});
|
||||
});
|
||||
}
|
||||
|
||||
Reference in New Issue
Block a user