+page.svelte

<script lang="ts">
  import { Fieldset, Control, Label } from "formsnap";
  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;

  const sForm = superForm(data.form, {
    // On récupère les valeurs après affichage des résultats
    resetForm: false,
  });

  const { form: formData, enhance } = sForm;

  const questionAmount = 10;

  let thumbnail: string;

  $: if (data.photo?.thumbnailHash) {
    thumbnail = thumbHashToDataURL(
      Uint8Array.from(atob(data.photo.thumbnailHash), (c) => c.charCodeAt(0)),
    );
  }
  $: showSolution = form?.solution !== undefined;

  setInterval(() => {
    data.countdown = Math.max(0, data.countdown - 1);
  }, 1000);
</script>

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