279 lines
13 KiB
JavaScript
279 lines
13 KiB
JavaScript
document.addEventListener('DOMContentLoaded', function() {
|
|
|
|
// --- Global State ---
|
|
let myFavorites = []; // Holds the user's favorite players state
|
|
let comparisonPlayer1 = null;
|
|
let comparisonPlayer2 = null;
|
|
|
|
// --- DOM Elements ---
|
|
const authLinks = document.getElementById('auth-links');
|
|
const searchInput = document.getElementById('playerSearch');
|
|
const searchResultsSection = document.getElementById('search-results');
|
|
const searchResultsContainer = document.getElementById('search-results-container');
|
|
const favoritePlayersSection = document.getElementById('favorite-players');
|
|
const favoritePlayersContainer = favoritePlayersSection.querySelector('.row');
|
|
const popularPlayersSection = document.getElementById('popular-players');
|
|
const popularPlayersContainer = popularPlayersSection.querySelector('.row');
|
|
// Comparison elements
|
|
const player1SearchInput = document.getElementById('player1-search');
|
|
const player2SearchInput = document.getElementById('player2-search');
|
|
const player1Results = document.getElementById('player1-results');
|
|
const player2Results = document.getElementById('player2-results');
|
|
const compareBtn = document.getElementById('compare-btn');
|
|
|
|
// --- Auth Logic ---
|
|
const updateAuthUI = (user) => {
|
|
if (user) {
|
|
let adminLink = user.role === 'admin' ? '<a href="/admin.php" class="btn btn-outline-warning me-3">Admin</a>' : '';
|
|
authLinks.innerHTML = `
|
|
${adminLink}
|
|
<span class="navbar-text me-3">Welcome, ${user.username}</span>
|
|
<button id="logout-btn" class="btn btn-outline-light">Logout</button>
|
|
`;
|
|
document.getElementById('logout-btn').addEventListener('click', logout);
|
|
favoritePlayersSection.style.display = 'block';
|
|
loadFavorites();
|
|
} else {
|
|
authLinks.innerHTML = `
|
|
<a href="/login.php" class="btn btn-outline-light me-2">Login</a>
|
|
<a href="/register.php" class="btn btn-light">Register</a>
|
|
`;
|
|
favoritePlayersSection.style.display = 'none';
|
|
}
|
|
};
|
|
|
|
const logout = () => {
|
|
fetch('/api/logout.php').then(() => {
|
|
myFavorites = [];
|
|
window.location.reload();
|
|
});
|
|
};
|
|
|
|
const checkSession = () => {
|
|
fetch('/api/check_session.php')
|
|
.then(response => response.json())
|
|
.then(data => {
|
|
updateAuthUI(data.loggedIn ? data.user : null);
|
|
});
|
|
};
|
|
|
|
// --- Comparison Logic ---
|
|
const setupComparisonSearch = (input, resultsContainer, playerNumber) => {
|
|
input.addEventListener('keyup', function() {
|
|
const searchTerm = input.value.trim();
|
|
if (searchTerm.length < 3) {
|
|
resultsContainer.innerHTML = '';
|
|
resultsContainer.style.display = 'none';
|
|
return;
|
|
}
|
|
|
|
fetch(`/api/search.php?name=${encodeURIComponent(searchTerm)}`)
|
|
.then(response => response.json())
|
|
.then(data => {
|
|
resultsContainer.innerHTML = '';
|
|
if (data.player) {
|
|
resultsContainer.style.display = 'block';
|
|
data.player.slice(0, 5).forEach(player => {
|
|
const item = document.createElement('div');
|
|
item.classList.add('result-item');
|
|
item.textContent = `${player.strPlayer} (${player.strTeam})`;
|
|
item.addEventListener('click', () => {
|
|
if (playerNumber === 1) {
|
|
comparisonPlayer1 = player;
|
|
input.value = player.strPlayer;
|
|
} else {
|
|
comparisonPlayer2 = player;
|
|
input.value = player.strPlayer;
|
|
}
|
|
resultsContainer.innerHTML = '';
|
|
resultsContainer.style.display = 'none';
|
|
checkCompareReady();
|
|
});
|
|
resultsContainer.appendChild(item);
|
|
});
|
|
} else {
|
|
resultsContainer.style.display = 'none';
|
|
}
|
|
});
|
|
});
|
|
};
|
|
|
|
const checkCompareReady = () => {
|
|
if (comparisonPlayer1 && comparisonPlayer2) {
|
|
compareBtn.disabled = false;
|
|
}
|
|
};
|
|
|
|
if (compareBtn) {
|
|
compareBtn.addEventListener('click', () => {
|
|
if (comparisonPlayer1 && comparisonPlayer2) {
|
|
window.location.href = `/compare.php?p1=${comparisonPlayer1.idPlayer}&p2=${comparisonPlayer2.idPlayer}`;
|
|
}
|
|
});
|
|
}
|
|
|
|
// --- Database-backed Favorites Logic (My Favorites) ---
|
|
const loadFavorites = () => {
|
|
fetch('/api/get_favorites.php')
|
|
.then(response => response.json())
|
|
.then(data => {
|
|
if (data.status === 'success') {
|
|
myFavorites = data.favorites;
|
|
renderFavorites();
|
|
}
|
|
});
|
|
};
|
|
|
|
const renderFavorites = () => {
|
|
favoritePlayersContainer.innerHTML = '';
|
|
if (myFavorites.length === 0) {
|
|
favoritePlayersContainer.innerHTML = '<div class="col"><p class="text-center text-secondary">No favorite players added yet.</p></div>';
|
|
return;
|
|
}
|
|
myFavorites.forEach(player => {
|
|
const playerCard = `
|
|
<div class="col-md-4 player-column">
|
|
<a href="/player.php?id=${player.id}" class="player-link">
|
|
<div class="player-card text-center">
|
|
<img src="${player.image_url || 'https://picsum.photos/seed/placeholder/150/150'}" alt="Headshot of ${player.name}" class="img-fluid">
|
|
<div class="player-name">${player.name}</div>
|
|
<div class="player-team">${player.team}</div>
|
|
</div>
|
|
</a>
|
|
<button class="btn btn-sm btn-outline-danger mt-3 remove-favorite-btn" data-player-id="${player.id}">Remove</button>
|
|
</div>
|
|
`;
|
|
favoritePlayersContainer.innerHTML += playerCard;
|
|
});
|
|
document.querySelectorAll('.remove-favorite-btn').forEach(button => {
|
|
button.addEventListener('click', function() {
|
|
removeFromFavorites(this.dataset.playerId);
|
|
});
|
|
});
|
|
};
|
|
|
|
const isFavorite = (playerId) => {
|
|
return myFavorites.some(p => p.id == playerId);
|
|
};
|
|
|
|
const addToFavorites = (player) => {
|
|
fetch('/api/add_favorite.php', { method: 'POST', headers: { 'Content-Type': 'application/json' }, body: JSON.stringify(player) })
|
|
.then(response => response.json())
|
|
.then(data => {
|
|
if (data.status === 'success') {
|
|
myFavorites.push({ id: player.idPlayer, name: player.strPlayer, team: player.strTeam, image_url: player.strCutout });
|
|
renderFavorites();
|
|
loadPopularPlayers();
|
|
} else {
|
|
alert(data.message);
|
|
}
|
|
});
|
|
};
|
|
|
|
const removeFromFavorites = (playerId) => {
|
|
fetch('/api/remove_favorite.php', { method: 'POST', headers: { 'Content-Type': 'application/json' }, body: JSON.stringify({ player_id: playerId }) })
|
|
.then(response => response.json())
|
|
.then(data => {
|
|
if (data.status === 'success') {
|
|
myFavorites = myFavorites.filter(p => p.id != playerId);
|
|
renderFavorites();
|
|
}
|
|
});
|
|
};
|
|
|
|
// --- Database Logic (Popular Players) ---
|
|
const renderPopularPlayers = (players) => {
|
|
popularPlayersContainer.innerHTML = '';
|
|
if (!players || players.length === 0) {
|
|
popularPlayersContainer.innerHTML = '<div class="col"><p class="text-center text-secondary">No popular players yet.</p></div>';
|
|
return;
|
|
}
|
|
players.forEach(player => {
|
|
const playerCard = `
|
|
<div class="col-md-4 player-column">
|
|
<a href="/player.php?id=${player.id}" class="player-link">
|
|
<div class="player-card text-center">
|
|
<img src="${player.image_url || 'https://picsum.photos/seed/placeholder/150/150'}" alt="Headshot of ${player.name}" class="img-fluid">
|
|
<div class="player-name">${player.name}</div>
|
|
<div class="player-team">${player.team}</div>
|
|
<div class="player-stats">Favorited: ${player.favorite_count} times</div>
|
|
</div>
|
|
</a>
|
|
</div>
|
|
`;
|
|
popularPlayersContainer.innerHTML += playerCard;
|
|
});
|
|
};
|
|
|
|
const loadPopularPlayers = () => {
|
|
fetch('/api/get_popular_players.php')
|
|
.then(response => response.json())
|
|
.then(data => {
|
|
if (data.players) renderPopularPlayers(data.players);
|
|
})
|
|
.catch(error => console.error('Error loading popular players:', error));
|
|
};
|
|
|
|
// --- Main Search Logic ---
|
|
if (searchInput) {
|
|
searchInput.addEventListener('keyup', function() {
|
|
const searchTerm = searchInput.value.trim();
|
|
if (searchTerm.length > 2) {
|
|
document.getElementById('favorite-players').style.display = 'none';
|
|
document.getElementById('popular-players').style.display = 'none';
|
|
searchResultsSection.style.display = 'block';
|
|
fetch(`/api/search.php?name=${encodeURIComponent(searchTerm)}`)
|
|
.then(response => response.json())
|
|
.then(data => {
|
|
searchResultsContainer.innerHTML = '';
|
|
if (data.player) {
|
|
data.player.forEach(player => {
|
|
const disabled = isFavorite(player.idPlayer) ? 'disabled' : '';
|
|
const playerCard = `
|
|
<div class="col-md-4 player-column">
|
|
<a href="/player.php?id=${player.idPlayer}" class="player-link">
|
|
<div class="player-card text-center">
|
|
<img src="${player.strCutout || 'https://picsum.photos/seed/placeholder/150/150'}" alt="Headshot of ${player.strPlayer}" class="img-fluid">
|
|
<div class="player-name">${player.strPlayer}</div>
|
|
<div class="player-team">${player.strTeam}</div>
|
|
</div>
|
|
</a>
|
|
<div class="text-center">
|
|
<button class="btn btn-sm btn-outline-info mt-2 add-favorite-btn"
|
|
data-player='${JSON.stringify(player)}' ${disabled}>
|
|
${disabled ? 'Favorited' : 'Add to Favorites'}
|
|
</button>
|
|
</div>
|
|
</div>
|
|
`;
|
|
searchResultsContainer.innerHTML += playerCard;
|
|
});
|
|
document.querySelectorAll('.add-favorite-btn').forEach(button => {
|
|
button.addEventListener('click', function() {
|
|
const playerData = JSON.parse(this.dataset.player);
|
|
addToFavorites(playerData);
|
|
this.textContent = 'Favorited';
|
|
this.disabled = true;
|
|
});
|
|
});
|
|
} else {
|
|
searchResultsContainer.innerHTML = '<p class="text-center text-light">No players found.</p>';
|
|
}
|
|
});
|
|
} else {
|
|
document.getElementById('favorite-players').style.display = 'block';
|
|
document.getElementById('popular-players').style.display = 'block';
|
|
searchResultsSection.style.display = 'none';
|
|
searchResultsContainer.innerHTML = '';
|
|
}
|
|
});
|
|
}
|
|
|
|
// --- Initial Render ---
|
|
checkSession();
|
|
loadPopularPlayers();
|
|
if (player1SearchInput && player2SearchInput) {
|
|
setupComparisonSearch(player1SearchInput, player1Results, 1);
|
|
setupComparisonSearch(player2SearchInput, player2Results, 2);
|
|
}
|
|
}); |