Naaturel/unluckiest
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Fixed splashscreen and changed the way results are handled by front and back

Browse Source
This commit is contained in:
Laurent
2024-10-29 22:54:00 +01:00
parent 8be7b82db6
commit a19533a20f
13 changed files with 104 additions and 38 deletions
Download Patch File Download Diff File Expand all files Collapse all files

4
back/src/main/java/be/naaturel/unluckiest/entities/ScoreEntity.java
View File

@@ -2,6 +2,8 @@ package be.naaturel.unluckiest.entities;
import jakarta.persistence.*; import jakarta.persistence.*;
import java.math.BigDecimal;
@Entity(name = "Score") @Entity(name = "Score")
public class ScoreEntity { public class ScoreEntity {
@@ -13,6 +15,6 @@ public class ScoreEntity {
public String owner; public String owner;
@Column @Column
public int value; public float value;
} }

6
back/src/main/java/be/naaturel/unluckiest/models/Score.java
View File

@@ -3,9 +3,9 @@ package be.naaturel.unluckiest.models;
public class Score { public class Score {
private String owner; 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.owner = owner;
this.value = value; this.value = value;
} }
@@ -14,7 +14,7 @@ public class Score {
return this.owner; return this.owner;
} }
public int getValue(){ public float getValue(){
return this.value; return this.value;
} }

4
front/.svelte-kit/ambient.d.ts vendored
View File

@@ -42,7 +42,7 @@ declare module '$env/static/private' {
export const DB_USER: string; export const DB_USER: string;
export const DriverData: string; export const DriverData: string;
export const EDITOR: string; export const EDITOR: string;
export const EFC_10388: string; export const EFC_9904: string;
export const ffmpeg: string; export const ffmpeg: string;
export const FPS_BROWSER_APP_PROFILE_STRING: string; export const FPS_BROWSER_APP_PROFILE_STRING: string;
export const FPS_BROWSER_USER_PROFILE_STRING: string; export const FPS_BROWSER_USER_PROFILE_STRING: string;
@@ -150,7 +150,7 @@ declare module '$env/dynamic/private' {
DB_USER: string; DB_USER: string;
DriverData: string; DriverData: string;
EDITOR: string; EDITOR: string;
EFC_10388: string; EFC_9904: string;
ffmpeg: string; ffmpeg: string;
FPS_BROWSER_APP_PROFILE_STRING: string; FPS_BROWSER_APP_PROFILE_STRING: string;
FPS_BROWSER_USER_PROFILE_STRING: string; FPS_BROWSER_USER_PROFILE_STRING: string;

4
front/.svelte-kit/generated/server/internal.js
View File

@@ -18,10 +18,10 @@ export const options = {
root, root,
service_worker: false, service_worker: false,
templates: { templates: {
app: ({ head, body, assets, nonce, env }) => "<!doctype html>\n<html lang=\"en\">\n\t<head>\n\t\t<title>Unluckiest</title>\n\n\t\t<link rel=\"stylesheet\"\n\t\t\t href=\"https://fonts.googleapis.com/css?family=Afacad+Flux\">\n\t\t<style>\n\t\t\tbody {\n\t\t\t\tfont-family: 'Afacad Flux', serif;\n\t\t\t\tfont-size: 48px;\n\t\t\t}\n\t\t</style>\n\n\t\t<meta charset=\"utf-8\" />\n\t\t<meta name=\"viewport\" content=\"width=device-width, initial-scale=1\" />\n\n\t\t<link rel=\"stylesheet\" href=\"" + assets + "/style/app.css\" />\n\t\t<link rel=\"stylesheet\" href=\"" + assets + "/style/menu2.css\" />\n\n\t\t<link rel=\"icon\" href=\"" + assets + "/favicon.png\" />\n\n\t\t<script src=\"https://code.jquery.com/jquery-3.6.0.min.js\"></script>\n\t\t<script src=\"https://code.jquery.com/ui/1.12.1/jquery-ui.min.js\"></script>\n\n\t\t" + head + "\n\t</head>\n\n\t<body data-sveltekit-preload-data=\"hover\">\n\n\t\t<div style=\"display: contents\">" + body + "</div>\n\n\t</body>\n</html>\n", app: ({ head, body, assets, nonce, env }) => "<!doctype html>\n<html lang=\"en\">\n\t<head>\n\t\t<title>Unluckiest</title>\n\n\t\t<link rel=\"stylesheet\"\n\t\t\t href=\"https://fonts.googleapis.com/css?family=Afacad+Flux\">\n\t\t<style>\n\t\t\tbody {\n\t\t\t\tfont-family: 'Afacad Flux', serif;\n\t\t\t\tfont-size: 48px;\n\t\t\t}\n\t\t</style>\n\n\t\t<meta charset=\"utf-8\" />\n\t\t<meta name=\"viewport\" content=\"width=device-width, initial-scale=1, viewport-fit=cover\" />\n\n\t\t<link rel=\"stylesheet\" href=\"" + assets + "/style/app.css\" />\n\t\t<link rel=\"stylesheet\" href=\"" + assets + "/style/menu2.css\" />\n\n\t\t<link rel=\"icon\" href=\"" + assets + "/favicon.png\" />\n\n\t\t<script src=\"https://code.jquery.com/jquery-3.6.0.min.js\"></script>\n\t\t<script src=\"https://code.jquery.com/ui/1.12.1/jquery-ui.min.js\"></script>\n\n\t\t" + head + "\n\t</head>\n\n\t<body data-sveltekit-preload-data=\"hover\">\n\n\t\t<div style=\"display: contents\">" + body + "</div>\n\n\t</body>\n</html>\n",
error: ({ status, message }) => "<!doctype html>\n<html lang=\"en\">\n\t<head>\n\t\t<meta charset=\"utf-8\" />\n\t\t<title>" + message + "</title>\n\n\t\t<style>\n\t\t\tbody {\n\t\t\t\t--bg: white;\n\t\t\t\t--fg: #222;\n\t\t\t\t--divider: #ccc;\n\t\t\t\tbackground: var(--bg);\n\t\t\t\tcolor: var(--fg);\n\t\t\t\tfont-family:\n\t\t\t\t\tsystem-ui,\n\t\t\t\t\t-apple-system,\n\t\t\t\t\tBlinkMacSystemFont,\n\t\t\t\t\t'Segoe UI',\n\t\t\t\t\tRoboto,\n\t\t\t\t\tOxygen,\n\t\t\t\t\tUbuntu,\n\t\t\t\t\tCantarell,\n\t\t\t\t\t'Open Sans',\n\t\t\t\t\t'Helvetica Neue',\n\t\t\t\t\tsans-serif;\n\t\t\t\tdisplay: flex;\n\t\t\t\talign-items: center;\n\t\t\t\tjustify-content: center;\n\t\t\t\theight: 100vh;\n\t\t\t\tmargin: 0;\n\t\t\t}\n\n\t\t\t.error {\n\t\t\t\tdisplay: flex;\n\t\t\t\talign-items: center;\n\t\t\t\tmax-width: 32rem;\n\t\t\t\tmargin: 0 1rem;\n\t\t\t}\n\n\t\t\t.status {\n\t\t\t\tfont-weight: 200;\n\t\t\t\tfont-size: 3rem;\n\t\t\t\tline-height: 1;\n\t\t\t\tposition: relative;\n\t\t\t\ttop: -0.05rem;\n\t\t\t}\n\n\t\t\t.message {\n\t\t\t\tborder-left: 1px solid var(--divider);\n\t\t\t\tpadding: 0 0 0 1rem;\n\t\t\t\tmargin: 0 0 0 1rem;\n\t\t\t\tmin-height: 2.5rem;\n\t\t\t\tdisplay: flex;\n\t\t\t\talign-items: center;\n\t\t\t}\n\n\t\t\t.message h1 {\n\t\t\t\tfont-weight: 400;\n\t\t\t\tfont-size: 1em;\n\t\t\t\tmargin: 0;\n\t\t\t}\n\n\t\t\t@media (prefers-color-scheme: dark) {\n\t\t\t\tbody {\n\t\t\t\t\t--bg: #222;\n\t\t\t\t\t--fg: #ddd;\n\t\t\t\t\t--divider: #666;\n\t\t\t\t}\n\t\t\t}\n\t\t</style>\n\t</head>\n\t<body>\n\t\t<div class=\"error\">\n\t\t\t<span class=\"status\">" + status + "</span>\n\t\t\t<div class=\"message\">\n\t\t\t\t<h1>" + message + "</h1>\n\t\t\t</div>\n\t\t</div>\n\t</body>\n</html>\n" error: ({ status, message }) => "<!doctype html>\n<html lang=\"en\">\n\t<head>\n\t\t<meta charset=\"utf-8\" />\n\t\t<title>" + message + "</title>\n\n\t\t<style>\n\t\t\tbody {\n\t\t\t\t--bg: white;\n\t\t\t\t--fg: #222;\n\t\t\t\t--divider: #ccc;\n\t\t\t\tbackground: var(--bg);\n\t\t\t\tcolor: var(--fg);\n\t\t\t\tfont-family:\n\t\t\t\t\tsystem-ui,\n\t\t\t\t\t-apple-system,\n\t\t\t\t\tBlinkMacSystemFont,\n\t\t\t\t\t'Segoe UI',\n\t\t\t\t\tRoboto,\n\t\t\t\t\tOxygen,\n\t\t\t\t\tUbuntu,\n\t\t\t\t\tCantarell,\n\t\t\t\t\t'Open Sans',\n\t\t\t\t\t'Helvetica Neue',\n\t\t\t\t\tsans-serif;\n\t\t\t\tdisplay: flex;\n\t\t\t\talign-items: center;\n\t\t\t\tjustify-content: center;\n\t\t\t\theight: 100vh;\n\t\t\t\tmargin: 0;\n\t\t\t}\n\n\t\t\t.error {\n\t\t\t\tdisplay: flex;\n\t\t\t\talign-items: center;\n\t\t\t\tmax-width: 32rem;\n\t\t\t\tmargin: 0 1rem;\n\t\t\t}\n\n\t\t\t.status {\n\t\t\t\tfont-weight: 200;\n\t\t\t\tfont-size: 3rem;\n\t\t\t\tline-height: 1;\n\t\t\t\tposition: relative;\n\t\t\t\ttop: -0.05rem;\n\t\t\t}\n\n\t\t\t.message {\n\t\t\t\tborder-left: 1px solid var(--divider);\n\t\t\t\tpadding: 0 0 0 1rem;\n\t\t\t\tmargin: 0 0 0 1rem;\n\t\t\t\tmin-height: 2.5rem;\n\t\t\t\tdisplay: flex;\n\t\t\t\talign-items: center;\n\t\t\t}\n\n\t\t\t.message h1 {\n\t\t\t\tfont-weight: 400;\n\t\t\t\tfont-size: 1em;\n\t\t\t\tmargin: 0;\n\t\t\t}\n\n\t\t\t@media (prefers-color-scheme: dark) {\n\t\t\t\tbody {\n\t\t\t\t\t--bg: #222;\n\t\t\t\t\t--fg: #ddd;\n\t\t\t\t\t--divider: #666;\n\t\t\t\t}\n\t\t\t}\n\t\t</style>\n\t</head>\n\t<body>\n\t\t<div class=\"error\">\n\t\t\t<span class=\"status\">" + status + "</span>\n\t\t\t<div class=\"message\">\n\t\t\t\t<h1>" + message + "</h1>\n\t\t\t</div>\n\t\t</div>\n\t</body>\n</html>\n"
}, },
version_hash: "1y8hue" version_hash: "w4m36h"
}; };
export async function get_hooks() { export async function get_hooks() {

2
front/src/app.html
View File

@@ -13,7 +13,7 @@
</style> </style>
<meta charset="utf-8" /> <meta charset="utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1" /> <meta name="viewport" content="width=device-width, initial-scale=1, viewport-fit=cover" />
<link rel="stylesheet" href="%sveltekit.assets%/style/app.css" /> <link rel="stylesheet" href="%sveltekit.assets%/style/app.css" />
<link rel="stylesheet" href="%sveltekit.assets%/style/menu2.css" /> <link rel="stylesheet" href="%sveltekit.assets%/style/menu2.css" />

1
front/src/lib/assets/plain_arrow_left.svg Normal file
View File

@@ -0,0 +1 @@
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 256 512"><!--!Font Awesome Free 6.6.0 by @fontawesome - https://fontawesome.com License - https://fontawesome.com/license/free Copyright 2024 Fonticons, Inc.--><path d="M9.4 278.6c-12.5-12.5-12.5-32.8 0-45.3l128-128c9.2-9.2 22.9-11.9 34.9-6.9s19.8 16.6 19.8 29.6l0 256c0 12.9-7.8 24.6-19.8 29.6s-25.7 2.2-34.9-6.9l-128-128z"/></svg>
Side by Side

After

Width:  |  Height:  |  Size: 385 B

1
front/src/lib/assets/plain_arrow_right.svg Normal file
View File

@@ -0,0 +1 @@
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 256 512"><!--!Font Awesome Free 6.6.0 by @fontawesome - https://fontawesome.com License - https://fontawesome.com/license/free Copyright 2024 Fonticons, Inc.--><path d="M246.6 278.6c12.5-12.5 12.5-32.8 0-45.3l-128-128c-9.2-9.2-22.9-11.9-34.9-6.9s-19.8 16.6-19.8 29.6l0 256c0 12.9 7.8 24.6 19.8 29.6s25.7 2.2 34.9-6.9l128-128z"/></svg>
Side by Side

After

Width:  |  Height:  |  Size: 387 B

56
front/src/lib/components/LeaderBoard.svelte
View File

@@ -11,13 +11,33 @@
{/if} {/if}
{#each scores as score, i} {#each scores as score, i}
<li class="item"> {#if i <= 100}
<div class="name"> {score.owner} </div><div class="score"> {score.value} pts.</div> <li class="item">
</li> <div class="position">{i+1}</div>
<div class="name"> {score.owner} </div>
<div class="score"> {score.value}%</div>
</li>
{/if}
{/each} {/each}
</ul> </ul>
<!--
{#if scores.length > 10}
<div class="paging">
<svg class="paging-arrow" xmlns="http://www.w3.org/2000/svg"
viewBox="0 0 256 512" fill="#fcdcab" width="50" height="50">
<path d="M9.4 278.6c-12.5-12.5-12.5-32.8 0-45.3l128-128c9.2-9.2 22.9-11.9 34.9-6.9s19.8 16.6 19.8 29.6l0 256c0 12.9-7.8 24.6-19.8 29.6s-25.7 2.2-34.9-6.9l-128-128z"/>
</svg>
<svg class="paging-arrow" xmlns="http://www.w3.org/2000/svg"
viewBox="0 0 256 512" fill="#fcdcab" width="50" height="50">
<path d="M246.6 278.6c12.5-12.5 12.5-32.8 0-45.3l-128-128c-9.2-9.2-22.9-11.9-34.9-6.9s-19.8 16.6-19.8 29.6l0 256c0 12.9 7.8 24.6 19.8 29.6s25.7 2.2 34.9-6.9l128-128z"/>
</svg>
</div>
{/if}
-->
<style> <style>
.leaderboard .leaderboard
@@ -47,37 +67,49 @@
border: 3px solid #4b0611; border: 3px solid #4b0611;
border-radius: 10px; border-radius: 10px;
box-shadow: 5px 5px #4b0611; box-shadow: 5px 5px #4b0611;
text-align: left;
outline: none; outline: none;
} }
div.item
{
width: 55vw;
}
.item:hover .item:hover
{ {
background-color: #dd3328; background-color: #dd3328;
transform: scale(1.075); transform: scale(1.075);
} }
.name, .score .position, .name, .score
{ {
color: #4b0611; color: #4b0611;
flex-basis: 0;
}
.name, .score
{
margin-left: 3vh; margin-left: 3vh;
padding-left: 10px;
margin-right: 2vw;
border-left: 1px solid #A1674A;
}
.position
{
flex-grow: 5;
text-align: start;
} }
.name .name
{ {
flex-grow: 100; flex-grow: 100;
border-right: 1px solid #A1674A;
} }
.score .score
{ {
flex-grow: 20; flex-grow: 10;
text-align: center; text-align: center;
} }
.paging-arrow:hover
{
transform: scale(1.5);
}
</style> </style>

6
front/src/lib/components/SplashScreen.svelte
View File

@@ -1,10 +1,10 @@
<script> <script>
import logo from '$lib/assets/logo.png' import logo from '$lib/assets/logo.svg'
</script> </script>
<div class="splash" > <div class="splash" >
<img class="logo" src={logo} alt="De Charybde en Scylla"> <img class="footer-logo" src={logo} alt="Splashscreen">
</div> </div>
<style> <style>
@@ -22,7 +22,7 @@
animation: fadeout 2.5s forwards; animation: fadeout 2.5s forwards;
} }
.logo .footer-logo
{ {
width: auto; width: auto;
height: 25%; height: 25%;

2
front/src/lib/stores/scoreStore.ts
View File

@@ -5,7 +5,7 @@ import {getLeaderboard, submitScore} from "./requests";
let scores : Score[] = [] let scores : Score[] = []
function sort(scores : Score[]){ function sort(scores : Score[]){
if(scores.length >= 2) scores.sort((s1 : Score, s2 : Score) => s1.value - s2.value) if(scores.length >= 2) scores.sort((s1 : Score, s2 : Score) => s2.value - s1.value)
return scores; return scores;
} }

8
front/src/routes/+layout.svelte
View File

@@ -4,7 +4,7 @@
import leaderboard from '$lib/assets/leaderboard.svg'; import leaderboard from '$lib/assets/leaderboard.svg';
import dice from '$lib/assets/dice.svg'; import dice from '$lib/assets/dice.svg';
import about from '$lib/assets/about.svg'; import about from '$lib/assets/about.svg';
import logo from '$lib/assets/logo2.png' import logo from '$lib/assets/logo.svg'
import arrow from '$lib/assets/arrow.svg' import arrow from '$lib/assets/arrow.svg'
import {onMount} from "svelte"; import {onMount} from "svelte";
@@ -57,15 +57,13 @@
</div> </div>
<div class="container"> <div class="container">
<slot></slot> <slot></slot>
</div> </div>
<footer> <footer>
<img src="{logo}" <img class="footer-logo" src="{logo}" alt="Logo">
height="175px"
width="auto"
alt="Logo">
<!--<a href="https://github.com/naaturel"> <!--<a href="https://github.com/naaturel">
<img <img

15
front/src/routes/play/+page.svelte
View File

@@ -12,9 +12,7 @@
async function roll() { async function roll() {
toggleLoading(); toggleLoading();
result = getRandomNumber();
result = Math.floor(Math.random() * (range + 1));
await new Promise(r => setTimeout(r, 3000)); await new Promise(r => setTimeout(r, 3000));
toggleLoading(); toggleLoading();
@@ -23,6 +21,12 @@
await scoreStore.add(playerName, result) await scoreStore.add(playerName, result)
} }
function getRandomNumber(){
let unit = Math.floor(Math.random() * (range + 1));
let dec = Math.floor(Math.random() * (range));
return unit + (dec/100);
}
function toggleLoading(){ function toggleLoading(){
window.$(".loader").toggleClass("disabled"); window.$(".loader").toggleClass("disabled");
window.$(".player").toggleClass("disabled"); window.$(".player").toggleClass("disabled");
@@ -70,6 +74,7 @@
.name .name
{ {
min-width: 210px;
width: 22vmax; width: 22vmax;
height: 5vh; height: 5vh;
background-color: #fcdcab; background-color: #fcdcab;
@@ -99,6 +104,10 @@
transform: scale(1.1); transform: scale(1.1);
} }
.name::placeholder
{
}
@keyframes rotate { @keyframes rotate {
to{transform: rotate(360deg)} to{transform: rotate(360deg)}
} }

33
front/static/style/app.css
View File

@@ -10,6 +10,12 @@
} }
} }
*,
*::before,
*::after {
box-sizing: border-box;
}
* *
{ {
color: #F5F5F5; color: #F5F5F5;
@@ -18,11 +24,25 @@
transition: 0.3s; transition: 0.3s;
} }
/* For debugging purposes
* {
outline: 1px solid #2600ff;
}
*/
h1 h1
{ {
font-size: calc(var(--font-size, 1vw) * 2.15); font-size: calc(var(--font-size, 1vw) * 2.15);
} }
html, body
{
height: 100%;
width: 100%;
margin: 0;
padding: 0;
overflow: hidden;
}
html html
{ {
background-image: url("../images/background.png"); background-image: url("../images/background.png");
@@ -42,8 +62,6 @@ body
align-items: center; align-items: center;
justify-content: center; justify-content: center;
height: 98vh;
} }
.container .container
@@ -125,13 +143,18 @@ footer
align-items: center; align-items: center;
position: absolute; position: absolute;
bottom: 0.25vh; bottom: 0;
margin-bottom: 0.25vh;
width: 100vw; width: 100vw;
height: fit-content; height: 10vh;
} }
footer a { footer a {
margin-right: 2vh; margin-right: 2vh;
} }
.footer-logo {
height: 100%;
margin-right: 10px;
margin-bottom: 10px;
}