Free Fire Tournament Free Fire Championship Series The ultimate battle for glory awaits!
Tournament Name: IGNITE CUP 00 Days
00 Hours
00 Minutes
00 Seconds
Register Now Leaderboard Rank Team Points Wins Matches Played
Match Schedule Upcoming Matches
Completed Matches
"; } }, 1000); } // --- Registration Form --- const registrationForm = document.getElementById('registrationForm'); const submittedDataOutput = document.getElementById('submittedDataOutput'); let registeredTeams = JSON.parse(localStorage.getItem('registeredTeams')) || []; function validateField(input, message) { const errorElement = input.nextElementSibling; if (input.value.trim() === '') { input.classList.add('invalid'); errorElement.textContent = message; return false; } input.classList.remove('invalid'); errorElement.textContent = ''; return true; } function validateEmail(input) { const errorElement = input.nextElementSibling; const emailRegex = /^[^\s@]+@[^\s@]+\.[^\s@]+$/; if (!emailRegex.test(input.value.trim())) { input.classList.add('invalid'); errorElement.textContent = 'Please enter a valid email.'; return false; } input.classList.remove('invalid'); errorElement.textContent = ''; return true; } if (registrationForm) { registrationForm.addEventListener('submit', (e) => { e.preventDefault(); const teamNameInput = document.getElementById('teamName'); const player1Input = document.getElementById('player1'); const player2Input = document.getElementById('player2'); const player3Input = document.getElementById('player3'); const player4Input = document.getElementById('player4'); const emailInput = document.getElementById('email'); const contactInput = document.getElementById('contact'); // Basic Validation let isValid = true; if (!validateField(teamNameInput, 'Team Name is required.')) isValid = false; if (!validateField(player1Input, 'Player 1 Name is required.')) isValid = false; if (!validateField(player2Input, 'Player 2 Name is required.')) isValid = false; // Player 3 & 4 are optional, so no validation for empty, but can add other if needed if (!validateEmail(emailInput)) isValid = false; if (!validateField(contactInput, 'Contact Number is required.')) isValid = false; // Could add regex for contact number too. if (!isValid) { // Find the first invalid input and focus it const firstInvalid = registrationForm.querySelector('input.invalid'); if (firstInvalid) { firstInvalid.focus(); } return; } const teamData = { id: Date.now(), // Simple unique ID name: teamNameInput.value.trim(), players: [ player1Input.value.trim(), player2Input.value.trim(), player3Input.value.trim(), player4Input.value.trim() ].filter(p => p !== ''), // Filter out empty optional players email: emailInput.value.trim(), contact: contactInput.value.trim(), logoChar: teamNameInput.value.trim().charAt(0).toUpperCase(), // For placeholder logo status: 'Pending Approval' // Example status }; registeredTeams.push(teamData); localStorage.setItem('registeredTeams', JSON.stringify(registeredTeams)); // Display submitted data dynamically (just the latest one) submittedDataOutput.innerHTML = ` Team Name: ${teamData.name}
Players: ${teamData.players.join(', ')}
Email: ${teamData.email}
Contact: ${teamData.contact}
Status: ${teamData.status}
Registration Successful!
`; registrationForm.reset(); // Clear form fields displayTeams(); // Refresh teams list alert('Registration Successful!'); }); } // --- Teams Page --- const teamsListContainer = document.getElementById('teamsListContainer'); const noTeamsMessage = document.getElementById('noTeamsMessage'); function displayTeams() { if (!teamsListContainer || !noTeamsMessage) return; // Ensure elements exist registeredTeams = JSON.parse(localStorage.getItem('registeredTeams')) || []; teamsListContainer.innerHTML = ''; // Clear existing list if (registeredTeams.length === 0) { noTeamsMessage.style.display = 'block'; return; } noTeamsMessage.style.display = 'none'; registeredTeams.forEach(team => { const teamCard = document.createElement('div'); teamCard.classList.add('card'); let statusClass = 'status-pending'; if (team.status === 'Approved') statusClass = 'status-approved'; else if (team.status === 'Rejected') statusClass = 'status-rejected'; teamCard.innerHTML = ` ${team.logoChar || team.name.charAt(0).toUpperCase()}
${team.name} Members:
${team.players.map(player => `${player} `).join('')} Status: ${team.status}
`; teamsListContainer.appendChild(teamCard); }); } // Call initially if on teams page or when navigating to it // This will be better handled by calling it when the section becomes active // For now, call it once on load. It will be called again on registration. displayTeams(); // Add a listener to refresh when the teams tab is clicked (or section becomes active) navItems.forEach(item => { if (item.dataset.target === 'teams-section') { item.addEventListener('click', displayTeams); } }); // --- Leaderboard Page --- const leaderboardTableBody = document.querySelector('#leaderboardTable tbody'); // Static data for leaderboard const leaderboardData = [ { rank: 1, team: "Alpha Squad", points: 1250, wins: 10, matchesPlayed: 15 }, { rank: 2, team: "Beta Warriors", points: 1180, wins: 9, matchesPlayed: 15 }, { rank: 3, team: "Gamma Ghosts", points: 1100, wins: 8, matchesPlayed: 14 }, { rank: 4, team: "Delta Destroyers", points: 1050, wins: 7, matchesPlayed: 15 }, { rank: 5, team: "Omega Kings", points: 980, wins: 7, matchesPlayed: 13 }, ].sort((a, b) => b.points - a.points); // Ensure sorted by points function displayLeaderboard() { if (!leaderboardTableBody) return; leaderboardTableBody.innerHTML = ''; // Clear existing leaderboardData.forEach((entry, index) => { const row = leaderboardTableBody.insertRow(); row.innerHTML = ` ${index + 1} ${entry.team} ${entry.points} ${entry.wins} ${entry.matchesPlayed} `; }); } // Call initially if on leaderboard page or when navigating to it navItems.forEach(item => { if (item.dataset.target === 'leaderboard-section') { item.addEventListener('click', displayLeaderboard); } }); // Call it if it's the active section on load if (document.getElementById('leaderboard-section').classList.contains('active-section')) { displayLeaderboard(); } // --- Match Schedule Page --- const upcomingMatchesContainer = document.getElementById('upcomingMatchesContainer'); const completedMatchesContainer = document.getElementById('completedMatchesContainer'); // Static data for matches const matchScheduleData = [ { teamA: "Alpha Squad", teamB: "Beta Warriors", date: "2024-07-15", time: "18:00 IST", status: "upcoming" }, { teamA: "Gamma Ghosts", teamB: "Delta Destroyers", date: "2024-07-15", time: "19:30 IST", status: "upcoming" }, { teamA: "Omega Kings", teamB: "Viper Squad", date: "2024-07-16", time: "18:00 IST", status: "upcoming" }, { teamA: "Phoenix Rise", teamB: "Eagle Eye", date: "2024-07-10", time: "17:00 IST", status: "completed", result: "Phoenix Rise Won" }, { teamA: "Shadow Strikers", teamB: "Titan Army", date: "2024-07-10", time: "18:30 IST", status: "completed", result: "Titan Army Won (2-1)" }, ]; function displayMatchSchedule() { if (!upcomingMatchesContainer || !completedMatchesContainer) return; upcomingMatchesContainer.innerHTML = ''; completedMatchesContainer.innerHTML = ''; matchScheduleData.forEach(match => { const matchCard = document.createElement('div'); matchCard.classList.add('card'); matchCard.innerHTML = ` ${match.teamA} vs ${match.teamB} Date: ${new Date(match.date).toLocaleDateString()}
Time: ${match.time}
${match.status === 'completed' ? `Result: ${match.result}
` : 'Status: Upcoming
'} `; if (match.status === 'upcoming') { upcomingMatchesContainer.appendChild(matchCard); } else { completedMatchesContainer.appendChild(matchCard); } }); if(upcomingMatchesContainer.children.length === 0) upcomingMatchesContainer.innerHTML = "No upcoming matches scheduled.
"; if(completedMatchesContainer.children.length === 0) completedMatchesContainer.innerHTML = "No matches completed yet.
"; } // Call initially if on schedule page or when navigating to it navItems.forEach(item => { if (item.dataset.target === 'schedule-section') { item.addEventListener('click', displayMatchSchedule); } }); // Call it if it's the active section on load if (document.getElementById('schedule-section').classList.contains('active-section')) { displayMatchSchedule(); } // Ensure dynamic content is loaded for the initially active section const activeSection = document.querySelector('.content-section.active-section'); if (activeSection) { switch (activeSection.id) { case 'teams-section': displayTeams(); break; case 'leaderboard-section': displayLeaderboard(); break; case 'schedule-section': displayMatchSchedule(); break; } }
});
