feat: quit button

README.md

-# 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
 

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();
   }
 }

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: "/" });
+  },
 };

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>