119 lines
2.9 KiB
Svelte
119 lines
2.9 KiB
Svelte
<script lang="ts">
|
|
import type { ParcoursRead, Member } from '../../types/room.type';
|
|
import { parseTimer, statsCalculator } from '../../utils/utils';
|
|
import { getContext } from 'svelte';
|
|
import type { Writable } from 'svelte/store';
|
|
import Classement from './Classement.svelte';
|
|
|
|
const parcours: Writable<ParcoursRead | null> = getContext('parcours');
|
|
const member: Writable<Member | null> = getContext('member');
|
|
|
|
$: stats =
|
|
$parcours != null && $member != null && !!$parcours.challenges[$member.id_code]
|
|
? statsCalculator($parcours.challenges[$member.id_code].challenges.map((c) => c.mistakes))
|
|
: null;
|
|
</script>
|
|
|
|
{#if $parcours != null}
|
|
<div class="stats">
|
|
<h1 class:validated={$parcours.validated}>
|
|
{$parcours.validated ? 'Parcours validé !' : 'Parcours non validé !'}
|
|
</h1>
|
|
|
|
<div class="statistics">
|
|
<p data-testid="avg">
|
|
<strong>Moyenne</strong>
|
|
{stats?.avg.toFixed(2) !== null && stats?.avg.toFixed(2) !== undefined
|
|
? `${stats?.avg.toFixed(2)} fautes`
|
|
: '-'}
|
|
</p>
|
|
<p data-testid="max">
|
|
<strong>Pire</strong>
|
|
{stats?.max !== null && stats?.max !== undefined ? `${stats?.max} fautes` : '-'}
|
|
</p>
|
|
<p data-testid="min">
|
|
<strong>Meilleur</strong>
|
|
{stats?.min !== null && stats?.min !== undefined ? `${stats?.min} fautes` : '-'}
|
|
</p>
|
|
</div>
|
|
|
|
<div class="classement">
|
|
<h2>Classements</h2>
|
|
<div class="ranks">
|
|
<div>
|
|
<h3>Top élèves</h3>
|
|
<Classement
|
|
tops={$parcours.ranking.map((t) => {
|
|
return { name: t.name, value: `Moyenne : ${t.avg.toFixed(2)} fautes` };
|
|
})}
|
|
rank={$parcours.memberRank != null && $parcours.memberRank > 3 && $member != null
|
|
? {
|
|
name: $member.username,
|
|
rank: $parcours.memberRank,
|
|
value: `Moyenne : ${stats?.avg.toFixed(2)} fautes`
|
|
}
|
|
: null}
|
|
/>
|
|
</div>
|
|
|
|
<div>
|
|
<h3 style:text-align="right">Top essais</h3>
|
|
<Classement
|
|
tops={$parcours.tops.map((t) => {
|
|
return {
|
|
name: t.challenger.name,
|
|
value: `${t.mistakes} fautes en ${parseTimer(t.time)}`
|
|
};
|
|
})}
|
|
rank={$parcours.rank != null && $parcours.rank > 3 && $member != null
|
|
? {
|
|
name: $member.username,
|
|
rank: $parcours.rank,
|
|
value: `${$parcours.pb.mistakes} fautes en ${parseTimer($parcours.pb.time)}`
|
|
}
|
|
: null}
|
|
/>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
{/if}
|
|
|
|
<style lang="scss">
|
|
.stats {
|
|
display: flex;
|
|
flex-direction: column;
|
|
align-items: center;
|
|
width: 100%;
|
|
gap: 20px;
|
|
}
|
|
.statistics {
|
|
display: flex;
|
|
gap: 20px;
|
|
p {
|
|
display: flex;
|
|
flex-direction: column;
|
|
align-items: center;
|
|
}
|
|
}
|
|
|
|
h1 {
|
|
font-size: 3em;
|
|
color: $red;
|
|
text-align: center;
|
|
}
|
|
.validated {
|
|
color: $green;
|
|
}
|
|
.ranks {
|
|
display: flex;
|
|
justify-content: space-evenly;
|
|
}
|
|
.classement {
|
|
width: 100%;
|
|
h2{
|
|
text-align: center;
|
|
}
|
|
}
|
|
</style>
|