0
0
Fork 0
This commit is contained in:
not-nullptr 2024-03-07 11:35:43 +00:00
parent cdda72288f
commit 25884e797e
19 changed files with 1264 additions and 125 deletions

0
module.d.ts vendored Normal file
View File

857
package-lock.json generated

File diff suppressed because it is too large Load Diff

View File

@ -17,14 +17,19 @@
"@sveltejs/vite-plugin-svelte": "^3.0.0",
"prettier": "^3.1.1",
"prettier-plugin-svelte": "^3.1.2",
"sharp": "^0.33.2",
"svelte": "^4.2.7",
"svelte-check": "^3.6.0",
"svgo": "^3.2.0",
"tslib": "^2.4.1",
"typescript": "^5.0.0",
"vite": "^5.0.3"
"vite": "^5.0.3",
"vite-plugin-image-optimizer": "^1.1.7"
},
"type": "module",
"dependencies": {
"@sveltejs/enhanced-img": "^0.1.8"
"@sveltejs/adapter-static": "^3.0.1",
"@sveltejs/enhanced-img": "^0.1.8",
"vite-plugin-vsharp": "^1.7.3"
}
}

Binary file not shown.

After

Width:  |  Height:  |  Size: 141 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 208 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 1.7 MiB

BIN
src/assets/cards/totk.webp Normal file

Binary file not shown.

After

Width:  |  Height:  |  Size: 1.5 MiB

View File

@ -1,9 +1,72 @@
<div class="card">mayro odisy</div>
<script lang="ts">
export let compatibility: "goated" | "based" | "cringe";
export let image: string;
export let title: string;
export let releaseYear: number;
function capitalizeFirstLetter(string: string) {
return string.charAt(0).toUpperCase() + string.slice(1);
}
</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: 300px;
background-color: red;
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>

View File

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

View File

@ -0,0 +1,25 @@
<script lang="ts">
export let size: number;
export let color: string;
</script>
<svg
xmlns="http://www.w3.org/2000/svg"
xmlns:xlink="http://www.w3.org/1999/xlink"
version="1.1"
width={size}
height={size}
viewBox="0 0 100 125"
style="enable-background:new 0 0 100 100;"
xml:space="preserve"
fill={color}
><path
d="M32,41v18c0,9.9,8.1,18,18,18c9.9,0,18-8.1,18-18V41c0-9.9-8.1-18-18-18C40.1,23,32,31.1,32,41z M50,27c7.7,0,14,6.3,14,14 v18c0,7.7-6.3,14-14,14s-14-6.3-14-14V41C36,33.3,42.3,27,50,27z"
/><path
d="M50,44c1.1,0,2-0.9,2-2v-6c0-1.1-0.9-2-2-2s-2,0.9-2,2v6C48,43.1,48.9,44,50,44z"
/><path
d="M48.6,92.4C49,92.8,49.5,93,50,93s1-0.2,1.4-0.6l5-5c0.8-0.8,0.8-2,0-2.8s-2-0.8-2.8,0L50,88.2l-3.6-3.6 c-0.8-0.8-2-0.8-2.8,0c-0.8,0.8-0.8,2,0,2.8L48.6,92.4z"
/><path
d="M48.6,7.6l-5,5c-0.8,0.8-0.8,2,0,2.8C44,15.8,44.5,16,45,16s1-0.2,1.4-0.6l3.6-3.6l3.6,3.6C54,15.8,54.5,16,55,16 s1-0.2,1.4-0.6c0.8-0.8,0.8-2,0-2.8l-5-5C50.6,6.8,49.4,6.8,48.6,7.6z"
/></svg
>

View File

@ -31,6 +31,7 @@ h6 {
body {
background-color: black;
height: fit-content;
overflow-x: hidden;
}
::-webkit-scrollbar {

View File

@ -1,4 +1,5 @@
{
"landingHeader": "suyu",
"landingOne": "Suyu is an open-source, Switch compatible emulator with almost full coverage of the game library."
"landingOne": "Suyu is an open-source, Switch compatible emulator with almost full coverage of the game library.",
"landingCardHeader": "We care about preservation"
}

View File

@ -0,0 +1,6 @@
export interface ICard {
title: string;
compatibility: "goated" | "based" | "cringe";
image: string;
releaseYear: number;
}

View File

@ -17,14 +17,15 @@
<style>
.below {
margin-top: 80px;
z-index: 5;
position: relative;
display: flex;
flex-direction: column;
}
.header {
position: fixed;
position: sticky;
/* on overscroll, stick to the top */
overscroll-behavior: contain;
top: 0;
left: 0;
width: 100%;
@ -47,15 +48,14 @@
.bullshit-flex-placeholder {
/* 100vh height */
flex-grow: 0;
flex-shrink: 0;
height: calc(100vh - 80px);
height: calc(100vh - 162px);
width: 100%;
}
.bg-below-gradient {
width: 100%;
flex-grow: 1;
flex-shrink: 0;
background-color: var(--page-bg);
background-size: 100% 100%;
z-index: -1;

1
src/routes/+layout.ts Normal file
View File

@ -0,0 +1 @@
export const prerender = true;

View File

@ -1,15 +1,20 @@
<script>
<script lang="ts">
import Logo from "$components/Logo.svelte";
import { onMount } from "svelte";
import { onMount, tick } from "svelte";
import strings from "$lib/data/strings.json";
import Card from "$components/Card.svelte";
import odyssey from "$assets/cards/Super-Mario-Odyssey.jpg";
import ScrollIcon from "$components/ScrollIcon.svelte";
import totk from "$assets/cards/totk.webp";
import scarletviolet from "$assets/cards/scarlet-violet.webp";
import CardCarousel from "$components/CardCarousel.svelte";
let logoSizes = {
small: 256,
large: 378,
};
let logoSize = logoSizes.small;
let logoSize = logoSizes.large;
onMount(() => {
function onResize() {
@ -22,7 +27,10 @@
onResize();
window.addEventListener("resize", onResize);
return () => window.removeEventListener("resize", onResize);
return () => {
window.removeEventListener("resize", onResize);
};
});
</script>
@ -37,11 +45,67 @@
</div>
</div>
<div class="below">
<Card />
<div class="absolute-center">
<CardCarousel
cards={[
{
title: "Super Mario Odyssey",
compatibility: "goated",
image: odyssey,
releaseYear: 2017,
},
{
title: "The Legend of Zelda: Tears of the Kingdom",
compatibility: "based",
image: totk,
releaseYear: 2023,
},
{
title: "Pokémon Scarlet and Pokémon Violet",
compatibility: "cringe",
image: scarletviolet,
releaseYear: 2022,
},
]}
/>
<div class="instructions">
<div class="key">Shift</div>
<span class="plus">+</span>
<ScrollIcon size={48} color="#bebbdd" />
</div>
</div>
</div>
</div>
<style>
.instructions {
display: flex;
align-items: center;
margin-top: 24px;
opacity: 0.25;
position: absolute;
top: 100%;
left: 50%;
transform: translateX(-50%);
}
.plus {
margin-left: 15px;
}
.plus,
.key {
margin-top: -14px;
}
.key {
font-size: 12px;
background-color: rgb(59, 55, 78);
border-radius: 4px;
border: solid 1px rgb(137, 129, 176);
padding: 4px 12px;
}
.container {
width: calc(100vw - 17px);
height: calc(100vh - 160px);
@ -73,12 +137,32 @@
}
}
@media (max-width: 560px) {
.absolute-center {
position: relative !important;
transform: none !important;
left: 0 !important;
display: flex;
flex-direction: column;
align-items: center;
}
.instructions {
display: none;
}
}
.below {
margin-top: 80px;
width: 100%;
height: 100vh;
display: flex;
align-items: center;
flex-direction: column;
min-height: 100vh;
height: fit-content;
padding-bottom: 80px;
position: relative;
}
.absolute-center {
position: absolute;
left: 50%;
transform: translateX(-50%);
}
</style>

View File

@ -1,5 +1,5 @@
import adapter from '@sveltejs/adapter-auto';
import { vitePreprocess } from '@sveltejs/vite-plugin-svelte';
import adapter from "@sveltejs/adapter-auto";
import { vitePreprocess } from "@sveltejs/vite-plugin-svelte";
/** @type {import('@sveltejs/kit').Config} */
const config = {
@ -13,9 +13,10 @@ const config = {
// See https://kit.svelte.dev/docs/adapters for more information about adapters.
adapter: adapter(),
alias: {
$components: './src/components'
}
}
$components: "./src/components",
$assets: "./src/assets",
},
},
};
export default config;

View File

@ -9,7 +9,8 @@
"skipLibCheck": true,
"sourceMap": true,
"strict": true,
"moduleResolution": "bundler"
"moduleResolution": "bundler",
"noImplicitAny": false
}
// Path aliases are handled by https://kit.svelte.dev/docs/configuration#alias
//

View File

@ -1,6 +1,7 @@
import { sveltekit } from '@sveltejs/kit/vite';
import { defineConfig } from 'vite';
import { sveltekit } from "@sveltejs/kit/vite";
import { defineConfig } from "vite";
import { ViteImageOptimizer } from "vite-plugin-image-optimizer";
export default defineConfig({
plugins: [sveltekit()]
plugins: [ViteImageOptimizer(), sveltekit()],
});