generated from nhcarrigan/template
hikari
a3daed1683
Sets up the full monorepo with pnpm workspaces. Includes shared types package, Hono API with Discord OAuth/JWT auth, Prisma v6 + MongoDB Atlas, and React + Vite frontend with game loop, five tabs, and Discord-linked save/load.
50 lines
1.6 KiB
TypeScript
50 lines
1.6 KiB
TypeScript
import type { Resource } from "@elysium/types";
|
|
|
|
interface ResourceBarProps {
|
|
resources: Resource;
|
|
prestigeCount: number;
|
|
}
|
|
|
|
const formatNumber = (value: number): string => {
|
|
if (value >= 1_000_000_000) {
|
|
return `${(value / 1_000_000_000).toFixed(2)}B`;
|
|
}
|
|
if (value >= 1_000_000) {
|
|
return `${(value / 1_000_000).toFixed(2)}M`;
|
|
}
|
|
if (value >= 1_000) {
|
|
return `${(value / 1_000).toFixed(2)}K`;
|
|
}
|
|
return value.toFixed(1);
|
|
};
|
|
|
|
export const ResourceBar = ({ resources, prestigeCount }: ResourceBarProps): React.JSX.Element => (
|
|
<header className="resource-bar">
|
|
<div className="resource">
|
|
<span className="resource-icon">🪙</span>
|
|
<span className="resource-value">{formatNumber(resources.gold)}</span>
|
|
<span className="resource-label">Gold</span>
|
|
</div>
|
|
<div className="resource">
|
|
<span className="resource-icon">✨</span>
|
|
<span className="resource-value">{formatNumber(resources.essence)}</span>
|
|
<span className="resource-label">Essence</span>
|
|
</div>
|
|
<div className="resource">
|
|
<span className="resource-icon">💎</span>
|
|
<span className="resource-value">{formatNumber(resources.crystals)}</span>
|
|
<span className="resource-label">Crystals</span>
|
|
</div>
|
|
<div className="resource">
|
|
<span className="resource-icon">🔮</span>
|
|
<span className="resource-value">{formatNumber(resources.runestones)}</span>
|
|
<span className="resource-label">Runestones</span>
|
|
</div>
|
|
{prestigeCount > 0 && (
|
|
<div className="prestige-badge">
|
|
⭐ Prestige {prestigeCount}
|
|
</div>
|
|
)}
|
|
</header>
|
|
);
|