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:
2026-03-07 00:21:13 -08:00
committed by Naomi Carrigan
parent b27454669e
commit b0ed976a1d
2 changed files with 24 additions and 4 deletions
@@ -61,6 +61,7 @@ export const GameLayout = (): React.JSX.Element => {
<div className="game-layout"> <div className="game-layout">
<ResourceBar <ResourceBar
resources={state.resources} resources={state.resources}
runestones={state.prestige.runestones}
prestigeCount={state.prestige.count} prestigeCount={state.prestige.count}
profileUrl={profileUrl} profileUrl={profileUrl}
onEditProfile={() => { setEditingProfile(true); }} onEditProfile={() => { setEditingProfile(true); }}
+23 -4
View File
@@ -4,6 +4,7 @@ import { RESOURCE_CAP } from "../../engine/tick.js";
interface ResourceBarProps { interface ResourceBarProps {
resources: Resource; resources: Resource;
runestones: number;
prestigeCount: number; prestigeCount: number;
profileUrl: string; profileUrl: string;
onEditProfile: () => void; onEditProfile: () => void;
@@ -26,6 +27,7 @@ const RESOURCE_FULL_TOOLTIP = "This resource is full! Consider spending some or
export const ResourceBar = ({ export const ResourceBar = ({
resources, resources,
runestones,
prestigeCount, prestigeCount,
profileUrl, profileUrl,
onEditProfile, onEditProfile,
@@ -34,7 +36,7 @@ export const ResourceBar = ({
onForceSync, onForceSync,
}: ResourceBarProps): React.JSX.Element => { }: ResourceBarProps): React.JSX.Element => {
const { formatNumber, syncError } = useGame(); 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 ( return (
<> <>
<header className="resource-bar"> <header className="resource-bar">
@@ -56,11 +58,10 @@ export const ResourceBar = ({
<span className="resource-label">Crystals</span> <span className="resource-label">Crystals</span>
{resources.crystals >= RESOURCE_CAP && <span className="resource-cap-badge" title={RESOURCE_FULL_TOOLTIP}>FULL</span>} {resources.crystals >= RESOURCE_CAP && <span className="resource-cap-badge" title={RESOURCE_FULL_TOOLTIP}>FULL</span>}
</div> </div>
<div className={`resource${resources.runestones >= RESOURCE_CAP ? " resource-full" : ""}`}> <div className="resource">
<span className="resource-icon">🔮</span> <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> <span className="resource-label">Runestones</span>
{resources.runestones >= RESOURCE_CAP && <span className="resource-cap-badge" title={RESOURCE_FULL_TOOLTIP}>FULL</span>}
</div> </div>
{prestigeCount > 0 && ( {prestigeCount > 0 && (
<div className="prestige-badge"> <div className="prestige-badge">
@@ -68,6 +69,24 @@ export const ResourceBar = ({
</div> </div>
)} )}
<div className="profile-buttons"> <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 ? ( {syncError !== null ? (
<span className="save-status save-error" title={syncError}> <span className="save-status save-error" title={syncError}>
Save failed Save failed