diff --git a/README.md b/README.md
index 243302f2cf88ccf8a820a752b43a8269a26ef2ec..8cff704f0c0c9477474bcd48ec5c3cc80523b0d9 100644
--- a/README.md
+++ b/README.md
@@ -1,18 +1,6 @@
-# create-svelte
+# Qui est-ce ?
-Everything you need to build a Svelte project, powered by [`create-svelte`](https://github.com/sveltejs/kit/tree/main/packages/create-svelte).
-
-## Creating a project
-
-If you're seeing this, you've probably already done this step. Congrats!
-
-```bash
-# create a new project in the current directory
-npm create svelte@latest
-
-# create a new project in my-app
-npm create svelte@latest my-app
-```
+# [DOCUMENTATION EN COURS] (SoonTM)
## Developing
diff --git a/src/lib/game.ts b/src/lib/game.ts
index e54f42cb9dad0c533a7b5e5874d359c11f4cc95c..758fbca14fc75417795fa4547925677774cd6817 100644
--- a/src/lib/game.ts
+++ b/src/lib/game.ts
@@ -57,9 +57,7 @@ export class Game {
}
reset() {
- if (this.state.stage === GameStage.GAME_OVER) {
- this.state = this.defaultState();
- this.save();
- }
+ this.state = this.defaultState();
+ this.save();
}
}
diff --git a/src/routes/quiz/+page.server.ts b/src/routes/quiz/+page.server.ts
index ed602857da9708334b555dbc80b9a4077f1bffdd..969107b427de96f38be050bb8020b378d807bc99 100644
--- a/src/routes/quiz/+page.server.ts
+++ b/src/routes/quiz/+page.server.ts
@@ -55,6 +55,10 @@ export async function load(event) {
const form = await superValidate(zod(schema));
+ const countdown = Math.round(
+ Math.max(0, MAX_POINTS + SERVER_DELAY_MAX - elapsed(game.state.timestamp)),
+ );
+
return {
form,
options,
@@ -62,7 +66,7 @@ export async function load(event) {
step: game.state.step,
photo,
label: game.state.label,
- countdown: MAX_POINTS + SERVER_DELAY_MAX,
+ countdown,
};
}
@@ -71,10 +75,16 @@ const MIN_POINTS = 3;
// Durée maximale pour obtenir le score maximal
const SERVER_DELAY_MAX = 1;
+function elapsed(timestamp: number): number {
+ return (Date.now() - timestamp) / 1000;
+}
+
function computePoints(timestamp: number): number {
- const elapsed = (Date.now() - timestamp) / 1000;
return Math.ceil(
- Math.max(MIN_POINTS, Math.min(SERVER_DELAY_MAX - elapsed, 0) + MAX_POINTS),
+ Math.max(
+ MIN_POINTS,
+ Math.min(SERVER_DELAY_MAX - elapsed(timestamp), 0) + MAX_POINTS,
+ ),
);
}
@@ -117,4 +127,12 @@ export const actions = {
return { form };
},
+
+ async quit(event) {
+ const game = new Game(event.cookies);
+
+ game.reset();
+
+ event.cookies.delete("color", { path: "/" });
+ },
};
diff --git a/src/routes/quiz/+page.svelte b/src/routes/quiz/+page.svelte
index 17e8fcb70cedf4fd9c61bf84377735973a3c56e0..25caa7312f77dcdb0b608c2a06533e25d3773cfd 100644
--- a/src/routes/quiz/+page.svelte
+++ b/src/routes/quiz/+page.svelte
@@ -3,6 +3,8 @@
import { superForm } from "sveltekit-superforms";
import { scale } from "svelte/transition";
import { thumbHashToDataURL } from "thumbhash";
+ import QuitIcon from "./images/delete-sign.png";
+ import GitIcon from "./images/code-fork.png";
export let data;
export let form;
@@ -30,47 +32,77 @@
}, 1000);
</script>
-<div class="relative mx-auto my-12 w-full grow">
- <section class="relative m-auto flex flex-col items-center">
- <h1 class="absolute -top-8 text-xl">Qui est-ce ?</h1>
- <div class="relative">
- <span class="absolute right-[calc(100%_+_0.5rem)] text-right">
- <span class="flex flex-col items-end">
- <span class="text-9xl leading-[0.4] text-random-300">
- {data.step}
+<form method="post" use:enhance>
+ <div class="absolute right-0 z-50 space-y-4 p-8">
+ <button
+ type="submit"
+ formaction="?/quit"
+ class="col-span-1 flex h-36 w-36 cursor-not-allowed flex-col divide-y divide-gray-200 rounded-full border-6 border-solid border-zinc-800 bg-red-300 text-center shadow transition-[0.45s] enabled:cursor-pointer enabled:bg-slate-100 enabled:hover:translate-y-[-3px] enabled:hover:bg-slate-300 enabled:focus:border-indigo-500 sm:h-20 sm:w-20"
+ >
+ <div class="flex flex-1 flex-col">
+ <img
+ class="m-auto h-16 flex-shrink-0 sm:h-12 sm:w-12"
+ src={QuitIcon}
+ alt="Quitter"
+ />
+ </div>
+ </button>
+ <a
+ href="https://git.iiens.net/Steel/qui-est-ce"
+ target="_blank"
+ class="col-span-1 flex h-36 w-36 cursor-pointer flex-col divide-y divide-gray-200 rounded-full border-6 border-solid border-zinc-800 bg-slate-100 text-center shadow transition-[0.45s] hover:translate-y-[-3px] hover:bg-slate-300 focus:border-indigo-500 sm:h-20 sm:w-20"
+ >
+ <div class="flex flex-1 flex-col">
+ <img
+ class="m-auto h-16 flex-shrink-0 sm:h-12 sm:w-12"
+ src={GitIcon}
+ alt="Quitter"
+ />
+ </div>
+ </a>
+ </div>
+
+ <div class="relative mx-auto my-12 w-full grow">
+ <section class="relative m-auto flex flex-col items-center">
+ <h1 class="absolute -top-8 text-xl">Qui est-ce ?</h1>
+ <div class="relative">
+ <span class="absolute right-[calc(100%_+_0.5rem)] text-right">
+ <span class="flex flex-col items-end">
+ <span class="text-9xl leading-[0.4] text-random-300">
+ {data.step}
+ </span>
+ <span> / {questionAmount} </span>
</span>
- <span> / {questionAmount} </span>
+ <span class="inline-block h-1.5 w-10 bg-zinc-800"></span>
+ <div class="top-24 text-xl text-zinc-800">
+ {data.score - (form?.points ?? 0)}
+ <small>pts</small>
+ </div>
+ {#if !showSolution}
+ <div class="pt-12 text-xl text-zinc-800">
+ {data.countdown} ⧗
+ </div>
+ {/if}
</span>
- <span class="inline-block h-1.5 w-10 bg-zinc-800"></span>
- <div class="top-24 text-xl text-zinc-800">
- {data.score - (form?.points ?? 0)}
- <small>pts</small>
- </div>
- {#if !showSolution}
- <div class="pt-12 text-xl text-zinc-800">
- {data.countdown} ⧗
+ <div>
+ <div
+ class="relative z-10 flex h-64 w-64 items-center justify-center overflow-hidden rounded-2xl border-6 border-solid border-zinc-800 bg-white before:absolute before:-z-10 before:h-32 before:w-32 before:rounded-full before:bg-slate-300 before:opacity-100 before:transition-[0.65s] before:duration-[ease-in-out] after:absolute after:-z-10 after:h-32 after:w-32 after:scale-0 after:rounded-full after:border-solid after:border-slate-300 after:transition-[0.4s] after:duration-[ease-in-out]"
+ >
+ <img src={thumbnail} alt="" class="absolute w-full" />
+ {#key data.photo}
+ <img
+ src={data.photo?.url}
+ alt="Chargement..."
+ class="absolute w-auto"
+ />
+ {/key}
</div>
- {/if}
- </span>
- <div>
- <div
- class="relative z-10 flex h-64 w-64 items-center justify-center overflow-hidden rounded-2xl border-6 border-solid border-zinc-800 bg-white before:absolute before:-z-10 before:h-32 before:w-32 before:rounded-full before:bg-slate-300 before:opacity-100 before:transition-[0.65s] before:duration-[ease-in-out] after:absolute after:-z-10 after:h-32 after:w-32 after:scale-0 after:rounded-full after:border-solid after:border-slate-300 after:transition-[0.4s] after:duration-[ease-in-out]"
- >
- <img src={thumbnail} alt="" class="absolute w-full" />
- {#key data.photo}
- <img
- src={data.photo?.url}
- alt="Chargement..."
- class="absolute w-auto"
- />
- {/key}
+ <span
+ class="absolute left-0 top-0 z-20 rounded-br-xl rounded-tl-2xl bg-zinc-800 px-2 text-xl text-white"
+ >{data.label}</span
+ >
</div>
- <span
- class="absolute left-0 top-0 z-20 rounded-br-xl rounded-tl-2xl bg-zinc-800 px-2 text-xl text-white"
- >{data.label}</span
- >
- </div>
- <form method="post" use:enhance>
+
<Fieldset form={sForm} name="choice">
<div
class="relative -top-6 z-20 mx-auto my-0 flex w-44 flex-col items-center space-y-0.5 rounded-2xl bg-zinc-800 px-5 py-0"
@@ -128,7 +160,7 @@
Suivant
</button>
</footer>
- </form>
- </div>
- </section>
-</div>
+ </div>
+ </section>
+ </div>
+</form>
diff --git a/src/routes/quiz/images/code-fork.png b/src/routes/quiz/images/code-fork.png
new file mode 100644
index 0000000000000000000000000000000000000000..362dd69b28a10160aaa4b850280f33fa16a934fa
Binary files /dev/null and b/src/routes/quiz/images/code-fork.png differ
diff --git a/src/routes/quiz/images/delete-sign.png b/src/routes/quiz/images/delete-sign.png
new file mode 100644
index 0000000000000000000000000000000000000000..16ee848b524da56428145d09201756bb16bc2b43
Binary files /dev/null and b/src/routes/quiz/images/delete-sign.png differ