feat(ui): add new ui
This commit is contained in:
shafin-r
@ -11,26 +11,187 @@ type Props = {
|
||||
level: number;
|
||||
};
|
||||
|
||||
const STYLES = `
|
||||
@import url('https://fonts.googleapis.com/css2?family=Nunito:wght@400;700;800;900&family=Nunito+Sans:wght@400;600&display=swap');
|
||||
|
||||
.clp-wrap {
|
||||
width: 100%;
|
||||
font-family: 'Nunito', sans-serif;
|
||||
}
|
||||
|
||||
/* Outer card — full width */
|
||||
.clp-card {
|
||||
width: 100%;
|
||||
background: white;
|
||||
border: 2.5px solid #f3f4f6;
|
||||
border-radius: 24px;
|
||||
padding: 1.25rem 1.5rem;
|
||||
box-shadow: 0 6px 24px rgba(0,0,0,0.05);
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
gap: 0.85rem;
|
||||
box-sizing: border-box;
|
||||
}
|
||||
|
||||
/* Top row: level badge + XP gained chip */
|
||||
.clp-top-row {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: space-between;
|
||||
}
|
||||
|
||||
.clp-level-badge {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 0.6rem;
|
||||
}
|
||||
|
||||
.clp-level-bubble {
|
||||
width: 52px; height: 52px;
|
||||
border-radius: 50%;
|
||||
background: linear-gradient(135deg, #c084fc, #a855f7);
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
box-shadow: 0 4px 0 #7e22ce44;
|
||||
flex-shrink: 0;
|
||||
}
|
||||
|
||||
.clp-level-num {
|
||||
font-size: 1.5rem;
|
||||
font-weight: 900;
|
||||
color: white;
|
||||
line-height: 1;
|
||||
letter-spacing: -0.02em;
|
||||
}
|
||||
|
||||
.clp-level-text {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
gap: 1px;
|
||||
}
|
||||
|
||||
.clp-level-word {
|
||||
font-size: 0.62rem;
|
||||
font-weight: 800;
|
||||
letter-spacing: 0.14em;
|
||||
text-transform: uppercase;
|
||||
color: #9ca3af;
|
||||
}
|
||||
|
||||
.clp-level-title {
|
||||
font-size: 1rem;
|
||||
font-weight: 900;
|
||||
color: #1e1b4b;
|
||||
line-height: 1;
|
||||
}
|
||||
|
||||
/* XP gained chip */
|
||||
.clp-xp-chip {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 0.35rem;
|
||||
background: #fff7ed;
|
||||
border: 2px solid #fed7aa;
|
||||
border-radius: 100px;
|
||||
padding: 0.4rem 0.9rem;
|
||||
font-size: 0.82rem;
|
||||
font-weight: 800;
|
||||
color: #f97316;
|
||||
}
|
||||
|
||||
/* Bar section */
|
||||
.clp-bar-wrap {
|
||||
width: 100%;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
gap: 0.4rem;
|
||||
}
|
||||
|
||||
.clp-bar-labels {
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
font-size: 0.66rem;
|
||||
font-weight: 700;
|
||||
color: #9ca3af;
|
||||
}
|
||||
|
||||
.clp-bar-track {
|
||||
width: 100%;
|
||||
height: 12px;
|
||||
background: #f3f4f6;
|
||||
border-radius: 100px;
|
||||
overflow: hidden;
|
||||
}
|
||||
|
||||
.clp-bar-fill {
|
||||
height: 100%;
|
||||
border-radius: 100px;
|
||||
background: linear-gradient(90deg, #c084fc, #f97316);
|
||||
transition: width 1.2s cubic-bezier(0.4,0,0.2,1);
|
||||
}
|
||||
|
||||
/* XP total */
|
||||
.clp-xp-pill {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 0.4rem;
|
||||
font-size: 0.72rem;
|
||||
font-weight: 700;
|
||||
color: #9ca3af;
|
||||
animation: clpFadeUp 0.5s cubic-bezier(0.34,1.56,0.64,1) both;
|
||||
}
|
||||
|
||||
.clp-xp-pill .xp-dot {
|
||||
width: 7px; height: 7px;
|
||||
border-radius: 50%;
|
||||
background: #f97316;
|
||||
flex-shrink: 0;
|
||||
}
|
||||
|
||||
/* Level-up banner */
|
||||
.clp-levelup {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
gap: 0.5rem;
|
||||
background: #fdf4ff;
|
||||
border: 2.5px solid #e9d5ff;
|
||||
border-radius: 14px;
|
||||
padding: 0.6rem 1rem;
|
||||
font-size: 0.85rem;
|
||||
font-weight: 900;
|
||||
color: #9333ea;
|
||||
animation: clpPop 0.45s cubic-bezier(0.34,1.56,0.64,1) both;
|
||||
box-shadow: 0 4px 12px rgba(147,51,234,0.1);
|
||||
}
|
||||
|
||||
@keyframes clpPop {
|
||||
from { opacity:0; transform: scale(0.8); }
|
||||
to { opacity:1; transform: scale(1); }
|
||||
}
|
||||
@keyframes clpFadeUp {
|
||||
from { opacity:0; transform: translateY(6px); }
|
||||
to { opacity:1; transform: translateY(0); }
|
||||
}
|
||||
`;
|
||||
|
||||
export const CircularLevelProgress = ({
|
||||
size = 300,
|
||||
strokeWidth = 16,
|
||||
previousXP,
|
||||
gainedXP,
|
||||
levelMinXP,
|
||||
levelMaxXP,
|
||||
level,
|
||||
}: Props) => {
|
||||
const radius = (size - strokeWidth) / 2;
|
||||
const circumference = 2 * Math.PI * radius;
|
||||
const levelRange = levelMaxXP - levelMinXP;
|
||||
|
||||
const normalize = (xp: number) =>
|
||||
Math.min(Math.max(xp - levelMinXP, 0), levelRange) / levelRange;
|
||||
|
||||
const [progress, setProgress] = useState(normalize(previousXP));
|
||||
const [barProgress, setBarProgress] = useState(normalize(previousXP));
|
||||
const [currentLevel, setCurrentLevel] = useState(level);
|
||||
const [showLevelUp, setShowLevelUp] = useState(false);
|
||||
const [showThresholdText, setShowThresholdText] = useState(false);
|
||||
const [showXPTotal, setShowXPTotal] = useState(false);
|
||||
|
||||
useEffect(() => {
|
||||
let animationFrame: number;
|
||||
@ -38,28 +199,23 @@ export const CircularLevelProgress = ({
|
||||
|
||||
const availableXP = previousXP + gainedXP;
|
||||
const crossesLevel = availableXP >= levelMaxXP;
|
||||
|
||||
const phase1Target = crossesLevel ? 1 : normalize(previousXP + gainedXP);
|
||||
|
||||
const phase1Target = crossesLevel ? 1 : normalize(availableXP);
|
||||
const leftoverXP = crossesLevel ? availableXP - levelMaxXP : 0;
|
||||
|
||||
const duration = 1200;
|
||||
|
||||
const animatePhase1 = (timestamp: number) => {
|
||||
if (!start) start = timestamp;
|
||||
const t = Math.min((timestamp - start) / duration, 1);
|
||||
|
||||
setProgress(
|
||||
setBarProgress(
|
||||
normalize(previousXP) + t * (phase1Target - normalize(previousXP)),
|
||||
);
|
||||
|
||||
if (t < 1) {
|
||||
animationFrame = requestAnimationFrame(animatePhase1);
|
||||
} else if (crossesLevel) {
|
||||
setShowLevelUp(true);
|
||||
setTimeout(startPhase2, 1200);
|
||||
} else {
|
||||
setShowThresholdText(true);
|
||||
setShowXPTotal(true);
|
||||
}
|
||||
};
|
||||
|
||||
@ -67,78 +223,77 @@ export const CircularLevelProgress = ({
|
||||
start = null;
|
||||
setShowLevelUp(false);
|
||||
setCurrentLevel((l) => l + 1);
|
||||
setProgress(0);
|
||||
|
||||
setBarProgress(0);
|
||||
const target = Math.min(leftoverXP / levelRange, 1);
|
||||
|
||||
const animatePhase2 = (timestamp: number) => {
|
||||
if (!start) start = timestamp;
|
||||
const t = Math.min((timestamp - start) / duration, 1);
|
||||
|
||||
setProgress(t * target);
|
||||
|
||||
setBarProgress(t * target);
|
||||
if (t < 1) {
|
||||
animationFrame = requestAnimationFrame(animatePhase2);
|
||||
} else {
|
||||
setShowThresholdText(true);
|
||||
setShowXPTotal(true);
|
||||
}
|
||||
};
|
||||
|
||||
animationFrame = requestAnimationFrame(animatePhase2);
|
||||
};
|
||||
|
||||
animationFrame = requestAnimationFrame(animatePhase1);
|
||||
|
||||
return () => cancelAnimationFrame(animationFrame);
|
||||
}, []);
|
||||
|
||||
const offset = circumference * (1 - progress);
|
||||
const barPct = Math.round(barProgress * 100);
|
||||
const totalXP = previousXP + gainedXP;
|
||||
|
||||
return (
|
||||
<div className="relative flex flex-col items-center gap-2">
|
||||
<div className="clp-wrap">
|
||||
<style>{STYLES}</style>
|
||||
{showLevelUp && <ConfettiBurst />}
|
||||
<div
|
||||
className="relative flex items-center justify-center"
|
||||
style={{ width: size, height: size }}
|
||||
>
|
||||
<svg width={size} height={size}>
|
||||
<circle
|
||||
cx={size / 2}
|
||||
cy={size / 2}
|
||||
r={radius}
|
||||
stroke="oklch(94.6% 0.033 307.174)"
|
||||
strokeWidth={strokeWidth}
|
||||
fill="none"
|
||||
/>
|
||||
<circle
|
||||
cx={size / 2}
|
||||
cy={size / 2}
|
||||
r={radius}
|
||||
stroke="oklch(62.7% 0.265 303.9)"
|
||||
strokeWidth={strokeWidth}
|
||||
fill="none"
|
||||
strokeLinecap="round"
|
||||
strokeDasharray={circumference}
|
||||
strokeDashoffset={offset}
|
||||
transform={`rotate(-90 ${size / 2} ${size / 2})`}
|
||||
/>
|
||||
</svg>
|
||||
|
||||
<span className="absolute text-[100px] font-satoshi-bold flex flex-col items-center">
|
||||
{currentLevel}
|
||||
<div className="clp-card">
|
||||
{/* Top row */}
|
||||
<div className="clp-top-row">
|
||||
<div className="clp-level-badge">
|
||||
<div className="clp-level-bubble">
|
||||
<span className="clp-level-num">{currentLevel}</span>
|
||||
</div>
|
||||
<div className="clp-level-text">
|
||||
<span className="clp-level-word">Current Level</span>
|
||||
<span className="clp-level-title">Level {currentLevel}</span>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{showThresholdText && (
|
||||
<span className="text-xl font-satoshi-medium text-gray-500 animate-fade-in">
|
||||
Total XP: {previousXP + gainedXP}
|
||||
</span>
|
||||
)}
|
||||
<div className="clp-xp-chip">⚡ +{gainedXP} XP</div>
|
||||
</div>
|
||||
|
||||
{showLevelUp && (
|
||||
<span className="text-xl font-satoshi-medium text-purple-600 animate-fade-in">
|
||||
🎉 You leveled up!
|
||||
</span>
|
||||
)}
|
||||
</span>
|
||||
{/* Progress bar */}
|
||||
<div className="clp-bar-wrap">
|
||||
<div className="clp-bar-labels">
|
||||
<span>{levelMinXP} XP</span>
|
||||
<span>{barPct}%</span>
|
||||
<span>{levelMaxXP} XP</span>
|
||||
</div>
|
||||
<div className="clp-bar-track">
|
||||
<div className="clp-bar-fill" style={{ width: `${barPct}%` }} />
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{/* Footer state */}
|
||||
{showLevelUp && (
|
||||
<div className="clp-levelup">
|
||||
🎉 You leveled up! Welcome to Level {currentLevel}!
|
||||
</div>
|
||||
)}
|
||||
{showXPTotal && !showLevelUp && (
|
||||
<div className="clp-xp-pill">
|
||||
<div className="xp-dot" />
|
||||
Total XP:{" "}
|
||||
<strong style={{ color: "#1e1b4b", marginLeft: 3 }}>
|
||||
{totalXP}
|
||||
</strong>
|
||||
</div>
|
||||
)}
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
|
||||
Reference in New Issue
Block a user