Peer-at-Code/peer-at-code-web
5
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity

fix: changed formatter

Browse source
This commit is contained in:
Théo 2023-09-13 17:23:43 +02:00
parent 5aea6d3340
commit 0c17a572da
1 changed files with 14 additions and 10 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

24
src/routes/dashboard/chapters/[chapterId]/puzzle/[puzzleId]/+page.svelte
View file

@ -1,15 +1,17 @@
<script lang="ts"> <script lang="ts">
import { enhance } from '$app/forms';
import type { PageData } from './$types'; import type { PageData } from './$types';
import { marked, type MarkedOptions } from 'marked'; import { marked, type MarkedOptions } from 'marked';
import { enhance } from '$app/forms';
import Button from '$lib/components/ui/Button.svelte'; import Button from '$lib/components/ui/Button.svelte';
import Input from '$lib/components/ui/Input.svelte'; import Input from '$lib/components/ui/Input.svelte';
import { page } from '$app/stores';
export let data: PageData; export let data: PageData;
$: puzzle = data.puzzle; $: puzzle = data.puzzle;
$: chapterId = $page.params.chapterId;
const renderer = new marked.Renderer(); const renderer = new marked.Renderer();
@ -21,30 +23,32 @@
); );
}; };
renderer.br = () => {
return '<br /><br />';
};
renderer.codespan = (code) => { renderer.codespan = (code) => {
return `<code class="cursor-default select-none text-transparent transition-colors delay-150 hover:text-highlight-secondary">${code}</code>`; return `<code class="cursor-default select-none text-transparent transition-colors delay-150 hover:text-highlight-secondary">${code}</code>`;
}; };
const options: MarkedOptions = { const options: MarkedOptions = {
breaks: false, breaks: true,
renderer, renderer,
gfm: true gfm: true
}; };
</script> </script>
<div class="flex h-full w-full flex-col justify-between space-y-4"> <div class="flex h-full w-full flex-col justify-between gap-4">
<h1 class="text-2xl font-bold sm:text-3xl md:text-4xl"> <h1 class="text-2xl font-bold sm:text-3xl md:text-4xl">
{puzzle.name} {puzzle.name}
<span class="text-xl text-highlight-secondary">({puzzle.scoreMax} points)</span> <span class="text-xl text-highlight-secondary">({puzzle.scoreMax} points)</span>
</h1> </h1>
<!-- <Separator /> --> <div class="h-screen w-full overflow-y-auto break-all font-fira text-xs sm:text-base">
<div class="h-screen w-full overflow-y-auto font-fira">
{@html marked(puzzle.content, options)} {@html marked(puzzle.content, options)}
</div> </div>
{#if !puzzle.score} {#if !puzzle.score}
<!-- <InputForm {puzzle} /> -->
<form <form
class="flex w-full flex-col items-end justify-between gap-4 sm:flex-row" class="flex w-full flex-col items-end justify-between gap-2 sm:flex-row"
method="POST" method="POST"
enctype="multipart/form-data" enctype="multipart/form-data"
use:enhance use:enhance
@ -62,8 +66,8 @@
<Button class="w-full sm:w-44" variant="brand">Valider</Button> <Button class="w-full sm:w-44" variant="brand">Valider</Button>
</form> </form>
{:else} {:else}
<div class="flex items-center justify-between"> <div class="flex items-center justify-between flex-col sm:flex-row gap-2">
<div class="items-center gap-2"> <div class="flex items-center gap-2">
<p> <p>
Tentative{puzzle.tries && puzzle.tries > 1 ? 's' : ''} :{' '} Tentative{puzzle.tries && puzzle.tries > 1 ? 's' : ''} :{' '}
<span class="text-brand-accent">{puzzle.tries}</span> <span class="text-brand-accent">{puzzle.tries}</span>
@ -75,7 +79,7 @@
<!-- <Button type="button" onClick={() => router.push(getURL(`/dashboard/puzzles`))}> <!-- <Button type="button" onClick={() => router.push(getURL(`/dashboard/puzzles`))}>
Retour aux puzzles Retour aux puzzles
</Button> --> </Button> -->
<Button href="/puzzles" class="w-full sm:w-44" variant="brand">Retour aux puzzles</Button> <Button href="/dashboard/chapters/{chapterId}" class="w-full sm:w-44" variant="brand">Retour aux puzzles</Button>
</div> </div>
{/if} {/if}
</div> </div>