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

2
front/src/app.html
View File

@@ -13,7 +13,7 @@
</style>
<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/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}
{#each scores as score, i}
<li class="item">
<div class="name"> {score.owner} </div><div class="score"> {score.value} pts.</div>
</li>
{#if i <= 100}
<li class="item">
<div class="position">{i+1}</div>
<div class="name"> {score.owner} </div>
<div class="score"> {score.value}%</div>
</li>
{/if}
{/each}
</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>
.leaderboard
@@ -47,37 +67,49 @@
border: 3px solid #4b0611;
border-radius: 10px;
box-shadow: 5px 5px #4b0611;
text-align: left;
outline: none;
}
div.item
{
width: 55vw;
}
.item:hover
{
background-color: #dd3328;
transform: scale(1.075);
}
.name, .score
.position, .name, .score
{
color: #4b0611;
flex-basis: 0;
}
.name, .score
{
margin-left: 3vh;
padding-left: 10px;
margin-right: 2vw;
border-left: 1px solid #A1674A;
}
.position
{
flex-grow: 5;
text-align: start;
}
.name
{
flex-grow: 100;
border-right: 1px solid #A1674A;
}
.score
{
flex-grow: 20;
flex-grow: 10;
text-align: center;
}
.paging-arrow:hover
{
transform: scale(1.5);
}
</style>

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

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

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

@@ -5,7 +5,7 @@ import {getLeaderboard, submitScore} from "./requests";
let 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;
}

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

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

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

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