42/42_INT_14_transcendence
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

well i finally got the glittery stars animation to work for the ProfileDisplay page, cool

Browse Source
This commit is contained in:
Me
2022-11-30 22:42:43 +01:00
parent effb1740f5
commit fc9c72b6b3
1 changed files with 21 additions and 26 deletions
Download Patch File Download Diff File Expand all files Collapse all files

47
srcs/requirements/svelte/api_front/src/ProfileDisplay.svelte
View File

@@ -2,9 +2,7 @@
import { onMount } from 'svelte';
import {location} from 'svelte-spa-router';
// this could be how i
import { location } from 'svelte-spa-router';
// this is how you access /:first for example
// export let params = {}
// <p>Your name is: <b>{params.first}</b> <b>{#if params.last}{params.last}{/if}</b></p>
@@ -24,6 +22,9 @@
let user;
let rank = '';
// i think i don't need to do this once i sort out the {wrap} conditions: in theory i could pass values to the Route
// once the async authentication check is done
onMount( async() => {
user = await fetch('http://transcendance:8080/api/v2/user')
.then( (x) => x.json() );
@@ -54,43 +55,39 @@
star.style.animation = "";
}
// for(const star of document.getElementsByClassName("glitter-star")) {
// setTimeout(() => {
// animate(star);
// This is the part i invented, it was kinda a fucking nightmare...
let stars = [];
for (let i = 0; i < 3; i++) {
setTimeout(() => {
animate(stars[i]);
// setInterval(() => animate(star), 1000);
// }, index++ * (interval / 3))
// }
setInterval(() => animate(stars[i]), 1000);
}, index++ * (interval / 3))
}
</script>
<!-- i don't think i need a div around this anymore, do i? -->
<!-- is this if excessive? -->
{#if user !== undefined}
<main>
<!-- what the fuck do we even want in here? messges, about the user, STATISTICS!!! -->
<!-- <div>some stuff goes here</div> -->
<!-- <img class="icon" src="img/default_user_icon.png" alt="default user icon"> -->
<div>{user.image_url}</div>
<img class="icon" src="{user.image_url}" alt="default user icon">
<div>{user.username}</div>
<div class="rank">Rank:
<span class="glitter">
<span class="glitter-star">
<span bind:this={stars[0]} class="glitter-star">
<svg viewBox="0 0 512 512">
<path d="M512 255.1c0 11.34-7.406 20.86-18.44 23.64l-171.3 42.78l-42.78 171.1C276.7 504.6 267.2 512 255.9 512s-20.84-7.406-23.62-18.44l-42.66-171.2L18.47 279.6C7.406 276.8 0 267.3 0 255.1c0-11.34 7.406-20.83 18.44-23.61l171.2-42.78l42.78-171.1C235.2 7.406 244.7 0 256 0s20.84 7.406 23.62 18.44l42.78 171.2l171.2 42.78C504.6 235.2 512 244.6 512 255.1z" />
</svg>
</span>
<span class="glitter-star">
<span bind:this={stars[1]} class="glitter-star">
<svg viewBox="0 0 512 512">
<path d="M512 255.1c0 11.34-7.406 20.86-18.44 23.64l-171.3 42.78l-42.78 171.1C276.7 504.6 267.2 512 255.9 512s-20.84-7.406-23.62-18.44l-42.66-171.2L18.47 279.6C7.406 276.8 0 267.3 0 255.1c0-11.34 7.406-20.83 18.44-23.61l171.2-42.78l42.78-171.1C235.2 7.406 244.7 0 256 0s20.84 7.406 23.62 18.44l42.78 171.2l171.2 42.78C504.6 235.2 512 244.6 512 255.1z" />
</svg>
</span>
<span class="glitter-star">
<span bind:this={stars[2]} class="glitter-star">
<svg viewBox="0 0 512 512">
<path d="M512 255.1c0 11.34-7.406 20.86-18.44 23.64l-171.3 42.78l-42.78 171.1C276.7 504.6 267.2 512 255.9 512s-20.84-7.406-23.62-18.44l-42.66-171.2L18.47 279.6C7.406 276.8 0 267.3 0 255.1c0-11.34 7.406-20.83 18.44-23.61l171.2-42.78l42.78-171.1C235.2 7.406 244.7 0 256 0s20.84 7.406 23.62 18.44l42.78 171.2l171.2 42.78C504.6 235.2 512 244.6 512 255.1z" />
</svg>
@@ -117,12 +114,8 @@
text-align: center;
}
main.offset{
grid-column: 3 / span 10;
}
/* Normal CSS stuff */
.icon{
.icon{
max-width: 150px;
}
@@ -149,6 +142,10 @@
font-weight: bold;
}
/* Glittery Star Stuff */
:root {
--purple: rgb(123, 31, 162);
--violet: rgb(103, 58, 183);
@@ -237,6 +234,4 @@
white-space: nowrap;
}
</style>