170 lines
7.8 KiB
Svelte
170 lines
7.8 KiB
Svelte
<script>
|
|
import {
|
|
Badge,
|
|
Button,
|
|
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 { current_theme } from '$lib/stores/themes';
|
|
import { set_current_exercice } from '$lib/stores/exercices';
|
|
import { my } from '$lib/stores/my.js';
|
|
|
|
set_current_exercice.set(null);
|
|
</script>
|
|
|
|
{#if $current_theme.id == 0}
|
|
<Masonry
|
|
class="mb-5"
|
|
items={$current_theme.exercices}
|
|
let: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 ':''}{$current_theme.locked || exercice.disabled || ($my && !$my.exercices[exercice.id])?' border-secondary ':''}"
|
|
theme={$current_theme}
|
|
{exercice}
|
|
on:click={goto(`${$current_theme.urlid}/${exercice.urlid}`)}
|
|
/>
|
|
</Masonry>
|
|
{:else}
|
|
<Card class="bg-dark niceborder text-indent mt-2" style="--bs-bg-opacity: .9;">
|
|
|
|
<Row>
|
|
<Col lg={6} xl={7}>
|
|
<CardBody class="text-light">
|
|
<div style="position: relative; display: inline-block;">
|
|
{#if $current_theme.locked}
|
|
<div style="position: absolute; z-index: 0; top: 0; bottom: 0; left: 0; right: 0;" class="d-flex justify-content-center align-items-center">
|
|
<div style="transform: rotate(-25deg)">
|
|
<div class="display-3 font-weight-bolder border border-danger text-danger px-3 py-1" style="opacity: 0.5; border-radius: 20px; border-width: 5px !important; font-family: 'Courier New'">
|
|
CONFIDENTIEL
|
|
</div>
|
|
</div>
|
|
</div>
|
|
{/if}
|
|
<Row>
|
|
<Col>
|
|
<p class="mt-4 mx-3 card-text lead text-justify">{@html $current_theme.headline}</p>
|
|
<p class="mb-4 mx-3 card-text text-justify">{@html $current_theme.intro}</p>
|
|
</Col>
|
|
{#if $current_theme.partner_txt || $current_theme.partner_img || $current_theme.partner_href}
|
|
<Col md="2" lg="3" class="d-none d-md-block">
|
|
<Card class="pt-3 px-3">
|
|
{#if $current_theme.partner_img}
|
|
<img src="{$current_theme.partner_img}" alt="En-tête du scénario" class="card-img-top">
|
|
{/if}
|
|
{#if $current_theme.partner_txt || $current_theme.partner_href}
|
|
<CardBody class="p-0 mt-3">
|
|
{#if $current_theme.partner_txt}
|
|
{@html $current_theme.partner_txt}
|
|
{/if}
|
|
{#if $current_theme.partner_href}
|
|
<Button tag="a" color="primary" href="{$current_theme.partner_href}">
|
|
Visiter le site
|
|
</Button>
|
|
{/if}
|
|
</CardBody>
|
|
{/if}
|
|
</Card>
|
|
</Col>
|
|
{/if}
|
|
</Row>
|
|
</div>
|
|
</CardBody>
|
|
</Col>
|
|
<Col lg={6} xl={5}>
|
|
{#if $current_theme.exercices && $current_theme.exercices.length}
|
|
<ul class="list-group">
|
|
{#each $current_theme.exercices as exercice, index}
|
|
<li
|
|
class="list-group-item"
|
|
class:list-group-item-action={$my && $my.exercices[exercice.id]}
|
|
on:click={goto(`${$current_theme.urlid}/${exercice.urlid}`)}
|
|
on:keypress={goto(`${$current_theme.urlid}/${exercice.urlid}`)}
|
|
>
|
|
<div class="row">
|
|
<div class="col-1" style="margin-top: -0.5rem; margin-bottom: -0.5rem; text-align: right; border-right: 5px solid #{$my && $my.exercices[exercice.id] && $my.exercices[exercice.id].solved_rank ? '62c462' : 'bbb'}">
|
|
</div>
|
|
<div class="col-10">
|
|
<div style="position: absolute; margin-left: calc(var(--bs-gutter-x) * -.5 - 15px); margin-top: -0.5rem;">
|
|
<svg style="height: 50px; width: 23px;">
|
|
<rect
|
|
style="fill:#{$my && $my.exercices[exercice.id] && (index < 1 || ($my.exercices[$current_theme.exercices[index-1].id] && $my.exercices[$current_theme.exercices[index-1].id].solved_rank)) ? '62c462' : 'bbb'}"
|
|
width="5"
|
|
height="30"
|
|
x="10"
|
|
y="0" />
|
|
<path
|
|
style="fill:#{$my && $my.exercices[exercice.id] ? ($my.exercices[exercice.id].solved_rank ? '62c462' : (exercice.curcoeff > 1.0 ? 'f89406' : '5bc0de')) : '555'}"
|
|
d="m 22,20 a 9.5700617,9.5700617 0 0 1 -9.5690181,9.57006 9.5700617,9.5700617 0 0 1 -9.57110534,-9.56797 9.5700617,9.5700617 0 0 1 9.56692984,-9.57215 9.5700617,9.5700617 0 0 1 9.5731926,9.56588" />
|
|
</svg>
|
|
</div>
|
|
<div class="d-flex justify-content-between flex-wrap">
|
|
<h5 class="fw-bold text-truncate">
|
|
{#if $my && $my.exercices[exercice.id]}
|
|
<span style="white-space: nowrap">
|
|
{#if $my.exercices[exercice.id].wip}
|
|
<Icon name="cone-striped" aria-hidden="true" title="Cette étape est encore en construction." />
|
|
{/if}
|
|
{exercice.title}
|
|
</span>
|
|
{:else}
|
|
<span style="white-space: nowrap">
|
|
<Icon name="lock-fill" aria-hidden="true" title="Vous n'avez pas encore accès à ce défi" />
|
|
{exercice.title}
|
|
</span>
|
|
{/if}
|
|
{#if exercice.curcoeff > 1.0}
|
|
<Icon name="gift" aria-hidden="true" title="Un bonus est actuellement appliqué lors de la résolution de ce défi" />
|
|
{/if}
|
|
</h5>
|
|
<div>
|
|
{#each exercice.tags as tag, idx}
|
|
<Badge href="tags/{tag}" pill color="secondary" class="mx-1 float-end">#{tag}</Badge>
|
|
{/each}
|
|
</div>
|
|
</div>
|
|
<p>{@html exercice.headline}</p>
|
|
</div>
|
|
<div class="d-none d-md-block col-1 pe-0">
|
|
{#if $my && $my.exercices[exercice.id]}
|
|
<a class="float-end" href="{$current_theme.urlid}/{exercice.urlid}" style="font-size: 3rem">
|
|
<Icon name="chevron-right" aria-hidden="true" />
|
|
</a>
|
|
{:else}
|
|
<span class="float-end" style="font-size: 3rem">
|
|
<Icon name="chevron-right" aria-hidden="true" />
|
|
</span>
|
|
{/if}
|
|
</div>
|
|
</div>
|
|
</li>
|
|
{/each}
|
|
</ul>
|
|
{:else}
|
|
<p class="text-center my-5">
|
|
Aucun contenu disponible actuellement.
|
|
</p>
|
|
{/if}
|
|
</Col>
|
|
</Row>
|
|
|
|
</Card>
|
|
{/if}
|
|
|
|
<style>
|
|
.list-group-item-action {
|
|
cursor: pointer;
|
|
}
|
|
</style>
|