attempts at a better splash page, not the best results

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

@@ -3,6 +3,8 @@
   import { push } from "svelte-spa-router";
   import { onMount } from 'svelte';
 
+  import JumpingPotatoes from "../pieces/JumpingPotatoes.svelte";
+
   let user;
 
 	onMount(async () => {
@@ -63,7 +65,8 @@
   </h2>
 </header>
 
-<Canvas/>
+<!-- <Canvas/> -->
+<!-- <JumpingPotatoes/> -->
 
 <!-- doesn't work :( -->
 <!-- <svelte:body style="overflow-y: hidden"/> -->
@@ -75,9 +78,22 @@
   } */
 
 
+  /*c'est une exemple d'animation, tu peux aussi etre plus precis avec des pourcentages au lieu de 'from' 'tot*/
+  /* @keyframes potatoes_move {
+    from {background-position: 0 0;}
+    to {background-position: 100% 0;}
+  } */
+
+  /* body {
+    background: url('img/potato_logo.png') repeat;
+    animation: potatoes_move 5s linear infinite;
+  } */
+
   header {
     /* didn't work... */
-    overflow-y: hidden;
+    /* overflow-y: hidden; */
+    /* background: url('img/potato_logo.png') repeat;
+    animation: potatoes_move 5s linear infinite; */
   }
 
 

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

@@ -0,0 +1,69 @@
+<script lang="ts">
+
+/*
+Ok what do i want?
+  - i want the number of potatoes to depend on how big the screen is
+  - i want them to move up and right in a loop
+    - i want them to jump up and right
+  - i want their size to be fixed or variable?
+
+*/
+
+  let loaded = false;
+  // i feel like they told me not to do this, new Image(), isn't there another way?
+  // never mind they do seem to do this shit...
+  // no idea if this should be in onMount...
+  const img = new Image();
+  img.src = 'img/potato_logo.png';
+  img.onload = () => {
+    loaded = true;
+    // not sure if i'll use this...
+  }
+
+  // $: scaleRatio = window.innerWidth / 10;
+  $: scaleRatio = 30;
+  $: nPotoatoRows = Math.floor(window.innerHeight / 200);
+  $: nPotoatoCols = Math.floor(window.innerWidth / 200);
+  // $: spacing = (canvas.height - (img.height / scaleRatio * (nPotoatoRows - 1) )) / nPotoatoRows;
+
+
+  // let's start with just 1 potato, then add a row, then a grid
+
+
+  // $: spacing = (window.innerHeight - (img.height / scaleRatio * (nPotoatoRows - 1) )) / nPotoatoRows;
+
+  // maybe like an array of potatos ?
+  // No array, do what Hugo said instead
+  // $: potatoGrid = [], nPotoatoRows, nPotoatoCols;
+  // let potatoGrid = [];
+
+</script>
+
+<div></div>
+
+
+
+
+<style>
+
+/*c'est une exemple d'animation, tu peux aussi etre plus precis avec des pourcentages au lieu de 'from' 'tot*/
+@keyframes potatoes_move {
+  from {background-position: 0 0;}
+  to {background-position: 100% 0;}
+}
+
+div {
+  width: 100%;
+  height: 100%;
+  /* doesnt like this url looking in /public/build, not /public */
+  /* works if you do /img/... but not img/... */
+  background: url('/img/potato_logo.png') no-repeat;
+  background-size: 50px;
+  animation: potatoes_move 20s linear infinite;
+}
+
+
+
+</style>
+
+

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

@@ -8,10 +8,12 @@ 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,
+  '/test': JumpingPotatoes,
   '/2fa': TwoFactorAuthentication,
   '/game': wrap({
     component: Game,