diff --git a/srcs/docker-compose.yml b/srcs/docker-compose.yml
index acd95663..9c641941 100644
--- a/srcs/docker-compose.yml
+++ b/srcs/docker-compose.yml
@@ -5,7 +5,6 @@ services:
       context: ./requirements/nestjs
       target: development
       dockerfile: Dockerfile
-      no_cache: true
     environment:
       POSTGRES_USER: "${POSTGRES_USER}"
       POSTGRES_PASSWORD: "${POSTGRES_PASSWORD}"
diff --git a/srcs/requirements/svelte/api_front/old_unused/App_old.svelte b/srcs/requirements/svelte/api_front/old_unused/App_old.svelte
deleted file mode 100644
index 4052bae1..00000000
--- a/srcs/requirements/svelte/api_front/old_unused/App_old.svelte
+++ /dev/null
@@ -1,81 +0,0 @@
-<script lang="ts">
-// routing
-	// may not need {link} here
-	import Router, { link } from "svelte-spa-router";
-  import { routes } from "../routes.js";
-
-  import LoginPage from "./LoginPage.svelte";
-	import UserPage from "../UserPage.svelte";
-    import NotFound from "../pages/NotFound.svelte";
-
-	// Ideally fuck all this shit in the long run
-	let pages = ['login', 'user', 'account'];
-	// make this a $: currentPage ?
-	let currentPage = 'booba';
-	// prolly change this? yea idk...
-	// let userIndex;
-	// tmp for testing
-	let userId = 0;
-	// horrible naming... can be HOME or ACCOUNT
-	let currentType = 'account';
-
-	// this page should handle the SPA history management...
-
-	// set to false later for actual security
-	let loggedIn = true;
-
-	// not sure if this is how i want to do this...
-	// might do differently cuz URL route manangement...
-	const handleLogin = () => {
-		currentPage = 'user';
-		loggedIn = true;
-	};
-
-// I don't know if i should but i'm tempted to put this here...
-
-	// import axios from 'axios';
-  // import { onMount } from 'svelte';
-	// import { push } from 'svelte-spa-router';
-
-	// let user = {logedIn: false};
-
-	// onMount(async () => {
-	// 	// console.log('PROFIL SVELTE');
-	// 	const {data} = await axios.get('http://transcendance:8080/api/v2/user');
-	// 	if (data)
-	// 		user.logedIn = true;
-	// });
-
-	// $: submit = async() => {
-	// 	window.location.href = 'http://transcendance:8080/api/v2/auth';
-	// }
-
-	// $: logout = async() => {
-	// 	await fetch('http://transcendance:8080/api/v2/auth/logout',);
-	// 	user.logedIn = false;
-	// }
-
-
-
-
-</script>
-
-<!-- eventually we will do this with routes, but for now use a prop -->
-<!-- {#if currentPage === 'login'}
-	<LoginPage {pages} {currentPage} {userId} on:loggedIn={handleLogin}/>
-{:else if currentPage === 'user'}
-	<UserPage {pages} {currentPage} {userId} {currentType}/>
-{:else}
-	<NotFound />
-{/if} -->
-<Router {routes}/>
-
-<style>
-	
-	/* doesn't work... */
-  /* body{
-    background: bisque;
-  } */
-</style>
-
-
diff --git a/srcs/requirements/svelte/api_front/old_unused/Canvas_1st_attempt.svelte b/srcs/requirements/svelte/api_front/old_unused/Canvas_1st_attempt.svelte
deleted file mode 100644
index 4d3e6c26..00000000
--- a/srcs/requirements/svelte/api_front/old_unused/Canvas_1st_attempt.svelte
+++ /dev/null
@@ -1,167 +0,0 @@
-<!-- <script lang="ts"> -->
-<script>
-	import { onMount } from 'svelte';
-
-	let canvas;
-
-  // $: scaleRatio = window.innerWidth / 10;
-  $: scaleRatio = 30;
-
-	onMount(() => {
-    // we're invoking JS methods of the canvas element
-		const ctx = canvas.getContext('2d');
-
-    ctx.width = window.innerWidth;
-    ctx.height = window.innerHeight;
-
-    // ctx.beginPath();
-    // ctx.moveTo(50,50);
-    // ctx.lineTo(70,70);
-    // ctx.stroke();
-
-    // attempting to import an image
-    const img = new Image();
-    // we may have to call an onMount or something to make sure the image has loaded...
-    // doing it in JS for now, ideally in Svelte later..
-    // img.addEventListener('load', () => {
-    //   // execute drawImage statements here
-    // }, false);
-    img.src = 'img/potato_logo.png';  // seems like this does need to be above onload()
-    img.onload = () => {
-      // ctx.drawImage(img, 0, 0, img.width * (ctx.width / 15), img.height * (ctx.height / 15));
-      // ctx.drawImage(img, 0, 0, ctx.width / 15, ctx.height / 15);
-
-    // i think i don't want this cuz it'll get in the way?
-    //  ctx.drawImage(img, 0, 0, img.width / scaleRatio, img.height / scaleRatio);
-
-      // it would seem you need to redraw the images when you change the Window size, it's not automatically responsive
-    };
-
-    let startX = 200;
-    let startY = 200;
-    let dx = 3;
-    let dy = -1;
-
-  // Time for some math
-  // lets say i want 6 rows 
-  // ok so we're gonna draw all the potatos at the same time and each of them gets animated, like i have it now
-  // 6 in a row so # of rows aka x = width * 6/height
-
-    function Potato(x, y) {
-      this.x = x;
-      this.y = y;
-      // ctx.drawImage(img, x, y, img.width / scaleRatio, img.height / scaleRatio);
-
-      this.draw = function() {
-        ctx.drawImage(img, x, y, img.width / scaleRatio, img.height / scaleRatio);
-      }
-
-      this.animate = function() {
-        this.x += dx;
-        this.y += dy;
-
-        this.draw();
-      }
-    }
-
-    // let spacing = canvas.width * ((6 + 1) / canvas.height);
-    let spacing = 70;
-    let Potatos = [];
-    //check the math...
-    // for (let i = 0; i <  6 * spacing; i++) {
-    for (let i = 0; i < 2; i++) {
-      // for (let j = 0; j < 6; j++) {
-      for (let j = 0; i < 2; j++) {
-        Potatos.push(new Potato(spacing + (i * spacing), spacing + (j * spacing)));
-      }
-    }
-
-
-    // now i'm trying to move 1 potato
-    let frame = requestAnimationFrame(loop);
-    // function loop(t) {
-    //   ctx.clearRect(0, 0, canvas.width, canvas.height);
-    //   frame = requestAnimationFrame(loop);
-    //   ctx.drawImage(img, startX, startY, img.width / scaleRatio, img.height / scaleRatio);
-    //   startX += dx;
-    //   startY += dy;
-    // }
-
-      // new Potato(70, 70).animate();
-
-
-    function loop(t) {
-      ctx.clearRect(0, 0, canvas.width, canvas.height);
-      frame = requestAnimationFrame(loop);
-      for (let i = 0; i < Potatos.length; i++) {
-        Potatos[i].animate();
-      }
-      // Potatos[0].animate();
-    }
-
-    loop();
-
-// Lets try again with a single loop
-
-
-
-
-// THis shit makes the cool Gradient
-    // let frame = requestAnimationFrame(loop);
-		// function loop(t) {
-		// 	frame = requestAnimationFrame(loop);
-
-		// 	// const imageData = ctx.getImageData(0, 0, canvas.width, canvas.height);
-
-		// 	for (let p = 0; p < imageData.data.length; p += 4) {
-		// 		const i = p / 4;
-		// 		const x = i % canvas.width;
-		// 		const y = i / canvas.width >>> 0;
-
-		// 		const r = 64 + (128 * x / canvas.width) + (64 * Math.sin(t / 1000));
-		// 		const g = 64 + (128 * y / canvas.height) + (64 * Math.cos(t / 1000));
-		// 		const b = 128;
-
-		// 		imageData.data[p + 0] = r;
-		// 		imageData.data[p + 1] = g;
-		// 		imageData.data[p + 2] = b;
-		// 		imageData.data[p + 3] = 255;
-		// 	}
-
-		// 	ctx.putImageData(imageData, 0, 0);
-		// }
-
-		return () => {
-			cancelAnimationFrame(frame);
-      // prolly something else...
-		};
-	});
-</script>
-
-<canvas
-	bind:this={canvas}
-	width={window.innerWidth}
-	height={window.innerHeight}
-></canvas>
-<!-- widht and height were 32, trying stuff -->
-
-<!-- I don't have the /svelte-logo-mask.svg, i guess i'll go get something -->
-<style>
-	canvas {
-		width: 100%;
-		height: 100%;
-		background-color: #666;
-
-
-    /* testing something */
-    /* -webkit-mask-image: radial-gradient(circle, black 50%, rgba(0, 0, 0, 0.5) 50%);
-    mask-image: radial-gradient(circle, black 50%, rgba(0, 0, 0, 0.5) 50%); */
-    /* Holy shit that worked! i got a mask */
-    /* it also works without a mask! i have a canvas! */
-
-		/* -webkit-mask: url(/svelte-logo-mask.svg) 50% 50% no-repeat; */
-    /* -webkit-mask: url(img/cartoon_potato3.jpg) 50% 50% no-repeat; */
-		/* mask: url(/svelte-logo-mask.svg) 50% 50% no-repeat; */
-		/* mask: url(img/cartoon_potato3.jpg) 50% 50% no-repeat; */
-	}
-</style>
diff --git a/srcs/requirements/svelte/api_front/old_unused/Canvas_weird_circles.svelte b/srcs/requirements/svelte/api_front/old_unused/Canvas_weird_circles.svelte
deleted file mode 100644
index 330e93f7..00000000
--- a/srcs/requirements/svelte/api_front/old_unused/Canvas_weird_circles.svelte
+++ /dev/null
@@ -1,45 +0,0 @@
-<script lang="ts">
-    import { onMount, setContext } from "svelte";
-
-  let canvas;
-
-  // what do i want?
-  // lets start with an image of my potato
-  // then get it to move
-  // then have many displayed in an offset grid
-
-  const drawFunctions = [];
-
-
-  setContext('canvas', {
-    register(drawFn) {
-      drawFunctions.push(drawFn);
-    },
-    unregister(drawFn) {
-      drawFunctions.splice(drawFunctions.indexOf(drawFn), 1);
-    }
-  })
-
-  onMount(() => {
-    // not sure what this does...
-    const ctx = canvas.getContext('2d');
-
-    // no idea what this does...
-    function update() {
-
-      ctx.clearRect()
-      drawFunctions.forEach(drawFn => {
-        drawFn(ctx);
-      });
-
-      frameId = requestAnimationFrame(update);
-    }
-
-    let frameId = requestAnimationFrame(update);
-    return () => {
-      cancelAnimationFrame(update);
-    };
-  });
-</script>
-
-<canvas bind:this={canvas} />
diff --git a/srcs/requirements/svelte/api_front/old_unused/DisplayAUser_backup_copy.svelte b/srcs/requirements/svelte/api_front/old_unused/DisplayAUser_backup_copy.svelte
deleted file mode 100644
index 85d8fe4e..00000000
--- a/srcs/requirements/svelte/api_front/old_unused/DisplayAUser_backup_copy.svelte
+++ /dev/null
@@ -1,112 +0,0 @@
-<script lang="ts">
-
-  import { onMount } from 'svelte';
-
-  import { location } from 'svelte-spa-router';
-  import GenerateUserDisplay from './GenerateUserDisplay.svelte';
-
-  // using location won't work cuz i do a fetch but i don't change the page fragment, so means nothing to location...
-
-  // 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>
-
-// If i export these vars, maybe as an nice tidy object, i could pass whatever i like to them
-// The current user, some other user, whatever, and thus reuse this Componente for the user and their friends or whatever
-// will have to coordinate with Back, will know more once the Game stats are in the back
-// wait maybe this won't work, cuz like it's still going through a route, i would have to update a Store Var each time...
-// not sure if that's what i want...
-
-
-  // maybe the rank is determined dynamically just in the front based on win loss ratio or something no one cares about
-  // why bother storing that shit in the back...
-  // maybe i need a Rank.svelte component
-    // ohhh i could make above a certain rank glitter! like that CSS tutorial showed me!
-
-  export let aUsername;
-
-  let user;
-  let rank = '';
-  let avatar;
-
-  // 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() => {
-    console.log('Display aUser username: '+ aUsername)
-    // http://transcendance:8080/api/v2/user?username=NomDuUserATrouver
-    user = await fetch(`http://transcendance:8080/api/v2/user?username=${aUsername}`)
-      .then( (x) => x.json() );
-
-    console.log('Display a user: ' + user.username)
-
-
-    // console.log('profile display did my fetch')
-    // should i be updating the userStore or is that unnecessary?
-
-    if (user.loseGame > user.winGame) {
-      rank = 'Bitch Ass Loser!'
-    } else if (user.loseGame === user.winGame) {
-      rank = 'Fine i guess...'
-    } else {
-      rank = 'Yea you da Boss!'
-    }
-
-    await fetch("http://transcendance:8080/api/v2/user/avatar", {method: "GET"})
-		  .then(response => {return response.blob()})
-		  .then(data => {
-		  	const url = URL.createObjectURL(data);
-		  	avatar = url;
-	  	});
-
-    // tmp
-    // console.log('mounted Profile Display')
-    // console.log(user);
-
-
-  })
-
-  // Glittery Stars and such for Rank
-
-  let index = 0, interval = 1000;
-
-  const rand = (min, max) => 
-    Math.floor(Math.random() * (max - min + 1)) + min;
-
-  // it's unhappy that "star" isn't typeset, no idea what to do about it...
-  const animate = (star) => {
-    // the if seems to have fixed the type issue
-    if (star) {
-      star.style.setProperty("--star-left", `${rand(-10, 100)}%`);
-      star.style.setProperty("--star-top", `${rand(-40, 80)}%`);
-
-      star.style.animation = "none";
-      star.offsetHeight;
-      star.style.animation = "";
-    }
-  }
-
-  // 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(stars[i]), 1000);
-    }, index++ * (interval / 3))
-  }
-
-</script>
-
-{#if user !== undefined}
-  <GenerateUserDisplay {user}/>
-{:else}
-  <h2>Sorry</h2>
-  <div>Failed to load user {aUsername}</div>
-{/if}
-
-
-
-<style>
-
-</style>
\ No newline at end of file
diff --git a/srcs/requirements/svelte/api_front/old_unused/FlyingPotato.svelte b/srcs/requirements/svelte/api_front/old_unused/FlyingPotato.svelte
deleted file mode 100644
index 5f6b544f..00000000
--- a/srcs/requirements/svelte/api_front/old_unused/FlyingPotato.svelte
+++ /dev/null
@@ -1,24 +0,0 @@
-<script lang="ts">
-  // might rename...
-  // no idea what i'm doing...
-
-  import { getContext, onMount } from 'svelte';
-
-  // here you have to export the vars you need to draw this shit...
-
-  const { register, unregister } = getContext('canvas');
-
-  onMount(() => {
-    register(draw);
-
-    return () => {
-      unregister(draw);
-    }
-  });
-
-  function draw(ctx) {
-    ctx.beginPath();
-    ctx.fillStyle = fill;
-  }
-
-</script>
\ No newline at end of file
diff --git a/srcs/requirements/svelte/api_front/old_unused/Header.svelte b/srcs/requirements/svelte/api_front/old_unused/Header.svelte
deleted file mode 100644
index 3afd24fd..00000000
--- a/srcs/requirements/svelte/api_front/old_unused/Header.svelte
+++ /dev/null
@@ -1,124 +0,0 @@
-<script lang="ts">
-
-// Fucking having a header that can change size, i don't really want the larger one
-
-  import { createEventDispatcher } from 'svelte';
-
-  let dispatch = createEventDispatcher();
-
-  let types: string[] = ['home', 'regular', 'none'];
-  // let currentType: string = 'regular';
-  export let currentType = 'regular';
-  // apparently Regular is the only one i use...
-
-  let handleClickHome = () => {
-    dispatch('clickedHome');
-  };
-
-  let handleClickLogout = () => {
-    dispatch('clickedLogout');
-  };
-
-</script>
-
-<!-- Make it so you can have a Big Home page header and a regular header or no header -->
-<!-- So far my CSS is super Gross, i guess i'll get Hugo to help me with it -->
-
-<header class={currentType}>
-  <!-- svelte-ignore a11y-click-events-have-key-events -->
-  <img class={currentType} src="/img/potato_logo.png" alt="Potato Pong Logo" on:click={handleClickHome}>
-  <!-- {#if currentType === 'home'} -->
-    <h1 class={currentType}>Potato Pong</h1>
-  <!-- {/if} -->
-  <nav class={currentType}>
-    <!-- <a href=""></a> -->
-    <!-- i might change these to links rather than buttons, i kinda hate the buttons -->
-    <button>My Stats</button>
-    <button>Stream</button>
-    <button on:click={handleClickLogout}>Log Out</button>
-  </nav>
-</header>
-
-<style>
-  /* See "possible_fonts.css" for more font options... */
-  @font-face {
-    font-family: 'Bondi';
-    src:url('/fonts/Bondi.ttf.woff') format('woff'),
-        url('/fonts/Bondi.ttf.svg#Bondi') format('svg'),
-        url('/fonts/Bondi.ttf.eot'),
-        url('/fonts/Bondi.ttf.eot?#iefix') format('embedded-opentype'); 
-    font-weight: normal;
-    font-style: normal;
-  }
-  
-
-/* There is a bunch of unncessary shit in here... why so many flex grids, why is everything the same class? just seemed easier but... */
-
-
-  header{
-    /* background: #f7f7f7; */
-    background: #618174;
-    /* padding: 20px; */
-    margin: 0;
-    /* does nothing so far... */
-    /* display: flex; */
-  }
-
-  header.home{
-    /* position: sticky; */
-  }
-  header.regular{
-    /* for some reason this doesn't do shit! */
-    position: sticky;
-    display: grid;
-    grid-template-columns: 1fr 1fr 1fr;
-  }
-
-/* Headers */
-  h1{
-    font-family: 'Bondi';
-  }
-  h1.home {
-    margin: 0;
-    text-align: center;
-    /* max-width: 100px; */
-  }
-  h1.regular{
-    margin: 0;
-    text-align: left;
-    /* max-width: 40px; */
-    /* this helped with the weird extra space under the image... */
-    display: flex;
-    justify-self: center;
-    align-self: center;
-  }
-
-/* Images */
-  img.home{
-    /* text-align: center; */
-    /* get the image squarely in the middle... */
-    cursor: pointer;
-    max-width: 100px;
-  }
-  img.regular{
-    cursor: pointer;
-    max-width: 40px;
-    padding: 7px 20px;
-    justify-self: left;
-  }
-
-  nav{
-    display: flex;
-    justify-content: right;
-  }
-
-  nav button{
-    margin: 7px 20px;
-    /* padding: 5px; */
-    border-radius: 4px;
-  }
-
-  /* .none{
-
-  } */
-</style>
\ No newline at end of file
diff --git a/srcs/requirements/svelte/api_front/old_unused/Header_Multi_old.svelte b/srcs/requirements/svelte/api_front/old_unused/Header_Multi_old.svelte
deleted file mode 100644
index 5439b8c9..00000000
--- a/srcs/requirements/svelte/api_front/old_unused/Header_Multi_old.svelte
+++ /dev/null
@@ -1,102 +0,0 @@
-<script lang="ts">
-  import { createEventDispatcher } from 'svelte';
-
-  let dispatch = createEventDispatcher();
-
-  let types: string[] = ['home', 'regular', 'none'];
-  // let currentType: string = 'regular';
-  export let currentType = 'home';
-
-  let handleClick = () => {
-    dispatch('clickedHome');
-  };
-
-</script>
-
-<!-- Make it so you can have a Big Home page header and a regular header or no header -->
-<!-- So far my CSS is super Gross, i guess i'll get Hugo to help me with it -->
-
-<header class={currentType}>
-  <h1 class={currentType}>
-    <img class={currentType} src="/img/potato_logo.png" alt="Potato Pong Logo" on:click={handleClick}>
-  </h1>
-  <!-- {#if currentType === 'home'} -->
-    <h1 class={currentType}>Potato Pong</h1>
-  <!-- {/if} -->
-</header>
-
-<style>
-  /* See "possible_fonts.css" for more font options... */
-  @font-face {
-    font-family: 'Bondi';
-    src:url('/fonts/Bondi.ttf.woff') format('woff'),
-        url('/fonts/Bondi.ttf.svg#Bondi') format('svg'),
-        url('/fonts/Bondi.ttf.eot'),
-        url('/fonts/Bondi.ttf.eot?#iefix') format('embedded-opentype'); 
-    font-weight: normal;
-    font-style: normal;
-  }
-  
-
-/* There is a bunch of unncessary shit in here... why so many flex grids, why is everything the same class? just seemed easier but... */
-
-
-  header{
-    /* background: #f7f7f7; */
-    background: #618174;
-    /* padding: 20px; */
-    margin: 0;
-    font-family: 'Bondi';
-    /* does nothing so far... */
-    /* display: flex; */
-  }
-
-  header.home{
-    /* position: sticky; */
-  }
-  header.regular{
-    position: sticky;
-    display: grid;
-    grid-template-columns: 1fr 1fr 1fr;
-  }
-  header.regular > h1:first-child{
-    justify-self: left;
-  }
-  header.regular > h1:nth-child(2){
-    justify-items: center;
-  }
-
-/* Headers */
-  h1.home {
-    margin: 0;
-    text-align: center;
-    /* max-width: 100px; */
-  }
-  h1.regular{
-    margin: 0;
-    text-align: left;
-    /* max-width: 40px; */
-    /* this helped with the weird extra space under the image... */
-    display: flex;
-    justify-self: center;
-    align-self: center;
-  }
-
-/* Images */
-  h1 img.home{
-    /* text-align: center; */
-    /* get the image squarely in the middle... */
-    cursor: pointer;
-    max-width: 100px;
-  }
-  h1 img.regular{
-    cursor: pointer;
-    max-width: 40px;
-    padding: 7px 15px;
-  }
-
-
-  /* .none{
-
-  } */
-</style>
\ No newline at end of file
diff --git a/srcs/requirements/svelte/api_front/old_unused/HomePage_old.svelte b/srcs/requirements/svelte/api_front/old_unused/HomePage_old.svelte
deleted file mode 100644
index 1b861b0c..00000000
--- a/srcs/requirements/svelte/api_front/old_unused/HomePage_old.svelte
+++ /dev/null
@@ -1,172 +0,0 @@
-<script lang="ts">
-
-// Now called LoginPage
-
-  // import Header from "./Header.svelte";
-  import Footer from "../components/Footer.svelte";
-	import Login from "./Login.svelte";
-  import Tabs from "../shared/Tabs.svelte"
-  import Card from "../pieces/Card.svelte"
-// tmp
-let login = { username: '', password: ''};
-  // let's us track any errors in a submited form
-  let errors = { username: '', password: ''};
-  let valid:boolean = false;
-	const loginHandler = () => {
-		console.log('hi');
-	};
-  const createAccountHandler = () => {
-		console.log('hi');
-	};
-
-// Tabs
-  let items: string[] = ['Login', 'Create Account'];
-	let activeItem: string = 'Login';
-	
-	const tabChange = (e) => {
-		activeItem = e.detail;
-	};
-
-// TMP for switching page, down the line this will be down by modifying url
-
-</script>
-
-<!-- New New Approach -->
-<!-- if i were to do all this with CSS Grids how would i do it? -->
-<!-- Things i want -->
-<!-- A title button, some nav buttons, a giant dope canvas and words over it -->
-<!-- not sure if i want: login and create account -->
-<!-- let's start with just the canvas -->
-
-
-
-
-<!-- New aproach -->
-<!-- just make the html in order you can move it around all you want into special Compoenents later -->
-
-<!-- Ok i think all of this needs to go in a Home Page Component -->
-<!-- and then i make another master component for the main page once you're logged in, no idea what that should look like -->
-
-<!-- what if i kept the special canvas header in here and made another generic header for the rest of the site as a component -->
-
-<header class="banner">
-	<!-- top left corner, sticky -->
-	<h1>Potato Pong</h1>
-	<!-- top right but it takes you down the page -->
-	<h2>Login</h2>
-
-	<!-- all this used to be in Welcome Section -->
-	<!-- the amazing backround! not sure yet if it should scroll with us or be the size of the View Port... -->
-	<!-- <canvas></canvas> -->
-	<!-- i think maybe the canvas needs to be in the header -->
-	<!-- using an image for now as a placehodler for the canvase -->
-	<img src="/img/tmp_mario_banner.png" alt="tmp Mario banner">
-	<div class="welcome">
-		<h2>Welcome to <br><span>Potato Pong</span></h2>
-	</div>
-	<!-- I want some sort of arrow pointing down and blinking to indicate you should scroll -->
-</header>
-<!-- <section class="banner"> -->
-<section class="welcome">
-	
-</section>
-<!-- no nav on home page -->
-<section class="register">
-
-	<!-- i could have a toggle tab to login or create a new account -->
-
-  <Tabs items={items} {activeItem} on:tabChange={tabChange}/>
-	{#if activeItem === 'Login'}
-		<div class="card">
-      <Card>
-      <h2>Login</h2>
-      <form on:submit|preventDefault={loginHandler}>
-        <div class="form-field">
-          <input type="text" id="username" placeholder="username" bind:value={login.username}>
-          <div class="error">{ errors.username }</div>
-        </div>
-        <div class="form-field">
-          <input type="password" id="password" placeholder="password" bind:value={login.password}>
-          <div class="error">{ errors.password }</div>
-        </div>
-        <!-- type="" but flat={}  cuz type is a string but flat is a bool--> 
-        <!-- <Button type="secondary" flat={true}>Add Poll</Button> -->
-        <button>Login</button>
-      </form>
-      </Card>
-    </div>
-	{:else if activeItem = 'Create Account'}
-    <!-- Create Account -->
-    <div class="card">
-      <Card>
-        <h3>Create Account</h3>
-        <form on:submit|preventDefault={createAccountHandler}>
-          <div class="form-field">
-            <input type="text" id="username" placeholder="username" bind:value={login.username}>
-            <div class="error">{ errors.username }</div>
-          </div>
-          <div class="form-field">
-            <input type="password" id="password" placeholder="password" bind:value={login.password}>
-            <div class="error">{ errors.password }</div>
-          </div>
-          <!-- type="" but flat={}  cuz type is a string but flat is a bool--> 
-          <!-- <Button type="secondary" flat={true}>Add Poll</Button> -->
-          <button>Login</button>
-        </form>
-      </Card>
-    </div>
-	{/if}
-
-
-</section>
-<!-- below this i could say, this is where i might have put an explanation of what you can do on this page but fuck you i didn't -->
-<!-- or maybe in the end i will, something like: Fun, Game, Colors, enjoy Friendship, or don't, it's your choice! -->
-<Footer />
-
-
-
-<style>
-  /* hearder stuff */
-	
-/* Clearly i have yet to master floating stuff... */
-/* i need to put box-sizing in here somewhere for the login... */
-
-/* starting again with CSS Grid */
-  /* .banner{
-		position: relative;
-	}
-	.banner img{
-    max-width: 100%;
-	}
-
-	.banner h1{
-		position: absolute;
-		left: 0;
-		top: 10px;
-	}
-	.banner h2{
-		position: absolute;
-		left: 90%;
-		top: 10px;
-	}
-	.banner .welcome{
-    background-color: #feb614;
-    color:white;
-    padding: 30px;
-    position: absolute;
-    left: 50%;
-    top: 50%;
-	}
-	.banner .welcome h2{
-			font-size: 58px;
-	}
-	.banner .welcome h2 span{
-			font-size: 1.3em;
-	}
-
-  .register{
-    
-  } */
-
-
-</style>
\ No newline at end of file
diff --git a/srcs/requirements/svelte/api_front/old_unused/Login.svelte b/srcs/requirements/svelte/api_front/old_unused/Login.svelte
deleted file mode 100644
index 0f4b9b6b..00000000
--- a/srcs/requirements/svelte/api_front/old_unused/Login.svelte
+++ /dev/null
@@ -1,90 +0,0 @@
-<script lang="ts">
-  import { now } from "svelte/internal";
-  import Card from "../pieces/Card.svelte";
-  import { createEventDispatcher } from 'svelte';
-  // import UserStore from './stores/UserStore';
-
-  // prolly Typescript-ify
-  //let fields{question:string, answerA:string, answerB: string} = { question: '', answerA: '', answerB: ''};
-  let login = { username: '', password: ''};
-  // let's us track any errors in a submited form
-  let errors = { username: '', password: ''};
-  let valid:boolean = false;
-
-  const dispatch = createEventDispatcher();
-
-  const loginHandler = () => {
-    valid = true;
-
-    if (login.username !== $UserStore.username) {
-      valid = false;
-      errors.username = "wrong example username."
-    } else {
-      // reseting the value of errors
-      errors.username = "";
-    }
-    if (login.password !== $UserStore.password) {
-      valid = false;
-      errors.password = "wrong example password."
-    } else {
-      // reseting the value of errors
-      errors.password = "";
-    }
-
-    if (valid) {
-      $UserStore.loggedIn = true;
-      $UserStore.status = 'online';
-
-      dispatch('login');
-    }
-
-  };
-
-
-</script>
-
-<div class="login">
-<Card>
-
-    <form on:submit|preventDefault={loginHandler}>
-      <div class="form-field">
-        <input type="text" id="username" placeholder="username" bind:value={login.username}>
-        <div class="error">{ errors.username }</div>
-      </div>
-      <div class="form-field">
-        <input type="password" id="password" placeholder="password" bind:value={login.password}>
-        <div class="error">{ errors.password }</div>
-      </div>
-      <!-- type="" but flat={}  cuz type is a string but flat is a bool--> 
-      <!-- <Button type="secondary" flat={true}>Add Poll</Button> -->
-      <button>Login</button>
-    </form>
-
-</Card>
-</div>
-
-<style>
-  form{
-    width: 200px;
-    margin: 0 auto;
-    text-align: center;
-  }
-  .form-field{
-    margin: 18px auto;
-  }
-  input{
-    width: 100%;
-    border-radius: 6px;
-  }
-  .login{
-    /* display: grid;
-    grid-template-columns: 1fr; */
-    max-width: 350px;
-  }
-
-  .error{
-    font-weight: bold;
-    font-size: 12px;
-    color: #d91b42;
-  }
-</style>
\ No newline at end of file
diff --git a/srcs/requirements/svelte/api_front/old_unused/LoginPage.svelte b/srcs/requirements/svelte/api_front/old_unused/LoginPage.svelte
deleted file mode 100644
index ddc15600..00000000
--- a/srcs/requirements/svelte/api_front/old_unused/LoginPage.svelte
+++ /dev/null
@@ -1,414 +0,0 @@
-<script lang="ts">
-  // import Header from "./Header.svelte";
-  import Footer from "../components/Footer.svelte";
-  import Tabs from "../shared/Tabs.svelte";
-  import Card from "../pieces/Card.svelte";
-  import Canvas from "../pieces/Canvas.svelte";
-  import ScrollTo from "../shared/ScrollTo.svelte";
-  import UserStore from "./UserStore.js";
-  import { createEventDispatcher } from "svelte";
-  import {push} from "svelte-spa-router";
-
-  let dispatch = createEventDispatcher();
-// Tabs
-  let items: string[] = ['Login', 'Create Account'];
-	let activeItem: string = 'Login';
-	
-	const tabChange = (e) => {
-		activeItem = e.detail;
-	};
-
-
-  import axios from 'axios';
-  import { onMount } from 'svelte';
-
-	let user = {logedIn: false};
-
-	onMount(async () => {
-		// console.log('PROFIL SVELTE');
-		const {data} = await axios.get('http://transcendance:8080/api/v2/user');
-		if (data)
-			user.logedIn = true;
-	});
-
-	const submit = async() => {
-    document.body.scrollIntoView();
-    push
-		window.location.href = 'http://transcendance:8080/api/v2/auth';
-	}
-
-	const logout = async() => {
-		await fetch('http://transcendance:8080/api/v2/auth/logout',);
-		user.logedIn = false;
-	};
-
-
-
-
-
-
-
-  // for toLogin
-
-  let bottomHalf;
-  // console.log(bottomHalf);
-  // const element = document.body;
-
-
-  // in theory this could be a Store, but for now this will do
-  // also in future we'll do this with urls
-  export let pages;
-  export let currentPage;
-  // this shit has overstayed it's welcome, fuck having userId all over the place
-  export let userId;
-
-
-  // maybe we put this in the login Component?
-  // tmp
-  let login = { username: '', password: ''};
-  // let's us track any errors in a submited form
-  let errors = { username: '', password: ''};
-  let valid:boolean = false;
-
-	const loginHandler = () => {
-		console.log('hi from loginHandler');
-
-
-    // 
-    // Basic Checks
-    // 
-    valid = false;
-
-    // checkin Username
-    if (login.username.length < 1)
-    {
-      valid = false;
-      errors.username = 'please enter a username';
-    } else {
-      valid = true;
-      errors.username = '';
-    }
-
-    // Checking Password
-    if (login.password.length < 1)
-    {
-      valid = false;
-      errors.password = 'please enter your password';
-    } else {
-      valid = true;
-      errors.password = '';
-    }
-
-    // 
-    // Advanded Checks
-    // 
-
-    // Comparing to UserStore
-    let users;
-    const unsubscribe = UserStore.subscribe(objs => {
-      users = objs;
-      console.log('subscribed');
-    });
-  
-    // could i do $users.length ? doesn't look like it...
-    // let len = $users.length;
-
-    // userId = 0;
-    // userId = users.filter(user => user.username === login.username);
-    // this shit returns an array, it would be nice if it weren't an array
-    // let user = users.filter(user => user.username === login.username);
-    let user = users.find(user => user.username === login.username);
-
-    console.log(user);
-    // console.log(user.password);
-
-
-    // all this shit is a bit wordy... maybe a better way to handle this stuff?
-
-    // if (userIndex > users.length) {
-    if (!user) {
-      valid = false;
-      errors.username = 'user not found';
-      // something better?
-    } else {
-      valid = true;
-      errors.username = '';
-    }
-
-    // if (users[userIndex].password !== login.password) {
-    if (user && user.password !== login.password) {
-      valid = false;
-      errors.password = 'Wrong Password';
-      // Maybe clear the fields?
-    } else {
-      valid = true;
-      errors.password = '';
-    }
-
-    // 
-    // Validation
-    // 
-    unsubscribe();
-
-    if (valid) {
-      // yea don't modify this here...
-      currentPage = 'user';
-      // something like: indicate that userIndex is the one we want...
-      console.log('valid Credentials');
-
-      // making sure we start at the top of the page, way less jarring
-        // leave for now just in case...
-      document.body.scrollIntoView();
-
-      // may not actually want a dispatch?
-      // pass data userIndex?
-      // dispatch('loggedIn');
-      // from svelte-spa-router
-      push("/user");
-    }
-	};
-
-  //
-  const createAccountHandler = () => {
-		console.log('hi from accunt handler');
-	};
-
-
-  
-
-
-</script>
-
-
-<header class="grid-container">
-
-  <!-- <div on:mouseenter={enter} on:mouseleave={leave} class:active > -->
-    <h1>Potato Pong</h1>
-  <!-- </div> -->
-  <nav>
-    <!-- placeholder links -->
-    <a href="/">Somewhere</a>
-    <!-- <a href="/">SomewhereElse</a> -->
-    {#if !user.logedIn}
-      <ScrollTo element={bottomHalf}/>
-    {:else}
-      <div class="logout" on:click={logout}>Log Out</div>
-    {/if}
-    <!-- one of these will be login and it will scroll you down to the login part -->
-  </nav>
-  <h2>
-    <div>Welcome to</div>
-    <div>Potato Pong</div>
-  </h2>
-
-  <!-- here i want a flashing arrow pointing down to the login part -->
-
-</header>
-<!-- <Canvas class=".canvas2"/> -->
-<Canvas/>
-
-
-
-<section class="register" bind:this={bottomHalf}>
-
-  <!-- My beautiful tabs are useless now, whatever, kill your darlings... -->
-  <!-- i could have a toggle tab to login or create a new account -->
-  <!-- This shit is kinda unnecessary cuz there is no Create Account option... -->
-
-  <Tabs items={items} {activeItem} on:tabChange={tabChange}/>
-  {#if activeItem === 'Login'}
-    <div class="card">
-      <Card>
-      <h2>Login</h2>
-      <form on:submit|preventDefault={loginHandler}>
-        <div class="form-field">
-          <input type="text" id="username" placeholder="username" bind:value={login.username}>
-          <div class="error">{ errors.username }</div>
-        </div>
-        <div class="form-field">
-          <input type="password" id="password" placeholder="password" bind:value={login.password}>
-          <div class="error">{ errors.password }</div>
-        </div>
-        <!-- type="" but flat={}  cuz type is a string but flat is a bool--> 
-        <!-- <Button type="secondary" flat={true}>Add Poll</Button> -->
-        <button>Login</button>
-      </form>
-      </Card>
-    </div>
-  {:else if activeItem = 'Create Account'}
-    <!-- Create Account -->
-    <div class="card">
-      <Card>
-        <h2>Create Account</h2>
-        <form on:submit|preventDefault={createAccountHandler}>
-          <div class="form-field">
-            <input type="text" id="username" placeholder="username" bind:value={login.username}>
-            <div class="error">{ errors.username }</div>
-          </div>
-          <div class="form-field">
-            <input type="password" id="password" placeholder="password" bind:value={login.password}>
-            <div class="error">{ errors.password }</div>
-          </div>
-          <!-- type="" but flat={}  cuz type is a string but flat is a bool--> 
-          <!-- <Button type="secondary" flat={true}>Add Poll</Button> -->
-          <button>Login</button>
-        </form>
-      </Card>
-    </div>
-  {/if}
-
-
-</section>
-<!-- below this i could say, this is where i might have put an explanation of what you can do on this page but fuck you i didn't -->
-<!-- or maybe in the end i will, something like: Fun, Game, Colors, enjoy Friendship, or don't, it's your choice! -->
-
-<Footer />
-
-<!-- </div> -->
-
-
-<style>
-  /* currently useless */
-  /* No styles get applied to the canvas from here, maybe i should move them to the Canvas Component... */
-  /* tho tbh, why bother, i'm gonna change it anyway... */
-  .canvas{
-    /* grid-column: 1 / 13;
-    grid-row: 1 / 3; */
-    /* don't rely on Z-Index!!!! */
-    z-index: -1;
-    position: relative;
-    width: 100%;
-    height: 100%;
-    white-space: nowrap;
-
-    /* Tmp? */
-    /* background-color: #666; */
-
-    /* somehow this got rid of they annoying white space under the canvas */
-    padding-bottom: 0;
-    margin-bottom: 0px;
-    overflow: hidden;
-  }
-
-  .canvas2{
-    z-index: -1;
-    position: absolute;
-    top: 0;
-    left: 0;
-    width: 100%;
-    height: 100%;
-    white-space: nowrap;
-
-    /* Tmp? */
-    /* background-color: #666; */
-
-    /* somehow this got rid of they annoying white space under the canvas */
-    padding-bottom: 0;
-    margin-bottom: 0px;
-    overflow: hidden;
-  }
-
-
-  /* .canvas .grid-container{ */
-  .grid-container{
-    position: absolute;
-    left: 0;
-    top: 0;
-
-
-    box-sizing: border-box;
-    width: 100%;
-    height: 100%;
-    white-space: nowrap;
-    /* padding-bottom: 0; */
-    margin-bottom: 0px;
-    overflow: hidden;
-    padding: 20px 40px;
-
-
-    display: grid;
-    grid-template-columns: repeat(12, 1fr);
-    grid-template-rows: 1fr 1fr 1fr 1fr 1fr;
-    align-items: center;
-  }
-
-  header h1, header nav a{
-    /* tmp ? well i kinda like it */
-    color: bisque;
-  }
-  header h1{
-    grid-column: 1 / 7;
-    grid-row: 1;
-    /* grid-column: span 6; */
-    /* tmp? */
-    padding: 20px;
-    border: 1px solid bisque;
-  }
-  header nav{
-    /* make it a flexbox? */
-    grid-column: 7 / 13;
-    grid-row: 1;
-    justify-self: end;
-    /* tmp? */
-    padding: 20px;
-    border: 1px solid bisque;
-  }
-  header nav a{
-    margin-left: 10px;
-    text-decoration: none;
-  }
-
-  /* testing */
-  header nav a:hover{
-    font-weight: bold;
-    background-color: blue;
-  }
-  header h2:hover{
-    background: blue;
-  }
-
-
-  header h2{
-    grid-row: 3;
-    grid-column: 5 / span 4;
-    justify-self: center;
-    /* tmp */
-    border: 1px solid black;
-    z-index: 3;
-  }
-  header h2 div{
-    font-size: 2em;
-  }
-
-  /* the login / register part */
-
-  /* What do i want?
-  I want it to be the same size as a full screen so you don't see the canvas at all anymore */
-
-  /* doesn't work... */
-  /* body{
-    background: bisque;
-  } */
-
-  .bottom-half{
-    /* doesn't quite work... */
-    background: bisque;
-    /* also doesn't work... */
-    /* height: 1vw; */
-
-    /* testing */
-    /* position: absolute; */
-  }
-
-  section.register{
-    min-height: 400px;
-  }
-
-  .error{
-    font-size: 0.8em;
-    font-weight: bold;
-    color: red;
-  }
-
-
-</style>
\ No newline at end of file
diff --git a/srcs/requirements/svelte/api_front/old_unused/ProfileDisplay_backup_copy.svelte b/srcs/requirements/svelte/api_front/old_unused/ProfileDisplay_backup_copy.svelte
deleted file mode 100644
index 2dd2ac44..00000000
--- a/srcs/requirements/svelte/api_front/old_unused/ProfileDisplay_backup_copy.svelte
+++ /dev/null
@@ -1,305 +0,0 @@
-<script lang="ts">
-
-  import { onMount } from 'svelte';
-
-  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>
-
-// If i export these vars, maybe as an nice tidy object, i could pass whatever i like to them
-// The current user, some other user, whatever, and thus reuse this Componente for the user and their friends or whatever
-// will have to coordinate with Back, will know more once the Game stats are in the back
-// wait maybe this won't work, cuz like it's still going through a route, i would have to update a Store Var each time...
-// not sure if that's what i want...
-
-
-  // maybe the rank is determined dynamically just in the front based on win loss ratio or something no one cares about
-  // why bother storing that shit in the back...
-  // maybe i need a Rank.svelte component
-    // ohhh i could make above a certain rank glitter! like that CSS tutorial showed me!
-
-  let user;
-  let rank = '';
-  let avatar;
-
-  // 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() => {
-    // console.log('mounting profile display')
-    user = await fetch('http://transcendance:8080/api/v2/user')
-      .then( (x) => x.json() );
-
-    // console.log('profile display did my fetch')
-    // should i be updating the userStore or is that unnecessary?
-
-    if (user.loseGame > user.winGame) {
-      rank = 'Bitch Ass Loser!'
-    } else if (user.loseGame === user.winGame) {
-      rank = 'Fine i guess...'
-    } else {
-      rank = 'Yea you da Boss!'
-    }
-
-    await fetch("http://transcendance:8080/api/v2/user/avatar", {method: "GET"})
-		  .then(response => {return response.blob()})
-		  .then(data => {
-		  	const url = URL.createObjectURL(data);
-		  	avatar = url;
-	  	});
-
-    // tmp
-    // console.log('mounted Profile Display')
-    // console.log(user);
-
-
-  })
-
-  // Glittery Stars and such for Rank
-
-  let index = 0, interval = 1000;
-
-  const rand = (min, max) => 
-    Math.floor(Math.random() * (max - min + 1)) + min;
-
-  // it's unhappy that "star" isn't typeset, no idea what to do about it...
-  const animate = (star) => {
-    // the if seems to have fixed the type issue
-    if (star) {
-      star.style.setProperty("--star-left", `${rand(-10, 100)}%`);
-      star.style.setProperty("--star-top", `${rand(-40, 80)}%`);
-
-      star.style.animation = "none";
-      star.offsetHeight;
-      star.style.animation = "";
-    }
-  }
-
-  // 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(stars[i]), 1000);
-    }, index++ * (interval / 3))
-  }
-
-</script>
-
-<!-- is this if excessive? -->
-<div class="outer">
-  {#if user !== undefined}
-  <main>
-    <!-- <img class="icon" src="img/default_user_icon.png" alt="default user icon"> -->
-    <!-- <img class="icon" src="{user.image_url}" alt="default user icon"> -->
-    <img class="avatar" src="{avatar}" alt="default user icon">
-    <div class="username">{user.username}</div>
-    <div class="rank">Rank: 
-      <span class="glitter">
-        <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 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 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>
-        </span>
-        <span class="glitter-text">{rank}</span>
-      </span>
-    </div>
-    <section class="main-stats">
-      <h4>Match Statistics</h4>
-      <p>Total: {user.stats.totalGame}</p>
-      <p>Victories: {user.stats.winGame}</p>
-      <p>Losses: {user.stats.loseGame}</p>
-      <p>Draws: {user.stats.drawGame}</p>
-    </section>
-  </main>
-  {/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>
\ No newline at end of file
diff --git a/srcs/requirements/svelte/api_front/old_unused/TwoFactorAuthentication_old.svelte b/srcs/requirements/svelte/api_front/old_unused/TwoFactorAuthentication_old.svelte
deleted file mode 100644
index f5526a04..00000000
--- a/srcs/requirements/svelte/api_front/old_unused/TwoFactorAuthentication_old.svelte
+++ /dev/null
@@ -1,137 +0,0 @@
-<script lang="ts">
-
-  import { onMount } from 'svelte';
-  import { loginStatus } from '../stores/loginStatusStore';
-
-  // Cherif's code
-
-  let qrCodeImg;
-	let qrCode = "";
-	let wrongCode = "";
-	let maxTry = 3;
-	// const fetchQrCodeImg = (async() => {
-	// 	await fetch("http://transcendance:8080/api/v2/auth/2fa/generate",
-	// 	{
-	// 		method: 'POST',
-	// 	})
-	// 	.then(response => {return response.blob()})
-	// 	.then(blob => {
-	// 		const url = URL.createObjectURL(blob);
-	// 		qrCodeImg = url;
-	// 	});
-	// })()
-
-  // $: submit = async() => {
-	// 	const response = await fetch("http://transcendance:8080/api/v2/auth/2fa/turn-on",
-	// 	{
-	// 		method : 'POST',
-	// 		headers : {
-	// 			"Content-Type": "application/json",
-	// 		},
-	// 		body : JSON.stringify({
-	// 			"twoFaCode" : qrCode,
-	// 		}),
-	// 	});
-	// 	if (response.status === 401)
-	// 	{
-	// 		qrCode = "";
-	// 		wrongCode = `Wrong code, please try again. You have ${maxTry} before end session`;
-	// 		maxTry--;
-	// 	}
-	// 	if (maxTry === 0)
-	// 	{
-	// 		await fetch("http://transcendance:8080/auth/logout",
-	// 		{
-	// 			method : 'POST',
-	// 		})
-	// 		.then(response => response.json())
-	// 		.then(push("/login"));
-	// 	}
-	// 	if (response.status === 200)
-	// 	{
-	// 		push("/");
-	// 	}
-	// }
-
-
-
-  // My code
-
-
-
-  let auth;
-  // we're expecting secret and otpauth
-
-  onMount( async() => {
-    // auth = await fetch('http://transcendance:8080/api/v2/auth/2fa/generate', {
-    //     method: 'POST'
-    //   })
-		//   .then((resp) => resp.json());
-    // console.log(auth.secret);
-
-    await fetch("http://transcendance:8080/api/v2/auth/2fa/generate", {
-        method: 'POST',
-      })
-      .then(response => {return response.blob()})
-      .then(blob => {
-        const url = URL.createObjectURL(blob);
-        qrCodeImg = url;
-		});
-
-  });
-
-  // testing loginStatus Custom Store
-
-  const toggleTFA = () => {
-    loginStatus.toggleTFA();
-    console.log($loginStatus.tfa);
-  }
-
-
-  // testing
-
-  let auth2
-  const TFA = async() => {
-    // ok no idea what goes in here...
-    auth2 = await fetch('http://transcendance:8080/api/v2/auth/2fa/generate', {
-        method: 'POST'
-      })
-		  // .then((resp) => resp.json());
-
-    // console.log(auth2.secret);
-    console.log(auth2);
-  };
-
-  // if ($loginStatus.tfa && $loginStatus.fortyTwo)
-
-</script>
-
-<h1>2FA Test</h1>
-
-<div>
-  <button on:click={TFA}>TFA</button>
-</div>
-
-<div>
-  {#if auth2}
-    <p>{auth2.json()}</p>
-  {/if}
-</div>
-
-<img src={qrCodeImg} alt="A QRCodeImg you must scan with google authenticator" id="qrcodeImg" />
-
-
-<!-- <p>FortyTwo: {$loginStatus.fortyTwo}</p>
-<p>TFA: {$loginStatus.tfa}</p>
-<p>isLogged: {loginStatus.isLogged}</p>
-
-<div>
-  <button on:click={toggleTFA}>toggleTFA</button>
-</div> -->
-
-
-
-
-<style>
-
-</style>
\ No newline at end of file
diff --git a/srcs/requirements/svelte/api_front/old_unused/UserPage.svelte b/srcs/requirements/svelte/api_front/old_unused/UserPage.svelte
deleted file mode 100644
index 98c69c2f..00000000
--- a/srcs/requirements/svelte/api_front/old_unused/UserPage.svelte
+++ /dev/null
@@ -1,149 +0,0 @@
-<script lang="ts">
-
-// The User Page can have several Flavors ?
-// like a HomePage vibe, and an AccountPage vibe or whatever, but we'll still be serving this page just with diff props
-
-  import UserStore from "./UserStore";
-  import Header from "../components/Header.svelte";
-  import Footer from "../components/Footer.svelte";
-  import { createEventDispatcher } from "svelte";
-  import { loginStatus } from '../stores/loginStatusStore';
-    import { push } from "svelte-spa-router";
-
-  let dispatch = createEventDispatcher();
-
-// i fucking hate these vars, the will have to go
-  export let pages;
-  export let currentPage;
-  export let userId;
-
-// This shit is so redundant...
-  let types = ['home', 'account']
-  export let currentType = 'account';
-
-// this is also stupid...
-  let sidebar = true;
-
-
-  // would i prefer to forward this?
-  let clickedHome = () => {
-    console.log('clicked home');
-    // do something...
-    currentType = 'home';
-  };
-
-  let clickedLogout = async() => {
-    console.log('clicked logout');
-    await fetch('http://transcendance:8080/api/v2/auth/logout',);
-		// $loginStatus = false;
-    // maybe use replace() ?
-    push('/');
-  };
-
-// All the variables that will eventually be replaced by the real values
-
-  let username = 'Username';
-  let games = { total: 7, won: 4, lost: 3};
-  let rank = 'gold or whatever the fuck who cares...';
-
-
-</script>
-
-<!-- remove ={clickedHome} if you want to forward the event to App.svelte-->
-<!-- god this is some gross code... -->
-<Header on:clickedHome={clickedHome} currentType="{currentType === 'home' ? 'home' : 'regular'}" on:clickedLogout={clickedLogout}/>
-
-<!-- The Wave -->
-<!-- <div class="spacer layer1"></div> -->
-
-<!-- this is the thing that will let me offset -->
-<div class='{sidebar ? "main-grid" : "none"}'>
-  {#if sidebar}
-    <section class="sidebar">
-      <p>i am a sidebar</p>
-    </section>
-  {/if}
-
-  <main class:offset={sidebar}>
-    <!-- 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>{username}</div>
-    <div>Rank: {rank}</div>
-    <section class="main-stats">
-      <h4>Match Statistics</h4>
-      <p>Total: {games.total}</p>
-      <p>Victories: {games.won}</p>
-      <p>Losses: {games.lost}</p>
-    </section>
-  </main>
-
-</div>
-
-<Footer />
-
-
-<style>
-
-
-
-/* from Haikei */
-  /* for any Haikei image */
-  .spacer{
-    aspect-ratio: 900/300;
-    width: 100%;
-    background-repeat: no-repeat;
-    background-position: center;
-    background-size: cover;
-  }
-  /* the specific image we use, you need both classes */
-  .layer1{
-    background-image: url('/img/wave-haikei.svg');
-  }
-
-  div.main-grid{
-    display: grid;
-    grid-template-columns: repeat(12, 1fr);
-    /* max-height: calc(100vh - 30vh); */
-    height: 85vh;
-  }
-
-  section.sidebar{
-    grid-column: 1 / span 2;
-    background: white;
-  }
-
-/* The main part */
-  main{
-    max-width: 960px;
-    margin: 40px auto;
-    text-align: center;
-  }
-
-  main.offset{
-    grid-column: 3 / span 10;
-  }
-
-/* Normal CSS stuff */
-.icon{
-    max-width: 150px;
-  }
-
-/* 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;
-  }
-
-</style>
\ No newline at end of file
diff --git a/srcs/requirements/svelte/api_front/old_unused/UserStore.js b/srcs/requirements/svelte/api_front/old_unused/UserStore.js
deleted file mode 100644
index 7bb1abc4..00000000
--- a/srcs/requirements/svelte/api_front/old_unused/UserStore.js
+++ /dev/null
@@ -1,45 +0,0 @@
-import { writable } from "svelte/store";
-
-// ok yea this doesn't make a lot of sense, what am i trying to do?
-// have an array of objects that are all the users?
-// or an object that is the one user?
-// For now as a placeholder i'll have one user in one obj
-
-// should it not be a const? yea seems like it
-// export const users = writable(
-const UserStore = writable(
-    [{
-        // this is an example user
-        id: 1,
-        username: 'chaboi',
-        email: 'nope@fu.com',
-        // surely there's a better way to do this!
-        password: '1234',
-        // maybe an object listing friends' usernames?
-        friends: 0,
-        loggedIn: false,
-        // i imagine the user uploading their Avatare and it being put somehwere in the DB which could be referenced like a URL
-        // so if this field is empty then use the default avatar
-        avatar: '',
-        // online, offline, gaming
-        status: 'offline',
-    },
-    {
-        id: 2,
-        username: 'itsame',
-        email: 'mario@nintendo.com',
-        // surely there's a better way to do this!
-        password: '1234',
-        // maybe an object listing friends' usernames?
-        friends: 0,
-        loggedIn: false,
-        // i imagine the user uploading their Avatare and it being put somehwere in the DB which could be referenced like a URL
-        // so if this field is empty then use the default avatar
-        avatar: '',
-        // online, offline, gaming
-        status: 'offline',
-    }]
-);
-
-export default UserStore;
-// export default users;
\ No newline at end of file
diff --git a/srcs/requirements/svelte/api_front/old_unused/loginStatusStore.js b/srcs/requirements/svelte/api_front/old_unused/loginStatusStore.js
deleted file mode 100644
index 0e5420d0..00000000
--- a/srcs/requirements/svelte/api_front/old_unused/loginStatusStore.js
+++ /dev/null
@@ -1,24 +0,0 @@
-import { writable } from "svelte/store";
-
-// an alternative way of doing things where i have a svelte store connected to localStorage
-
-// do in need to adapt this to work with 2fa?
-
-let _user = localStorage.getItem('42User');
-
-// turns out a simple store is actually the easiest :)
-// export const userStore = writable(_user ? JSON.parse(_user) : null);  // we start with no user, but go get one if one exists
-// export const userStore = writable(null);
-
-// ok so this will happen no matter what, basically we are telling it what to do if the store containing the user changes
-userStore.subscribe((value) => {
-  if (value)
-    localStorage.setItem('42User', JSON.stringify(value));
-  else
-    localStorage.removeItem('42User'); // for logout
-});
-
-export const userLogout = () => userStore.set(null);
-
-
-// export const tmpStore = userStore
\ No newline at end of file
diff --git a/srcs/requirements/svelte/api_front/old_unused/loginStatusStore_old.js b/srcs/requirements/svelte/api_front/old_unused/loginStatusStore_old.js
deleted file mode 100644
index 8070229c..00000000
--- a/srcs/requirements/svelte/api_front/old_unused/loginStatusStore_old.js
+++ /dev/null
@@ -1,129 +0,0 @@
-import { writable } from "svelte/store";
-
-// This is a "Custom Store" see that chapter in the Svelte Tutorial, should be fine
-// NVM this is definitely overkill
-// function createLogin() {
-//     const { subscribe, update } = writable(false);
-
-//     return {
-//         subscribe,
-//         login: () => update(s => s = true),
-//         logout: () => update(s => s = false),
-//     }
-// }
-// export const loginStatus = createLogin();
-
-// export const loginStatus = writable({
-//   42: false,
-//   tfa: false,
-// });
-
-// function createLoginStatus() {
-
-//   //ok it really hated all this
-
-//   // const store = writable({
-//   //   fortyTwo: false,
-//   //   tfa: false,
-//   // });
-
-//   // return {
-//   //   ...store,
-//   //   subscribe,
-//   //   // toggle42: () => update( l => l.fortyTwo = !l.fortyTwo ),
-//   //   toggle42: () => store.update( fortyTwo => !fortyTwo ),
-//   //   // toggleTFA: () => update( l => l.tfa = !l.tfa ),
-//   //   toggleTFA: () => store.update( tfa => !tfa ),
-//   //   isLogged: () => store.fortyTwo && store.tfa,
-//   //   // isLogged: this.fortyTwo && this.tfa,
-//   //   // it really doesn't like "this."
-//   //   // isLogged: () => (this.tfa && this.fortyTwo),
-//   //   // this. ? or (l) => l.tfa ... ?
-//   // }
-
-
-//   //  doesn't seem to work...
-//   const { subscribe, update } = writable({
-//     fortyTwo: false,
-//     tfa: false,
-//   });
-
-//   return {
-//     subscribe,
-//     // toggle42: () => update( l => l.fortyTwo = !l.fortyTwo ),
-//     toggle42: () => update( fortyTwo => !fortyTwo ),
-//     // toggleTFA: () => update( l => l.tfa = !l.tfa ),
-//     toggleTFA: () => update( tfa => !tfa ),
-//     // isLogged: () => fortyTwo && tfa,
-//     // isLogged: this.fortyTwo && this.tfa,
-//     // it really doesn't like "this."
-//     // isLogged: () => (this.tfa && this.fortyTwo),
-//     // this. ? or (l) => l.tfa ... ?
-//     isLogged() {
-//       return fortyTwo && tfa;
-//     },
-//   }
-
-//   // possible other way of doing this
-
-//   // const store = writable({
-//   //   fortyTwo: false,
-//   //   tfa: false,
-//   // });
-
-//   // return {
-//   //   ...store,
-//   //   subscribe,
-//   //   // toggle42: () => update( l => l.fortyTwo = !l.fortyTwo ),
-//   //   toggle42: () => store.update( l.fortyTwo => !l.fortyTwo ),
-//   //   toggleTFA: () => store.update( l => l.tfa = !l.tfa ),
-//   //   isLogged: store.fortyTwo && store.tfa,
-//   //   // isLogged: () => (this.tfa && this.fortyTwo),
-//   //   // this. ? or (l) => l.tfa ... ?
-//   // }
-
-// }
-
-function createLoginStatus() {
-  const { subscribe, update } = writable({
-    fortyTwo: false,
-    tfa: false,
-  });
-
-  function toggle42() {
-    update( (old) => ({...old, fortyTwo: !old.fortyTwo}) );
-  };
-
-  function toggleTFA() {
-    // update( () => {
-    //   self.tfa = !self.tfa;
-    //   return self;
-    // })
-    // console.log("testing");
-    update( (old) => ({...old, tfa: !old.tfa}) );
-  };
-
-  function isLogged() {
-    // return (l) => {l.fortyTwo && l.tfa};
-    // return self.fortyTwo && self.tfa;
-    // return fortyTwo && tfa;
-  };
-
-  return { subscribe, update, toggle42, toggleTFA, isLogged };
-}
-
-export const loginStatus = createLoginStatus();
-
-// OK let's try a totally new approach
-
-// const _loginStatus = writable({
-//   fortyTwo: false,
-//   tfa: false,
-// })
-
-// export const loginStatus = {
-//   subscribe: _loginStatus.subscribe,
-//   set: _loginStatus.set,
-//   update: _loginStatus.update,
-//   toggle42: () => 
-// }
\ No newline at end of file
diff --git a/srcs/requirements/svelte/api_front/old_unused/possible_fonts.css b/srcs/requirements/svelte/api_front/old_unused/possible_fonts.css
deleted file mode 100644
index 9b210ded..00000000
--- a/srcs/requirements/svelte/api_front/old_unused/possible_fonts.css
+++ /dev/null
@@ -1,54 +0,0 @@
-@font-face {
-  font-family: 'Monocode-Regular-Demo';
-  src:url('/fonts/Monocode-Regular-Demo.ttf.woff') format('woff'),
-      url('Monocode-Regular-Demo.ttf.svg#Monocode-Regular-Demo') format('svg'),
-      url('Monocode-Regular-Demo.ttf.eot'),
-      url('Monocode-Regular-Demo.ttf.eot?#iefix') format('embedded-opentype'); 
-  font-weight: normal;
-  font-style: normal;
-}
-@font-face {
-  font-family: 'Air-Conditioner';
-  src:url('/fonts/Air-Conditioner.ttf.woff') format('woff'),
-      url('Air-Conditioner.ttf.svg#Air-Conditioner') format('svg'),
-      url('Air-Conditioner.ttf.eot'),
-      url('Air-Conditioner.ttf.eot?#iefix') format('embedded-opentype'); 
-  font-weight: normal;
-  font-style: normal;
-}
-@font-face {
-  font-family: '1968-Odyssey-3D';
-  src:url('/fonts/1968-Odyssey-3D.ttf.woff') format('woff'),
-      url('1968-Odyssey-3D.ttf.svg#1968-Odyssey-3D') format('svg'),
-      url('1968-Odyssey-3D.ttf.eot'),
-      url('1968-Odyssey-3D.ttf.eot?#iefix') format('embedded-opentype'); 
-  font-weight: normal;
-  font-style: normal;
-}
-@font-face {
-  font-family: '1968-Odyssey-Gradient';
-  src:url('/fonts/1968-Odyssey-Gradient.ttf.woff') format('woff'),
-      url('1968-Odyssey-Gradient.ttf.svg#1968-Odyssey-Gradient') format('svg'),
-      url('1968-Odyssey-Gradient.ttf.eot'),
-      url('1968-Odyssey-Gradient.ttf.eot?#iefix') format('embedded-opentype'); 
-  font-weight: normal;
-  font-style: normal;
-}
-@font-face {
-  font-family: 'AddFatMan';
-  src:url('/fonts/AddFatMan.ttf.woff') format('woff'),
-      url('/fonts/AddFatMan.ttf.svg#AddFatMan') format('svg'),
-      url('/fonts/AddFatMan.ttf.eot'),
-      url('/fonts/AddFatMan.ttf.eot?#iefix') format('embedded-opentype'); 
-  font-weight: normal;
-  font-style: normal;
-}
-@font-face {
-  font-family: 'Bondi';
-  src:url('/fonts/Bondi.ttf.woff') format('woff'),
-      url('/fonts/Bondi.ttf.svg#Bondi') format('svg'),
-      url('/fonts/Bondi.ttf.eot'),
-      url('/fonts/Bondi.ttf.eot?#iefix') format('embedded-opentype'); 
-  font-weight: normal;
-  font-style: normal;
-}
\ No newline at end of file
diff --git a/srcs/requirements/svelte/api_front/old_unused/primaryRoutes.svelte b/srcs/requirements/svelte/api_front/old_unused/primaryRoutes.svelte
deleted file mode 100644
index 4c254fec..00000000
--- a/srcs/requirements/svelte/api_front/old_unused/primaryRoutes.svelte
+++ /dev/null
@@ -1,177 +0,0 @@
-<script lang="ts">
-  import NotFound from "../src/pages/NotFound.svelte";
-import ProfilePage from "../src/pages/profile/ProfilePage.svelte";
-import SplashPage from "../src/pages/SplashPage.svelte";
-import TwoFactorAuthentication from '../src/pages/TwoFactorAuthentication.svelte';
-import UnauthorizedAccessPage from '../src/pages/UnauthorizedAccessPage.svelte';
-import { wrap } from 'svelte-spa-router/wrap'
-import { get } from 'svelte/store';
-
-import TestPage from '../src/pages/TmpTestPage.svelte';
-import { userStore, userLogout } from "../src/stores/loginStatusStore";
-
-
-
-//   "/article/:title": Article, // this is how you would do parameters!
-// "/": LoginPage,
-
-// TMP not using this cuz need to work out how to authentical both 42 and 2FA from the backend
-
-// export const primaryRoutes = {
-//   '/': SplashPage,
-//   // '/2fa': TwoFactorAuthentication,
-//   '/2fa': wrap({
-//     component: TwoFactorAuthentication,
-//     conditions: [
-//       (detail) => {
-//         // let loggedIn;
-//         // loginStatus.subscribe(value => {
-//        //   loggedIn = value;
-//        // });
-
-//         const { fortyTwo, tfa } = get(loginStatus);
-
-//         console.log('condition in /2fa');
-//         // return (loginStatus.fortyTwo && loginStatus.tfa);
-//         // console.log($loginStatus.fortyTwo)
-//         console.log(fortyTwo);
-//         console.log(tfa);
-//         return true;
-//       }
-//     ]
-//   }),
-//   '/profile': wrap({
-//     component: ProfilePage,
-//     conditions: [
-//       (detail) => {
-//         const { fortyTwo, tfa } = get(loginStatus);
-//         // console.log(fortyTwo);
-//         // console.log(tfa);
-//         // return true;
-//         return (fortyTwo && tfa);
-//       }
-//     ]
-//   }),
-//   '/profile/*': wrap({
-//     component: ProfilePage,
-//     conditions: [
-//       (detail) => {
-//         const { fortyTwo, tfa } = get(loginStatus);
-//         // console.log(fortyTwo);
-//         // console.log(tfa);
-//         // return true;
-//         return (fortyTwo && tfa);
-//       }
-//     ]
-//   }),
-//   '/profile': wrap({
-//         // Use a dynamically-loaded component for this
-//         asyncComponent: () => import('./ProfilePage.svelte'),
-//         // Adding one pre-condition that's an async function
-//         conditions: [
-//           async (detail) => {
-//             // Make a network request, which are async operations
-//             const response = await fetch('http://transcendance:8080/api/v2/user')
-//             const data = await response.json()
-//             // Return true to continue loading the component, or false otherwise
-//             if (data.isAdmin) {
-//               return true
-//             }
-//             else {
-//               return false
-//             }
-//           }
-//         ]
-//       }),
-//   '/unauthorized-access': UnauthorizedAccessPage,
-//   '*': NotFound
-// };
-
-export const primaryRoutes = {
-  "/": SplashPage,
-  '/test': wrap({
-    component: TestPage,
-    conditions: [
-      (detail) => {
-        // const user = get(userStore);  // seems like get(store) is not an option
-        // // const user = userStore;
-        // // console.log(fortyTwo);
-        // // console.log(tfa);
-        // console.log('in /test what is in user')
-        // console.log(user)
-
-        // you moron $userStore is a Svelte Abreviation, this is .JS, duh
-        // let user = $userStore;
-        let user;
-        const unsub = userStore.subscribe(value => {
-          user = value;
-        });
-        console.log('in /test what is in userStore directly')
-        console.log(user)
-
-        // return true;
-        // obvi this doesn't work cuz skips to true after no user...
-          // you gotta make the condition the true and the everything else false
-        // if (user && user.statusCode && user.statusCode === 403)
-        // if (user !== null) {
-        if (user && user.username) {
-          unsub();
-          return true;
-        } else {
-          unsub();
-          return false;
-        }
-      }
-    ]
-  }),
-  // '/test': wrap({
-  //   component: TestPage,
-  //   conditions: [
-  //     async(detail) => {
-  //       // THIS SHIT TOTALLY WORKS
-  //       const user = await fetch('http://transcendance:8080/api/v2/user')
-  //       .then((resp) => resp.json())
-
-  //       console.log('in /test what is in user')
-  //       console.log(user)
-
-  //       if (user && user.username)
-  //         return true;
-  //       else
-  //         return false;
-  //     }
-  //   ]
-  // }),
-  '/2fa': TwoFactorAuthentication,
-  "/profile": ProfilePage,
-  "/profile/*": ProfilePage,
-  '/unauthorized-access': UnauthorizedAccessPage,
-  "*": NotFound
-};
-
-// export const primaryRoutes = {
-//   "/": SplashPage,
-//   "/profile": ProfilePage,
-//   "/game": GamePage,
-//   "/chat": ChatPage,
-//   "*": NotFound
-// };
-
-
-// i might need to add /profile/* and such to make the nested routers work
-
-// ok maybe these need to be in their own files?
-
-
-
-// export const gameRoutes = {
-//   "/": GamePage,
-//   "*": NotFound
-// };
-
-// export const chatRoutes = {
-//   "/": ChatPage,
-//   "*": NotFound
-// };
-
-</script>
\ No newline at end of file