<script lang="ts">

  import { onMount } from 'svelte';
	import GenerateUserDisplay from '../../pieces/GenerateUserDisplay.svelte';

	import Chat from '../../pieces/chat/Chat.svelte';

  let user;

  onMount( async() => {
    // console.log('mounting profile display')
    user = await fetch('http://transcendance:8080/api/v2/user')
      .then( (x) => x.json() );
  })

 
</script>

<Chat color="bisque"/>

<!-- is this if excessive? -->
<div class="outer">
  <!-- OHHHH i could use #await instead of if and have an nice loading page! -->
  {#if user !== undefined}
    <GenerateUserDisplay {user} primary={true}/>
  {:else}
    <!-- might be unnecessary since you can't access the page without fetching the user -->
    <h2>Sorry</h2>
    <div>Failed to load current</div>
  {/if}
</div>

<div>testing when there's tons of stuff</div>
<div>testing when there's tons of stuff</div>
<div>testing when there's tons of stuff</div>
<div>testing when there's tons of stuff</div>
<div>testing when there's tons of stuff</div>
<div>testing when there's tons of stuff</div>
<div>testing when there's tons of stuff</div>
<div>testing when there's tons of stuff</div>
<div>testing when there's tons of stuff</div>
<div>testing when there's tons of stuff</div>
<div>testing when there's tons of stuff</div>
<div>testing when there's tons of stuff</div>
<div>testing when there's tons of stuff</div>
<div>testing when there's tons of stuff</div>
<div>testing when there's tons of stuff</div>
<div>testing when there's tons of stuff</div>
<div>testing when there's tons of stuff</div>
<div>testing when there's tons of stuff</div>
<div>testing when there's tons of stuff</div>
<div>testing when there's tons of stuff</div>
<div>testing when there's tons of stuff</div>
<div>testing when there's tons of stuff</div>
<div>testing when there's tons of stuff</div>
<div>testing when there's tons of stuff</div>
<div>testing when there's tons of stuff</div>
<div>testing when there's tons of stuff</div>
<div>testing when there's tons of stuff</div>
<div>testing when there's tons of stuff</div>
<div>testing when there's tons of stuff</div>
<div>testing when there's tons of stuff</div>




<style>

  div.outer{
    max-width: 960px;
    margin: 40px auto;
  }

/* The main part */
  main{
    max-width: 960px;
    margin: 40px auto;
    text-align: center;
  }

/* Normal CSS stuff */
  .avatar{
    max-width: 150px;
    /* padding: 5px; */
  }

/* The variable rich section */
  section.main-stats{
    max-width: 600px;
    margin: 40px auto;
    text-align: center;
    /* i think i want to use a grid? */
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    /* not sure about this, maybe top should be larger? */
    grid-template-rows: repeat(3, 1fr);
  }

/* the  stuff in the grid*/
  section.main-stats h4{
    grid-column: 1 / span 3;
  }

  div.username{
    font-size: 1.5em;
    font-weight: bold;
    padding-bottom: 5px;
  }

  div.rank {
    /* color: black; */
    font-size: 1.2em;
    font-weight: bold;
  }


  /* Glittery Star Stuff */


  :root {  
    --purple: rgb(123, 31, 162);
    --violet: rgb(103, 58, 183);
    --pink: rgb(244, 143, 177);
    /* make shit gold? */
  }

  @keyframes background-pan {
    from {
      background-position: 0% center;
    }
    
    to {
      background-position: -200% center;
    }
  }

  @keyframes scale {
    from, to {
      transform: scale(0);
    }
    
    50% {
      transform: scale(1);
    }
  }

  @keyframes rotate {
    from {
      transform: rotate(0deg);
    }
    
    to {
      transform: rotate(180deg);
    }
  }


  div > .glitter {
    display: inline-block;
    position: relative;
  }

  div > .glitter > .glitter-star {
    --size: clamp(20px, 1.5vw, 30px);

    animation: scale 700ms ease forwards;
    display: block;
    height: var(--size);
    left: var(--star-left);
    position: absolute;
    top: var(--star-top);
    width: var(--size);
  }

  div > .glitter > .glitter-star > svg {
    animation: rotate 1000ms linear infinite;
    display: block;
    opacity: 0.7;
  }

  div > .glitter > .glitter-star > svg > path {
    fill: var(--violet);
  }

  div > .glitter > .glitter-text {
    animation: background-pan 3s linear infinite;
    /* background-image: linear-gradient( */
    background: linear-gradient(
      to right,
      var(--purple),
      var(--violet),
      var(--pink),
      var(--purple)
    );
    background-size: 200%;
    
    /* Keep these for Safari and chrome */
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;

    /* These are for Firefox */
    background-clip: text;
    color: transparent;

    white-space: nowrap;
  }

</style>
