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

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

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",
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() {

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

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

@@ -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 @@
</script>
<h1>Qui va y passer ?</h1>
<PageTitle>Qui va y passer ?</PageTitle>
<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 {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 @@
</script>
<PageTitle>Évaluez vos chance de survie</PageTitle>
<div class="container">
{#if isRunning}
@@ -67,20 +70,17 @@
{/if}
{#if !isRunning && !hasBeenPlayed}
<h1>Evaluez vos chances de survie</h1>
<div class="player"
tooltip=""
flow="up">
<input class="name" placeholder="Nom de la victime..."
bind:value={game.playerName}
on:input={({ target: { value } }) => debounce(value)}
on:blur={({ target: { value } }) => debounce(value)}
/>
<img class="roll" src={bomb} on:click={roll} alt="Bomb"/>
</div>
<img class="roll" src={bomb} on:click={roll} alt="Bomb"/>
{/if}
@@ -92,7 +92,17 @@
<style>
.container, .player
.container
{
line-height: 250px;
display: flex;
flex-direction: column;
justify-content: center;
align-items: center;
text-align: center;
}
.player
{
display: flex;
flex-direction: column;
@@ -101,6 +111,8 @@
text-align: center;
}
.player
{
gap: 2vh;
@@ -170,7 +182,7 @@
[tooltip]::before,
[tooltip]::after {
text-transform: none; /* opinion 2 */
font-size: .9em; /* opinion 3 */
line-height: 1;
user-select: none;
pointer-events: none;
@@ -187,7 +199,6 @@
content: attr(tooltip); /* magic! */
/* most of the rest of this is opinion */
font-family: Helvetica, sans-serif;
text-align: center;
/*
@@ -246,13 +257,6 @@
}
}
@keyframes tooltips-horz {
to {
opacity: .9;
transform: translate(0, -50%);
}
}
/* FX All The Things */
[tooltip]:not([flow])::before,
[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;
@@ -28,15 +34,10 @@
transition: 0.3s;
}
/* For debugging purposes
* {
outline: 1px solid #2600ff;
}
*/
h1
{
font-size: calc(var(--font-size, 1vw) * 2.15);
text-decoration: underline;
text-align: center;
}
html, body

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

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