🐐
This commit is contained in:
@@ -1,10 +1,16 @@
|
||||
<script lang="ts">
|
||||
import '../app.css';
|
||||
import Header from "$lib/header.svelte";
|
||||
import favicon from '$lib/assets/favicon.svg';
|
||||
import { page } from '$app/state';
|
||||
|
||||
let { children } = $props();
|
||||
</script>
|
||||
|
||||
{#if page.url.pathname !== '/auth'}
|
||||
<Header />
|
||||
{/if}
|
||||
|
||||
<svelte:head>
|
||||
<link rel="icon" href={favicon} />
|
||||
</svelte:head>
|
||||
|
||||
@@ -5,67 +5,530 @@
|
||||
|
||||
let cards = $state([]);
|
||||
let loading = $state(false);
|
||||
let boosters = $state(null);
|
||||
let countdown = $state(null);
|
||||
let countdownDisplay = $state('');
|
||||
let countdownInterval = null;
|
||||
|
||||
onMount(() => {
|
||||
if (!localStorage.getItem('token')) goto('/auth');
|
||||
let phase = $state('idle');
|
||||
let flippedCards = $state([]);
|
||||
let fanVisible = $state(false);
|
||||
let packRef = $state(null);
|
||||
let overlayPackRef = $state(null);
|
||||
|
||||
onMount(async () => {
|
||||
if (!localStorage.getItem('token')) { goto('/auth'); return; }
|
||||
await fetchBoosters();
|
||||
return () => clearInterval(countdownInterval);
|
||||
});
|
||||
|
||||
async function fetchBoosters() {
|
||||
const res = await fetch('http://localhost:8000/boosters', {
|
||||
headers: { Authorization: `Bearer ${localStorage.getItem('token')}` }
|
||||
});
|
||||
if (res.status === 401) { goto('/auth'); return; }
|
||||
const [count, countdownTs] = await res.json();
|
||||
boosters = count;
|
||||
countdown = countdownTs ? new Date(countdownTs) : null;
|
||||
startCountdown();
|
||||
}
|
||||
|
||||
function startCountdown() {
|
||||
clearInterval(countdownInterval);
|
||||
if (!countdown || boosters >= 5) return;
|
||||
countdownInterval = setInterval(() => {
|
||||
const nextTick = new Date(countdown.getTime() + 5 * 60 * 60 * 1000);
|
||||
const diff = nextTick - Date.now();
|
||||
if (diff <= 0) { clearInterval(countdownInterval); fetchBoosters(); return; }
|
||||
const h = Math.floor(diff / 3600000);
|
||||
const m = Math.floor((diff % 3600000) / 60000);
|
||||
const s = Math.floor((diff % 60000) / 1000);
|
||||
countdownDisplay = `${String(h).padStart(2,'0')}:${String(m).padStart(2,'0')}:${String(s).padStart(2,'0')}`;
|
||||
}, 1000);
|
||||
}
|
||||
|
||||
function delay(ms) { return new Promise(r => setTimeout(r, ms)); }
|
||||
|
||||
// Get the screen position of the idle pack so the overlay pack starts there
|
||||
function getPackRect() {
|
||||
if (!packRef) return { top: window.innerHeight / 2, left: window.innerWidth / 2 };
|
||||
const rect = packRef.getBoundingClientRect();
|
||||
return { top: rect.top, left: rect.left, width: rect.width, height: rect.height };
|
||||
}
|
||||
|
||||
let overlayPackStyle = $state('');
|
||||
|
||||
async function openPack() {
|
||||
if (loading || boosters === 0 || phase !== 'idle') return;
|
||||
loading = true;
|
||||
try {
|
||||
const res = await fetch('http://localhost:8000/pack/10', {
|
||||
headers: { Authorization: `Bearer ${localStorage.getItem('token')}` }
|
||||
});
|
||||
if (res.status === 401) { goto('/auth'); return; }
|
||||
cards = await res.json();
|
||||
} catch (e) {
|
||||
console.error(e);
|
||||
} finally {
|
||||
loading = false;
|
||||
|
||||
const rect = getPackRect();
|
||||
overlayPackStyle = `position:fixed; top:${rect.top}px; left:${rect.left}px; width:${rect.width}px; height:${rect.height}px;`;
|
||||
|
||||
phase = 'darkening';
|
||||
await delay(600);
|
||||
|
||||
phase = 'ripping';
|
||||
await delay(900);
|
||||
|
||||
phase = 'dropping';
|
||||
|
||||
// Fetch while pack is sliding away
|
||||
const fetchPromise = fetch('http://localhost:8000/open_pack', {
|
||||
method: 'POST',
|
||||
headers: { Authorization: `Bearer ${localStorage.getItem('token')}` }
|
||||
});
|
||||
|
||||
await delay(700);
|
||||
|
||||
const res = await fetchPromise;
|
||||
if (!res.ok) { phase = 'idle'; loading = false; return; }
|
||||
cards = await res.json();
|
||||
flippedCards = new Array(cards.length).fill(false);
|
||||
boosters -= 1;
|
||||
if (boosters < 5 && !countdown) { countdown = new Date(); startCountdown(); }
|
||||
|
||||
phase = 'fanning';
|
||||
await delay(50);
|
||||
fanVisible = true;
|
||||
await delay(800);
|
||||
|
||||
phase = 'flipping';
|
||||
const isMobile = window.innerWidth <= 640;
|
||||
const indices = isMobile
|
||||
? [...Array(cards.length).keys()] // 0,1,2,3,4 top to bottom
|
||||
: [...Array(cards.length).keys()].reverse(); // 4,3,2,1,0 right to left
|
||||
|
||||
for (let i of indices) {
|
||||
await delay(350);
|
||||
flippedCards = flippedCards.map((v, idx) => idx === i ? true : v);
|
||||
}
|
||||
|
||||
phase = 'done';
|
||||
loading = false;
|
||||
}
|
||||
|
||||
function close() {
|
||||
phase = 'idle';
|
||||
cards = [];
|
||||
flippedCards = [];
|
||||
fanVisible = false;
|
||||
}
|
||||
|
||||
const FOIL_RARITIES = new Set(['super_rare', 'epic', 'legendary']);
|
||||
|
||||
// Compute fan positions for each card
|
||||
function fanStyle(i, total) {
|
||||
const isMobile = window.innerWidth <= 640;
|
||||
if (isMobile) {
|
||||
return `--tx: 0px; --ty: 0px;`;
|
||||
}
|
||||
// Cards fan out horizontally from center
|
||||
const spread = Math.min(320, (window.innerWidth - 100) / total);
|
||||
const offset = (i - (total - 1) / 2) * spread;
|
||||
return `--tx: ${offset}px; --ty: 0px;`;
|
||||
}
|
||||
</script>
|
||||
|
||||
<main>
|
||||
<button onclick={openPack} disabled={loading}>
|
||||
{loading ? "Opening..." : "Open Pack"}
|
||||
</button>
|
||||
|
||||
<div class="pack">
|
||||
{#each cards as card}
|
||||
<Card {card} />
|
||||
{/each}
|
||||
<div class="top">
|
||||
<h1 class="pack-count">
|
||||
{#if boosters !== null}{boosters}/5 BOOSTER PACKS REMAINING{/if}
|
||||
</h1>
|
||||
{#if boosters !== null && boosters < 5 && countdownDisplay}
|
||||
<p class="countdown">{countdownDisplay} until next pack</p>
|
||||
{/if}
|
||||
</div>
|
||||
|
||||
<!-- Idle pack -->
|
||||
{#if boosters !== null && boosters > 0 && phase === 'idle'}
|
||||
<div class="pack-wrap" bind:this={packRef}>
|
||||
<button class="pack-btn" onclick={openPack}>
|
||||
<div class="booster-pack">
|
||||
<div class="pack-shine"></div>
|
||||
<div class="pack-stripe top-stripe"></div>
|
||||
<div class="pack-stripe bottom-stripe"></div>
|
||||
<div class="pack-logo">
|
||||
<img src="https://upload.wikimedia.org/wikipedia/en/8/80/Wikipedia-logo-v2.svg" alt="W" />
|
||||
</div>
|
||||
</div>
|
||||
</button>
|
||||
</div>
|
||||
{/if}
|
||||
|
||||
{#if phase !== 'idle'}
|
||||
<div class="overlay" class:visible={phase !== 'idle'}>
|
||||
|
||||
{#if phase === 'darkening' || phase === 'ripping' || phase === 'dropping'}
|
||||
<div class="overlay-pack-wrap" style={overlayPackStyle} class:dropping={phase === 'dropping'}>
|
||||
<div class="pack-top-flap" class:rip={phase === 'ripping' || phase === 'dropping'}></div>
|
||||
<div class="booster-pack overlay-pack" class:no-top={phase === 'ripping' || phase === 'dropping'}>
|
||||
<div class="pack-shine"></div>
|
||||
<div class="pack-stripe bottom-stripe"></div>
|
||||
<div class="pack-logo">
|
||||
<img src="https://upload.wikimedia.org/wikipedia/en/8/80/Wikipedia-logo-v2.svg" alt="W" />
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
{/if}
|
||||
|
||||
{#if phase === 'fanning' || phase === 'flipping' || phase === 'done'}
|
||||
<div class="fan-wrap">
|
||||
{#each cards as card, i}
|
||||
{@const flipped = flippedCards[i]}
|
||||
{@const foil = FOIL_RARITIES.has(card.card_rarity)}
|
||||
<div
|
||||
class="fan-card"
|
||||
class:fan-visible={fanVisible}
|
||||
class:foil-reveal={flipped && foil}
|
||||
style="--i: {i};"
|
||||
>
|
||||
<div class="card-flipper" class:flipped>
|
||||
<div class="card-face back"><div class="card-back-face"></div></div>
|
||||
<div class="card-face front"><Card {card} /></div>
|
||||
</div>
|
||||
</div>
|
||||
{/each}
|
||||
</div>
|
||||
|
||||
{#if phase === 'done'}
|
||||
<button class="close-btn" onclick={close}>Close</button>
|
||||
{/if}
|
||||
{/if}
|
||||
|
||||
</div>
|
||||
{/if}
|
||||
</main>
|
||||
|
||||
<style>
|
||||
@import url('https://fonts.googleapis.com/css2?family=Cinzel:wght@400;700;900&family=Crimson+Text:ital,wght@0,400;0,600;1,400&display=swap');
|
||||
|
||||
main {
|
||||
min-height: 100vh;
|
||||
background: #887859;
|
||||
height: 100vh;
|
||||
overflow: hidden;
|
||||
background: #0d0a04;
|
||||
padding: 2rem;
|
||||
}
|
||||
|
||||
button {
|
||||
display: block;
|
||||
margin: 0 auto 2rem;
|
||||
padding: 10px 28px;
|
||||
font-family: 'Cinzel', serif;
|
||||
font-size: 14px;
|
||||
background: #2e1c05;
|
||||
color: #f0d080;
|
||||
border: 1px solid #6b4c1e;
|
||||
border-radius: 6px;
|
||||
cursor: pointer;
|
||||
}
|
||||
|
||||
button:hover:not(:disabled) {
|
||||
background: #3d2507;
|
||||
}
|
||||
|
||||
.pack {
|
||||
display: flex;
|
||||
flex-wrap: wrap;
|
||||
gap: 16px;
|
||||
flex-direction: column;
|
||||
align-items: center;
|
||||
}
|
||||
|
||||
.top {
|
||||
text-align: center;
|
||||
margin-bottom: 3rem;
|
||||
}
|
||||
|
||||
.pack-count {
|
||||
font-family: 'Cinzel', serif;
|
||||
font-size: clamp(16px, 3vw, 26px);
|
||||
font-weight: 900;
|
||||
color: #f0d080;
|
||||
letter-spacing: 0.1em;
|
||||
margin: 0 0 0.4rem;
|
||||
}
|
||||
|
||||
.countdown {
|
||||
font-family: 'Crimson Text', serif;
|
||||
font-size: 15px;
|
||||
font-style: italic;
|
||||
color: rgba(240, 180, 80, 0.6);
|
||||
margin: 0;
|
||||
}
|
||||
|
||||
.pack-wrap {
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
}
|
||||
|
||||
.pack-btn {
|
||||
all: unset;
|
||||
cursor: pointer;
|
||||
display: block;
|
||||
}
|
||||
|
||||
/* ── Booster pack ── */
|
||||
.booster-pack {
|
||||
position: relative;
|
||||
width: 300px;
|
||||
height: 460px;
|
||||
background: #dfdbcf;
|
||||
background-image: linear-gradient(
|
||||
to right,
|
||||
transparent,
|
||||
rgba(255,255,255,0.35) 5%,
|
||||
transparent 8%,
|
||||
transparent 92%,
|
||||
rgba(0,0,0,0.12) 95%,
|
||||
transparent
|
||||
);
|
||||
border-radius: 10px;
|
||||
box-shadow: 0 8px 32px rgba(0,0,0,0.5), 0 0 0 1.5px rgba(0,0,0,0.3);
|
||||
overflow: hidden;
|
||||
transition: transform 0.2s, box-shadow 0.2s;
|
||||
}
|
||||
|
||||
.pack-btn:hover .booster-pack {
|
||||
transform: translateY(-6px) scale(1.02);
|
||||
box-shadow: 0 16px 48px rgba(0,0,0,0.6), 0 0 0 1.5px rgba(0,0,0,0.3);
|
||||
}
|
||||
|
||||
.pack-shine {
|
||||
position: absolute;
|
||||
inset: 0;
|
||||
background-image: repeating-linear-gradient(
|
||||
90deg,
|
||||
rgba(255,255,255,0.08) 0%,
|
||||
rgba(255,255,255,0.08) 1px,
|
||||
transparent 1px,
|
||||
transparent 8px
|
||||
);
|
||||
pointer-events: none;
|
||||
}
|
||||
|
||||
.pack-stripe {
|
||||
position: absolute;
|
||||
left: 0;
|
||||
width: 100%;
|
||||
height: 9%;
|
||||
background-image: repeating-linear-gradient(
|
||||
90deg,
|
||||
rgba(255,255,255,0.25),
|
||||
rgba(0,0,0,0.15) 2%,
|
||||
rgba(0,0,0,0.08) 3%,
|
||||
transparent 3%,
|
||||
transparent 4%
|
||||
);
|
||||
box-shadow: 0 0 12px 8px rgba(255,255,255,0.15);
|
||||
}
|
||||
|
||||
.top-stripe { top: 0; }
|
||||
.bottom-stripe { bottom: 0; }
|
||||
|
||||
.pack-logo {
|
||||
position: absolute;
|
||||
inset: 0;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
}
|
||||
|
||||
.pack-logo img {
|
||||
width: 100px;
|
||||
opacity: 0.8;
|
||||
filter: grayscale(1);
|
||||
}
|
||||
|
||||
/* no-top clips the pack body below the tear line */
|
||||
.booster-pack.no-top {
|
||||
clip-path: inset(60px 0 0 0 round 0 0 10px 10px);
|
||||
}
|
||||
|
||||
/* ── Overlay ── */
|
||||
.overlay {
|
||||
position: fixed;
|
||||
overflow: hidden;
|
||||
inset: 0;
|
||||
z-index: 200;
|
||||
background: rgba(0,0,0,0);
|
||||
transition: background 0.6s ease;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
}
|
||||
|
||||
.overlay.visible {
|
||||
background: rgba(0,0,0,0.88);
|
||||
}
|
||||
|
||||
/* ── Overlay pack ── */
|
||||
.overlay-pack-wrap {
|
||||
z-index: 210;
|
||||
}
|
||||
|
||||
.overlay-pack {
|
||||
box-shadow:
|
||||
0 0 60px 20px rgba(240,200,80,0.2),
|
||||
0 8px 32px rgba(0,0,0,0.6);
|
||||
transition: none;
|
||||
}
|
||||
|
||||
/* Top flap */
|
||||
.pack-top-flap {
|
||||
position: absolute;
|
||||
top: 0;
|
||||
left: 0;
|
||||
width: 300px;
|
||||
height: 60px;
|
||||
background: #dfdbcf;
|
||||
background-image: linear-gradient(to right, transparent, rgba(255,255,255,0.35) 5%, transparent 8%);
|
||||
background-image: repeating-linear-gradient(
|
||||
90deg,
|
||||
rgba(255,255,255,0.18) 0%,
|
||||
rgba(255,255,255,0.18) 1px,
|
||||
transparent 1px,
|
||||
transparent 8px
|
||||
);
|
||||
border-radius: 10px 10px 0 0;
|
||||
transform-origin: top left;
|
||||
z-index: 220;
|
||||
transition: transform 0.5s cubic-bezier(0.4, 0, 0.2, 1), opacity 0.4s;
|
||||
box-shadow: 0 0 0 1.5px rgba(0,0,0,0.3);
|
||||
}
|
||||
|
||||
.pack-top-flap.rip {
|
||||
transform: rotate(-40deg) translateX(-20px) translateY(-40px);
|
||||
opacity: 0;
|
||||
}
|
||||
|
||||
/* Pack slides straight down */
|
||||
.overlay-pack-wrap.dropping {
|
||||
animation: pack-drop 0.7s cubic-bezier(0.4, 0, 1, 1) forwards;
|
||||
}
|
||||
|
||||
@keyframes pack-drop {
|
||||
0% { transform: translateY(0); opacity: 1; }
|
||||
100% { transform: translateY(110vh); opacity: 0; }
|
||||
}
|
||||
|
||||
/* ── Card back ── */
|
||||
.card-back-face {
|
||||
width: 300px;
|
||||
height: 412px;
|
||||
background: linear-gradient(135deg, #d3d0c4 0%, #dfdbcf 100%);
|
||||
border-radius: 14px;
|
||||
border: 10px solid rgba(255,255,255,1);
|
||||
box-shadow: 0 4px 20px rgba(0,0,0,0.4);
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
}
|
||||
|
||||
.card-back-face::after {
|
||||
content: '';
|
||||
width: 90px;
|
||||
height: 90px;
|
||||
background: url('https://upload.wikimedia.org/wikipedia/en/8/80/Wikipedia-logo-v2.svg') center/contain no-repeat;
|
||||
opacity: 0.8;
|
||||
filter: grayscale(1);
|
||||
}
|
||||
|
||||
/* Cards fly in from the bottom */
|
||||
.fan-card {
|
||||
opacity: 0;
|
||||
transform: translateY(80vh);
|
||||
transition: opacity 0.5s ease, transform 0.7s cubic-bezier(0.2, 0.8, 0.3, 1);
|
||||
transition-delay: calc(var(--i) * 0.1s);
|
||||
}
|
||||
|
||||
.fan-card.fan-visible {
|
||||
opacity: 1;
|
||||
transform: translateY(0);
|
||||
}
|
||||
|
||||
.fan-wrap {
|
||||
display: flex;
|
||||
flex-direction: row;
|
||||
gap: 16px;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
padding: 2rem;
|
||||
position: relative;
|
||||
z-index: 220;
|
||||
flex-wrap: wrap;
|
||||
}
|
||||
/* ── Card flip ── */
|
||||
.card-flipper {
|
||||
width: 300px;
|
||||
height: 412px;
|
||||
position: relative;
|
||||
transform-style: preserve-3d;
|
||||
transition: transform 0.6s cubic-bezier(0.4, 0, 0.2, 1);
|
||||
}
|
||||
|
||||
.card-flipper.flipped {
|
||||
transform: rotateY(180deg);
|
||||
}
|
||||
|
||||
.card-face {
|
||||
position: absolute;
|
||||
inset: 0;
|
||||
backface-visibility: hidden;
|
||||
-webkit-backface-visibility: hidden;
|
||||
}
|
||||
|
||||
.card-face.back {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
}
|
||||
|
||||
.card-face.front {
|
||||
transform: rotateY(180deg);
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
}
|
||||
|
||||
.fan-card.foil-reveal {
|
||||
animation: foil-flash 1.4s ease forwards;
|
||||
}
|
||||
|
||||
@keyframes foil-flash {
|
||||
0% { filter: brightness(1); }
|
||||
40% { filter: brightness(2.8) saturate(2.5); }
|
||||
100% { filter: brightness(1); }
|
||||
}
|
||||
|
||||
/* ── Close ── */
|
||||
.close-btn {
|
||||
position: fixed;
|
||||
bottom: 2rem;
|
||||
left: 50%;
|
||||
transform: translateX(-50%);
|
||||
padding: 10px 32px;
|
||||
background: rgba(60,30,5,0.85);
|
||||
color: #f0d080;
|
||||
border: 1.5px solid #c8861a;
|
||||
border-radius: 6px;
|
||||
font-family: 'Cinzel', serif;
|
||||
font-size: 13px;
|
||||
font-weight: 700;
|
||||
cursor: pointer;
|
||||
letter-spacing: 0.08em;
|
||||
transition: background 0.15s;
|
||||
z-index: 230;
|
||||
}
|
||||
|
||||
.close-btn:hover {
|
||||
background: rgba(100,60,10,0.9);
|
||||
}
|
||||
|
||||
/* ── Mobile ── */
|
||||
@media (max-width: 640px) {
|
||||
.fan-wrap {
|
||||
flex-direction: column;
|
||||
flex-wrap: nowrap;
|
||||
overflow-y: auto;
|
||||
overflow-x: hidden;
|
||||
max-height: calc(100vh - 120px);
|
||||
overscroll-behavior: contain;
|
||||
padding: 1rem;
|
||||
justify-content: flex-start;
|
||||
}
|
||||
|
||||
.card-flipper {
|
||||
width: 280px;
|
||||
height: 430px;
|
||||
transition: transform 0.6s cubic-bezier(0.4, 0, 0.2, 1);
|
||||
}
|
||||
|
||||
.card-flipper.flipped {
|
||||
transform: rotateX(180deg);
|
||||
}
|
||||
|
||||
.card-face.front {
|
||||
transform: rotateX(180deg);
|
||||
}
|
||||
}
|
||||
</style>
|
||||
Reference in New Issue
Block a user