clean: remove card components
This commit is contained in:
fero
parent
7ec589101b
commit
8cb2164900
2 changed files with 0 additions and 361 deletions
|
|
@ -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>
|
||||
|
|
@ -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>
|
||||
Loading…
Reference in a new issue