server/frontend/ui/src/routes/[theme]/[exercice].svelte

<script context="module">
 import { get_store_value } from 'svelte/internal';

 import { themes } from '../../stores/themes.js';

 export async function load({ params, stuff }) {
     let exercice = null;

     for (let ex in stuff.theme.exercices) {
         if (stuff.theme.exercices[ex].urlid === params.exercice) {
             exercice = stuff.theme.exercices[ex];
             exercice.id = ex;
             break;
         }
     }

     return {
         props: {
             theme: stuff.theme,
             exercice: exercice,
             refresh_my: stuff.refresh_my,
             refresh_teams: stuff.refresh_teams,
         }
     };
 }
</script>

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

 import ExerciceDownloads from '../../components/ExerciceDownloads.svelte';
 import ExerciceFlags from '../../components/ExerciceFlags.svelte';
 import ExerciceHints from '../../components/ExerciceHints.svelte';
 import ExerciceSolved from '../../components/ExerciceSolved.svelte';
 import ExerciceVideo from '../../components/ExerciceVideo.svelte';
 import ThemeNav from '../../components/ThemeNav.svelte';

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

 export let theme;
 export let exercice;
 let solved = {};

 export let refresh_my;
 export let refresh_teams;
</script>

<svelte:head>
    <title>{exercice?exercice.title+" - ":""}{$challengeInfo.title}</title>
</svelte:head>

{#if exercice}
    <ThemeNav {theme} {exercice} />
{/if}

{#if !$my || !exercice || !$my.exercices[exercice.id]}
    <Alert color="warning" class="mt-3" fade={false}>
        <Icon name="dash-circle-fill" />
        Vous n'avez pas encore accès à ce défi.
    </Alert>
{/if}

{#if exercice}
    <Card body class="niceborder text-indent my-3">
        <h3 class="display-4">{exercice.title}</h3>
        <div>
            {#each exercice.tags as tag, index}
	        <Badge href="tags/{tag}" pill color="secondary" class="mx-1 mb-2" >#{tag}</Badge>
            {/each}
        </div>
        {#if !$my || !$my.exercices[exercice.id]}
            <p class="lead text-justify">{@html exercice.headline}</p>
        {:else}
	    <p class="lead text-justify">{@html $my.exercices[exercice.id].statement}</p>
            {#if $my.exercices[exercice.id].issue}
                <Alert color="{$my.exercices[exercice.id].issuekind}">
                    {@html $my.exercices[exercice.id].issue}
                </Alert>
            {/if}
        {/if}
        <hr class="mt-0 mb-4">
        <Row>
            <Col>
	    <ul>
	        <li>
                    <strong>Gain&nbsp;:</strong>
                    {exercice.gain} {exercice.gain==1?"point":"points"}
                    {#if $settings.firstBlood && exercice.solved < 1}
                        <em>+{$settings.firstBlood * 100}% (prem's)</em>
                    {/if}
                    {#if exercice.curcoeff != 1.0 || $settings.exerciceCurrentCoefficient != 1.0}
                        <em>{#if exercice.curcoeff * $settings.exerciceCurrentCoefficient > 1}+{Math.round((exercice.curcoeff * $settings.exerciceCurrentCoefficient - 1) * 100)}{:else}-{Math.round((1-(exercice.curcoeff * $settings.exerciceCurrentCoefficient)) * 100)}{/if}% (bonus)</em>
                    {/if}
                </li>
	        <li>
                    <strong>Tenté par&nbsp;:</strong>
                    {#if !exercice.tried}
                        aucune équipe
                    {:else}
                        {exercice.tried} {exercice.tried == 1?"équipe":"équipes"}
                        {#if $my && $my.exercices[exercice.id] && $my.exercices[exercice.id].total_tries}
                            (cumulant {$my.exercices[exercice.id].total_tries} {$my.exercices[exercice.id].total_tries == 1?"tentative":"tentatives"})
                        {/if}
                    {/if}
                </li>
	        <li>
                    <strong>Résolu par&nbsp;:</strong>
                    {#if !exercice.solved}
                        aucune équipe
                    {:else}
                        {exercice.solved} {exercice.solved == 1?"équipe":"équipes"}
                    {/if}
                </li>
	    </ul>
        </Col>
        {#if $my && $my.team_id}
            <Col>
            {#if $settings.acceptNewIssue}
                <a href="issues/?eid={exercice.id}" class="float-end btn btn-sm btn-warning">
                    <Icon name="bug" />
                    Rapporter une anomalie sur ce défi
                </a>
            {/if}
            {#if $settings.QAenabled}
	        <a href="qa/exercices/{exercice.id}" class="float-end btn btn-sm btn-info" target="_self">
                    <Icon name="bug" />
                    Voir les éléments QA sur ce défi
                </a>
            {/if}
            </Col>
        {/if}
        </Row>
    </Card>

    {#if $my && $my.exercices[exercice.id]}
        <Row class="mt-4">
            <Col lg="6" class="mb-5">
            {#if $my.exercices[exercice.id].files}
                <ExerciceDownloads
                    files={$my.exercices[exercice.id].files}
                />
            {/if}
            {#if $my.exercices[exercice.id].hints}
                <ExerciceHints
                    {refresh_my}
                    exercice={$my.exercices[exercice.id]}
                             hints={$my.exercices[exercice.id].hints}
                />
            {/if}
            </Col>
            <Col lg="6" class="mb-5">
            {#if !$my.exercices[exercice.id].solved_rank && !solved[exercice.id]}
                <ExerciceFlags
                    {refresh_my}
                    {refresh_teams}
                    exercice={$my.exercices[exercice.id]}
                    bind:forcesolved={solved[exercice.id]}
                    flags={$my.exercices[exercice.id].flags}
                />
            {:else}
                <ExerciceSolved
                    {theme}
                    exercice={$my.exercices[exercice.id]}
                />
            {/if}
            {#if $my.exercices[exercice.id].video_uri}
                <ExerciceVideo uri={$my.exercices[exercice.id].video_uri} />
            {/if}
            </Col>
        </Row>
    {/if}
{/if}