104 lines
4.3 KiB
Svelte
104 lines
4.3 KiB
Svelte
<script context="module">
|
|
export async function load({ page, fetch, session, context }) {
|
|
return {
|
|
props: {
|
|
theme: context.theme,
|
|
},
|
|
};
|
|
}
|
|
</script>
|
|
|
|
<script>
|
|
import {
|
|
Alert,
|
|
Badge,
|
|
Icon,
|
|
} from 'sveltestrap';
|
|
|
|
import { goto } from '$app/navigation';
|
|
|
|
import { my } from '../../stores/my.js';
|
|
|
|
export let theme = null;
|
|
</script>
|
|
|
|
{#if theme && theme.exercices}
|
|
<div class="card niceborder text-indent mt-2 mb-4">
|
|
|
|
<div class="card-body bg-dark text-light">
|
|
<p class="mt-4 mx-3 card-text lead text-justify">{@html theme.headline}</p>
|
|
<p class="mb-4 mx-3 card-text text-justify">{@html theme.intro}</p>
|
|
</div>
|
|
|
|
<ul class="list-group">
|
|
{#each Object.keys(theme.exercices) as k, index}
|
|
<li
|
|
class="list-group-item"
|
|
class:list-group-item-action={$my && $my.exercices[k]}
|
|
on:click={goto(`/${theme.urlid}/${theme.exercices[k].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[k] && $my.exercices[k].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[k] && (index < 1 || ($my.exercices[Object.keys(theme.exercices)[index-1]] && $my.exercices[Object.keys(theme.exercices)[index-1]].solved_rank)) ? '62c462' : 'bbb'}"
|
|
width="5"
|
|
height="30"
|
|
x="10"
|
|
y="0" />
|
|
<path
|
|
style="fill:#{$my && $my.exercices[k] ? ($my.exercices[k].solved_rank ? '62c462' : (theme.exercices[k].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>
|
|
{#each theme.exercices[k].tags as tag, idx}
|
|
<Badge href="/tags/{tag}" pill color="secondary" class="mx-1 float-end">#{tag}</Badge>
|
|
{/each}
|
|
<h5 class="fw-bold">
|
|
{#if $my && $my.exercices[k]}
|
|
{theme.exercices[k].title}
|
|
{:else}
|
|
<span style="white-space: nowrap">
|
|
<Icon name="lock-fill" aria-hidden="true" title="Vous n'avez pas encore accès à ce défi" />
|
|
{theme.exercices[k].title}
|
|
</span>
|
|
{/if}
|
|
{#if theme.exercices[k].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>
|
|
<p>{@html theme.exercices[k].headline}</p>
|
|
</div>
|
|
<div class="d-none d-md-block col-1">
|
|
{#if $my && $my.exercices[k]}
|
|
<a class="float-right" href="{theme.urlid}/{theme.exercices[k].urlid}" style="font-size: 3rem">
|
|
<Icon name="chevron-right" aria-hidden="true" />
|
|
</a>
|
|
{:else}
|
|
<span class="float-right" style="font-size: 3rem">
|
|
<Icon name="chevron-right" aria-hidden="true" />
|
|
</span>
|
|
{/if}
|
|
</div>
|
|
</div>
|
|
</li>
|
|
{/each}
|
|
</ul>
|
|
|
|
</div>
|
|
{:else}
|
|
<Alert color="danger" fade={false}>
|
|
<Icon name="dash-circle-fill" />
|
|
Ce scénario n'existe pas.
|
|
</Alert>
|
|
{/if}
|
|
|
|
<style>
|
|
.list-group-item-action {
|
|
cursor: pointer;
|
|
}
|
|
</style>
|