114 lines
4.0 KiB
Svelte
114 lines
4.0 KiB
Svelte
<script>
|
|
import {
|
|
Alert,
|
|
Badge,
|
|
Card,
|
|
CardBody,
|
|
CardTitle,
|
|
Col,
|
|
Icon,
|
|
Row,
|
|
} from '@sveltestrap/sveltestrap';
|
|
|
|
import { my } from '$lib/stores/my.js';
|
|
import { exercices_idx, max_solved } from '$lib/stores/themes.js';
|
|
import { myThemes } from '$lib/stores/mythemes.js';
|
|
|
|
export { className as class };
|
|
export let theme = {};
|
|
export let exercice = null;
|
|
export let style = '';
|
|
export let color = !exercice ? "dark" : "light";
|
|
let className = '';
|
|
|
|
let textColor = "light";
|
|
$: textColor = color === "dark" ? "light" : "dark";
|
|
</script>
|
|
|
|
<div class="theme-card" {style}>
|
|
<Card
|
|
class="text-{textColor} rounded-3 niceborder {className}"
|
|
{color}
|
|
on:click
|
|
>
|
|
{#if exercice && exercice.image}
|
|
<div
|
|
class="card-img-top"
|
|
style="background-image: url({ exercice.image.substr(0, exercice.image.length-3) }thumb.jpg)"
|
|
style:filter={theme.locked || exercice.disabled ? "grayscale(60%)":null}
|
|
></div>
|
|
{:else if theme.image}
|
|
<div
|
|
class="card-img-top"
|
|
style="background-image: url({ theme.image.substr(0, theme.image.length-3) }thumb.jpg)"
|
|
style:filter={theme.locked ? "grayscale(60%)":null}
|
|
></div>
|
|
{/if}
|
|
<CardBody class="text-indent">
|
|
{#if exercice}
|
|
{#if $exercices_idx[exercice.id].tags.includes("Reverse") || $exercices_idx[exercice.id].tags.includes("Reverse Engineering")}
|
|
<Badge class="float-end">#Reverse</Badge>
|
|
{/if}
|
|
{/if}
|
|
<CardTitle class="fw-bolder">
|
|
{#if $my && $my.team_id}
|
|
<div class="float-end">
|
|
{#if exercice && $my && !$my.exercices[exercice.id]}
|
|
<Badge color="light">
|
|
<Icon name="lock-fill" />
|
|
</Badge>
|
|
{/if}
|
|
{#if theme.locked}
|
|
<Badge color="light">
|
|
<Icon name="lock-fill" />
|
|
</Badge>
|
|
{:else}
|
|
{#if $max_solved > 1 && theme.solved == $max_solved}
|
|
<Badge color="danger">
|
|
<Icon name="heart-fill" />
|
|
</Badge>
|
|
{/if}
|
|
{#if theme.exercice_coeff_max > 1 || (exercice && exercice.curcoeff > 1)}
|
|
<Badge color="success">
|
|
<Icon name="gift-fill" />
|
|
</Badge>
|
|
{/if}
|
|
{/if}
|
|
{#if exercice && $my && $my.exercices[exercice.id] && $my.exercices[exercice.id].solved_rank}
|
|
<Badge color="light" class="text-success fw-bold">
|
|
<Icon name="check" />
|
|
</Badge>
|
|
{/if}
|
|
{#if !exercice && $myThemes[theme.id].exercice_solved > 0}
|
|
<Badge color="light">
|
|
{$myThemes[theme.id].exercice_solved}/{theme.exercice_count}
|
|
</Badge>
|
|
{/if}
|
|
</div>
|
|
{/if}
|
|
{#if exercice}{exercice.title}{:else}{theme.name}{/if}
|
|
</CardTitle>
|
|
<p class="card-text text-justify">{#if exercice}{@html exercice.headline}{:else}{@html theme.headline}{/if}</p>
|
|
</CardBody>
|
|
</Card>
|
|
</div>
|
|
|
|
<style>
|
|
.theme-card {
|
|
cursor: pointer;
|
|
transition: transform 250ms;
|
|
}
|
|
.theme-card:hover {
|
|
transform: scale(1.07);
|
|
}
|
|
|
|
.card-img-top {
|
|
background-position: center;
|
|
background-repeat: no-repeat;
|
|
background-size: cover;
|
|
}
|
|
.theme-card .card-img-top {
|
|
height: 10rem;
|
|
}
|
|
</style>
|