server/frontend/fic/src/routes/+page.svelte

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

 import { goto } from '$app/navigation';

 import Masonry from 'svelte-bricks';

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

 import { my } from '$lib/stores/my.js';
 import { teams } from '$lib/stores/teams.js';
 import { myThemes, themes } from '$lib/stores/mythemes.js';
 import { settings, time } from '$lib/stores/settings.js';
 import { themesStore } from '$lib/stores/themes.js';

 // Override theme color
 document.body.style.backgroundColor = "";

 let items = [];
 $: {
     const tmpitems = [];
     for (const th of $themes) {
         if (th.id == 0) continue;

         tmpitems.push({id: th.id, theme: th});
     }

     if ($themesStore["0"] && !$themesStore["0"].locked && $themesStore["0"].exercices) {
         let nb_ex_max = tmpitems.length;
         let i = 1;
         let j = 0;
         for (j = $themesStore["0"].exercices.length - 1; j >= 0 && i < tmpitems.length; j--) {
             if ($my && $my.team_id && !$my.exercices[$themesStore["0"].exercices[j].id]) {
                 // Only apply after start
                 if (!($time.startIn && j < nb_ex_max && j < $settings.unlockedStandaloneExercices))
                     continue;
             }

             tmpitems.splice(i, 0, {id: tmpitems.length, theme: $themesStore["0"], exercice: $themesStore["0"].exercices[j]});
             i += 2;
         }

         if (j >= 0 || i == 1) {
             tmpitems.push({
                 id: tmpitems.length,
                 theme: {
                     ...$themesStore["0"],
                     name: "Voir les autres défis",
                     headline: "Il y a " + ($themesStore["0"].exercices.length) + " défis à découvrir&nbsp;! Cliquez ici pour les afficher.",
                     locked: $themesStore["0"].locked || i == 1,
                 },
                 color: "light",
             });
         }
     }

     items = tmpitems;
 }
</script>

<Container class="mt-3 mb-5">
    {#if !$my}
        {#if $settings.allowRegistration}
            <Alert color="warning" class="text-justify" fade={false}>
                <strong>Votre équipe n'est pas encore enregistrée.</strong> Rendez-vous sur <a href="register">cette page</a> pour procéder à votre inscription.
            </Alert>
        {:else}
            <Alert color="danger" class="text-justify" fade={false}>
                <strong>Il semblerait qu'il y ait eu un problème lors de l'attribution de votre certificat.</strong> Veuillez vous signaler auprès de notre équipe afin de corriger ce problème.
            </Alert>
        {/if}
    {:else if !($my.team_id)}
        <Alert color="danger" fade={false}>
            <strong>Attention&nbsp;:</strong> puisqu'il s'agit de captures effectuées dans le but de découvrir si des actes malveillants ont été commis sur différents systèmes d'information, les contenus qui sont téléchargeables <em>peuvent</em> contenir du contenu malveillant&nbsp;!
        </Alert>
    {:else if $teams[$my.team_id]}
        <Alert color="info" class="text-justify" fade={false}>
            <strong>Félicitations {#if $my.members}{#each $my.members as member, index (member.id)}{#if member.id !== $my.members[0].id}{#if member.id === $my.members[$my.members.length - 1].id}&nbsp;et {:else}, {/if}{/if}{member.firstname} {member.lastname}{/each}&nbsp;{/if}!</strong> vous êtes maintenant connecté à l'espace de votre équipe <em>{$teams[$my.team_id].name}</em>.
            {#if !$settings.denyNameChange}Vous pouvez changer ce nom dès maintenant en vous rendant sur la page de <a href="edit">votre équipe</a>.{/if}
        </Alert>

        {#if !$settings.ignoreTeamMembers && $my.team_id && (!$my.members || !$my.members.length)}
            <Alert color="warning" class="text-justify" fade={false}>
                <strong>Les membres de votre équipe ne sont pas encore enregistrés.</strong> Passez voir l'équipe serveur pour corriger cela.
            </Alert>
        {/if}
    {/if}


    <Masonry
        {items}
        let:item
    >
        {#if item.exercice}
            {@const theme = item.theme}
            {@const exercice = item.exercice}
            <CardTheme
                style="opacity: {$my && !$my.exercices[exercice.id] ? 0.6 : 1}"
                class="{$my && $my.team_id && exercice.solved?'border-success ':''}{exercice.curcoeff > 1?'border-warning ':''}{theme.locked || exercice.disabled || ($my && !$my.exercices[exercice.id])?' border-secondary ':''}"
                {theme}
                {exercice}
                on:click={goto(`${theme.urlid}/${exercice.urlid}`)}
        />
        {:else}
            {@const th = item.theme}
            <CardTheme
                class="{$my && $my.team_id && $myThemes[th.id].exercice_solved > 0?'border-light ':''}{th.exercice_coeff_max > 1?'border-warning ':''}{th.locked?' border-secondary ':''}"
                theme={th}
                color={item.color ? item.color : "dark"}
                on:click={goto(`${th.urlid}`)}
            />
        {/if}
    </Masonry>
</Container>