210 lines
13 KiB
PHP
210 lines
13 KiB
PHP
<?php
|
|
// --- Data Simulation ---
|
|
$players = [
|
|
['rank' => 1, 'name' => 'Alex Mercer', 'points' => 1500, 'trend' => 'up', 'img' => 'https://picsum.photos/seed/player1/100/100', 'group' => 'B3SC Strikers', 'position' => 'Forward', 'joined_date' => 'December 1, 2020', 'matches_played' => 98, 'wins' => 70, 'losses' => 28],
|
|
['rank' => 2, 'name' => 'Samira Khan', 'points' => 1450, 'trend' => 'up', 'img' => 'https://picsum.photos/seed/player2/100/100', 'group' => 'B3SC Defenders', 'position' => 'Defender', 'joined_date' => 'November 15, 2020', 'matches_played' => 102, 'wins' => 65, 'losses' => 37],
|
|
['rank' => 3, 'name' => 'Leo Martinez', 'points' => 1420, 'trend' => 'down', 'img' => 'https://picsum.photos/seed/player3/100/100', 'group' => 'B3SC Midfield', 'position' => 'Midfielder', 'joined_date' => 'January 5, 2021', 'matches_played' => 95, 'wins' => 60, 'losses' => 35],
|
|
['rank' => 4, 'name' => 'Chloe Davis', 'points' => 1390, 'trend' => 'same', 'img' => 'https://picsum.photos/seed/player4/80/80', 'group' => 'B3SC Strikers', 'position' => 'Forward', 'joined_date' => 'February 20, 2021', 'matches_played' => 90, 'wins' => 58, 'losses' => 32],
|
|
['rank' => 5, 'name' => 'Ben Carter', 'points' => 1350, 'trend' => 'up', 'img' => 'https://picsum.photos/seed/player5/80/80', 'group' => 'B3SC Midfield', 'position' => 'Midfielder', 'joined_date' => 'March 10, 2021', 'matches_played' => 88, 'wins' => 55, 'losses' => 33],
|
|
['rank' => 6, 'name' => 'Eva Rostova', 'points' => 1310, 'trend' => 'down', 'img' => 'https://picsum.photos/seed/player6/80/80', 'group' => 'B3SC Defenders', 'position' => 'Defender', 'joined_date' => 'April 1, 2021', 'matches_played' => 85, 'wins' => 52, 'losses' => 33],
|
|
['rank' => 7, 'name' => 'Daniel Park', 'points' => 1280, 'trend' => 'up', 'img' => 'https://picsum.photos/seed/player7/80/80', 'group' => 'B3SC Midfield', 'position' => 'Midfielder', 'joined_date' => 'May 25, 2021', 'matches_played' => 82, 'wins' => 50, 'losses' => 32],
|
|
['rank' => 8, 'name' => 'Olivia Chen', 'points' => 1250, 'trend' => 'same', 'img' => 'https://picsum.photos/seed/player8/80/80', 'group' => 'B3SC Strikers', 'position' => 'Forward', 'joined_date' => 'June 15, 2021', 'matches_played' => 80, 'wins' => 48, 'losses' => 32],
|
|
['rank' => 9, 'name' => 'Niko Bellic', 'points' => 1220, 'trend' => 'down', 'img' => 'https://picsum.photos/seed/player9/80/80', 'group' => 'B3SC Defenders', 'position' => 'Defender', 'joined_date' => 'July 1, 2021', 'matches_played' => 78, 'wins' => 45, 'losses' => 33],
|
|
['rank' => 10, 'name' => 'Jasmine Kaur', 'points' => 1190, 'trend' => 'up', 'img' => 'https://picsum.photos/seed/player10/80/80', 'group' => 'B3SC Midfield', 'position' => 'Midfielder', 'joined_date' => 'August 10, 2021', 'matches_played' => 75, 'wins' => 42, 'losses' => 33],
|
|
];
|
|
|
|
$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">
|
|
<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): ?>
|
|
<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-img="<?php echo htmlspecialchars($player['img']); ?>"
|
|
data-player-rank="<?php echo $player['rank']; ?>"
|
|
data-player-points="<?php echo $player['points']; ?>"
|
|
data-player-trend="<?php echo $player['trend']; ?>"
|
|
data-player-position="<?php echo htmlspecialchars($player['position']); ?>"
|
|
data-player-joined="<?php echo htmlspecialchars($player['joined_date']); ?>"
|
|
data-player-matches="<?php echo $player['matches_played']; ?>"
|
|
data-player-wins="<?php echo $player['wins']; ?>"
|
|
data-player-losses="<?php echo $player['losses']; ?>"
|
|
style="cursor: pointer;">
|
|
<div class="podium-rank mb-3"><?php echo $player['rank']; ?></div>
|
|
<img src="<?php echo $player['img']; ?>" 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']; ?> 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): ?>
|
|
<tr data-bs-toggle="modal" data-bs-target="#profileModal"
|
|
data-player-name="<?php echo htmlspecialchars($player['name']); ?>"
|
|
data-player-img="<?php echo htmlspecialchars($player['img']); ?>"
|
|
data-player-rank="<?php echo $player['rank']; ?>"
|
|
data-player-points="<?php echo $player['points']; ?>"
|
|
data-player-trend="<?php echo $player['trend']; ?>"
|
|
data-player-position="<?php echo htmlspecialchars($player['position']); ?>"
|
|
data-player-joined="<?php echo htmlspecialchars($player['joined_date']); ?>"
|
|
data-player-matches="<?php echo $player['matches_played']; ?>"
|
|
data-player-wins="<?php echo $player['wins']; ?>"
|
|
data-player-losses="<?php echo $player['losses']; ?>"
|
|
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']; ?></td>
|
|
<td class="align-middle text-center fs-5"><?php echo get_trend_icon($player['trend']); ?></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 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');
|
|
|
|
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">${name}</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>
|