From 8cb21649002befa0809677b036187c00ba5a48df Mon Sep 17 00:00:00 2001
From: fero <hi@evan.graphics>
Date: Mon, 11 Mar 2024 09:23:37 -0700
Subject: [PATCH] clean: remove card components

---
 src/components/Card.svelte         |  78 --------
 src/components/CardCarousel.svelte | 283 -----------------------------
 2 files changed, 361 deletions(-)
 delete mode 100644 src/components/Card.svelte
 delete mode 100644 src/components/CardCarousel.svelte

diff --git a/src/components/Card.svelte b/src/components/Card.svelte
deleted file mode 100644
index f013004..0000000
--- a/src/components/Card.svelte
+++ /dev/null
@@ -1,78 +0,0 @@
-<script lang="ts">
-	export let compatibility: "goated" | "based" | "cringe";
-	export let image: string;
-	export let title: string;
-	export let releaseYear: number;
-
-	function capitalizeFirstLetter(string: typeof compatibility) {
-		if (string === "goated") {
-			return "Good";
-		} else if (string === "based") {
-			return "Okay";
-		} else if (string === "cringe") {
-			return "Bad";
-		}
-	}
-</script>
-
-<div class="card">
-	<div class="card-image">
-		<img src={image || ""} alt="Mario Odyssey" />
-	</div>
-	<div class="info">
-		<h3 class="header">{title}</h3>
-		<div class="content">Released: {releaseYear}</div>
-		<div>
-			Compatibility: <span class={compatibility}>{capitalizeFirstLetter(compatibility)}</span>
-		</div>
-	</div>
-</div>
-
-<style>
-	.card {
-		aspect-ratio: 1.5/2;
-		width: fit-content;
-		height: 450px;
-		background-color: rgb(47, 57, 76);
-		border-radius: 8px;
-		padding: 12px;
-		display: flex;
-		flex-direction: column;
-		gap: 12px;
-		box-shadow: 0 0 24px rgb(32, 33, 45);
-		border: solid thin rgb(101, 109, 132);
-	}
-
-	.card-image {
-		border-radius: 4px;
-		overflow: hidden;
-		width: 100%;
-		height: 100%;
-		border: solid thin rgb(101, 109, 132);
-	}
-
-	.card-image > img {
-		object-fit: cover;
-		width: 100%;
-		height: 100%;
-	}
-
-	.header {
-		font-size: 28px;
-	}
-
-	.goated {
-		color: #78dca0;
-		text-shadow: 0px 0px 8px #78dca0;
-	}
-
-	.based {
-		color: #eab876;
-		text-shadow: 0px 0px 8px #eab876;
-	}
-
-	.cringe {
-		color: #ff3a3a;
-		text-shadow: 0px 0px 8px #ff3a3a;
-	}
-</style>
diff --git a/src/components/CardCarousel.svelte b/src/components/CardCarousel.svelte
deleted file mode 100644
index dbe33c4..0000000
--- a/src/components/CardCarousel.svelte
+++ /dev/null
@@ -1,283 +0,0 @@
-<script lang="ts">
-	import { onMount, tick } from "svelte";
-	import Card from "$components/Card.svelte";
-	import type { ICard } from "$lib/util/types";
-
-	export let cards: ICard[];
-
-	let selectedCard = 0;
-	let instantSelectedCard = 0;
-
-	let animating = false;
-
-	async function go(dir: number) {
-		if (dir > 0) {
-			cardScroll({
-				deltaY: 100,
-				shiftKey: true,
-				preventDefault: () => {},
-			} as any);
-		} else {
-			cardScroll({
-				deltaY: -100,
-				shiftKey: true,
-				preventDefault: () => {},
-			} as any);
-		}
-	}
-
-	onMount(() => {
-		const key = (e: KeyboardEvent) => {
-			// right arrow, run cardScroll with positive
-			if (e.key === "ArrowRight") {
-				e.preventDefault();
-				go(1);
-			}
-			if (e.key === "ArrowLeft") {
-				e.preventDefault();
-				go(-1);
-			}
-		};
-
-		window.addEventListener("keydown", key);
-
-		return () => {
-			window.removeEventListener("keydown", key);
-		};
-	});
-
-	async function cardScroll(e: WheelEvent) {
-		if (!e.shiftKey || window.innerWidth < 560) return;
-		e.preventDefault();
-		const animations: Animation[] = [];
-		const duration = 500;
-		const easing = "cubic-bezier(.29,1.03,.5,1)";
-		if (animating) return;
-		animating = true;
-		if (e.deltaY > 0) {
-			instantSelectedCard = (selectedCard + 1) % cards.length;
-		} else {
-			instantSelectedCard = (selectedCard - 1 + cards.length) % cards.length;
-		}
-		const cardLeft = document.querySelector(".card-3d.left") as HTMLElement;
-		const cardRight = document.querySelector(".card-3d.right") as HTMLElement;
-		const cardCenter = document.querySelector(
-			".card-3d:not(.left):not(.right):not(.transition-left):not(.transition-right)",
-		) as HTMLElement;
-		const cardTransitionLeft = document.querySelector(
-			".card-3d.transition-left",
-		) as HTMLElement;
-		const cardTransitionRight = document.querySelector(
-			".card-3d.transition-right",
-		) as HTMLElement;
-		cardTransitionLeft.style.display = "block";
-		cardTransitionRight.style.display = "block";
-		setTimeout(async () => {
-			selectedCard = instantSelectedCard;
-			await tick();
-			cardTransitionLeft.style.display = "none";
-			cardTransitionRight.style.display = "none";
-			animations.forEach((anim) => anim.cancel());
-			setTimeout(() => {
-				animating = false;
-			}, 10);
-		}, duration);
-		const cardLeftBounds = cardLeft.getBoundingClientRect();
-		const cardRightBounds = cardRight.getBoundingClientRect();
-		const cardCenterBounds = cardCenter.getBoundingClientRect();
-		if (e.deltaY > 0) {
-			animations.push(
-				cardRight.animate(
-					[
-						{
-							transform: `translateX(${cardCenterBounds.left - cardRightBounds.left + 62}px)`,
-						},
-					],
-					{
-						duration,
-						fill: "forwards",
-						easing,
-					},
-				),
-				cardCenter.animate(
-					[
-						{
-							transform: `translateX(${cardLeftBounds.left - cardCenterBounds.left - 83}px) perspective(1000px) translateZ(-150px) rotateY(-50deg)`,
-						},
-					],
-					{
-						duration,
-						fill: "forwards",
-						easing,
-					},
-				),
-				cardLeft.animate(
-					[
-						{
-							opacity: 0,
-							transform:
-								"perspective(1000px) translateZ(-150px) rotateY(-80deg) translateX(-400px)",
-						},
-					],
-					{
-						duration,
-						fill: "forwards",
-						easing,
-					},
-				),
-				cardTransitionLeft.animate(
-					[
-						{
-							transform:
-								"translateX(1150px) perspective(1000px) translateZ(-400px) rotateY(80deg)",
-							opacity: 0,
-						},
-						{
-							transform:
-								"translateX(1013px) perspective(1000px) translateZ(-150px) rotateY(50deg)",
-							opacity: 1,
-						},
-					],
-					{
-						duration,
-						fill: "forwards",
-						easing,
-					},
-				),
-			);
-		} else {
-			animations.push(
-				cardLeft.animate(
-					[
-						{
-							transform: `translateX(${cardCenterBounds.left - cardLeftBounds.left + 83}px)`,
-						},
-					],
-					{
-						duration,
-						fill: "forwards",
-						easing,
-					},
-				),
-				cardCenter.animate(
-					[
-						{
-							transform: `translateX(${cardRightBounds.left - cardCenterBounds.left - 62}px) perspective(1000px) translateZ(-150px) rotateY(50deg)`,
-						},
-					],
-					{
-						duration,
-						fill: "forwards",
-						easing,
-					},
-				),
-				cardRight.animate(
-					[
-						{
-							opacity: 0,
-							transform:
-								"perspective(1000px) translateZ(-150px) rotateY(80deg) translateX(400px)",
-						},
-					],
-					{
-						duration,
-						fill: "forwards",
-						easing,
-					},
-				),
-				cardTransitionRight.animate(
-					[
-						{
-							transform:
-								"translateX(-1150px) perspective(1000px) translateZ(-400px) rotateY(-80deg)",
-							opacity: 0,
-						},
-						{
-							transform:
-								"translateX(-1013px) perspective(1000px) translateZ(-150px) rotateY(-50deg)",
-							opacity: 1,
-						},
-					],
-					{
-						duration,
-						fill: "forwards",
-						easing,
-					},
-				),
-			);
-		}
-	}
-</script>
-
-<!-- look, i don't hate the disabled, but this
-     site's concept is pretty inaccessible as it
-	 is (and i just so happen to be partially blind
-	 in an eye, so), also we do have keyboard events
-	 we just register them through onMount() so fuck
-	 you a11y -->
-
-<!-- svelte-ignore a11y-click-events-have-key-events -->
-<!-- svelte-ignore a11y-no-static-element-interactions -->
-<div class="cards" on:wheel={cardScroll}>
-	<div class="card-3d transition-left">
-		<Card {...cards[(instantSelectedCard + 1) % cards.length]} />
-	</div>
-	<!-- svelte-ignore a11y-click-events-have-key-events -->
-	<!-- svelte-ignore a11y-no-static-element-interactions -->
-	<div class="card-3d left" on:click={() => go(-1)}>
-		<Card {...cards[selectedCard - 1 < 0 ? cards.length - 1 : selectedCard - 1]} />
-	</div>
-	<div class="card-3d">
-		<Card {...cards[selectedCard]} />
-	</div>
-	<!-- svelte-ignore a11y-click-events-have-key-events -->
-	<div class="card-3d right" on:click={() => go(1)}>
-		<Card {...cards[(selectedCard + 1) % cards.length]} />
-	</div>
-	<div class="card-3d transition-right">
-		<Card {...cards[(instantSelectedCard + 2) % cards.length]} />
-	</div>
-</div>
-
-<style>
-	.cards {
-		display: flex;
-		max-width: 100%;
-	}
-
-	.card-3d {
-		z-index: 3;
-	}
-
-	.card-3d.left {
-		transform: perspective(1000px) translateZ(-150px) rotateY(-50deg);
-		z-index: 2;
-	}
-
-	.card-3d.right {
-		transform: perspective(1000px) translateZ(-150px) rotateY(50deg);
-		z-index: 2;
-	}
-
-	.card-3d {
-		position: relative;
-	}
-
-	.card-3d.transition-left,
-	.card-3d.transition-right {
-		opacity: 0;
-		z-index: 1;
-		display: none;
-	}
-
-	@media (max-width: 560px) {
-		.card-3d {
-			transform: none !important;
-		}
-
-		.cards {
-			flex-direction: column;
-			gap: 24px;
-		}
-	}
-</style>