document.addEventListener('DOMContentLoaded', () => {
// --- DOM ELEMENT SELECTION ---
const pages = document.querySelectorAll('.page');
const navLinks = document.querySelectorAll('.nav-link');
const themeToggle = document.getElementById('theme-toggle');
// Countdown Timer
const daysEl = document.getElementById('days');
const hoursEl = document.getElementById('hours');
const minutesEl = document.getElementById('minutes');
const secondsEl = document.getElementById('seconds');
// Registration Form
const registrationForm = document.getElementById('registration-form');
const formFeedback = document.getElementById('form-feedback');
const submittedDataPreview = document.querySelector('#submitted-data-preview .card');
const submittedDataContainer = document.getElementById('submitted-data-preview');
// Dynamic Content Containers
const teamsListContainer = document.getElementById('teams-list');
const leaderboardBody = document.getElementById('leaderboard-body');
const upcomingMatchesContainer = document.getElementById('upcoming-matches');
const completedMatchesContainer = document.getElementById('completed-matches');
// --- MOCK DATA ---
// In a real app, this would come from a server.
const leaderboardData = [
{ rank: 1, team: 'Team Hydra', wins: 15, points: 1550, status: 'Live' },
{ rank: 2, team: 'GodLike Esports', wins: 12, points: 1400, status: 'Finished' },
{ rank: 3, team: 'TSM Entity', wins: 10, points: 1320, status: 'Finished' },
{ rank: 4, team: 'Orange Rock', wins: 9, points: 1250, status: 'Finished' },
{ rank: 5, team: 'Soul Esports', wins: 8, points: 1100, status: 'Finished' },
];
const scheduleData = [
{ teams: ['Team Hydra', 'GodLike Esports'], date: '2024-10-28', time: '18:00 IST', status: 'upcoming' },
{ teams: ['TSM Entity', 'Orange Rock'], date: '2024-10-28', time: '19:00 IST', status: 'upcoming' },
{ teams: ['Soul Esports', 'Fnatic'], date: '2024-10-29', time: '18:00 IST', status: 'upcoming' },
{ teams: ['Galaxy Racer', 'Team Elite'], date: '2024-10-25', time: '18:00 IST', status: 'completed', result: 'Galaxy Racer Won' },
{ teams: ['Blind Esports', 'Revenant'], date: '2024-10-25', time: '19:00 IST', status: 'completed', result: 'Revenant Won' }
];
// --- DATA MANAGEMENT (localStorage) ---
// Load teams from localStorage or initialize an empty array
let registeredTeams = JSON.parse(localStorage.getItem('registeredTeams')) || [];
const saveTeams = () => {
localStorage.setItem('registeredTeams', JSON.stringify(registeredTeams));
};
// --- THEME MANAGEMENT ---
const applyTheme = (theme) => {
document.documentElement.setAttribute('data-theme', theme);
localStorage.setItem('theme', theme);
themeToggle.checked = theme === 'dark';
};
themeToggle.addEventListener('change', (e) => {
applyTheme(e.target.checked ? 'dark' : 'light');
});
// --- NAVIGATION ---
const showPage = (pageId) => {
pages.forEach(page => page.classList.remove('active'));
document.getElementById(pageId).classList.add('active');
navLinks.forEach(link => {
link.classList.toggle('active', link.dataset.page === pageId);
});
window.scrollTo(0,0); // Scroll to top on page change
};
document.querySelector('header').addEventListener('click', (e) => {
if (e.target.matches('.nav-link, .logo, .btn')) {
e.preventDefault();
const pageId = e.target.dataset.page;
if (pageId) showPage(pageId);
}
});
// --- DYNAMIC CONTENT RENDERING ---
// Render Registered Teams
const renderTeams = () => {
teamsListContainer.innerHTML = '';
if (registeredTeams.length === 0) {
teamsListContainer.innerHTML = 'No teams have registered yet. Be the first!
';
return;
}
registeredTeams.forEach(team => {
const teamCard = document.createElement('div');
teamCard.className = 'card team-card';
teamCard.innerHTML = `
${team.name}
${team.players.map(player => `- ${player}
`).join('')}
Confirmed
`;
teamsListContainer.appendChild(teamCard);
});
};
// Render Leaderboard
const renderLeaderboard = () => {
leaderboardBody.innerHTML = '';
leaderboardData.forEach(item => {
const row = document.createElement('tr');
row.innerHTML = `
#${item.rank} |
${item.team} |
${item.wins} |
${item.points} |
${item.status} |
`;
leaderboardBody.appendChild(row);
});
};
// Render Match Schedule
const renderSchedule = () => {
upcomingMatchesContainer.innerHTML = '';
completedMatchesContainer.innerHTML = '';
scheduleData.forEach(match => {
const matchCard = document.createElement('div');
matchCard.className = `card match-card ${match.status}`;
if(match.status === 'upcoming') {
matchCard.innerHTML = `
${match.teams[0]} vs ${match.teams[1]}
${match.date} | ${match.time}
`;
upcomingMatchesContainer.appendChild(matchCard);
} else {
matchCard.innerHTML = `
${match.teams[0]} vs ${match.teams[1]}
${match.date}
Result: ${match.result}
`;
completedMatchesContainer.appendChild(matchCard);
}
});
};
// --- COUNTDOWN TIMER LOGIC ---
const tournamentStartDate = new Date('Jan 1, 2025 00:00:00').getTime();
const updateCountdown = () => {
const now = new Date().getTime();
const distance = tournamentStartDate - now;
const days = Math.floor(distance / (1000 * 60 * 60 * 24));
const hours = Math.floor((distance % (1000 * 60 * 60 * 24)) / (1000 * 60 * 60));
const minutes = Math.floor((distance % (1000 * 60 * 60)) / (1000 * 60));
const seconds = Math.floor((distance % (1000 * 60)) / 1000);
daysEl.innerText = days < 10 ? '0' + days : days;
hoursEl.innerText = hours < 10 ? '0' + hours : hours;
minutesEl.innerText = minutes < 10 ? '0' + minutes : minutes;
secondsEl.innerText = seconds < 10 ? '0' + seconds : seconds;
if (distance < 0) {
clearInterval(countdownInterval);
document.getElementById('countdown').innerHTML = "The Tournament has started!
";
}
};
const countdownInterval = setInterval(updateCountdown, 1000);
// --- REGISTRATION FORM LOGIC ---
registrationForm.addEventListener('submit', (e) => {
e.preventDefault();
// Get form values
const teamName = document.getElementById('team-name').value.trim();
const players = [
document.getElementById('player1').value.trim(),
document.getElementById('player2').value.trim(),
document.getElementById('player3').value.trim(),
document.getElementById('player4').value.trim(),
];
const email = document.getElementById('email').value.trim();
const contact = document.getElementById('contact').value.trim();
// Validation
if (!teamName || players.some(p => !p) || !email || !contact) {
showFeedback('Please fill out all required fields.', 'error');
return;
}
if (!validateEmail(email)) {
showFeedback('Please enter a valid email address.', 'error');
return;
}
// Create team object
const newTeam = {
id: Date.now(),
name: teamName,
players: players,
email: email,
contact: contact
};
// Add to array and save to localStorage
registeredTeams.push(newTeam);
saveTeams();
// Provide feedback
showFeedback('Registration successful! Your team has been added.', 'success');
displaySubmittedData(newTeam);
registrationForm.reset();
// Re-render the teams list to include the new team
renderTeams();
});
const showFeedback = (message, type) => {
formFeedback.textContent = message;
formFeedback.className = type;
setTimeout(() => {
formFeedback.textContent = '';
formFeedback.className = '';
}, 4000);
};
const validateEmail = (email) => {
const re = /^(([^<>()[\]\\.,;:\s@"]+(\.[^<>()[\]\\.,;:\s@"]+)*)|(".+"))@((\[[0-9]{1,3}\.[0-9]{1,3}\.[0-9]{1,3}\.[0-9]{1,3}\])|(([a-zA-Z\-0-9]+\.)+[a-zA-Z]{2,}))$/;
return re.test(String(email).toLowerCase());
};
const displaySubmittedData = (team) => {
submittedDataPreview.innerHTML = `
${team.name}
Leader: ${team.players[0]}
Email: ${team.email}
Your team is now visible on the 'Teams' page.
`;
submittedDataContainer.style.display = 'block';
submittedDataPreview.style.display = 'block';
};
// --- INITIALIZATION ---
const init = () => {
// Load theme from localStorage or default to light
const savedTheme = localStorage.getItem('theme') || 'light';
applyTheme(savedTheme);
// Initial renders
updateCountdown();
renderTeams();
renderLeaderboard();
renderSchedule();
// Set initial page
showPage('home');
};
init();
});