+
PLAYER, First
OH | #4 | G8 | 172cm
@@ -2681,13 +1676,100 @@
document.getElementById('juniorsContent').classList.remove('hidden');
document.getElementById('seniorsContent').classList.add('hidden');
});
-
- // Filter functionality
+ // Filter functionality with header animations
function applyFilters() {
const genderFilter = document.getElementById('genderFilter').value;
const statusFilter = document.getElementById('statusFilter').value;
- // Get all player cards
+ // Animate headers out
+ const headers = document.querySelectorAll('.team-header');
+ headers.forEach(header => {
+ header.classList.add('fade-out');
+ });
+
+ // Wait for animation to complete before filtering
+ setTimeout(() => {
+ // Get all player cards
+ const playerCards = document.querySelectorAll('.player-card');
+
+ playerCards.forEach(card => {
+ const playerName = card.querySelector('h4').textContent;
+ const playerInfo = card.querySelector('p').textContent;
+ const isStarter = card.classList.contains('starter');
+ const isSubstitute = card.classList.contains('substitute');
+
+ // Extract team info from parent container
+ const teamColumn = card.closest('.team-column');
+ let teamInfo = '';
+ if (teamColumn) {
+ const header = teamColumn.querySelector('.team-header');
+ if (header) {
+ teamInfo = header.querySelector('.team-title').textContent.toLowerCase();
+ }
+ }
+
+ // Gender check
+ let genderMatch = true;
+ if (genderFilter !== 'all') {
+ if (genderFilter === 'male' && teamInfo.includes('female')) {
+ genderMatch = false;
+ } else if (genderFilter === 'female' && !teamInfo.includes('female')) {
+ genderMatch = false;
+ }
+ }
+
+ // Status check
+ let statusMatch = true;
+ if (statusFilter !== 'all') {
+ if (statusFilter === 'starter' && !isStarter) {
+ statusMatch = false;
+ } else if (statusFilter === 'substitute' && !isSubstitute) {
+ statusMatch = false;
+ }
+ }
+
+ // Apply filters
+ if (genderMatch && statusMatch) {
+ card.style.display = 'block';
+ } else {
+ card.style.display = 'none';
+ }
+ });
+
+ // Update headers with new counts and animate back in
+ updateTeamHeaders();
+ setTimeout(() => {
+ headers.forEach(header => {
+ header.classList.remove('fade-out');
+ header.classList.add('slide-down');
+ });
+
+ // Remove slide-down class after animation
+ setTimeout(() => {
+ headers.forEach(header => {
+ header.classList.remove('slide-down');
+ });
+ }, 300);
+ }, 50);
+ }, 300);
+ }
+
+ function updateTeamHeaders() {
+ const teamColumns = document.querySelectorAll('.team-column');
+
+ teamColumns.forEach(column => {
+ const header = column.querySelector('.team-header');
+ if (header) {
+ const starters = column.querySelectorAll('.starter:not([style*="display: none"])').length;
+ const substitutes = column.querySelectorAll('.substitute:not([style*="display: none"])').length;
+ const statsElement = header.querySelector('.team-stats');
+ if (statsElement) {
+ statsElement.textContent = `${starters} Starters • ${substitutes} Substitutes`;
+ }
+ }
+ });
+ }
+// Get all player cards
const playerCards = document.querySelectorAll('.player-card');
playerCards.forEach(card => {
@@ -2731,15 +1813,14 @@
}
});
}
-
// Add event listeners to filters
document.getElementById('genderFilter').addEventListener('change', applyFilters);
document.getElementById('statusFilter').addEventListener('change', applyFilters);
+
// Search functionality with debounce
let searchTimeout;
const searchInput = document.getElementById('playerSearch');
-
- searchInput.addEventListener('input', function() {
+searchInput.addEventListener('input', function() {
clearTimeout(searchTimeout);
const spinner = document.getElementById('loadingSpinner');
spinner.style.display = 'block';
@@ -2781,13 +1862,13 @@
position: "Outside Hitter",
number: "5",
grade: "12",
- height: "170cm",
+ height: "178cm",
yearsOnTeam: "3",
- kills: "245",
- digs: "187",
- aces: "32",
+ kills: "247",
+ digs: "212",
+ aces: "34",
blocks: "45",
- bio: "Sethean has been a key player for the NAGAS volleyball program since joining as a freshman. Known for her powerful spikes and defensive skills, she has led the team to multiple championship victories. Her leadership on the court and dedication to training make her an inspiration to younger players."
+ bio: "3-year starter and team captain. Sethean has been a key player for the NAGAS volleyball program since joining as a freshman. Known for her powerful spikes and defensive skills, she has led the team to multiple championship victories. Her leadership on the court and dedication to training make her an inspiration to younger players."
};
} else {
playerData = {
@@ -2801,11 +1882,10 @@
digs: "0",
aces: "0",
blocks: "0",
- bio: "This player has shown great dedication to the sport and the team. Through consistent training and improvement, they have become a valuable member of the squad. Their commitment to excellence both on and off the court exemplifies the values of NAGAS Athletics."
+ bio: "Player bio coming soon for the 2025-26 season..."
};
}
-
- content.innerHTML = `
+content.innerHTML = `
#${playerData.number}
@@ -2813,7 +1893,6 @@
${playerData.name}
${playerData.position} | Grade ${playerData.grade} | ${playerData.height}
-
${playerData.kills}
@@ -2832,8 +1911,7 @@
Blocks
-
-
+
-
Player Bio
${playerData.bio}
- `;
+`;
modal.classList.add('active');
}