2023-02-22 12:43:39 +01:00
< script lang = "ts" >
2023-02-26 16:29:05 +01:00
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 = "";
2023-02-22 12:43:39 +01:00
< / script >
{ #if $parcours != null && $member != null }
2023-02-26 16:29:05 +01:00
< 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={() => {
2023-02-22 12:43:39 +01:00
selected = selected == chall.challenger.id_code ? '' : chall.challenger.id_code;
}}
2023-02-26 16:29:05 +01:00
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={() => {
2023-02-22 12:43:39 +01:00
goto(`?${ new URLSearchParams ({ corr : c.id_code }). toString ()} `);
}}
2023-02-26 16:29:05 +01:00
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 >
2023-02-22 12:43:39 +01:00
{ /if }
< style lang = "scss" >
2023-02-26 16:29:05 +01:00
.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;
}
2023-02-22 12:43:39 +01:00
< / style >