From d4af25ee5df5baae84f66ab94072a61118265f03 Mon Sep 17 00:00:00 2001 From: Laurent <58115082+naaturel@users.noreply.github.com> Date: Mon, 28 Oct 2024 13:54:22 +0100 Subject: [PATCH 01/18] Rework menu and integrate splash screen --- front/.env.development | 4 +- front/.gitignore | 2 + front/.idea/unluckiest.iml | 9 --- .../.svelte-kit/generated/server/internal.js | 4 +- front/src/app.d.ts | 1 + front/src/app.html | 8 ++- front/src/lib/assets/about.svg | 1 + front/src/lib/assets/dice.svg | 1 + front/src/lib/assets/leaderboard.svg | 1 + front/src/lib/components/LeaderBoard.svelte | 23 ++++--- front/src/lib/components/SplashScreen.svelte | 47 ++++++++++++++ front/src/routes/+layout.svelte | 60 ++++++++++++----- front/src/routes/+page.server.ts | 1 - front/src/routes/+page.svelte | 14 +++- front/src/routes/play/+page.svelte | 43 +++++-------- front/static/style/app.css | 21 ++++-- front/static/style/menu2.css | 64 +++++++++++++++++++ 17 files changed, 230 insertions(+), 74 deletions(-) delete mode 100644 front/.idea/unluckiest.iml create mode 100644 front/src/lib/assets/about.svg create mode 100644 front/src/lib/assets/dice.svg create mode 100644 front/src/lib/assets/leaderboard.svg create mode 100644 front/src/lib/components/SplashScreen.svelte create mode 100644 front/static/style/menu2.css diff --git a/front/.env.development b/front/.env.development index a0d265a..f3f699a 100644 --- a/front/.env.development +++ b/front/.env.development @@ -1,2 +1,2 @@ -VITE_CLIENT_API_URL=http://127.0.0.1:5000/api -VITE_SERVER_API_URL=http://127.0.0.1:5000/api \ No newline at end of file +VITE_CLIENT_API_URL=http://127.0.0.1:5000 +VITE_SERVER_API_URL=http://127.0.0.1:5000 \ No newline at end of file diff --git a/front/.gitignore b/front/.gitignore index 230a6d8..81d7c37 100644 --- a/front/.gitignore +++ b/front/.gitignore @@ -132,3 +132,5 @@ dist /.svelte-kit/ /.svelte-kit/ /.svelte-kit/ +/.idea/ +/.idea/ diff --git a/front/.idea/unluckiest.iml b/front/.idea/unluckiest.iml deleted file mode 100644 index d6ebd48..0000000 --- a/front/.idea/unluckiest.iml +++ /dev/null @@ -1,9 +0,0 @@ - - - - - - - - - \ No newline at end of file diff --git a/front/.svelte-kit/generated/server/internal.js b/front/.svelte-kit/generated/server/internal.js index dc6322c..7369d3a 100644 --- a/front/.svelte-kit/generated/server/internal.js +++ b/front/.svelte-kit/generated/server/internal.js @@ -18,10 +18,10 @@ export const options = { root, service_worker: false, templates: { - app: ({ head, body, assets, nonce, env }) => "\n\n\t\n\t\tUnluckiest\n\n\t\t\n\t\t\n\n\t\t\n\t\t\n\n\t\t\n\t\t\n\n\t\t\n\n\t\t" + head + "\n\t\n\t\n\t\t
" + body + "
\n\t\n\n", + app: ({ head, body, assets, nonce, env }) => "\n\n\t\n\t\tUnluckiest\n\n\t\t\n\t\t\n\n\t\t\n\t\t\n\n\t\t\n\t\t\n\n\t\t\n\n\t\t\n\t\t\n\n\t\t" + head + "\n\t\n\n\t\n\n\t\t
" + body + "
\n\n\t\n\n", error: ({ status, message }) => "\n\n\t\n\t\t\n\t\t" + message + "\n\n\t\t\n\t\n\t\n\t\t
\n\t\t\t" + status + "\n\t\t\t
\n\t\t\t\t

" + message + "

\n\t\t\t
\n\t\t
\n\t\n\n" }, - version_hash: "3iwm3b" + version_hash: "1y8hue" }; export async function get_hooks() { diff --git a/front/src/app.d.ts b/front/src/app.d.ts index 743f07b..f0b4d45 100644 --- a/front/src/app.d.ts +++ b/front/src/app.d.ts @@ -1,5 +1,6 @@ // See https://kit.svelte.dev/docs/types#app // for information about these interfaces + declare global { namespace App { // interface Error {} diff --git a/front/src/app.html b/front/src/app.html index 1e34ab3..057804d 100644 --- a/front/src/app.html +++ b/front/src/app.html @@ -16,13 +16,19 @@ - + + + + %sveltekit.head% + +
%sveltekit.body%
+ diff --git a/front/src/lib/assets/about.svg b/front/src/lib/assets/about.svg new file mode 100644 index 0000000..09fd08b --- /dev/null +++ b/front/src/lib/assets/about.svg @@ -0,0 +1 @@ + \ No newline at end of file diff --git a/front/src/lib/assets/dice.svg b/front/src/lib/assets/dice.svg new file mode 100644 index 0000000..d578a1f --- /dev/null +++ b/front/src/lib/assets/dice.svg @@ -0,0 +1 @@ + \ No newline at end of file diff --git a/front/src/lib/assets/leaderboard.svg b/front/src/lib/assets/leaderboard.svg new file mode 100644 index 0000000..457af63 --- /dev/null +++ b/front/src/lib/assets/leaderboard.svg @@ -0,0 +1 @@ + \ No newline at end of file diff --git a/front/src/lib/components/LeaderBoard.svelte b/front/src/lib/components/LeaderBoard.svelte index de6253d..e0bec72 100644 --- a/front/src/lib/components/LeaderBoard.svelte +++ b/front/src/lib/components/LeaderBoard.svelte @@ -12,7 +12,7 @@ {#each scores as score, i}
  • -
    {score.owner}
    {score.value} pts.
    +
    {score.owner}
    {score.value} pts.
    • {/each} @@ -37,27 +37,34 @@ display: none; } - li + .item { display: flex; justify-content: space-around; padding: 1.25vh; margin: 1.5vh; - border: 2px solid #A1674A; + background-color: #fcdcab; + border: 3px solid #4b0611; border-radius: 10px; - background-color: #f1ecec; - box-shadow: 0 0 10px #343232; + box-shadow: 5px 5px #4b0611; + text-align: left; + outline: none; } - li:hover + div.item { + width: 55vw; + } + + .item:hover + { + background-color: #dd3328; transform: scale(1.075); - background-color: #F5F5F5; } .name, .score { - color: black; + color: #4b0611; margin-left: 3vh; } diff --git a/front/src/lib/components/SplashScreen.svelte b/front/src/lib/components/SplashScreen.svelte new file mode 100644 index 0000000..20ab96c --- /dev/null +++ b/front/src/lib/components/SplashScreen.svelte @@ -0,0 +1,47 @@ + + +
    + +
    + + \ No newline at end of file diff --git a/front/src/routes/+layout.svelte b/front/src/routes/+layout.svelte index 6fd30d7..5f081d8 100644 --- a/front/src/routes/+layout.svelte +++ b/front/src/routes/+layout.svelte @@ -1,33 +1,57 @@ -
    + + +
    +
    + +
    @@ -35,7 +59,13 @@
    \ No newline at end of file diff --git a/front/src/routes/+page.server.ts b/front/src/routes/+page.server.ts index 0f22321..9192f6a 100644 --- a/front/src/routes/+page.server.ts +++ b/front/src/routes/+page.server.ts @@ -5,6 +5,5 @@ export const load = async ( {fetch} ) => { const res = await fetch(`${api_url}/leaderboard`) const leaderboard = await res.json() - return { leaderboard }; } \ No newline at end of file diff --git a/front/src/routes/+page.svelte b/front/src/routes/+page.svelte index ce51a3a..468f502 100644 --- a/front/src/routes/+page.svelte +++ b/front/src/routes/+page.svelte @@ -7,9 +7,21 @@ onMount(async () => { scoreStore.load(data.leaderboard) - } ) + }) + + +

    Phrase d'accroche

    + \ No newline at end of file diff --git a/front/src/routes/play/+page.svelte b/front/src/routes/play/+page.svelte index 459e55a..d0b096f 100644 --- a/front/src/routes/play/+page.svelte +++ b/front/src/routes/play/+page.svelte @@ -1,7 +1,7 @@ - +-
    From 8be7b82db69cb982254ab46c7fc18e1b5cc51eb2 Mon Sep 17 00:00:00 2001 From: Laurent <58115082+naaturel@users.noreply.github.com> Date: Mon, 28 Oct 2024 16:29:27 +0100 Subject: [PATCH 03/18] Rework menu UX --- front/src/lib/assets/arrow.svg | 1 + front/src/routes/+layout.svelte | 62 +++++++++++++++++---------------- front/src/routes/+page.svelte | 2 -- front/static/style/menu2.css | 40 ++++++++++++--------- 4 files changed, 57 insertions(+), 48 deletions(-) create mode 100644 front/src/lib/assets/arrow.svg diff --git a/front/src/lib/assets/arrow.svg b/front/src/lib/assets/arrow.svg new file mode 100644 index 0000000..e403d07 --- /dev/null +++ b/front/src/lib/assets/arrow.svg @@ -0,0 +1 @@ + \ No newline at end of file diff --git a/front/src/routes/+layout.svelte b/front/src/routes/+layout.svelte index 17e2cf8..15d39c7 100644 --- a/front/src/routes/+layout.svelte +++ b/front/src/routes/+layout.svelte @@ -5,52 +5,54 @@ import dice from '$lib/assets/dice.svg'; import about from '$lib/assets/about.svg'; import logo from '$lib/assets/logo2.png' + import arrow from '$lib/assets/arrow.svg' import {onMount} from "svelte"; import SplashScreen from "$lib/components/SplashScreen.svelte"; onMount(async () => { - /*window.$(".menu-collapsed").click(function () { - window.$(this).toggleClass("menu-expanded"); - });*/ + window.$(".expander").click(function () { + window.$(".menu").toggleClass("menu-collapsed menu-expanded"); + }); }); -- + -
    +
    -
    - -
    diff --git a/front/src/routes/+page.svelte b/front/src/routes/+page.svelte index 468f502..934eb4f 100644 --- a/front/src/routes/+page.svelte +++ b/front/src/routes/+page.svelte @@ -11,8 +11,6 @@ - -

    Phrase d'accroche

    diff --git a/front/static/style/menu2.css b/front/static/style/menu2.css index 489e534..060e5d4 100644 --- a/front/static/style/menu2.css +++ b/front/static/style/menu2.css @@ -1,5 +1,4 @@ -.menu { - font-family: 'Roboto', sans-serif; +.menu-collapsed, .menu-expanded { position: fixed; top: 0; left: 0; @@ -13,51 +12,60 @@ transition: width .3s; } -.menu:hover { - width: 300px; +.menu-collapsed .menu-item{ + display: none; } -.menu nav { +.menu-expanded, .menu-collapsed { display: flex; flex-direction: column; - justify-content: center; align-items: start; } -.menu nav a { +.menu-expanded { + width: 300px; +} + +.expander, .menu-item { display: flex; flex-direction: row; align-items: center; - justify-content: space-between; margin: 15px 30px 0 5px; border-radius: 5px; height: fit-content; width: 250px; } -.menu nav a { - font-size: .9rem; +.expander, .menu-item { text-decoration: none; margin: 15px 5px 5px 5px; padding: 5px; } -.menu nav a div { +.item-title { + margin-left: 5%; color: #4b0611; } -.menu nav a:hover, -.menu nav:first-child a { +.menu-item:hover { background: #dd3328; } +.menu-item .item-hint:hover { + transition: 0.3s; + transform: rotate(360deg); +} + +.menu-expanded .expander .item-hint { + transform: rotate(180deg); +} + @media screen and (max-width: 600px) { - .menu - { + .menu-collapsed { width: 45px } - .menu a img { + .item-hint { width: 20px; height: 20px; } From a19533a20f6d56aaadc16ba10e98a832f4040d69 Mon Sep 17 00:00:00 2001 From: Laurent <58115082+naaturel@users.noreply.github.com> Date: Tue, 29 Oct 2024 22:54:00 +0100 Subject: [PATCH 04/18] Fixed splashscreen and changed the way results are handled by front and back --- .../unluckiest/entities/ScoreEntity.java | 4 +- .../be/naaturel/unluckiest/models/Score.java | 6 +- front/.svelte-kit/ambient.d.ts | 4 +- .../.svelte-kit/generated/server/internal.js | 4 +- front/src/app.html | 2 +- front/src/lib/assets/plain_arrow_left.svg | 1 + front/src/lib/assets/plain_arrow_right.svg | 1 + front/src/lib/components/LeaderBoard.svelte | 56 +++++++++++++++---- front/src/lib/components/SplashScreen.svelte | 6 +- front/src/lib/stores/scoreStore.ts | 2 +- front/src/routes/+layout.svelte | 8 +-- front/src/routes/play/+page.svelte | 15 ++++- front/static/style/app.css | 33 +++++++++-- 13 files changed, 104 insertions(+), 38 deletions(-) create mode 100644 front/src/lib/assets/plain_arrow_left.svg create mode 100644 front/src/lib/assets/plain_arrow_right.svg diff --git a/back/src/main/java/be/naaturel/unluckiest/entities/ScoreEntity.java b/back/src/main/java/be/naaturel/unluckiest/entities/ScoreEntity.java index 678caea..3461486 100644 --- a/back/src/main/java/be/naaturel/unluckiest/entities/ScoreEntity.java +++ b/back/src/main/java/be/naaturel/unluckiest/entities/ScoreEntity.java @@ -2,6 +2,8 @@ package be.naaturel.unluckiest.entities; import jakarta.persistence.*; +import java.math.BigDecimal; + @Entity(name = "Score") public class ScoreEntity { @@ -13,6 +15,6 @@ public class ScoreEntity { public String owner; @Column - public int value; + public float value; } \ No newline at end of file diff --git a/back/src/main/java/be/naaturel/unluckiest/models/Score.java b/back/src/main/java/be/naaturel/unluckiest/models/Score.java index 1566ddf..67d9c3f 100644 --- a/back/src/main/java/be/naaturel/unluckiest/models/Score.java +++ b/back/src/main/java/be/naaturel/unluckiest/models/Score.java @@ -3,9 +3,9 @@ package be.naaturel.unluckiest.models; public class Score { private String owner; - private int value; + private float value; - public Score(String owner, int value){ + public Score(String owner, float value){ this.owner = owner; this.value = value; } @@ -14,7 +14,7 @@ public class Score { return this.owner; } - public int getValue(){ + public float getValue(){ return this.value; } diff --git a/front/.svelte-kit/ambient.d.ts b/front/.svelte-kit/ambient.d.ts index f57c813..2b1b9e0 100644 --- a/front/.svelte-kit/ambient.d.ts +++ b/front/.svelte-kit/ambient.d.ts @@ -42,7 +42,7 @@ declare module '$env/static/private' { export const DB_USER: string; export const DriverData: string; export const EDITOR: string; - export const EFC_10388: string; + export const EFC_9904: string; export const ffmpeg: string; export const FPS_BROWSER_APP_PROFILE_STRING: string; export const FPS_BROWSER_USER_PROFILE_STRING: string; @@ -150,7 +150,7 @@ declare module '$env/dynamic/private' { DB_USER: string; DriverData: string; EDITOR: string; - EFC_10388: string; + EFC_9904: string; ffmpeg: string; FPS_BROWSER_APP_PROFILE_STRING: string; FPS_BROWSER_USER_PROFILE_STRING: string; diff --git a/front/.svelte-kit/generated/server/internal.js b/front/.svelte-kit/generated/server/internal.js index 7369d3a..da1c1c3 100644 --- a/front/.svelte-kit/generated/server/internal.js +++ b/front/.svelte-kit/generated/server/internal.js @@ -18,10 +18,10 @@ export const options = { root, service_worker: false, templates: { - app: ({ head, body, assets, nonce, env }) => "\n\n\t\n\t\tUnluckiest\n\n\t\t\n\t\t\n\n\t\t\n\t\t\n\n\t\t\n\t\t\n\n\t\t\n\n\t\t\n\t\t\n\n\t\t" + head + "\n\t\n\n\t\n\n\t\t
    " + body + "
    \n\n\t\n\n", + app: ({ head, body, assets, nonce, env }) => "\n\n\t\n\t\tUnluckiest\n\n\t\t\n\t\t\n\n\t\t\n\t\t\n\n\t\t\n\t\t\n\n\t\t\n\n\t\t\n\t\t\n\n\t\t" + head + "\n\t\n\n\t\n\n\t\t
    " + body + "
    \n\n\t\n\n", error: ({ status, message }) => "\n\n\t\n\t\t\n\t\t" + message + "\n\n\t\t\n\t\n\t\n\t\t
    \n\t\t\t" + status + "\n\t\t\t
    \n\t\t\t\t

    " + message + "

    \n\t\t\t
    \n\t\t
    \n\t\n\n" }, - version_hash: "1y8hue" + version_hash: "w4m36h" }; export async function get_hooks() { diff --git a/front/src/app.html b/front/src/app.html index 057804d..f6fc628 100644 --- a/front/src/app.html +++ b/front/src/app.html @@ -13,7 +13,7 @@ - + diff --git a/front/src/lib/assets/plain_arrow_left.svg b/front/src/lib/assets/plain_arrow_left.svg new file mode 100644 index 0000000..817bbc4 --- /dev/null +++ b/front/src/lib/assets/plain_arrow_left.svg @@ -0,0 +1 @@ + \ No newline at end of file diff --git a/front/src/lib/assets/plain_arrow_right.svg b/front/src/lib/assets/plain_arrow_right.svg new file mode 100644 index 0000000..da082da --- /dev/null +++ b/front/src/lib/assets/plain_arrow_right.svg @@ -0,0 +1 @@ + \ No newline at end of file diff --git a/front/src/lib/components/LeaderBoard.svelte b/front/src/lib/components/LeaderBoard.svelte index e0bec72..47f510c 100644 --- a/front/src/lib/components/LeaderBoard.svelte +++ b/front/src/lib/components/LeaderBoard.svelte @@ -11,13 +11,33 @@ {/if} {#each scores as score, i} -
  • -
    {score.owner}
    {score.value} pts.
    -
    • + {#if i <= 100} +
  • +
    {i+1}
    +
    {score.owner}
    +
    {score.value}%
    +
    • + {/if} {/each} + \ No newline at end of file diff --git a/front/src/lib/components/SplashScreen.svelte b/front/src/lib/components/SplashScreen.svelte index 20ab96c..e9f4785 100644 --- a/front/src/lib/components/SplashScreen.svelte +++ b/front/src/lib/components/SplashScreen.svelte @@ -1,10 +1,10 @@
    - +
    \ No newline at end of file From a2eb0d00457ba47ccdf7da55aee5896a6e1c8ce6 Mon Sep 17 00:00:00 2001 From: Laurent <58115082+naaturel@users.noreply.github.com> Date: Tue, 29 Oct 2024 23:51:35 +0100 Subject: [PATCH 06/18] Change some texts --- front/src/routes/+layout.svelte | 6 +++--- front/src/routes/+page.svelte | 2 +- 2 files changed, 4 insertions(+), 4 deletions(-) diff --git a/front/src/routes/+layout.svelte b/front/src/routes/+layout.svelte index a292383..c14b932 100644 --- a/front/src/routes/+layout.svelte +++ b/front/src/routes/+layout.svelte @@ -34,7 +34,7 @@ height="30" width="30" alt="leaderboard"> -
    Leaderboard
    +
    Revue nécrologique
    @@ -42,7 +42,7 @@ height="30" width="30" alt="dice"> -
    Play
    +
    Tenter sa chance
     @@ -51,7 +51,7 @@ width="30" alt="about" > -
    About
    +
    A propos
    diff --git a/front/src/routes/+page.svelte b/front/src/routes/+page.svelte index 934eb4f..6f27514 100644 --- a/front/src/routes/+page.svelte +++ b/front/src/routes/+page.svelte @@ -11,7 +11,7 @@ -

    Phrase d'accroche

    +

    Qui va y passer ?

    \ No newline at end of file diff --git a/front/static/style/menu2.css b/front/static/style/menu2.css index 060e5d4..a8ddd47 100644 --- a/front/static/style/menu2.css +++ b/front/static/style/menu2.css @@ -5,7 +5,7 @@ margin: 0; padding: 0; height: 100vh; - width: 60px; + z-index: 1; list-style-type: none; background: rgb(252, 220, 171, 0.85); overflow: hidden; @@ -69,4 +69,10 @@ width: 20px; height: 20px; } +} + +@media screen and (min-width: 601px) { + .menu-collapsed { + width: 60px; + } } \ No newline at end of file From a171ce90d32e2a1692a23770ba7294c8384be0a1 Mon Sep 17 00:00:00 2001 From: Laurent <58115082+naaturel@users.noreply.github.com> Date: Wed, 30 Oct 2024 11:13:22 +0100 Subject: [PATCH 08/18] Fix input placeholder --- front/src/lib/components/LeaderBoard.svelte | 5 +---- front/src/routes/play/+page.svelte | 13 ++++++++----- front/static/style/app.css | 12 ------------ 3 files changed, 9 insertions(+), 21 deletions(-) diff --git a/front/src/lib/components/LeaderBoard.svelte b/front/src/lib/components/LeaderBoard.svelte index f369367..be8e1ac 100644 --- a/front/src/lib/components/LeaderBoard.svelte +++ b/front/src/lib/components/LeaderBoard.svelte @@ -108,10 +108,7 @@ } @media screen and (min-width: 601px) { - .leaderboard - { - width: 55vw; - } + .leaderboard { width: 55vw; } } \ No newline at end of file diff --git a/front/src/routes/play/+page.svelte b/front/src/routes/play/+page.svelte index cbdaecc..41877b0 100644 --- a/front/src/routes/play/+page.svelte +++ b/front/src/routes/play/+page.svelte @@ -74,16 +74,23 @@ .name { + color: #424242; + background-color: #fcdcab; + min-width: 210px; width: 22vmax; height: 5vh; - background-color: #fcdcab; + border: 3px solid #4b0611; border-radius: 10px; box-shadow: 5px 5px #4b0611; + text-align: left; + + margin: 1.5vh; padding-left: 30px; padding-right: 30px; + outline: none; } @@ -104,10 +111,6 @@ transform: scale(1.1); } - .name::placeholder - { - } - @keyframes rotate { to{transform: rotate(360deg)} } diff --git a/front/static/style/app.css b/front/static/style/app.css index df4823c..0f86304 100644 --- a/front/static/style/app.css +++ b/front/static/style/app.css @@ -117,19 +117,7 @@ form margin-bottom: 10vh; } -input -{ - color: #424242; - font-size: 2.5vh; - width: 20vw; - height: 4.5vh; - - padding: 1vh; - margin: 1.5vh; - - text-align: center; -} .bordered { From 68082376e758e4cb3983b0b5ba99c215d8d0bbbb Mon Sep 17 00:00:00 2001 From: Laurent <58115082+naaturel@users.noreply.github.com> Date: Wed, 30 Oct 2024 14:42:47 +0100 Subject: [PATCH 09/18] Rework /play page --- front/src/lib/models/game.ts | 48 +++++++++++++++++++++ front/src/routes/play/+page.svelte | 69 ++++++++++++------------------ 2 files changed, 76 insertions(+), 41 deletions(-) create mode 100644 front/src/lib/models/game.ts diff --git a/front/src/lib/models/game.ts b/front/src/lib/models/game.ts new file mode 100644 index 0000000..48f9cc0 --- /dev/null +++ b/front/src/lib/models/game.ts @@ -0,0 +1,48 @@ +import {scoreStore} from "../stores/scoreStore"; + +export class Game { + + public name : string; + public result : number; + public state : GameState; + private readonly range : number; + + constructor() { + this.name = ""; + this.result = -1; + this.state = GameState.Unplayed; + this.range = 100 + } + + public async play() { + this.result = this.getRandomNumber(); + await scoreStore.add(this.name, this.result) + } + + public hasBeenPlayed() : boolean { + return this.state == GameState.Played; + } + + public isRunning() : boolean { + return this.state == GameState.Running; + } + + private getRandomNumber() : number{ + let unit = Math.floor(Math.random() * (this.range + 1)); + + if(unit === 100){ + let modifier = Math.floor(Math.random() * (this.range + 1)); + return unit*modifier; + } + + let dec = Math.floor(Math.random() * (this.range)); + return unit + (dec/100); + } + +} + +export enum GameState { + Unplayed, + Running, + Played, +} \ No newline at end of file diff --git a/front/src/routes/play/+page.svelte b/front/src/routes/play/+page.svelte index 41877b0..6eb41ee 100644 --- a/front/src/routes/play/+page.svelte +++ b/front/src/routes/play/+page.svelte @@ -1,54 +1,46 @@
    -
    - - - -
    Rolling a random numbers within range 0-{range}...
    -
    -
    - + {#if isRunning} +
    + + + +
    Massacre en cours...
    +
    + {/if} - Bomb + {#if !isRunning && !hasBeenPlayed} +
    + + + Bomb + +
    + {/if} + + {#if hasBeenPlayed} +
    Vous avez {game.result}% de chance de mourir
    + {/if} -
    -
    \ No newline at end of file + \ No newline at end of file diff --git a/front/src/routes/play/+page.svelte b/front/src/routes/play/+page.svelte index 6eb41ee..183e375 100644 --- a/front/src/routes/play/+page.svelte +++ b/front/src/routes/play/+page.svelte @@ -29,6 +29,7 @@ {/if} {#if !isRunning && !hasBeenPlayed} +

    Evaluez vos chances de survie

    @@ -59,14 +60,19 @@ gap: 2vh; } + .name, .roll + { + min-width: 210px; + width: 22vmax; + } + .name { color: #424242; background-color: #fcdcab; - min-width: 210px; - width: 22vmax; - height: 5vh; + height: 6vh; + min-height: 50px; border: 3px solid #4b0611; border-radius: 10px; @@ -81,6 +87,11 @@ outline: none; } + .result + { + font-size: 24px; + } + .circular-loader { stroke-dasharray: 100, 125; diff --git a/front/static/style/app.css b/front/static/style/app.css index 0f86304..41a4bde 100644 --- a/front/static/style/app.css +++ b/front/static/style/app.css @@ -10,6 +10,11 @@ } } +* +{ + color: #4b0611; +} + *, *::before, *::after { @@ -18,7 +23,6 @@ * { - color: #F5F5F5; text-decoration: none; font-size: var(--font-size, 1vw); transition: 0.3s; @@ -32,6 +36,7 @@ h1 { font-size: calc(var(--font-size, 1vw) * 2.15); + text-decoration: underline; } html, body From 30337d9abc352b9c2e23df38934c763eacfa6201 Mon Sep 17 00:00:00 2001 From: Laurent <58115082+naaturel@users.noreply.github.com> Date: Wed, 30 Oct 2024 17:52:52 +0100 Subject: [PATCH 11/18] Add tooltip error allegedly stolen codepen.io --- front/src/lib/models/game.ts | 17 +-- front/src/routes/play/+page.svelte | 170 +++++++++++++++++++++++++++-- 2 files changed, 164 insertions(+), 23 deletions(-) diff --git a/front/src/lib/models/game.ts b/front/src/lib/models/game.ts index 48f9cc0..8dedf7c 100644 --- a/front/src/lib/models/game.ts +++ b/front/src/lib/models/game.ts @@ -1,30 +1,23 @@ -import {scoreStore} from "../stores/scoreStore"; - export class Game { - public name : string; + public playerName : string; public result : number; public state : GameState; private readonly range : number; constructor() { - this.name = ""; + this.playerName = ""; this.result = -1; this.state = GameState.Unplayed; this.range = 100 } - public async play() { + public play() { this.result = this.getRandomNumber(); - await scoreStore.add(this.name, this.result) } - public hasBeenPlayed() : boolean { - return this.state == GameState.Played; - } - - public isRunning() : boolean { - return this.state == GameState.Running; + public playerExists() : boolean{ + return false; } private getRandomNumber() : number{ diff --git a/front/src/routes/play/+page.svelte b/front/src/routes/play/+page.svelte index 183e375..97a105f 100644 --- a/front/src/routes/play/+page.svelte +++ b/front/src/routes/play/+page.svelte @@ -1,18 +1,56 @@ @@ -27,15 +65,23 @@
    Massacre en cours...
    {/if} - {#if !isRunning && !hasBeenPlayed} -

    Evaluez vos chances de survie

    -
    - - Bomb +

    Evaluez vos chances de survie

    +
    + debounce(value)} + on:blur={({ target: { value } }) => debounce(value)} + />
    + + Bomb + {/if} {#if hasBeenPlayed} @@ -80,7 +126,7 @@ text-align: left; - margin: 1.5vh; + margin: 0 1.5vh 1.5vh 1.5vh; padding-left: 30px; padding-right: 30px; @@ -113,4 +159,106 @@ to{transform: rotate(360deg)} } + /*=============TOOLTIP=============*/ + + /* START TOOLTIP STYLES */ + [tooltip] { + position: relative; /* opinion 1 */ + } + + /* Applies to all tooltips */ + [tooltip]::before, + [tooltip]::after { + text-transform: none; /* opinion 2 */ + font-size: .9em; /* opinion 3 */ + line-height: 1; + user-select: none; + pointer-events: none; + position: absolute; + display: none; + opacity: 0; + } + [tooltip]::before { + content: ''; + border: 5px solid transparent; /* opinion 4 */ + z-index: 1001; /* absurdity 1 */ + } + [tooltip]::after { + content: attr(tooltip); /* magic! */ + + /* most of the rest of this is opinion */ + font-family: Helvetica, sans-serif; + text-align: center; + + /* + Let the content set the size of the tooltips + but this will also keep them from being obnoxious + */ + min-width: 3em; + max-width: 21em; + white-space: nowrap; + overflow: hidden; + text-overflow: ellipsis; + padding: 1ch 1.5ch; + border-radius: .3ch; + box-shadow: 0 1em 2em -.5em rgba(0, 0, 0, 0.35); + background: #333; + color: #fff; + z-index: 1000; /* absurdity 2 */ + } + + /* Make the tooltips respond to hover */ + [tooltip]::before, + [tooltip]::after { + display: block; + } + + /* don't show empty tooltips */ + [tooltip='']::before, + [tooltip='']::after { + display: none !important; + } + + /* FLOW: UP */ + [tooltip]:not([flow])::before, + [tooltip][flow^="up"]::before { + bottom: 100%; + border-bottom-width: 0; + border-top-color: #333; + } + [tooltip]:not([flow])::after, + [tooltip][flow^="up"]::after { + bottom: calc(100% + 5px); + } + [tooltip]:not([flow])::before, + [tooltip]:not([flow])::after, + [tooltip][flow^="up"]::before, + [tooltip][flow^="up"]::after { + left: 50%; + transform: translate(-50%, -.5em); + } + + /* KEYFRAMES */ + @keyframes tooltips-vert { + to { + opacity: .9; + transform: translate(-50%, 0); + } + } + + @keyframes tooltips-horz { + to { + opacity: .9; + transform: translate(0, -50%); + } + } + + /* FX All The Things */ + [tooltip]:not([flow])::before, + [tooltip]:not([flow])::after, + [tooltip][flow^="up"]::before, + [tooltip][flow^="up"]::after { + animation: tooltips-vert 300ms ease-out forwards; + } + \ No newline at end of file From 91e520402c1320ecd94003c97b99033050daf4d6 Mon Sep 17 00:00:00 2001 From: Laurent <58115082+naaturel@users.noreply.github.com> Date: Sun, 3 Nov 2024 16:37:13 +0100 Subject: [PATCH 12/18] Correct some style stuff --- .../src/main/resources/application.properties | 2 +- front/.svelte-kit/ambient.d.ts | 8 +-- .../.svelte-kit/generated/server/internal.js | 2 +- front/src/lib/components/PageTitle.svelte | 11 ++++ front/src/routes/+layout.svelte | 3 +- front/src/routes/+page.svelte | 3 +- front/src/routes/about/+page.svelte | 50 ++++++++++++++++++- front/src/routes/play/+page.svelte | 50 ++++++++++--------- front/static/style/app.css | 13 ++--- front/static/style/menu2.css | 2 +- 10 files changed, 102 insertions(+), 42 deletions(-) create mode 100644 front/src/lib/components/PageTitle.svelte diff --git a/back/src/main/resources/application.properties b/back/src/main/resources/application.properties index 92c9394..2c5bbe2 100644 --- a/back/src/main/resources/application.properties +++ b/back/src/main/resources/application.properties @@ -12,7 +12,7 @@ sec.cors.authorizedHeader=Authorization,Content-type #=============DATABASE============= spring.datasource.url=jdbc:${DB_URL} spring.datasource.username=${DB_USER} -spring.datasource.password=${DB_PASSWORD} +spring.datasource.password= spring.jpa.database-platform=org.hibernate.dialect.MariaDBDialect spring.jpa.show-sql=true diff --git a/front/.svelte-kit/ambient.d.ts b/front/.svelte-kit/ambient.d.ts index 2b1b9e0..afaa3b9 100644 --- a/front/.svelte-kit/ambient.d.ts +++ b/front/.svelte-kit/ambient.d.ts @@ -42,10 +42,8 @@ declare module '$env/static/private' { export const DB_USER: string; export const DriverData: string; export const EDITOR: string; - export const EFC_9904: string; + export const EFC_10880: string; export const ffmpeg: string; - export const FPS_BROWSER_APP_PROFILE_STRING: string; - export const FPS_BROWSER_USER_PROFILE_STRING: string; export const HOME: string; export const HOMEDRIVE: string; export const HOMEPATH: string; @@ -150,10 +148,8 @@ declare module '$env/dynamic/private' { DB_USER: string; DriverData: string; EDITOR: string; - EFC_9904: string; + EFC_10880: string; ffmpeg: string; - FPS_BROWSER_APP_PROFILE_STRING: string; - FPS_BROWSER_USER_PROFILE_STRING: string; HOME: string; HOMEDRIVE: string; HOMEPATH: string; diff --git a/front/.svelte-kit/generated/server/internal.js b/front/.svelte-kit/generated/server/internal.js index da1c1c3..5398a78 100644 --- a/front/.svelte-kit/generated/server/internal.js +++ b/front/.svelte-kit/generated/server/internal.js @@ -21,7 +21,7 @@ export const options = { app: ({ head, body, assets, nonce, env }) => "\n\n\t\n\t\tUnluckiest\n\n\t\t\n\t\t\n\n\t\t\n\t\t\n\n\t\t\n\t\t\n\n\t\t\n\n\t\t\n\t\t\n\n\t\t" + head + "\n\t\n\n\t\n\n\t\t
    " + body + "
    \n\n\t\n\n", error: ({ status, message }) => "\n\n\t\n\t\t\n\t\t" + message + "\n\n\t\t\n\t\n\t\n\t\t
    \n\t\t\t" + status + "\n\t\t\t
    \n\t\t\t\t

    " + message + "

    \n\t\t\t
    \n\t\t
    \n\t\n\n" }, - version_hash: "w4m36h" + version_hash: "1bdcmwq" }; export async function get_hooks() { diff --git a/front/src/lib/components/PageTitle.svelte b/front/src/lib/components/PageTitle.svelte new file mode 100644 index 0000000..a1de26d --- /dev/null +++ b/front/src/lib/components/PageTitle.svelte @@ -0,0 +1,11 @@ +

    + +

    + + \ No newline at end of file diff --git a/front/src/routes/+layout.svelte b/front/src/routes/+layout.svelte index c14b932..72aff1f 100644 --- a/front/src/routes/+layout.svelte +++ b/front/src/routes/+layout.svelte @@ -9,6 +9,7 @@ import {onMount} from "svelte"; import SplashScreen from "$lib/components/SplashScreen.svelte"; + import PageTitle from "$lib/components/PageTitle.svelte"; onMount(async () => { window.$(".expander").click(function () { @@ -19,7 +20,6 @@ -
    @@ -57,7 +57,6 @@
    -
    diff --git a/front/src/routes/+page.svelte b/front/src/routes/+page.svelte index 15efb08..b38081b 100644 --- a/front/src/routes/+page.svelte +++ b/front/src/routes/+page.svelte @@ -2,6 +2,7 @@ import LeaderBoard from "$lib/components/LeaderBoard.svelte"; import {scoreStore} from "$lib/stores/scoreStore.ts"; import {onMount} from "svelte"; + import PageTitle from "$lib/components/PageTitle.svelte"; let { data } = $props() @@ -11,5 +12,5 @@ -

    Qui va y passer ?

    +Qui va y passer ? \ No newline at end of file diff --git a/front/src/routes/about/+page.svelte b/front/src/routes/about/+page.svelte index 1b00494..f401e03 100644 --- a/front/src/routes/about/+page.svelte +++ b/front/src/routes/about/+page.svelte @@ -1 +1,49 @@ -

    It was revealed to me in a dream

    \ No newline at end of file + +A propos + +
    +
    +

    Design

    +

    Arwen Hirsoux

    +
    + +
    + +
    +

    Développement

    +

    Laurent Crema

    +
    + +
    + + + \ No newline at end of file diff --git a/front/src/routes/play/+page.svelte b/front/src/routes/play/+page.svelte index 97a105f..446b5e3 100644 --- a/front/src/routes/play/+page.svelte +++ b/front/src/routes/play/+page.svelte @@ -2,6 +2,7 @@ import bomb from '$lib/assets/bomb.svg'; import {Game, GameState} from "$lib/models/game.ts"; import {scoreStore} from "$lib/stores/scoreStore.ts"; + import PageTitle from "$lib/components/PageTitle.svelte"; let game = new Game(); @@ -15,7 +16,6 @@ timer = setTimeout(() => { try{ validate(inputValue) - clearError(); game.playerName = inputValue; } catch (e){ displayError(e.message) @@ -23,14 +23,6 @@ }, 150); } - function validate(data){ - if(!data) throw new Error("Veuillez indiquer votre nom."); - $scoreStore.forEach(v => { - if(v.owner && v.owner.toLowerCase() === data.toLowerCase()) throw new Error("Ce joueur existe déjà"); - }) - - } - async function roll(){ try{ @@ -45,8 +37,18 @@ } } + function validate(data){ + if(!data) throw new Error("Veuillez indiquer votre nom."); + $scoreStore.forEach(v => { + if(v.owner && v.owner.toLowerCase() === data.toLowerCase()) throw new Error("Cette personne a déjà été évaluée."); + }) + } + function displayError(message){ window.$(".player").attr('tooltip', message) + setTimeout(() => { + clearError(); + }, 3000) } function clearError(){ @@ -55,6 +57,7 @@ +Évaluez vos chance de survie
    {#if isRunning} @@ -67,20 +70,17 @@ {/if} {#if !isRunning && !hasBeenPlayed} -

    Evaluez vos chances de survie

    debounce(value)} on:blur={({ target: { value } }) => debounce(value)} /> - + Bomb
    - Bomb {/if} @@ -92,7 +92,17 @@ \n\n\t\t\n\t\t\n\n\t\t\n\t\t\n\n\t\t\n\n\t\t\n\t\t\n\n\t\t" + head + "\n\t\n\n\t\n\n\t\t
    " + body + "
    \n\n\t\n\n", error: ({ status, message }) => "\n\n\t\n\t\t\n\t\t" + message + "\n\n\t\t\n\t\n\t\n\t\t
    \n\t\t\t" + status + "\n\t\t\t
    \n\t\t\t\t

    " + message + "

    \n\t\t\t
    \n\t\t
    \n\t\n\n" }, - version_hash: "1bdcmwq" + version_hash: "1a1c177" }; export async function get_hooks() { diff --git a/front/src/lib/components/PageTitle.svelte b/front/src/lib/components/PageTitle.svelte index a1de26d..5c85fb9 100644 --- a/front/src/lib/components/PageTitle.svelte +++ b/front/src/lib/components/PageTitle.svelte @@ -7,5 +7,6 @@ { position: absolute; top: 50px; + width: 75vw; } \ No newline at end of file From a18f6654b8f43290726ffb01f5fd0ddc0fd726bb Mon Sep 17 00:00:00 2001 From: Laurent <58115082+naaturel@users.noreply.github.com> Date: Sun, 3 Nov 2024 17:10:48 +0100 Subject: [PATCH 15/18] forgot an S --- front/src/routes/play/+page.svelte | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/front/src/routes/play/+page.svelte b/front/src/routes/play/+page.svelte index 446b5e3..7894ee5 100644 --- a/front/src/routes/play/+page.svelte +++ b/front/src/routes/play/+page.svelte @@ -57,7 +57,7 @@ -Évaluez vos chance de survie +Évaluez vos chances de survie
    {#if isRunning} From 4fae13acfa7068af300f0ff83861a736d88c91d5 Mon Sep 17 00:00:00 2001 From: Laurent <58115082+naaturel@users.noreply.github.com> Date: Mon, 4 Nov 2024 10:14:07 +0100 Subject: [PATCH 16/18] Fix title position --- front/.svelte-kit/ambient.d.ts | 8 ++++++-- front/.svelte-kit/generated/server/internal.js | 2 +- front/src/lib/components/PageTitle.svelte | 2 -- 3 files changed, 7 insertions(+), 5 deletions(-) diff --git a/front/.svelte-kit/ambient.d.ts b/front/.svelte-kit/ambient.d.ts index afaa3b9..66f84fe 100644 --- a/front/.svelte-kit/ambient.d.ts +++ b/front/.svelte-kit/ambient.d.ts @@ -42,8 +42,10 @@ declare module '$env/static/private' { export const DB_USER: string; export const DriverData: string; export const EDITOR: string; - export const EFC_10880: string; + export const EFC_9404: string; export const ffmpeg: string; + export const FPS_BROWSER_APP_PROFILE_STRING: string; + export const FPS_BROWSER_USER_PROFILE_STRING: string; export const HOME: string; export const HOMEDRIVE: string; export const HOMEPATH: string; @@ -148,8 +150,10 @@ declare module '$env/dynamic/private' { DB_USER: string; DriverData: string; EDITOR: string; - EFC_10880: string; + EFC_9404: string; ffmpeg: string; + FPS_BROWSER_APP_PROFILE_STRING: string; + FPS_BROWSER_USER_PROFILE_STRING: string; HOME: string; HOMEDRIVE: string; HOMEPATH: string; diff --git a/front/.svelte-kit/generated/server/internal.js b/front/.svelte-kit/generated/server/internal.js index 83b55ed..9cea9b9 100644 --- a/front/.svelte-kit/generated/server/internal.js +++ b/front/.svelte-kit/generated/server/internal.js @@ -21,7 +21,7 @@ export const options = { app: ({ head, body, assets, nonce, env }) => "\n\n\t\n\t\tUnluckiest\n\n\t\t\n\t\t\n\n\t\t\n\t\t\n\n\t\t\n\t\t\n\n\t\t\n\n\t\t\n\t\t\n\n\t\t" + head + "\n\t\n\n\t\n\n\t\t
    " + body + "
    \n\n\t\n\n", error: ({ status, message }) => "\n\n\t\n\t\t\n\t\t" + message + "\n\n\t\t\n\t\n\t\n\t\t
    \n\t\t\t" + status + "\n\t\t\t
    \n\t\t\t\t

    " + message + "

    \n\t\t\t
    \n\t\t
    \n\t\n\n" }, - version_hash: "1a1c177" + version_hash: "1lnb4jg" }; export async function get_hooks() { diff --git a/front/src/lib/components/PageTitle.svelte b/front/src/lib/components/PageTitle.svelte index 5c85fb9..749ad90 100644 --- a/front/src/lib/components/PageTitle.svelte +++ b/front/src/lib/components/PageTitle.svelte @@ -5,8 +5,6 @@ \ No newline at end of file From 245c4a911c4612d20f065af69c038f4b5f224345 Mon Sep 17 00:00:00 2001 From: Laurent <58115082+naaturel@users.noreply.github.com> Date: Mon, 4 Nov 2024 11:43:50 +0100 Subject: [PATCH 17/18] Fix ga --- back/src/main/resources/application.properties | 2 +- front/.svelte-kit/generated/server/internal.js | 2 +- front/src/routes/play/+page.svelte | 12 +++++++++--- 3 files changed, 11 insertions(+), 5 deletions(-) diff --git a/back/src/main/resources/application.properties b/back/src/main/resources/application.properties index 92c9394..2c5bbe2 100644 --- a/back/src/main/resources/application.properties +++ b/back/src/main/resources/application.properties @@ -12,7 +12,7 @@ sec.cors.authorizedHeader=Authorization,Content-type #=============DATABASE============= spring.datasource.url=jdbc:${DB_URL} spring.datasource.username=${DB_USER} -spring.datasource.password=${DB_PASSWORD} +spring.datasource.password= spring.jpa.database-platform=org.hibernate.dialect.MariaDBDialect spring.jpa.show-sql=true diff --git a/front/.svelte-kit/generated/server/internal.js b/front/.svelte-kit/generated/server/internal.js index 9cea9b9..7cb4c7e 100644 --- a/front/.svelte-kit/generated/server/internal.js +++ b/front/.svelte-kit/generated/server/internal.js @@ -21,7 +21,7 @@ export const options = { app: ({ head, body, assets, nonce, env }) => "\n\n\t\n\t\tUnluckiest\n\n\t\t\n\t\t\n\n\t\t\n\t\t\n\n\t\t\n\t\t\n\n\t\t\n\n\t\t\n\t\t\n\n\t\t" + head + "\n\t\n\n\t\n\n\t\t
    " + body + "
    \n\n\t\n\n", error: ({ status, message }) => "\n\n\t\n\t\t\n\t\t" + message + "\n\n\t\t\n\t\n\t\n\t\t
    \n\t\t\t" + status + "\n\t\t\t
    \n\t\t\t\t

    " + message + "

    \n\t\t\t
    \n\t\t
    \n\t\n\n" }, - version_hash: "1lnb4jg" + version_hash: "feblej" }; export async function get_hooks() { diff --git a/front/src/routes/play/+page.svelte b/front/src/routes/play/+page.svelte index 7894ee5..8bfb7fc 100644 --- a/front/src/routes/play/+page.svelte +++ b/front/src/routes/play/+page.svelte @@ -94,7 +94,6 @@ .container { - line-height: 250px; display: flex; flex-direction: column; justify-content: center; @@ -111,8 +110,6 @@ text-align: center; } - - .player { gap: 2vh; @@ -150,6 +147,15 @@ font-size: 24px; } + .result + { + border-radius: 7px; + background: rgb(252, 220, 171, 0.6); + width: 85%; + height: fit-content; + padding: 25px; + } + .circular-loader { stroke-dasharray: 100, 125; From 6c3ff701e85fa480783f37b7610ce7cc8d4d0f0e Mon Sep 17 00:00:00 2001 From: Laurent <58115082+naaturel@users.noreply.github.com> Date: Mon, 4 Nov 2024 11:46:45 +0100 Subject: [PATCH 18/18] Oopsie --- back/src/main/resources/application.properties | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/back/src/main/resources/application.properties b/back/src/main/resources/application.properties index 2c5bbe2..92c9394 100644 --- a/back/src/main/resources/application.properties +++ b/back/src/main/resources/application.properties @@ -12,7 +12,7 @@ sec.cors.authorizedHeader=Authorization,Content-type #=============DATABASE============= spring.datasource.url=jdbc:${DB_URL} spring.datasource.username=${DB_USER} -spring.datasource.password= +spring.datasource.password=${DB_PASSWORD} spring.jpa.database-platform=org.hibernate.dialect.MariaDBDialect spring.jpa.show-sql=true