Fuck Fuck FUCK these stupid little media cards

src/lib/components/media/mediaCard.svelte

@@ -0,0 +1,61 @@
+<script>
+    export let mediaData
+    import { onMount } from 'svelte'
+
+    let card, cardGlare, cardWidth, cardHeight
+
+    onMount(() => {
+        const cardRect = card.getBoundingClientRect()
+        cardWidth = cardRect.width
+        cardHeight = cardRect.height
+    })
+
+    const rotateCard = (event) => {
+        const cardRect = card.getBoundingClientRect()
+        const cardCenterX = cardRect.left + cardWidth / 2
+        const cardCenterY = cardRect.top + cardHeight / 2
+        const x = ((event.x - cardCenterX) * 2) / cardWidth
+        const y = ((cardCenterY - event.y) * 2) / cardHeight
+
+        let angle = Math.atan(x / y) // <-- This is NOT how you convert to polar cooridates, well it kinda is exept now x is y and y is x because we want to calculate the direction the glare should be comming from
+        const distanceFromCorner = Math.sqrt((x - 1) ** 2 + (y - 1) ** 2) // <-- This is a cool little trick, the -1 on the x an y coordinate is effective the same as saying "make the origin of the glare [1, 1]"
+
+        cardGlare.style.backgroundImage = `linear-gradient(${angle}rad, rgba(255, 255, 255, 0) ${distanceFromCorner * 50 + 50}%, rgba(255, 255, 255, 0.15) ${
+            distanceFromCorner * 50 + 60
+        }%, rgba(255, 255, 255, 0.05) 100%)`
+
+        card.style.transform = `rotateX(${y * 10}deg) rotateY(${x * 10}deg)`
+    }
+</script>
+
+<div id="song-card-wrapper" class="h-fit" on:mousemove={(event) => rotateCard(event)} role="button" tabindex="0" on:mouseleave={() => (card.style.transform = null)}>
+    <div bind:this={card} id="song-card" class="relative w-56 transition-all duration-200 ease-out">
+        <img id="card-image" class="aspect-square w-full rounded-md object-cover" src="{mediaData.image}?width=224&height=224" alt="{mediaData.name} art" />
+        <div bind:this={cardGlare} id="song-glare" class="absolute top-0 aspect-square w-full opacity-0 transition-opacity duration-1000 ease-out"></div>
+        <div id="card-label" class="items-end p-2 text-sm">
+            <span>
+                {mediaData.name}
+                <div class="text-neutral-400">{Array.from(mediaData.artists, (artist) => artist.name).join(', ')}</div>
+            </span>
+        </div>
+    </div>
+</div>
+
+<style>
+    #song-card-wrapper {
+        perspective: 1000px;
+        perspective-origin: center;
+    }
+    #song-card:hover {
+        scale: 1.05;
+    }
+    #song-card:hover > #song-glare {
+        opacity: 1;
+    }
+    /* #card-image {
+        mask-image: linear-gradient(to bottom, black, rgba(0, 0, 0, 0));
+    }
+    #card-label {
+        background-image: linear-gradient(to top, black 0%, transparent 30%);
+    } */
+</style>

src/routes/+page.server.js

@@ -10,8 +10,6 @@ export const load = async ({ locals, fetch }) => {
     const recommendationsData = await recommendationResponse.json()
     const { recommendations, errors } = recommendationsData
 
-    console.log(recommendations[0].artists)
-
     return {
         user: locals.user,
         recommendations,

src/routes/+page.svelte

@@ -1,6 +1,7 @@
 <script>
     import { onMount } from 'svelte'
     import { newestAlert } from '$lib/stores/alertStore.js'
+    import Card from '$lib/components/media/mediaCard.svelte'
 
     export let data
 
@@ -24,18 +25,14 @@
         <p class="text-neutral-400">Click the menu in the top left corner and go to Settings &gt; Connections to link to your accounts</p>
     </main>
 {:else}
-    <main id="recommendations-wrapper" class="p-12 pt-24">
+    <main id="recommendations-wrapper" class="pt-24">
-        <section class="no-scrollbar flex gap-6 overflow-scroll">
+        <section>
+            <h1 class="px-12 text-4xl"><strong>Listen Again</strong></h1>
+            <div class="no-scrollbar flex gap-6 overflow-scroll px-12 py-4">
                 {#each data.recommendations as recommendation}
-                <div class="aspect-[4/5] w-56 flex-shrink-0">
+                    <Card mediaData={recommendation} />
-                    <!-- Add placeholder image for when recommendation.image is null -->
-                    <img class="aspect-square w-full rounded-md object-cover" src="{recommendation.image}?width=224&height=224" alt="{recommendation.name} art" />
-                    <div class="mt-3 px-1 text-sm">
-                        <div>{recommendation.name}</div>
-                        <div class="text-neutral-400">{Array.from(recommendation.artists, (artist) => artist.name).join(', ')}</div>
-                    </div>
-                </div>
                 {/each}
+            </div>
         </section>
     </main>
 {/if}