Add Pro League ranking to homepage

index.php

@@ -20,6 +20,7 @@ function startsWith($haystack, $needle) {
 ?>
 <link rel="stylesheet" href="styles/slider.css" />
 <link rel="stylesheet" href="styles/photoswipe.css" />
+<link rel="stylesheet" href="styles/pro-league.css" />
 <?php
 include('o_online.php');
 ?>
@@ -670,6 +671,58 @@ function display_sidebar($title,$link=null) {
 			?>
 			<a class="right_section_actions action_button" href="listNews.php"><?php echo $language ? 'All news':'Toutes les news'; ?></a>
 		</div>
+		<div class="subsection">
+			<?php
+			display_sidebar('MKPC Pro League', 'topic.php?topic=10070');
+			?>
+			<h2><?php echo $language ? 'Current ranking':'Classement actuel'; ?></h2>
+			<div id="pro-league" class="right_subsection">
+				<table>
+					<tr>
+						<th><?php echo $language ? 'Rank':'Rang'; ?></th>
+						<th><?php echo $language ? 'Team':'Équipe'; ?></th>
+						<th>Score</th>
+					</tr>
+					<?php
+					$plRanking = array(
+						array(
+							'name' => 'Celestial Guardians',
+							'icon' => 'celestial-guardians.png',
+							'score' => 10
+						),
+						array(
+							'name' => 'Senko Nation',
+							'icon' => 'senko-nation.png',
+							'score' => 5
+						),
+						array(
+							'name' => 'Red Stari FC',
+							'icon' => 'red-stari.png',
+							'score' => 7
+						),
+					);
+					usort($plRanking, function($team1, $team2) {
+						return $team2['score'] - $team1['score'];
+					});
+					foreach ($plRanking as $i=>$team) {
+						?>
+						<tr>
+						<td><?php echo ($i+1); ?></td>
+						<td>
+							<div>
+								<img src="images/events/pro-league/<?php echo $team['icon']; ?>" alt="<?php echo $team['name']; ?>" />
+								<?php echo $team['name']; ?>
+							</div>
+						</td>
+						<td><?php echo $team['score']; ?></td>
+						</tr>
+						<?php
+					}
+					?>
+				</table>
+			</div>
+			<div class="link-extra"><a href="https://discord.gg/dPerbeFc36" target="_blank"><?php echo $language ? 'Tournament\'s Discord Server':'Serveur Discord du tournoi'; ?></a></div>
+		</div>
 		<div class="subsection">
 			<?php
 			display_sidebar($language ? 'Track builder':'Éditeur de circuit', 'creations.php');

styles/pro-league.css

@@ -0,0 +1,67 @@
+#pro-league {
+	border: solid 2px #ccf;
+	border-radius: 2px;
+	margin-top: 5px;
+	margin-bottom: 10px;
+	font-size: 0.9em;
+	height: auto;
+	overflow: hidden;
+}
+#pro-league table {
+	width: 100%;
+	border-collapse: collapse;
+	color: white;
+}
+#pro-league th {
+	padding: 5px 0;
+}
+#pro-league th, #pro-league td {
+	text-align: center;
+	border: solid 1px white;
+}
+#pro-league tr:nth-child(2), #pro-league tr:nth-child(3), #pro-league tr:nth-child(4) {
+	font-weight: bold;
+}
+#pro-league tr:first-child {
+	background-color: #0F2E5F;
+	font-size: 0.9em;
+}
+#pro-league th {
+	padding: 0.25em 0.5em;
+}
+#pro-league td img {
+	width: 2em;
+}
+#pro-league td > div {
+	margin: 0.25em;
+	display: flex;
+	align-items: center;
+	justify-content: center;
+	gap: 1em;
+}
+#pro-league tr:nth-child(2n+2) {
+	background-color: #3D4351;
+}
+#pro-league tr:nth-child(2n+3) {
+	background-color: #23262E;
+}
+#pro-league tr a {
+	text-decoration: none;
+	display: block;
+	padding: 8px 0;
+}
+#pro-league tr a:hover {
+	opacity: 0.6;
+}
+#pro-league + .link-extra {
+	margin-left: auto;
+	margin-right: auto;
+	text-align: center;
+	margin-top: 7px;
+}
+#pro-league + .link-extra a {
+	color: #6AF;
+}
+#pro-league + .link-extra a:hover {
+	color: #09F;
+}