generated from nhcarrigan/template
feat: add donate/discord nav buttons and fix runestone display
Adds Donate and Discord link buttons to the resource bar nav. Also fixes a display discrepancy where the resource bar showed resources.runestones (always 0) instead of the actual prestige runestone balance from prestige.runestones. ✨ This feature was implemented with help from Hikari~ 🌸
This commit is contained in:
@@ -61,6 +61,7 @@ export const GameLayout = (): React.JSX.Element => {
|
||||
<div className="game-layout">
|
||||
<ResourceBar
|
||||
resources={state.resources}
|
||||
runestones={state.prestige.runestones}
|
||||
prestigeCount={state.prestige.count}
|
||||
profileUrl={profileUrl}
|
||||
onEditProfile={() => { setEditingProfile(true); }}
|
||||
|
||||
@@ -4,6 +4,7 @@ import { RESOURCE_CAP } from "../../engine/tick.js";
|
||||
|
||||
interface ResourceBarProps {
|
||||
resources: Resource;
|
||||
runestones: number;
|
||||
prestigeCount: number;
|
||||
profileUrl: string;
|
||||
onEditProfile: () => void;
|
||||
@@ -26,6 +27,7 @@ const RESOURCE_FULL_TOOLTIP = "This resource is full! Consider spending some or
|
||||
|
||||
export const ResourceBar = ({
|
||||
resources,
|
||||
runestones,
|
||||
prestigeCount,
|
||||
profileUrl,
|
||||
onEditProfile,
|
||||
@@ -34,7 +36,7 @@ export const ResourceBar = ({
|
||||
onForceSync,
|
||||
}: ResourceBarProps): React.JSX.Element => {
|
||||
const { formatNumber, syncError } = useGame();
|
||||
const anyFull = Object.values(resources).some((v) => v >= RESOURCE_CAP);
|
||||
const anyFull = [resources.gold, resources.essence, resources.crystals].some((v) => v >= RESOURCE_CAP);
|
||||
return (
|
||||
<>
|
||||
<header className="resource-bar">
|
||||
@@ -56,11 +58,10 @@ export const ResourceBar = ({
|
||||
<span className="resource-label">Crystals</span>
|
||||
{resources.crystals >= RESOURCE_CAP && <span className="resource-cap-badge" title={RESOURCE_FULL_TOOLTIP}>FULL</span>}
|
||||
</div>
|
||||
<div className={`resource${resources.runestones >= RESOURCE_CAP ? " resource-full" : ""}`}>
|
||||
<div className="resource">
|
||||
<span className="resource-icon">🔮</span>
|
||||
<span className="resource-value">{formatNumber(resources.runestones)}</span>
|
||||
<span className="resource-value">{formatNumber(runestones)}</span>
|
||||
<span className="resource-label">Runestones</span>
|
||||
{resources.runestones >= RESOURCE_CAP && <span className="resource-cap-badge" title={RESOURCE_FULL_TOOLTIP}>FULL</span>}
|
||||
</div>
|
||||
{prestigeCount > 0 && (
|
||||
<div className="prestige-badge">
|
||||
@@ -68,6 +69,24 @@ export const ResourceBar = ({
|
||||
</div>
|
||||
)}
|
||||
<div className="profile-buttons">
|
||||
<a
|
||||
className="profile-link-button"
|
||||
href="https://donate.nhcarrigan.com"
|
||||
rel="noreferrer"
|
||||
target="_blank"
|
||||
title="Support the developer"
|
||||
>
|
||||
💜 Donate
|
||||
</a>
|
||||
<a
|
||||
className="profile-link-button"
|
||||
href="https://chat.nhcarrigan.com"
|
||||
rel="noreferrer"
|
||||
target="_blank"
|
||||
title="Join our Discord"
|
||||
>
|
||||
💬 Discord
|
||||
</a>
|
||||
{syncError !== null ? (
|
||||
<span className="save-status save-error" title={syncError}>
|
||||
❌ Save failed
|
||||
|
||||
Reference in New Issue
Block a user