534 lines
14 KiB
Svelte
534 lines
14 KiB
Svelte
<script>
|
|
import { API_URL, WS_URL } from '$lib/api.js';
|
|
import { apiFetch } from '$lib/api.js';
|
|
import { goto } from '$app/navigation';
|
|
import { onMount } from 'svelte';
|
|
import Card from '$lib/Card.svelte';
|
|
|
|
let cards = $state([]);
|
|
let loading = $state(false);
|
|
let boosters = $state(null);
|
|
let countdown = $state(null);
|
|
let countdownDisplay = $state('');
|
|
let countdownInterval = null;
|
|
|
|
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 apiFetch(`${API_URL}/boosters`);
|
|
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;
|
|
|
|
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 = apiFetch(`${API_URL}/open_pack`, {
|
|
method: 'POST'
|
|
});
|
|
|
|
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>
|
|
<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 {
|
|
height: 100vh;
|
|
overflow: hidden;
|
|
background: #0d0a04;
|
|
padding: 2rem;
|
|
display: flex;
|
|
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(41px 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: 41px;
|
|
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.25),
|
|
rgba(0,0,0,0.15) 2%,
|
|
rgba(0,0,0,0.08) 3%,
|
|
transparent 3%,
|
|
transparent 4%
|
|
);
|
|
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> |