From fc9c72b6b3cc7ad7d9baba7bcc398080e5c0e6b7 Mon Sep 17 00:00:00 2001
From: Me <me@Philip.local>
Date: Wed, 30 Nov 2022 22:42:43 +0100
Subject: [PATCH] well i finally got the glittery stars animation to work for
 the ProfileDisplay page, cool

---
 .../api_front/src/ProfileDisplay.svelte       | 47 +++++++++----------
 1 file changed, 21 insertions(+), 26 deletions(-)

diff --git a/srcs/requirements/svelte/api_front/src/ProfileDisplay.svelte b/srcs/requirements/svelte/api_front/src/ProfileDisplay.svelte
index 4561572a..035a1e7a 100644
--- a/srcs/requirements/svelte/api_front/src/ProfileDisplay.svelte
+++ b/srcs/requirements/svelte/api_front/src/ProfileDisplay.svelte
@@ -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>
\ No newline at end of file