112 lines
4.4 KiB
JavaScript
112 lines
4.4 KiB
JavaScript
|
|
document.addEventListener('DOMContentLoaded', function() {
|
|
|
|
const comparisonContainer = document.getElementById('comparison-container');
|
|
const authLinks = document.getElementById('auth-links');
|
|
|
|
// --- 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);
|
|
} 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>
|
|
`;
|
|
}
|
|
};
|
|
|
|
const logout = () => {
|
|
fetch('/api/logout.php').then(() => window.location.href = '/');
|
|
};
|
|
|
|
const checkSession = () => {
|
|
fetch('/api/check_session.php')
|
|
.then(response => response.json())
|
|
.then(data => {
|
|
updateAuthUI(data.loggedIn ? data.user : null);
|
|
});
|
|
};
|
|
|
|
// --- Comparison Logic ---
|
|
const renderComparison = (players) => {
|
|
const [p1, p2] = players;
|
|
|
|
comparisonContainer.innerHTML = `
|
|
<div class="col-md-6">
|
|
<div class="player-card text-center">
|
|
<img src="${p1.strCutout || p1.strThumb}" class="img-fluid rounded-circle" alt="${p1.strPlayer}">
|
|
<h2 class="mt-3">${p1.strPlayer}</h2>
|
|
<p class="text-secondary">${p1.strTeam}</p>
|
|
</div>
|
|
</div>
|
|
<div class="col-md-6">
|
|
<div class="player-card text-center">
|
|
<img src="${p2.strCutout || p2.strThumb}" class="img-fluid rounded-circle" alt="${p2.strPlayer}">
|
|
<h2 class="mt-3">${p2.strPlayer}</h2>
|
|
<p class="text-secondary">${p2.strTeam}</p>
|
|
</div>
|
|
</div>
|
|
<div class="col-12 mt-4">
|
|
<div class="player-card">
|
|
<h3 class="text-center">Stat Comparison</h3>
|
|
<table class="table table-dark table-striped">
|
|
<tbody>
|
|
${createComparisonRow('Position', p1.strPosition, p2.strPosition)}
|
|
${createComparisonRow('Height', p1.strHeight, p2.strHeight)}
|
|
${createComparisonRow('Weight', p1.strWeight, p2.strWeight)}
|
|
${createComparisonRow('Nationality', p1.strNationality, p2.strNationality)}
|
|
${createComparisonRow('Date of Birth', p1.dateBorn, p2.dateBorn)}
|
|
</tbody>
|
|
</table>
|
|
</div>
|
|
</div>
|
|
`;
|
|
};
|
|
|
|
const createComparisonRow = (label, val1, val2) => {
|
|
return `
|
|
<tr>
|
|
<td class="text-end">${val1 || 'N/A'}</td>
|
|
<th class="text-center">${label}</th>
|
|
<td>${val2 || 'N/A'}</td>
|
|
</tr>
|
|
`;
|
|
};
|
|
|
|
const loadComparisonData = () => {
|
|
const urlParams = new URLSearchParams(window.location.search);
|
|
const p1Id = urlParams.get('p1');
|
|
const p2Id = urlParams.get('p2');
|
|
|
|
if (!p1Id || !p2Id) {
|
|
comparisonContainer.innerHTML = '<div class="alert alert-danger">Two player IDs are required for comparison.</div>';
|
|
return;
|
|
}
|
|
|
|
fetch(`/api/get_player_comparison.php?p1=${p1Id}&p2=${p2Id}`)
|
|
.then(response => response.json())
|
|
.then(data => {
|
|
if (data.status === 'success') {
|
|
renderComparison(data.players);
|
|
} else {
|
|
comparisonContainer.innerHTML = `<div class="alert alert-danger">${data.message}</div>`;
|
|
}
|
|
})
|
|
.catch(error => {
|
|
console.error('Error loading comparison data:', error);
|
|
comparisonContainer.innerHTML = '<div class="alert alert-danger">An error occurred.</div>';
|
|
});
|
|
};
|
|
|
|
// --- Initial Load ---
|
|
checkSession();
|
|
loadComparisonData();
|
|
});
|