scrapping my attempt at a new version of the SplashPage, we'll just use Cherif's, it's way better

This commit is contained in:
Me
2023-01-09 21:27:28 +01:00
parent 9eececb045
commit f44170338a
5 changed files with 684 additions and 666 deletions

File diff suppressed because it is too large Load Diff

File diff suppressed because one or more lines are too long

View File

@@ -65,8 +65,7 @@
</h2> </h2>
</header> </header>
<!-- <Canvas/> --> <Canvas/>
<!-- <JumpingPotatoes/> -->
<!-- doesn't work :( --> <!-- doesn't work :( -->
<!-- <svelte:body style="overflow-y: hidden"/> --> <!-- <svelte:body style="overflow-y: hidden"/> -->
@@ -77,23 +76,9 @@
overflow-y: hidden; overflow-y: hidden;
} */ } */
/*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 { header {
/* didn't work... */ /* didn't work... */
/* overflow-y: hidden; */ overflow-y: hidden;
/* background: url('img/potato_logo.png') repeat;
animation: potatoes_move 5s linear infinite; */
} }

View File

@@ -1,69 +0,0 @@
<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>

View File

@@ -13,7 +13,6 @@ import JumpingPotatoes from '../pieces/JumpingPotatoes.svelte';
export const primaryRoutes = { export const primaryRoutes = {
'/': SplashPage, '/': SplashPage,
'/test': JumpingPotatoes,
'/2fa': TwoFactorAuthentication, '/2fa': TwoFactorAuthentication,
'/game': wrap({ '/game': wrap({
component: Game, component: Game,