From 0c17a572dacd6074ac5ab95b7ce6cefa834b25fd Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Th=C3=A9o?= <43091603+glazk0@users.noreply.github.com>
Date: Wed, 13 Sep 2023 17:23:43 +0200
Subject: [PATCH] fix: changed formatter

---
 .../puzzle/[puzzleId]/+page.svelte            | 24 +++++++++++--------
 1 file changed, 14 insertions(+), 10 deletions(-)

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