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

Correct some style stuff

Browse Source
This commit is contained in:
Laurent
2024-11-03 16:37:13 +01:00
parent 30337d9abc
commit 91e520402c
10 changed files with 102 additions and 42 deletions
Download Patch File Download Diff File Expand all files Collapse all files

2
back/src/main/resources/application.properties
View File

@@ -12,7 +12,7 @@ sec.cors.authorizedHeader=Authorization,Content-type
#=============DATABASE============= #=============DATABASE=============
spring.datasource.url=jdbc:${DB_URL} spring.datasource.url=jdbc:${DB_URL}
spring.datasource.username=${DB_USER} spring.datasource.username=${DB_USER}
spring.datasource.password=${DB_PASSWORD} spring.datasource.password=
spring.jpa.database-platform=org.hibernate.dialect.MariaDBDialect spring.jpa.database-platform=org.hibernate.dialect.MariaDBDialect
spring.jpa.show-sql=true spring.jpa.show-sql=true

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

@@ -42,10 +42,8 @@ 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_9904: string; export const EFC_10880: string;
export const ffmpeg: 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 HOME: string;
export const HOMEDRIVE: string; export const HOMEDRIVE: string;
export const HOMEPATH: string; export const HOMEPATH: string;
@@ -150,10 +148,8 @@ declare module '$env/dynamic/private' {
DB_USER: string; DB_USER: string;
DriverData: string; DriverData: string;
EDITOR: string; EDITOR: string;
EFC_9904: string; EFC_10880: string;
ffmpeg: string; ffmpeg: string;
FPS_BROWSER_APP_PROFILE_STRING: string;
FPS_BROWSER_USER_PROFILE_STRING: string;
HOME: string; HOME: string;
HOMEDRIVE: string; HOMEDRIVE: string;
HOMEPATH: string; HOMEPATH: string;

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

@@ -21,7 +21,7 @@ export const options = {
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", 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: "w4m36h" version_hash: "1bdcmwq"
}; };
export async function get_hooks() { export async function get_hooks() {

11
front/src/lib/components/PageTitle.svelte Normal file
View File

@@ -0,0 +1,11 @@
<h1 class="page-title">
<slot></slot>
</h1>
<style>
.page-title
{
position: absolute;
top: 50px;
}
</style>

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

@@ -9,6 +9,7 @@
import {onMount} from "svelte"; import {onMount} from "svelte";
import SplashScreen from "$lib/components/SplashScreen.svelte"; import SplashScreen from "$lib/components/SplashScreen.svelte";
import PageTitle from "$lib/components/PageTitle.svelte";
onMount(async () => { onMount(async () => {
window.$(".expander").click(function () { window.$(".expander").click(function () {
@@ -19,7 +20,6 @@
</script> </script>
<SplashScreen/> <SplashScreen/>
<div class="menu menu-collapsed"> <div class="menu menu-collapsed">
<a class="expander"> <a class="expander">
@@ -57,7 +57,6 @@
</div> </div>
<div class="container"> <div class="container">
<slot></slot> <slot></slot>
</div> </div>

3
front/src/routes/+page.svelte
View File

@@ -2,6 +2,7 @@
import LeaderBoard from "$lib/components/LeaderBoard.svelte"; import LeaderBoard from "$lib/components/LeaderBoard.svelte";
import {scoreStore} from "$lib/stores/scoreStore.ts"; import {scoreStore} from "$lib/stores/scoreStore.ts";
import {onMount} from "svelte"; import {onMount} from "svelte";
import PageTitle from "$lib/components/PageTitle.svelte";
let { data } = $props() let { data } = $props()
@@ -11,5 +12,5 @@
</script> </script>
<h1>Qui va y passer ?</h1> <PageTitle>Qui va y passer ?</PageTitle>
<LeaderBoard bind:scores={$scoreStore}></LeaderBoard> <LeaderBoard bind:scores={$scoreStore}></LeaderBoard>

50
front/src/routes/about/+page.svelte
View File

@@ -1 +1,49 @@
<p>It was revealed to me in a dream</p> <script>
import PageTitle from "$lib/components/PageTitle.svelte";
</script>
<PageTitle>A propos</PageTitle>
<div class="container">
<div class="section">
<h2>Design</h2>
<p>Arwen Hirsoux</p>
</div>
<hr/>
<div class="section">
<h2>Développement</h2>
<p>Laurent Crema</p>
</div>
</div>
<style>
hr
{
width: 75%;
}
.container
{
border-radius: 7px;
background: rgb(252, 220, 171, 0.85);
width: 85%;
height: fit-content;
padding: 25px;
}
.section
{
display: flex;
flex-direction: column;
justify-content: center;
align-items: center;
}
</style>

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

@@ -2,6 +2,7 @@
import bomb from '$lib/assets/bomb.svg'; import bomb from '$lib/assets/bomb.svg';
import {Game, GameState} from "$lib/models/game.ts"; import {Game, GameState} from "$lib/models/game.ts";
import {scoreStore} from "$lib/stores/scoreStore.ts"; import {scoreStore} from "$lib/stores/scoreStore.ts";
import PageTitle from "$lib/components/PageTitle.svelte";
let game = new Game(); let game = new Game();
@@ -15,7 +16,6 @@
timer = setTimeout(() => { timer = setTimeout(() => {
try{ try{
validate(inputValue) validate(inputValue)
clearError();
game.playerName = inputValue; game.playerName = inputValue;
} catch (e){ } catch (e){
displayError(e.message) displayError(e.message)
@@ -23,14 +23,6 @@
}, 150); }, 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(){ async function roll(){
try{ 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){ function displayError(message){
window.$(".player").attr('tooltip', message) window.$(".player").attr('tooltip', message)
setTimeout(() => {
clearError();
}, 3000)
} }
function clearError(){ function clearError(){
@@ -55,6 +57,7 @@
</script> </script>
<PageTitle>Évaluez vos chance de survie</PageTitle>
<div class="container"> <div class="container">
{#if isRunning} {#if isRunning}
@@ -67,20 +70,17 @@
{/if} {/if}
{#if !isRunning && !hasBeenPlayed} {#if !isRunning && !hasBeenPlayed}
<h1>Evaluez vos chances de survie</h1>
<div class="player" <div class="player"
tooltip="" tooltip=""
flow="up"> flow="up">
<input class="name" placeholder="Nom de la victime..." <input class="name" placeholder="Nom de la victime..."
bind:value={game.playerName} bind:value={game.playerName}
on:input={({ target: { value } }) => debounce(value)} on:input={({ target: { value } }) => debounce(value)}
on:blur={({ target: { value } }) => debounce(value)} on:blur={({ target: { value } }) => debounce(value)}
/> />
<img class="roll" src={bomb} on:click={roll} alt="Bomb"/>
</div> </div>
<img class="roll" src={bomb} on:click={roll} alt="Bomb"/>
{/if} {/if}
@@ -92,7 +92,17 @@
<style> <style>
.container, .player .container
{
line-height: 250px;
display: flex;
flex-direction: column;
justify-content: center;
align-items: center;
text-align: center;
}
.player
{ {
display: flex; display: flex;
flex-direction: column; flex-direction: column;
@@ -101,6 +111,8 @@
text-align: center; text-align: center;
} }
.player .player
{ {
gap: 2vh; gap: 2vh;
@@ -170,7 +182,7 @@
[tooltip]::before, [tooltip]::before,
[tooltip]::after { [tooltip]::after {
text-transform: none; /* opinion 2 */ text-transform: none; /* opinion 2 */
font-size: .9em; /* opinion 3 */
line-height: 1; line-height: 1;
user-select: none; user-select: none;
pointer-events: none; pointer-events: none;
@@ -187,7 +199,6 @@
content: attr(tooltip); /* magic! */ content: attr(tooltip); /* magic! */
/* most of the rest of this is opinion */ /* most of the rest of this is opinion */
font-family: Helvetica, sans-serif;
text-align: center; text-align: center;
/* /*
@@ -246,13 +257,6 @@
} }
} }
@keyframes tooltips-horz {
to {
opacity: .9;
transform: translate(0, -50%);
}
}
/* FX All The Things */ /* FX All The Things */
[tooltip]:not([flow])::before, [tooltip]:not([flow])::before,
[tooltip]:not([flow])::after, [tooltip]:not([flow])::after,

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

@@ -10,6 +10,12 @@
} }
} }
/* For debugging purposes
* {
outline: 1px solid #2600ff;
}
*/
* *
{ {
color: #4b0611; color: #4b0611;
@@ -28,15 +34,10 @@
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);
text-decoration: underline; text-align: center;
} }
html, body html, body

2
front/static/style/menu2.css
View File

@@ -5,7 +5,7 @@
margin: 0; margin: 0;
padding: 0; padding: 0;
height: 100vh; height: 100vh;
z-index: 1; z-index: 9999;
list-style-type: none; list-style-type: none;
background: rgb(252, 220, 171, 0.85); background: rgb(252, 220, 171, 0.85);
overflow: hidden; overflow: hidden;