fix: fixed most issues

This commit is contained in:
Théo 2023-09-18 12:46:33 +02:00
parent 13f972b1f1
commit 4a55a5ea9c
5 changed files with 60 additions and 43 deletions

View file

@ -12,7 +12,7 @@
'font-code group relative flex h-full w-full rounded-md bg-primary-700 transition-colors duration-150 ',
{
'hover:bg-primary-600': chapter.show,
'opacity-50': !chapter.show,
'opacity-50': !chapter.show
}
)}
>

View file

@ -1,9 +1,20 @@
<script lang="ts">
import type { PageData } from './$types';
import type { Chapter as IChapter } from '$lib/types';
import Chapter from '$lib/components/Chapter.svelte';
export let data;
export let data: PageData;
$: chapters = data.chapters;
const toBeContinued: IChapter = {
id: Math.random() * 999,
name: 'To be continued ...',
puzzles: [],
show: false
};
</script>
<section class="flex w-full flex-col space-y-6">
@ -19,4 +30,5 @@
{#each chapters as chapter}
<Chapter {chapter} />
{/each}
<Chapter chapter={toBeContinued} />
</section>

View file

@ -3,22 +3,9 @@
import Puzzle from '$lib/components/Puzzle.svelte';
import type { Puzzle as IPuzzle } from '$lib/types';
export let data: PageData;
data.chapter.puzzles = data.chapter.puzzles.sort((a, b) => a.scoreMax - b.scoreMax);
const toBeContinued: IPuzzle = {
id: 0,
name: 'To be continued...',
content: 'Maybe you will find the One Piece one day...',
scoreMax: 999,
show: false,
tags: [],
tries: 0,
score: 0
};
</script>
<section class="flex w-full flex-col space-y-6">
@ -32,9 +19,6 @@
{#each data.chapter.puzzles as puzzle}
<Puzzle {puzzle} />
{/each}
{#if data.chapter.puzzles.length > 1}
<Puzzle puzzle={toBeContinued} />
{/if}
</ul>
</div>
</section>

View file

@ -14,20 +14,7 @@
export let data: PageData;
const { puzzle } = data;
let completed = false;
function toast(title: string, description: string) {
addToast({
data: {
title,
description
},
closeDelay: 2500
});
}
$: puzzle = data.puzzle;
$: chapterId = $page.params.chapterId;
const renderer = new marked.Renderer();
@ -63,14 +50,20 @@
<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 && !completed}
{#if !puzzle.score}
<form
class="flex w-full flex-col items-end justify-between gap-2 sm:flex-row"
method="POST"
enctype="multipart/form-data"
use:enhance={async ({ formElement, formData, action, cancel, submitter }) => {
use:enhance={async ({ formData, cancel }) => {
if (formData.get('answer') === '') {
toast('Erreur', 'Vous devez entrer une réponse !');
addToast({
data: {
title: 'Réponse vide',
description: 'Vous devez entrer une réponse'
},
closeDelay: 5000
});
return cancel();
}
@ -86,21 +79,43 @@
const data = res.ok || res.status === 406 ? await res.json() : null;
if (data && data.score) {
completed = true;
toast('Bonne réponse', 'Vous avez trouvé la bonne réponse!');
addToast({
data: {
title: 'Bravo !',
description: `Vous avez trouvé la bonne réponse en ${data.tries} tentative${
data.tries > 1 ? 's' : ''
} !`
}
});
} else if (data && data.tries)
toast('Mauvaise réponse', `Vous avez effectué ${data.tries} tentative(s)`);
addToast({
data: {
title: 'Mauvaise réponse',
description: `Vous avez effectué ${data.tries} tentative${
data.tries > 1 ? 's' : ''
} !`
}
});
else if (res.ok && data?.success)
toast('Bonne réponse', 'Vous avez trouvé la bonne réponse!');
addToast({
data: {
title: 'Bravo !',
description: `Vous avez trouvé la bonne réponse !`
}
});
else if (res.status === 423)
toast('Mauvaise réponse', "Ce n'est pas la bonne réponse, réessayez!");
addToast({
data: {
title: 'Puzzle désactivé',
description: `Ce puzzle est désactivé pour le moment.`
}
});
}
return async ({ result }) => {
if (result.type === 'redirect') {
goto(result.location, {
invalidateAll: true,
replaceState: true
invalidateAll: true
});
}
};

View file

@ -18,7 +18,13 @@
<form class="flex flex-col gap-4" method="POST" use:enhance>
<label for="email">Email</label>
<Input name="email" type="email" placeholder="philipzcwbarlow@peerat.dev" value={user?.email} />
<Input
name="email"
type="email"
placeholder="philipzcwbarlow@peerat.dev"
value={user?.email}
disabled
/>
<label for="firstname">Prénom</label>
<Input name="firstname" type="text" placeholder="Philip" value={user?.firstname} />