135 lines
3.3 KiB
Svelte
135 lines
3.3 KiB
Svelte
<script lang="ts">
|
|
import type { Member, ParcoursRead } from "../../types/room.type";
|
|
import { getContext } from "svelte";
|
|
import type { Writable } from "svelte/store";
|
|
import IoIosArrowDown from "svelte-icons/io/IoIosArrowDown.svelte";
|
|
import { goto } from "$app/navigation";
|
|
import { parseTimer } from "../../utils/utils";
|
|
import IoMdOpen from "svelte-icons/io/IoMdOpen.svelte";
|
|
|
|
const parcours: Writable<ParcoursRead | null> = getContext("parcours");
|
|
const member: Writable<Member | null> = getContext("member");
|
|
|
|
let selected = "";
|
|
|
|
</script>
|
|
|
|
{#if $parcours != null && $member != null}
|
|
<div class="trylist">
|
|
{#if Object.keys($parcours.challenges).length == 0}
|
|
<p class="italic">Aucun essai effectué :(</p>
|
|
{/if}
|
|
|
|
{#each Object.entries($parcours.challenges) as [id, chall]}
|
|
<p
|
|
on:click={() => {
|
|
selected = selected == chall.challenger.id_code ? '' : chall.challenger.id_code;
|
|
}}
|
|
class:selected={selected == chall.challenger.id_code}
|
|
class="tries"
|
|
on:keydown={() => {}}
|
|
>
|
|
<span class="icon"><IoIosArrowDown /></span>
|
|
{chall.challenger.id_code == $member.id_code ? 'Vos essais' : chall.challenger.name}
|
|
<span class:valid = {chall.challenger.validated} class="validation-status">{chall.challenger.validated ? "Validé": "Non validé"}</span>
|
|
</p>
|
|
|
|
{#if selected == chall.challenger.id_code}
|
|
{#each chall.challenges as c}
|
|
<div
|
|
class="try"
|
|
on:click={() => {
|
|
goto(`?${new URLSearchParams({corr: c.id_code}).toString()}`);
|
|
}}
|
|
on:keydown={() => {}}
|
|
title="Voir la correction"
|
|
>
|
|
<p><span class:validated={c.validated} class:uncorriged={!c.isCorriged} class="note"
|
|
>{c.mistakes} faute{c.mistakes > 1 ? "s" : ""} </span> en <strong>{c.time < $parcours.time * 60 ? parseTimer(c.time): parseTimer($parcours.time*60)} <span title={`Vous avez dépassé de ${parseTimer(c.time - $parcours.time*60)}`} class="time-overflow">{c.time > $parcours.time * 60? `( + ${parseTimer(c.time - $parcours.time*60)} )`:""}</span></strong>
|
|
</p>
|
|
<span class="corrige-link icon"><IoMdOpen /></span>
|
|
</div>
|
|
{/each}
|
|
{/if}
|
|
{/each}
|
|
</div>
|
|
{/if}
|
|
|
|
<style lang="scss">
|
|
.tries {
|
|
cursor: pointer;
|
|
display: flex;
|
|
gap: 5px;
|
|
align-items: center;
|
|
transition: 0.3s;
|
|
|
|
.icon {
|
|
width: 20px;
|
|
display: flex;
|
|
align-items: center;
|
|
transform: rotate(-90deg);
|
|
transition: 0.2s;
|
|
}
|
|
}
|
|
|
|
.selected {
|
|
font-weight: 700;
|
|
|
|
.icon {
|
|
transform: rotate(0);
|
|
}
|
|
}
|
|
|
|
.try {
|
|
display: flex;
|
|
gap: 10px;
|
|
cursor: pointer;
|
|
width: max-content;
|
|
margin-left: 30px;
|
|
|
|
p > span {
|
|
color: $red;
|
|
font-weight: 600;
|
|
}
|
|
}
|
|
|
|
.icon {
|
|
display: flex;
|
|
align-items: center;
|
|
width: 20px;
|
|
}
|
|
|
|
.corrige-link {
|
|
color: $primary;
|
|
}
|
|
|
|
.uncorriged {
|
|
color: grey;
|
|
font-weight: 900;
|
|
}
|
|
|
|
.trylist {
|
|
display: flex;
|
|
flex-direction: column;
|
|
gap: 10px;
|
|
}
|
|
.validation-status{
|
|
color: $red;
|
|
font-weight: 600;
|
|
&::before{
|
|
content: " - ";
|
|
}
|
|
}
|
|
.validated, .valid {
|
|
color: $green !important;
|
|
}
|
|
|
|
.time-overflow{
|
|
color: $red;
|
|
font-weight: 400;
|
|
font-size: .8em;
|
|
}
|
|
|
|
|
|
</style>
|