server/frontend/ui/src/routes/rank.svelte

<script>
 import {
     Alert,
     Card,
     CardBody,
     CardTitle,
     Col,
     Container,
     Icon,
     Row,
 } from 'sveltestrap';

 import { my } from '../stores/my.js';
 import { rank } from '../stores/teams.js';
 import { challengeInfo } from '../stores/challengeinfo.js';

 import CardTheme from '../components/CardTheme.svelte';

 let search = "";
</script>

<Container fluid class="my-3">
<h1 class="text-dark">
    {$challengeInfo.title}
    <small class="text-muted">Classement</small>
</h1>
<div class="card niceborder text-light">
    <div class="card-body">
        <input type="text" class="form-control" placeholder="Rechercher" bind:value={search}>
    </div>
    <table class="table table-hover table-striped">
        <thead>
            <tr>
	        <th>Rang</th>
	        <th>Équipe</th>
	        <th>Points</th>
            </tr>
        </thead>
        <tbody>
            {#each $rank as team (team.id)}
                {#if team.rank != 0 || ($my && $my.team_id == team.id)}
                    <tr class:bg-info={$my && $my.team_id == team.id} class:bg-warning={search.length && team.name.toLowerCase().indexOf(search.toLowerCase()) >= 0}>
	                <td>{team.rank}</td>
	                <td>{team.name}</td>
	                <td>{Math.round(team.score*100)/100}</td>
                    </tr>
                {/if}
            {/each}
        </tbody>
    </table>
</div>
</Container>