minor modifications, header now tells you which page you are on, slightly fewer comments

.gitignore

@@ -18,7 +18,7 @@ Thumbs.db
 node_modules
 
 ./srcs/requirement/nestjs/api_back/dist
-./srcs/requirements/svelte/api_front/public/build/
+./srcs/requirements/svelte/api_front/public/build/*
 
 # Logs
 logs

srcs/requirements/svelte/api_front/src/App.svelte

@@ -1,9 +1,6 @@
 <script lang="ts">
-// routing
+	import Router, { replace } from "svelte-spa-router";
-	// may not need {link} here
-	import Router, { link, replace } from "svelte-spa-router";
 	import { primaryRoutes } from "./routes/primaryRoutes.js";
-  // import primaryRoutes from "./routes/primaryRoutes.svelte";
 
   const conditionsFailed = (event) => {
     console.error('conditionsFailed event', event.detail);
@@ -15,6 +12,5 @@
 
 </script>
 
-<!-- <h1>Testing</h1> -->
 <Router routes={primaryRoutes} on:conditionsFailed={conditionsFailed}/>
 

srcs/requirements/svelte/api_front/src/pages/NotFound.svelte

@@ -4,14 +4,7 @@
 
 <h1>We are sorry!</h1>
 <p>This isn't a url that we use.</p>
-<!-- <img src="https://picsum.photos/id/685/800/400" alt="img"> -->
 <p>Go home you're drunk.</p>
 <a href="/" use:link>
     <h2>Take me home →</h2>
-</a>
+</a>
-
-<style>
-    /* img {
-      width: 100%;
-    } */
-</style>

srcs/requirements/svelte/api_front/src/pages/SplashPage.svelte

@@ -3,8 +3,6 @@
   import { push } from "svelte-spa-router";
   import { onMount } from 'svelte';
 
-  import JumpingPotatoes from "../pieces/JumpingPotatoes.svelte";
-
   let user;
 
 	onMount(async () => {

srcs/requirements/svelte/api_front/src/pages/profile/ProfileDisplay.svelte

@@ -2,7 +2,7 @@
 
   import { onMount } from 'svelte';
 	import GenerateUserDisplay from '../../pieces/GenerateUserDisplay.svelte';
-
+  import { push } from 'svelte-spa-router';
 
 	import Chat from '../../pieces/chat/Chat.svelte';
 
@@ -19,13 +19,11 @@
 
 <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={user} primary={true}/>
+    <button on:click={() => (push('/profile/settings'))}>Profile Settings</button>
   {: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}
@@ -36,140 +34,7 @@
   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>

srcs/requirements/svelte/api_front/src/pages/profile/ProfileFriends.svelte

@@ -177,7 +177,7 @@
     console.log('Block a non friend user, their username')
     console.log(aUsername)
 
-    sentFriendRequest = await fetch(`http://${process.env.WEBSITE_HOST}:${process.env.WEBSITE_PORT}/api/v2/network/relations`, {
+    let sentFriendRequest = await fetch(`http://${process.env.WEBSITE_HOST}:${process.env.WEBSITE_PORT}/api/v2/network/relations`, {
         method : "POST",
         headers: { 'Content-Type': 'application/json'},
           body: JSON.stringify({

srcs/requirements/svelte/api_front/src/pages/profile/ProfilePage.svelte

@@ -1,5 +1,4 @@
 <script lang="ts">
-
   import Header from "../../pieces/Header.svelte";
   import Router from "svelte-spa-router";
   import { profileRoutes, prefix } from "../../routes/profileRoutes.js";

srcs/requirements/svelte/api_front/src/pieces/Header.svelte

@@ -3,9 +3,11 @@
   import { location } from 'svelte-spa-router';
 
 
+  // no need, it's just for links
   import active from 'svelte-spa-router/active'
   // or i could leave them all and not display if they're active?
 
+  $: current = $location;
 
   let handleClickLogout = async () => {
     await fetch(`http://${process.env.WEBSITE_HOST}:${process.env.WEBSITE_PORT}/api/v2/auth/logout`, {
@@ -23,16 +25,13 @@
   <img src="/img/potato_logo.png" alt="Potato Pong Logo" on:click={() => (push('/'))}>
   <h1>Potato Pong</h1>
   <nav>
-	<button on:click={() => (push('/game'))}>Play</button>
+	<button class:selected="{current === '/game'}" on:click={() => (push('/game'))}>Play</button>
-	<button on:click={() => (push('/spectator'))}>Spectate</button>
+	<button class:selected="{current === '/spectator'}" on:click={() => (push('/spectator'))}>Spectate</button>
-	<button on:click={() => (push('/ranking'))}>Ranking</button>
+	<button class:selected="{current === '/ranking'}" on:click={() => (push('/ranking'))}>Ranking</button>
-    {#if $location !== '/profile'}
+  <button class:selected="{current === '/profile'}" on:click={() => (push('/profile'))}>My Profile</button>
-      <button on:click={() => (push('/profile'))}>My Profile</button>
+  <!-- <button class:selected="{current === '/profile/settings'}" on:click={() => (push('/profile/settings'))}>Settings</button> -->
-    {:else if $location === '/profile'}
+  <button class:selected="{current === '/profile/friends'}" on:click={() => (push('/profile/friends'))}>Friends</button>
-      <button on:click={() => (push('/profile/settings'))}>Settings</button>
+  <button on:click={handleClickLogout}>Log Out</button>
-    {/if}
-    <button on:click={() => (push('/profile/friends'))}>Friends</button>
-    <button on:click={handleClickLogout}>Log Out</button>
   </nav>
 </header>
 
@@ -54,6 +53,13 @@
   }
 
 
+  .selected {
+    background-color: chocolate;
+    text-decoration: underline;
+    /* TMP so it's obvious but we need to pick good colors */
+  }
+
+
 /* There is a bunch of unncessary shit in here... why so many flex grids, why is everything the same class? just seemed easier but... */
 
 

srcs/requirements/svelte/api_front/src/routes/primaryRoutes.js

@@ -8,8 +8,6 @@ import Game from '../pages/game/Game.svelte';
 import Ranking from '../pages/game/Ranking.svelte';
 import GameSpectator from '../pages/game/GameSpectator.svelte';
 
-import JumpingPotatoes from '../pieces/JumpingPotatoes.svelte';
-
 
 export const primaryRoutes = {
   '/': SplashPage,