feat(treasure): add treasure quest, quest modal, island node, quest widget
This commit is contained in:
shafin-r
718
src/components/ChestOpenModal.tsx
Normal file
718
src/components/ChestOpenModal.tsx
Normal file
@ -0,0 +1,718 @@
|
||||
import { useState, useEffect, useRef } from "react";
|
||||
import type { QuestNode } from "../types/quest";
|
||||
|
||||
// ─── Styles ───────────────────────────────────────────────────────────────────
|
||||
const S = `
|
||||
@import url('https://fonts.googleapis.com/css2?family=Cinzel:wght@700;900&family=Nunito:wght@800;900&display=swap');
|
||||
|
||||
/* ══ FULL SCREEN OVERLAY ══ */
|
||||
.com-overlay {
|
||||
position:fixed; inset:0; z-index:80;
|
||||
display:flex; flex-direction:column;
|
||||
align-items:center; justify-content:center;
|
||||
overflow:hidden;
|
||||
}
|
||||
|
||||
/* ── Sky/sea background that animates in ── */
|
||||
.com-bg {
|
||||
position:absolute; inset:0;
|
||||
background:
|
||||
radial-gradient(ellipse 80% 60% at 50% 80%, rgba(0,60,120,0.9) 0%, transparent 70%),
|
||||
radial-gradient(ellipse 60% 40% at 50% 20%, rgba(80,0,160,0.7) 0%, transparent 60%),
|
||||
linear-gradient(180deg, #050010 0%, #0a0520 40%, #020818 100%);
|
||||
animation: comBgIn 0.5s ease both;
|
||||
}
|
||||
@keyframes comBgIn {
|
||||
from{ opacity:0; } to{ opacity:1; }
|
||||
}
|
||||
|
||||
/* ── Stars in background ── */
|
||||
.com-star {
|
||||
position:absolute; border-radius:50%;
|
||||
background:white; pointer-events:none;
|
||||
animation:comStarTwinkle var(--sdur) ease-in-out infinite;
|
||||
animation-delay:var(--sdelay);
|
||||
}
|
||||
@keyframes comStarTwinkle {
|
||||
0%,100%{ opacity:0.3; transform:scale(1); }
|
||||
50% { opacity:1; transform:scale(1.4); }
|
||||
}
|
||||
|
||||
/* ── Gold radial burst (appears on open) ── */
|
||||
.com-burst {
|
||||
position:absolute; inset:0;
|
||||
display:flex; align-items:center; justify-content:center;
|
||||
pointer-events:none; z-index:2;
|
||||
}
|
||||
.com-burst-ring {
|
||||
position:absolute; border-radius:50%;
|
||||
border:3px solid rgba(251,191,36,0.6);
|
||||
animation: comBurstRing var(--brdur) ease-out forwards;
|
||||
animation-delay: var(--brdelay);
|
||||
opacity:0;
|
||||
}
|
||||
@keyframes comBurstRing {
|
||||
0% { opacity:0.9; transform:scale(0.1); }
|
||||
100%{ opacity:0; transform:scale(var(--brs)); }
|
||||
}
|
||||
|
||||
/* ── Ray beams (crepuscular rays) ── */
|
||||
.com-rays {
|
||||
position:absolute; inset:0;
|
||||
display:flex; align-items:center; justify-content:center;
|
||||
pointer-events:none; z-index:1;
|
||||
}
|
||||
.com-ray {
|
||||
position:absolute;
|
||||
width:3px;
|
||||
height:55vh;
|
||||
border-radius:100px;
|
||||
background:linear-gradient(180deg,rgba(251,191,36,0.5) 0%,transparent 100%);
|
||||
transform-origin:50% 100%;
|
||||
bottom:50%;
|
||||
left:calc(50% - 1.5px);
|
||||
transform:rotate(var(--angle)) scaleY(0);
|
||||
animation:comRayIn 0.6s ease-out forwards;
|
||||
animation-delay:var(--raydelay);
|
||||
}
|
||||
@keyframes comRayIn {
|
||||
0% { transform:rotate(var(--angle)) scaleY(0); opacity:0; }
|
||||
40% { opacity:0.8; }
|
||||
100%{ transform:rotate(var(--angle)) scaleY(1); opacity:0.15; }
|
||||
}
|
||||
|
||||
/* ── Particle explosion ── */
|
||||
.com-particle {
|
||||
position:absolute; border-radius:50%;
|
||||
pointer-events:none; z-index:4;
|
||||
animation:comParticleOut var(--pdur) cubic-bezier(0.25,0.8,0.35,1) forwards;
|
||||
animation-delay:var(--pdelay);
|
||||
opacity:0;
|
||||
}
|
||||
@keyframes comParticleOut {
|
||||
0% { opacity:1; transform:translate(0,0) scale(1) rotate(0deg); }
|
||||
80% { opacity:0.7; }
|
||||
100%{ opacity:0; transform:translate(var(--ptx),var(--pty)) scale(0.2) rotate(var(--prot)); }
|
||||
}
|
||||
|
||||
/* ── Coin emojis bursting ── */
|
||||
.com-coin {
|
||||
position:absolute;
|
||||
font-size:var(--csize);
|
||||
pointer-events:none; z-index:4;
|
||||
animation:comCoinOut var(--cdur) cubic-bezier(0.2,0.9,0.3,1) forwards;
|
||||
animation-delay:var(--cdelay);
|
||||
opacity:0;
|
||||
}
|
||||
@keyframes comCoinOut {
|
||||
0% { opacity:0; transform:translate(0,0) rotate(0deg) scale(0.3); }
|
||||
12% { opacity:1; }
|
||||
100%{ opacity:0; transform:translate(var(--ctx),var(--cty)) rotate(var(--crot)) scale(1.1); }
|
||||
}
|
||||
|
||||
/* ── Floating sparkles (stay on screen) ── */
|
||||
.com-sparkle {
|
||||
position:absolute; pointer-events:none; z-index:3;
|
||||
font-size:var(--spsize);
|
||||
animation:comSparkleFloat var(--spdur) ease-in-out infinite;
|
||||
animation-delay:var(--spdelay);
|
||||
opacity:0.7;
|
||||
}
|
||||
@keyframes comSparkleFloat {
|
||||
0%,100%{ transform:translateY(0) rotate(0deg) scale(1); opacity:0.6; }
|
||||
50% { transform:translateY(-18px) rotate(180deg) scale(1.2); opacity:1; }
|
||||
}
|
||||
|
||||
/* ── XP number that flies up from chest ── */
|
||||
.com-xp-blast {
|
||||
position:absolute; pointer-events:none; z-index:5;
|
||||
top:50%; left:50%;
|
||||
font-family:'Cinzel',serif;
|
||||
font-size:2.6rem; font-weight:900;
|
||||
color:#fbbf24;
|
||||
text-shadow:0 0 30px rgba(251,191,36,1),0 0 60px rgba(251,191,36,0.7),0 0 100px rgba(251,191,36,0.3);
|
||||
white-space:nowrap;
|
||||
animation:comXPBlast 2s cubic-bezier(0.2,0.8,0.3,1) forwards;
|
||||
}
|
||||
@keyframes comXPBlast {
|
||||
0% { opacity:0; transform:translate(-50%,-40%) scale(0.4); filter:blur(4px); }
|
||||
15% { opacity:1; transform:translate(-50%,-60%) scale(1.3); filter:blur(0); }
|
||||
60% { opacity:1; transform:translate(-50%,-90%) scale(1); }
|
||||
100%{ opacity:0; transform:translate(-50%,-130%) scale(0.8); }
|
||||
}
|
||||
|
||||
/* ── Main card ── */
|
||||
.com-card {
|
||||
position:relative; z-index:6;
|
||||
width:calc(100% - 2.5rem); max-width:340px;
|
||||
border-radius:28px; overflow:hidden;
|
||||
display:flex; flex-direction:column; align-items:center;
|
||||
padding:0;
|
||||
box-shadow:0 0 80px rgba(251,191,36,0.2), 0 24px 64px rgba(0,0,0,0.7);
|
||||
animation:comCardIn 0.5s cubic-bezier(0.34,1.56,0.64,1) both;
|
||||
animation-delay:0.1s;
|
||||
}
|
||||
@keyframes comCardIn {
|
||||
from{ opacity:0; transform:scale(0.8) translateY(24px); }
|
||||
to { opacity:1; transform:scale(1) translateY(0); }
|
||||
}
|
||||
|
||||
/* Gold shimmer top border */
|
||||
.com-card::before {
|
||||
content:''; position:absolute; top:0; left:0; right:0; height:2px; z-index:1;
|
||||
background:linear-gradient(90deg,transparent 0%,#f59e0b 30%,#fbbf24 50%,#f59e0b 70%,transparent 100%);
|
||||
background-size:200% 100%;
|
||||
animation:comShimmer 2s linear infinite;
|
||||
}
|
||||
@keyframes comShimmer {
|
||||
0% { background-position:200% 0; }
|
||||
100%{ background-position:-200% 0; }
|
||||
}
|
||||
|
||||
/* Card inner bg */
|
||||
.com-card-inner {
|
||||
width:100%; padding:1.75rem 1.6rem 1.6rem;
|
||||
background:linear-gradient(160deg,#12083a 0%,#0c0525 60%,#090320 100%);
|
||||
border:1.5px solid rgba(251,191,36,0.25);
|
||||
border-radius:28px;
|
||||
display:flex; flex-direction:column; align-items:center; gap:0;
|
||||
}
|
||||
|
||||
/* ── Phase label ── */
|
||||
.com-label {
|
||||
font-family:'Cinzel',serif;
|
||||
font-size:0.62rem; font-weight:700; letter-spacing:0.2em;
|
||||
text-transform:uppercase; color:rgba(251,191,36,0.55);
|
||||
margin-bottom:1.2rem; text-align:center;
|
||||
}
|
||||
|
||||
/* ── Chest area ── */
|
||||
.com-chest-area {
|
||||
position:relative; width:140px; height:140px;
|
||||
display:flex; align-items:center; justify-content:center;
|
||||
margin-bottom:1.25rem; cursor:pointer;
|
||||
}
|
||||
|
||||
/* Glow platform beneath chest */
|
||||
.com-glow-pad {
|
||||
position:absolute; bottom:6px; left:50%;
|
||||
transform:translateX(-50%);
|
||||
width:100px; height:24px; border-radius:50%;
|
||||
background:radial-gradient(ellipse at center,rgba(251,191,36,0.45) 0%,transparent 70%);
|
||||
animation:comGlowPad 1.8s ease-in-out infinite;
|
||||
filter:blur(4px);
|
||||
}
|
||||
@keyframes comGlowPad {
|
||||
0%,100%{ transform:translateX(-50%) scaleX(1); opacity:0.7; }
|
||||
50% { transform:translateX(-50%) scaleX(1.2); opacity:1; }
|
||||
}
|
||||
|
||||
/* Orbit ring */
|
||||
.com-orbit {
|
||||
position:absolute; inset:8px; border-radius:50%;
|
||||
border:1.5px dashed rgba(251,191,36,0.2);
|
||||
animation:comOrbit 8s linear infinite;
|
||||
}
|
||||
@keyframes comOrbit { from{transform:rotate(0deg);} to{transform:rotate(360deg);} }
|
||||
.com-orbit-dot {
|
||||
position:absolute; top:-5px; left:50%; transform:translateX(-50%);
|
||||
width:8px; height:8px; border-radius:50%;
|
||||
background:#fbbf24; box-shadow:0 0 10px #fbbf24;
|
||||
}
|
||||
|
||||
/* The chest emoji */
|
||||
.com-chest {
|
||||
font-size:5.5rem; position:relative; z-index:2;
|
||||
filter:drop-shadow(0 8px 20px rgba(251,191,36,0.45));
|
||||
transition:filter 0.2s;
|
||||
}
|
||||
.com-chest.idle {
|
||||
animation:comChestIdle 3s ease-in-out infinite;
|
||||
}
|
||||
@keyframes comChestIdle {
|
||||
0%,100%{ transform:translateY(0) rotate(-2deg); }
|
||||
50% { transform:translateY(-6px) rotate(2deg); }
|
||||
}
|
||||
.com-chest.shake {
|
||||
animation:comChestShake 0.55s cubic-bezier(0.36,0.07,0.19,0.97) both;
|
||||
}
|
||||
@keyframes comChestShake {
|
||||
0%,100%{ transform:rotate(0deg) scale(1); }
|
||||
10% { transform:rotate(-14deg) scale(1.06); }
|
||||
25% { transform:rotate(14deg) scale(1.1); }
|
||||
40% { transform:rotate(-10deg) scale(1.07); }
|
||||
55% { transform:rotate(10deg) scale(1.12); }
|
||||
70% { transform:rotate(-6deg) scale(1.06); }
|
||||
85% { transform:rotate(6deg) scale(1.04); }
|
||||
}
|
||||
.com-chest.opening {
|
||||
animation:comChestOpen 0.5s cubic-bezier(0.34,1.56,0.64,1) both;
|
||||
}
|
||||
@keyframes comChestOpen {
|
||||
0% { transform:scale(0.7); filter:brightness(0.4) drop-shadow(0 8px 20px rgba(251,191,36,0.3)); }
|
||||
50% { transform:scale(1.25); filter:brightness(1.8) drop-shadow(0 0 50px rgba(251,191,36,1)); }
|
||||
100%{ transform:scale(1); filter:brightness(1) drop-shadow(0 8px 30px rgba(251,191,36,0.6)); }
|
||||
}
|
||||
|
||||
/* ── Tap prompt ── */
|
||||
.com-tap-title {
|
||||
font-family:'Cinzel',serif;
|
||||
font-size:1.2rem; font-weight:900; color:white;
|
||||
text-align:center; margin-bottom:0.3rem;
|
||||
animation:comPulse 1.8s ease-in-out infinite;
|
||||
}
|
||||
@keyframes comPulse {
|
||||
0%,100%{ opacity:1; transform:scale(1); }
|
||||
50% { opacity:0.65; transform:scale(0.97); }
|
||||
}
|
||||
.com-tap-sub {
|
||||
font-family:'Nunito',sans-serif;
|
||||
font-size:0.75rem; font-weight:800;
|
||||
color:rgba(255,255,255,0.35); text-align:center; margin-bottom:1.5rem;
|
||||
letter-spacing:0.06em;
|
||||
}
|
||||
|
||||
/* ── Shaking text ── */
|
||||
.com-shake-text {
|
||||
font-family:'Cinzel',serif;
|
||||
font-size:1.1rem; font-weight:900; color:#fbbf24;
|
||||
text-align:center; margin-bottom:0.3rem;
|
||||
animation:comShakeText 0.3s ease-in-out infinite alternate;
|
||||
}
|
||||
@keyframes comShakeText {
|
||||
from{ transform:translateX(-3px); }
|
||||
to { transform:translateX(3px); }
|
||||
}
|
||||
.com-shake-dots {
|
||||
font-size:1.4rem; text-align:center; margin-bottom:1.5rem;
|
||||
animation:comShakeText 0.25s ease-in-out infinite alternate;
|
||||
}
|
||||
|
||||
/* ── Reward rows ── */
|
||||
.com-rewards-title {
|
||||
font-family:'Cinzel',serif;
|
||||
font-size:0.65rem; font-weight:700; letter-spacing:0.18em;
|
||||
text-transform:uppercase; color:rgba(251,191,36,0.5);
|
||||
text-align:center; margin-bottom:0.85rem;
|
||||
}
|
||||
.com-rewards { display:flex; flex-direction:column; gap:0.55rem; width:100%; margin-bottom:1.1rem; }
|
||||
.com-reward-row {
|
||||
display:flex; align-items:center; gap:0.85rem;
|
||||
padding:0.8rem 1rem;
|
||||
background:rgba(255,255,255,0.04);
|
||||
border:1px solid rgba(251,191,36,0.18);
|
||||
border-radius:16px;
|
||||
animation:comRowIn 0.5s cubic-bezier(0.34,1.56,0.64,1) both;
|
||||
}
|
||||
@keyframes comRowIn {
|
||||
from{ opacity:0; transform:translateY(18px) scale(0.88); }
|
||||
to { opacity:1; transform:translateY(0) scale(1); }
|
||||
}
|
||||
.com-reward-icon { font-size:1.5rem; flex-shrink:0; filter:drop-shadow(0 2px 8px rgba(251,191,36,0.5)); }
|
||||
.com-reward-lbl {
|
||||
font-family:'Cinzel',serif;
|
||||
font-size:0.65rem; font-weight:700; letter-spacing:0.1em; text-transform:uppercase;
|
||||
color:rgba(255,255,255,0.4); margin-bottom:0.12rem;
|
||||
}
|
||||
.com-reward-val {
|
||||
font-family:'Nunito',sans-serif;
|
||||
font-size:1.05rem; font-weight:900;
|
||||
color:#fbbf24;
|
||||
text-shadow:0 0 16px rgba(251,191,36,0.6);
|
||||
}
|
||||
|
||||
/* Special XP row highlight */
|
||||
.com-reward-row.xp-row {
|
||||
border-color:rgba(251,191,36,0.35);
|
||||
background:rgba(251,191,36,0.06);
|
||||
}
|
||||
|
||||
/* ── CTA button ── */
|
||||
.com-cta {
|
||||
width:100%; padding:1rem;
|
||||
background:linear-gradient(135deg,#fbbf24,#f59e0b);
|
||||
border:none; border-radius:16px; cursor:pointer;
|
||||
font-family:'Cinzel',serif;
|
||||
font-size:1rem; font-weight:900; color:#1a0800;
|
||||
letter-spacing:0.05em;
|
||||
box-shadow:0 5px 0 #b45309, 0 8px 24px rgba(251,191,36,0.4);
|
||||
transition:all 0.12s ease;
|
||||
animation:comRowIn 0.5s cubic-bezier(0.34,1.56,0.64,1) both;
|
||||
}
|
||||
.com-cta:hover { transform:translateY(-3px); box-shadow:0 8px 0 #b45309, 0 14px 32px rgba(251,191,36,0.5); }
|
||||
.com-cta:active { transform:translateY(2px); box-shadow:0 3px 0 #b45309; }
|
||||
|
||||
/* ── Skip hint ── */
|
||||
.com-skip {
|
||||
position:absolute; bottom:1.5rem;
|
||||
font-family:'Nunito',sans-serif;
|
||||
font-size:0.65rem; font-weight:700;
|
||||
color:rgba(255,255,255,0.2); letter-spacing:0.1em;
|
||||
text-transform:uppercase; cursor:pointer; z-index:7;
|
||||
transition:color 0.2s;
|
||||
}
|
||||
.com-skip:hover { color:rgba(255,255,255,0.5); }
|
||||
`;
|
||||
|
||||
// ─── Config ───────────────────────────────────────────────────────────────────
|
||||
const PARTICLE_COLORS = [
|
||||
"#fbbf24",
|
||||
"#f59e0b",
|
||||
"#ef4444",
|
||||
"#ec4899",
|
||||
"#a855f7",
|
||||
"#6366f1",
|
||||
"#22d3ee",
|
||||
"#4ade80",
|
||||
"#fb923c",
|
||||
];
|
||||
const COIN_EMOJIS = ["🪙", "💰", "✨", "⭐", "💎", "🌟", "💫", "🏅"];
|
||||
const SPARKLE_EMOJIS = ["✨", "⭐", "💫", "🌟"];
|
||||
|
||||
// Rays at evenly spaced angles
|
||||
const RAYS = Array.from({ length: 12 }, (_, i) => ({
|
||||
id: i,
|
||||
angle: `${(i / 12) * 360}deg`,
|
||||
delay: `${i * 0.04}s`,
|
||||
}));
|
||||
|
||||
// Burst rings
|
||||
const BURST_RINGS = [
|
||||
{ id: 0, size: "3", dur: "0.7s", delay: "0s" },
|
||||
{ id: 1, size: "5", dur: "0.9s", delay: "0.1s" },
|
||||
{ id: 2, size: "8", dur: "1.1s", delay: "0.2s" },
|
||||
{ id: 3, size: "12", dur: "1.4s", delay: "0.3s" },
|
||||
];
|
||||
|
||||
// Stars in background — stable between renders
|
||||
const STARS = Array.from({ length: 40 }, (_, i) => ({
|
||||
id: i,
|
||||
w: 1 + ((i * 7) % 3),
|
||||
top: `${(i * 17 + 3) % 95}%`,
|
||||
left: `${(i * 23 + 11) % 97}%`,
|
||||
dur: `${2 + ((i * 3) % 4)}s`,
|
||||
delay: `${(i * 7) % 3}s`,
|
||||
}));
|
||||
|
||||
// Sparkles floating around the revealed card
|
||||
const SPARKLES = Array.from({ length: 8 }, (_, i) => ({
|
||||
id: i,
|
||||
emoji: SPARKLE_EMOJIS[i % 4],
|
||||
size: `${0.9 + (i % 3) * 0.35}rem`,
|
||||
top: `${10 + ((i * 12) % 75)}%`,
|
||||
left: `${5 + ((i * 14) % 85)}%`,
|
||||
dur: `${2 + (i % 3) * 1.2}s`,
|
||||
delay: `${i * 0.3}s`,
|
||||
}));
|
||||
|
||||
type Phase = "idle" | "shaking" | "opening" | "revealed";
|
||||
|
||||
interface Props {
|
||||
node: QuestNode;
|
||||
onClose: () => void;
|
||||
}
|
||||
|
||||
export const ChestOpenModal = ({ node, onClose }: Props) => {
|
||||
const [phase, setPhase] = useState<Phase>("idle");
|
||||
const [showXP, setShowXP] = useState(false);
|
||||
const timerRef = useRef<ReturnType<typeof setTimeout> | null>(null);
|
||||
|
||||
// Stable particle arrays computed once per mount
|
||||
const particles = useRef(
|
||||
Array.from({ length: 55 }, (_, i) => ({
|
||||
id: i,
|
||||
color: PARTICLE_COLORS[i % PARTICLE_COLORS.length],
|
||||
w: 3 + (i % 3) * 4,
|
||||
tx: ((i % 2 === 0 ? 1 : -1) * (40 + i * 7)) % 200,
|
||||
ty: -(30 + ((i * 11) % 190)),
|
||||
rot: ((i * 23) % 720) - 360,
|
||||
dur: `${0.7 + ((i * 7) % 10) / 10}s`,
|
||||
delay: `${((i * 3) % 8) / 30}s`,
|
||||
})),
|
||||
).current;
|
||||
|
||||
const coins = useRef(
|
||||
Array.from({ length: 18 }, (_, i) => ({
|
||||
id: i,
|
||||
emoji: COIN_EMOJIS[i % COIN_EMOJIS.length],
|
||||
size: `${1 + (i % 3) * 0.45}rem`,
|
||||
tx: (i % 2 === 0 ? 1 : -1) * (30 + ((i * 9) % 180)),
|
||||
ty: -(40 + ((i * 13) % 200)),
|
||||
rot: ((i * 31) % 540) - 270,
|
||||
dur: `${0.75 + ((i * 7) % 8) / 10}s`,
|
||||
delay: `${((i * 5) % 10) / 30}s`,
|
||||
})),
|
||||
).current;
|
||||
|
||||
const tap = () => {
|
||||
if (phase !== "idle") return;
|
||||
setPhase("shaking");
|
||||
timerRef.current = setTimeout(() => {
|
||||
setPhase("opening");
|
||||
setShowXP(true);
|
||||
timerRef.current = setTimeout(() => {
|
||||
setShowXP(false);
|
||||
setPhase("revealed");
|
||||
}, 1800);
|
||||
}, 650);
|
||||
};
|
||||
|
||||
useEffect(
|
||||
() => () => {
|
||||
if (timerRef.current) clearTimeout(timerRef.current);
|
||||
},
|
||||
[],
|
||||
);
|
||||
|
||||
const rewards = [
|
||||
{
|
||||
key: "xp",
|
||||
cls: "xp-row",
|
||||
icon: "⚡",
|
||||
lbl: "XP Gained",
|
||||
val: `+${node.reward.xp} XP`,
|
||||
delay: "0.05s",
|
||||
},
|
||||
...(node.reward.title
|
||||
? [
|
||||
{
|
||||
key: "title",
|
||||
cls: "",
|
||||
icon: "🏴☠️",
|
||||
lbl: "Crew Title",
|
||||
val: node.reward.title,
|
||||
delay: "0.15s",
|
||||
},
|
||||
]
|
||||
: []),
|
||||
...(node.reward.itemLabel
|
||||
? [
|
||||
{
|
||||
key: "item",
|
||||
cls: "",
|
||||
icon: "🎁",
|
||||
lbl: "Item",
|
||||
val: node.reward.itemLabel,
|
||||
delay: "0.25s",
|
||||
},
|
||||
]
|
||||
: []),
|
||||
];
|
||||
|
||||
const chestClass =
|
||||
phase === "idle"
|
||||
? "idle"
|
||||
: phase === "shaking"
|
||||
? "shake"
|
||||
: phase === "opening"
|
||||
? "opening"
|
||||
: "";
|
||||
const chestEmoji = phase === "opening" || phase === "revealed" ? "📬" : "📦";
|
||||
|
||||
return (
|
||||
<div className="com-overlay" onClick={phase === "idle" ? tap : undefined}>
|
||||
<style>{S}</style>
|
||||
|
||||
{/* Background */}
|
||||
<div className="com-bg" />
|
||||
|
||||
{/* Stars */}
|
||||
{STARS.map((s) => (
|
||||
<div
|
||||
key={s.id}
|
||||
className="com-star"
|
||||
style={
|
||||
{
|
||||
width: s.w,
|
||||
height: s.w,
|
||||
top: s.top,
|
||||
left: s.left,
|
||||
"--sdur": s.dur,
|
||||
"--sdelay": s.delay,
|
||||
} as React.CSSProperties
|
||||
}
|
||||
/>
|
||||
))}
|
||||
|
||||
{/* Crepuscular rays (appear on open) */}
|
||||
{(phase === "opening" || phase === "revealed") && (
|
||||
<div className="com-rays">
|
||||
{RAYS.map((r) => (
|
||||
<div
|
||||
key={r.id}
|
||||
className="com-ray"
|
||||
style={
|
||||
{
|
||||
"--angle": r.angle,
|
||||
"--raydelay": r.delay,
|
||||
} as React.CSSProperties
|
||||
}
|
||||
/>
|
||||
))}
|
||||
</div>
|
||||
)}
|
||||
|
||||
{/* Burst rings */}
|
||||
{(phase === "opening" || phase === "revealed") && (
|
||||
<div className="com-burst">
|
||||
{BURST_RINGS.map((r) => (
|
||||
<div
|
||||
key={r.id}
|
||||
className="com-burst-ring"
|
||||
style={
|
||||
{
|
||||
width: "100px",
|
||||
height: "100px",
|
||||
"--brs": r.size,
|
||||
"--brdur": r.dur,
|
||||
"--brdelay": r.delay,
|
||||
} as React.CSSProperties
|
||||
}
|
||||
/>
|
||||
))}
|
||||
</div>
|
||||
)}
|
||||
|
||||
{/* Particle explosion */}
|
||||
{(phase === "opening" || phase === "revealed") && (
|
||||
<>
|
||||
{particles.map((p) => (
|
||||
<div
|
||||
key={p.id}
|
||||
className="com-particle"
|
||||
style={
|
||||
{
|
||||
width: p.w,
|
||||
height: p.w,
|
||||
background: p.color,
|
||||
top: "50%",
|
||||
left: "50%",
|
||||
"--ptx": `${p.tx}px`,
|
||||
"--pty": `${p.ty}px`,
|
||||
"--prot": `${p.rot}deg`,
|
||||
"--pdur": p.dur,
|
||||
"--pdelay": p.delay,
|
||||
} as React.CSSProperties
|
||||
}
|
||||
/>
|
||||
))}
|
||||
{coins.map((c) => (
|
||||
<div
|
||||
key={c.id}
|
||||
className="com-coin"
|
||||
style={
|
||||
{
|
||||
top: "50%",
|
||||
left: "50%",
|
||||
"--csize": c.size,
|
||||
"--ctx": `${c.tx}px`,
|
||||
"--cty": `${c.ty}px`,
|
||||
"--crot": `${c.rot}deg`,
|
||||
"--cdur": c.dur,
|
||||
"--cdelay": c.delay,
|
||||
} as React.CSSProperties
|
||||
}
|
||||
>
|
||||
{c.emoji}
|
||||
</div>
|
||||
))}
|
||||
</>
|
||||
)}
|
||||
|
||||
{/* Floating sparkles in revealed state */}
|
||||
{phase === "revealed" &&
|
||||
SPARKLES.map((sp) => (
|
||||
<div
|
||||
key={sp.id}
|
||||
className="com-sparkle"
|
||||
style={
|
||||
{
|
||||
top: sp.top,
|
||||
left: sp.left,
|
||||
"--spsize": sp.size,
|
||||
"--spdur": sp.dur,
|
||||
"--spdelay": sp.delay,
|
||||
} as React.CSSProperties
|
||||
}
|
||||
>
|
||||
{sp.emoji}
|
||||
</div>
|
||||
))}
|
||||
|
||||
{/* XP blast */}
|
||||
{showXP && <div className="com-xp-blast">+{node.reward.xp} XP</div>}
|
||||
|
||||
{/* Card */}
|
||||
<div className="com-card" onClick={(e) => e.stopPropagation()}>
|
||||
<div className="com-card-inner">
|
||||
<p className="com-label">
|
||||
{phase === "revealed" ? "⚓ Treasure Claimed" : "📦 Treasure Chest"}
|
||||
</p>
|
||||
|
||||
{/* Chest */}
|
||||
<div
|
||||
className="com-chest-area"
|
||||
onClick={phase === "idle" ? tap : undefined}
|
||||
style={{ cursor: phase === "idle" ? "pointer" : "default" }}
|
||||
>
|
||||
{phase !== "revealed" && <div className="com-glow-pad" />}
|
||||
{phase !== "revealed" && (
|
||||
<div className="com-orbit">
|
||||
<div className="com-orbit-dot" />
|
||||
</div>
|
||||
)}
|
||||
<span className={`com-chest ${chestClass}`}>{chestEmoji}</span>
|
||||
</div>
|
||||
|
||||
{/* Phase content */}
|
||||
{phase === "idle" && (
|
||||
<>
|
||||
<p className="com-tap-title">Tap to Open!</p>
|
||||
<p className="com-tap-sub">YOUR HARD WORK HAS PAID OFF, PIRATE</p>
|
||||
</>
|
||||
)}
|
||||
{phase === "shaking" && (
|
||||
<>
|
||||
<p className="com-shake-text">The chest stirs...</p>
|
||||
<p className="com-shake-dots">⚡ ⚡ ⚡</p>
|
||||
</>
|
||||
)}
|
||||
{phase === "revealed" && (
|
||||
<>
|
||||
<p className="com-rewards-title">⚓ Spoils of Victory</p>
|
||||
<div className="com-rewards">
|
||||
{rewards.map((r) => (
|
||||
<div
|
||||
key={r.key}
|
||||
className={`com-reward-row ${r.cls}`}
|
||||
style={{ animationDelay: r.delay }}
|
||||
>
|
||||
<span className="com-reward-icon">{r.icon}</span>
|
||||
<div>
|
||||
<p className="com-reward-lbl">{r.lbl}</p>
|
||||
<p className="com-reward-val">{r.val}</p>
|
||||
</div>
|
||||
</div>
|
||||
))}
|
||||
</div>
|
||||
<button
|
||||
className="com-cta"
|
||||
style={{ animationDelay: rewards.length * 0.1 + "s" }}
|
||||
onClick={onClose}
|
||||
>
|
||||
⚓ Set Sail
|
||||
</button>
|
||||
</>
|
||||
)}
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{/* Skip link for impatient pirates */}
|
||||
{phase === "revealed" && (
|
||||
<p className="com-skip" onClick={onClose}>
|
||||
tap anywhere to continue
|
||||
</p>
|
||||
)}
|
||||
</div>
|
||||
);
|
||||
};
|
||||
Reference in New Issue
Block a user