From 6bb9362c9852cf903d0e84bb9bcebdc4c8e95a64 Mon Sep 17 00:00:00 2001
From: steel <mael.acier@ensiie.fr>
Date: Mon, 9 Sep 2024 15:28:40 +0200
Subject: [PATCH] feat: quit button
---
README.md | 16 +---
src/lib/game.ts | 6 +-
src/routes/quiz/+page.server.ts | 24 +++++-
src/routes/quiz/+page.svelte | 114 ++++++++++++++++---------
src/routes/quiz/images/code-fork.png | Bin 0 -> 719 bytes
src/routes/quiz/images/delete-sign.png | Bin 0 -> 691 bytes
6 files changed, 98 insertions(+), 62 deletions(-)
create mode 100644 src/routes/quiz/images/code-fork.png
create mode 100644 src/routes/quiz/images/delete-sign.png
diff --git a/README.md b/README.md
index 243302f..8cff704 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 e54f42c..758fbca 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 ed60285..969107b 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 17e8fcb..25caa73 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
GIT binary patch
literal 719
zcmV;=0x<oFP)<h;3K|Lk000e1NJLTq002Ay002A)1^@s6I{evk00009a7bBm000XU
z000XU0RWnu7ytkQfk{L`RCt{2n!#%mK@`S6Ld6Iop(leFD9H9?4r_KNf<X@ou_xV2
z^`Hk23ZhX9-u)L8p`f4?!GoZJ-n`VKpkgltX)j)Eiq)PP#U$&~H(jw<O{OrjlPvRt
z4~Cfsk8j@09Cjbza5x-}tWc-z5Y#|OuOMhmipN#DEY~tcmG(f;90bvS^iIZPsIqfC
z%>FT*iAoD<D41PWNS8451f4hPhQGhY&=YjNDjVil6C9>I1WiEDRHEbNu20bZre5K8
zOM8AnryywQAJ^w21Wjts2mjNevSELDL2GV7R}}I#wC2S4^SjE1y=Ql{<rP#$NL_`8
zvWqJ1*OnLgy)_(I`Or5p$BYzf+VY0+1Lcht@r<^-01DW3<YG_Lyv8vctBat$yoI-;
z3C(!O70zJa<NG_0u2Ak^M~cThC)YSeCt<gvZn)cq0ZIT)1XB-bqj)Y^(@UlGMcHs=
z?K2FKo4B_`$8Nuu;xW$|$yA<yscg7BKMPYtPl-0lSfbt6E+CBK{>M3vQM`J7_zeRd
zyeBh#4F8ZZy5A2=hWV=0F*bb*mDcL!d)r#Y*z`>qW9nL^Y?#?04Q(4e>z$jW(&Sqy
z9`jscmSd0=!$_*<9lG&?#Pvr~JWh_Wxyo8JY&9>O;goO{PK(Ih;dF3E+SX1-mgEeZ
zA{v0|x(b^l+Pu@JEh!x$XE@_TwjK{#M9y%=dpt%@5{=Z>#bejwG4#}3j|cVmb?JIM
zhL2zXdOT7ku-xO3I=;mo4=apY>hZ8f-cpZ;MG97WJS^k=?(u-%T$B$P%Wp0i>+u)>
zN=ZM*-(Mcg^mq&iIRHg|$`Tb*`DN*FI2^xr;3vr<A@MBXKAZpm002ovPDHLkV1m;M
BN!b7Z
literal 0
HcmV?d00001
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
GIT binary patch
literal 691
zcmV;k0!;mhP)<h;3K|Lk000e1NJLTq002Ay002A)1^@s6I{evk00009a7bBm000XU
z000XU0RWnu7ytkQWl2OqRCt{2+RsZHK@<n@Z$eIK;_Phkpb(WDi+_iO9(vVYq@Jbv
zzx2@3yNC9lC{(Pp^w3i(Di&JnFFXZ`2QRP8vVj<rbarQE-;B%`=9>3DEKFt|1H{C{
z#Kgpe84_5c6gxDF7JDzVXl1<!EV(Hlu|O$KC<Rf9J$j6`lR`SZ%%MpVAM;**kwDia
zmN?NPSh9|$@mLo01gt$YO~+P>{twm;n$)H+y})4Yy4=X}4Qf}jm!0y3=FsdX_^MgR
z$(Pprvf1iOd^hc3dA^R9rvg0=bP?=%g2Qed8>(lMnjHYE9O#nRH2{mIwL4X#IkA<a
zeZW?R_6h48?IYG1+GnhFbO=~$=#a3+=n%0c=zWs-6e89H9W2%f+IOr~bSPLW=+LnD
z(0>Ge=wdGt9EXS<q?6XM{;r9G%R~=+ncye~2Zx3FpFI@#{JsVH(9SSg=o^V|oFm{;
z89r3}PC!M`+;i_j8FzwuuxOfcTzqh7(l{Fr(61liqBn!HV9`|IBJib+6H&ukS;L#3
z0!P82sobq+Q!UOBaH$wx@z_SdrDEwm8wQ%}Uf%silbcC}pJ;MBmhlTs)y$y$KvT5?
zH(oUHOc#03#5+o@9!;809?laSEV`LgWN7u<s)qX~4-yNv>Y+%rU$*p@zLhvLeaX{#
z+Q4RC;))5Yjs7cf{k(xK(>|5~yjW@A)hK!hyP7xTIup@3c3bso`o=@$$tap}lzI<s
z8+!-+tbwhbz@DQGs_;gpdQm;u#@<2ai+gUIp@;ghjvYpGV@J`>u!GFNpZL^EOiT>i
Z=O6y_F55dc$o&8S002ovPDHLkV1mq4MWg@#
literal 0
HcmV?d00001
--
GitLab