237 lines
12 KiB
PHP
237 lines
12 KiB
PHP
<?php
|
|
session_start();
|
|
require_once 'db/config.php';
|
|
|
|
$current_user = $_SESSION['user'] ?? null;
|
|
|
|
|
|
try {
|
|
$pdo = db();
|
|
$stmt = $pdo->query("SELECT *, DATE_FORMAT(joined_date, '%M %e, %Y') as formatted_joined_date FROM users WHERE role = 'player' ORDER BY points DESC, name ASC");
|
|
$players = $stmt->fetchAll();
|
|
|
|
foreach ($players as $key => &$player) {
|
|
$player['rank'] = $key + 1;
|
|
}
|
|
unset($player);
|
|
|
|
} catch (PDOException $e) {
|
|
die("DB ERROR: " . $e->getMessage());
|
|
}
|
|
|
|
// --- Data Simulation ---
|
|
|
|
$podium = array_slice($players, 0, 3);
|
|
$rest_of_players = array_slice($players, 3);
|
|
|
|
function get_trend_icon($trend) {
|
|
switch ($trend) {
|
|
case 'up':
|
|
return '<i class="bi bi-arrow-up-circle-fill text-success"></i>';
|
|
case 'down':
|
|
return '<i class="bi bi-arrow-down-circle-fill text-danger"></i>';
|
|
default:
|
|
return '<i class="bi bi-dash-circle-fill" style="color: #6E7191;"></i>';
|
|
}
|
|
}
|
|
|
|
function get_trend_icon_modal($trend) {
|
|
switch ($trend) {
|
|
case 'up':
|
|
return '<span class="trend-up"><i class="bi bi-arrow-up-right-circle-fill"></i></span>';
|
|
case 'down':
|
|
return '<span class="trend-down"><i class="bi bi-arrow-down-right-circle-fill"></i></span>';
|
|
default:
|
|
return '<span class="trend-same"><i class="bi bi-dash-circle-fill"></i></span>';
|
|
}
|
|
}
|
|
?>
|
|
<!DOCTYPE html>
|
|
<html lang="en">
|
|
<head>
|
|
<meta charset="UTF-8">
|
|
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
|
<title>B3SC Leaderboard</title>
|
|
<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.3/dist/css/bootstrap.min.css" rel="stylesheet">
|
|
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap-icons@1.11.3/font/bootstrap-icons.min.css">
|
|
<link rel="preconnect" href="https://fonts.googleapis.com">
|
|
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
|
|
<link href="https://fonts.googleapis.com/css2?family=Roboto:wght@400;700;900&display=swap" rel="stylesheet">
|
|
<link rel="stylesheet" href="assets/css/custom.css?v=<?php echo time(); ?>">
|
|
</head>
|
|
<body>
|
|
|
|
<div class="container my-5">
|
|
<header class="text-center mb-5">
|
|
<div class="d-flex justify-content-end mb-2">
|
|
<?php if ($current_user): ?>
|
|
<span class="navbar-text me-3">Welcome, <?php echo htmlspecialchars($current_user['name']); ?>!</span>
|
|
<a href="logout.php" class="btn btn-outline-secondary">Logout</a>
|
|
<?php else: ?>
|
|
<a href="login.php" class="btn btn-primary">Login / Register</a>
|
|
<?php endif; ?>
|
|
</div>
|
|
<h1 class="display-4 fw-bold leaderboard-header">B3SC Leaderboard</h1>
|
|
<p class="lead" style="color: #6E7191;">Season 1 - Premier Division</p>
|
|
</header>
|
|
|
|
<!-- --- Podium Section --- -->
|
|
<section class="podium mb-5">
|
|
<div class="row justify-content-center align-items-end">
|
|
<?php foreach ($podium as $index => $player): ?>
|
|
<?php
|
|
$player_photo = !empty($player['photo']) ? htmlspecialchars($player['photo']) : 'https://picsum.photos/seed/'.md5($player['name']).'/100/100';
|
|
?>
|
|
<div class="col-12 col-md-4 <?php echo $index == 0 ? 'order-md-2' : ($index == 1 ? 'order-md-1' : 'order-md-3'); ?> mb-4 mb-md-0">
|
|
<div class="podium-card rank-<?php echo $player['rank']; ?> text-center p-4"
|
|
data-bs-toggle="modal" data-bs-target="#profileModal"
|
|
data-player-name="<?php echo htmlspecialchars($player['name']); ?>"
|
|
data-player-nickname="<?php echo htmlspecialchars($player['nickname'] ?? '--'); ?>"
|
|
data-player-img="<?php echo $player_photo; ?>"
|
|
data-player-rank="<?php echo $player['rank'] ?? '--'; ?>"
|
|
data-player-points="<?php echo $player['points'] ?? 0; ?>"
|
|
data-player-trend="<?php echo $player['trend'] ?? 'same'; ?>"
|
|
data-player-position="<?php echo htmlspecialchars($player['position'] ?? '--'); ?>"
|
|
data-player-joined="<?php echo htmlspecialchars($player['formatted_joined_date'] ?? '--'); ?>"
|
|
data-player-matches="<?php echo $player['matches_played'] ?? 0; ?>"
|
|
data-player-wins="<?php echo $player['wins'] ?? 0; ?>"
|
|
data-player-losses="<?php echo $player['losses'] ?? 0; ?>"
|
|
style="cursor: pointer;">
|
|
<div class="podium-rank mb-3"><?php echo $player['rank'] ?? '--'; ?></div>
|
|
<img src="<?php echo $player_photo; ?>" alt="B3SC #<?php echo $player['rank']; ?> ranked player" class="podium-img mb-3">
|
|
<div class="podium-name"><?php echo htmlspecialchars($player['name']); ?></div>
|
|
<div class="podium-points"><?php echo $player['points'] ?? 0; ?> PTS</div>
|
|
</div>
|
|
</div>
|
|
<?php endforeach; ?>
|
|
</div>
|
|
</section>
|
|
|
|
<!-- --- Full Leaderboard Table --- -->
|
|
<section class="leaderboard-table-section">
|
|
<div class="leaderboard-table p-3">
|
|
<table class="table table-hover mb-0">
|
|
<thead>
|
|
<tr>
|
|
<th scope="col">Rank</th>
|
|
<th scope="col">Player</th>
|
|
<th scope="col" class="text-end">Points</th>
|
|
<th scope="col" class="text-center">Trend</th>
|
|
</tr>
|
|
</thead>
|
|
<tbody>
|
|
<?php foreach ($rest_of_players as $player): ?>
|
|
<?php
|
|
$player_photo = !empty($player['photo']) ? htmlspecialchars($player['photo']) : 'https://picsum.photos/seed/'.md5($player['name']).'/80/80';
|
|
?>
|
|
<tr data-bs-toggle="modal" data-bs-target="#profileModal"
|
|
data-player-name="<?php echo htmlspecialchars($player['name']); ?>"
|
|
data-player-nickname="<?php echo htmlspecialchars($player['nickname'] ?? '--'); ?>"
|
|
data-player-img="<?php echo $player_photo; ?>"
|
|
data-player-rank="<?php echo $player['rank'] ?? '--'; ?>"
|
|
data-player-points="<?php echo $player['points'] ?? 0; ?>"
|
|
data-player-trend="<?php echo $player['trend'] ?? 'same'; ?>"
|
|
data-player-position="<?php echo htmlspecialchars($player['position'] ?? '--'); ?>"
|
|
data-player-joined="<?php echo htmlspecialchars($player['formatted_joined_date'] ?? '--'); ?>"
|
|
data-player-matches="<?php echo $player['matches_played'] ?? 0; ?>"
|
|
data-player-wins="<?php echo $player['wins'] ?? 0; ?>"
|
|
data-player-losses="<?php echo $player['losses'] ?? 0; ?>"
|
|
style="cursor: pointer;">
|
|
<th scope="row" class="align-middle"><?php echo $player['rank'] ?? '--'; ?></th>
|
|
<td class="align-middle player-name"><?php echo htmlspecialchars($player['name']); ?></td>
|
|
<td class="align-middle text-end fw-bold" style="color: #361C7A;"><?php echo $player['points'] ?? 0; ?></td>
|
|
<td class="align-middle text-center fs-5"><?php echo get_trend_icon($player['trend'] ?? 'same'); ?></td>
|
|
</tr>
|
|
<?php endforeach; ?>
|
|
</tbody>
|
|
</table>
|
|
</div>
|
|
</section>
|
|
</div>
|
|
|
|
<!-- Profile Modal -->
|
|
<div class="modal fade" id="profileModal" tabindex="-1" aria-labelledby="profileModalLabel" aria-hidden="true">
|
|
<div class="modal-dialog modal-dialog-centered">
|
|
<div class="modal-content">
|
|
<div class="modal-body p-0">
|
|
<!-- Profile content will be injected here -->
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.3/dist/js/bootstrap.bundle.min.js"></script>
|
|
<script>
|
|
const profileModal = document.getElementById('profileModal');
|
|
profileModal.addEventListener('show.bs.modal', event => {
|
|
const triggerElement = event.relatedTarget;
|
|
|
|
const name = triggerElement.getAttribute('data-player-name');
|
|
const nickname = triggerElement.getAttribute('data-player-nickname');
|
|
const img = triggerElement.getAttribute('data-player-img').replace('/100/100', '/150/150').replace('/80/80', '/150/150');
|
|
const rank = triggerElement.getAttribute('data-player-rank');
|
|
const points = triggerElement.getAttribute('data-player-points');
|
|
const trend = triggerElement.getAttribute('data-player-trend');
|
|
const position = triggerElement.getAttribute('data-player-position');
|
|
const joined = triggerElement.getAttribute('data-player-joined');
|
|
const matches = triggerElement.getAttribute('data-player-matches');
|
|
const wins = triggerElement.getAttribute('data-player-wins');
|
|
const losses = triggerElement.getAttribute('data-player-losses');
|
|
|
|
const displayName = (nickname && nickname !== '--') ? `${name} (${nickname})` : name;
|
|
|
|
function getTrendIconModal(trend) {
|
|
if (trend === 'up') {
|
|
return '<span class="trend-up"><i class="bi bi-arrow-up-right-circle-fill"></i></span>';
|
|
} else if (trend === 'down') {
|
|
return '<span class="trend-down"><i class="bi bi-arrow-down-right-circle-fill"></i></span>';
|
|
} else {
|
|
return '<span class="trend-same"><i class="bi bi-dash-circle-fill"></i></span>';
|
|
}
|
|
}
|
|
|
|
const modalBody = profileModal.querySelector('.modal-body');
|
|
modalBody.innerHTML = `
|
|
<div class="profile-card">
|
|
<div class="profile-header">
|
|
<button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close" style="position: absolute; top: 1rem; right: 1rem;"></button>
|
|
<img src="${img}" alt="${name}" class="profile-avatar">
|
|
<h1 class="profile-name">${displayName}</h1>
|
|
<p class="profile-position">${position}</p>
|
|
<p class="profile-joined">Joined on ${joined}</p>
|
|
</div>
|
|
<div class="profile-body">
|
|
<div class="stats-grid">
|
|
<div class="stat-item">
|
|
<div class="stat-value">${rank}</div>
|
|
<div class="stat-label">Rank</div>
|
|
</div>
|
|
<div class="stat-item">
|
|
<div class="stat-value">${points}</div>
|
|
<div class="stat-label">Points</div>
|
|
</div>
|
|
<div class="stat-item">
|
|
<div class="stat-value">${getTrendIconModal(trend)}</div>
|
|
<div class="stat-label">Trend</div>
|
|
</div>
|
|
<div class="stat-item">
|
|
<div class="stat-value">${matches}</div>
|
|
<div class="stat-label">Played</div>
|
|
</div>
|
|
<div class="stat-item">
|
|
<div class="stat-value">${wins}</div>
|
|
<div class="stat-label">Wins</div>
|
|
</div>
|
|
<div class="stat-item">
|
|
<div class="stat-value">${losses}</div>
|
|
<div class="stat-label">Losses</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
`;
|
|
});
|
|
</script>
|
|
</body>
|
|
</html>
|