feat: mode bar, goddess tab row, themed resource dropdown (chunk 5)

Add Mortal/Goddess/Vampire mode selector bar, dynamic second tab row
that swaps per mode, goddess currencies in the resource bar dropdown
(locked pre-apotheosis), full CSS goddess theme with 300ms fade
transition, and localStorage persistence of the active mode.
This commit is contained in:
2026-04-13 15:59:43 -07:00
committed by Naomi Carrigan
parent 0d36b255ee
commit 96d6759661
4 changed files with 341 additions and 50 deletions
+36 -1
View File
@@ -86,7 +86,8 @@ const ResourceBar = ({
const [ isProfileOpen, setIsProfileOpen ] = useState(false);
const [ isResourcesOpen, setIsResourcesOpen ] = useState(false);
const { gold, essence, crystals } = resources;
const { gold, essence, crystals, prayers, divinity, stardust } = resources;
const hasApotheosis = apotheosisCount > 0;
let partyCombatPower = 0;
let goldPerSecond = 0;
let essencePerSecond = 0;
@@ -251,6 +252,40 @@ const ResourceBar = ({
</span>
<span className="resource-label">{"Combat Power"}</span>
</div>
<hr className="resources-divider" />
<div className={`resource${hasApotheosis
? ""
: " resource-locked"}`}>
<span className="resource-icon">{"🙏"}</span>
<span className="resource-value">
{hasApotheosis
? formatNumber(prayers ?? 0)
: "🔒"}
</span>
<span className="resource-label">{"Prayers"}</span>
</div>
<div className={`resource${hasApotheosis
? ""
: " resource-locked"}`}>
<span className="resource-icon">{"✨"}</span>
<span className="resource-value">
{hasApotheosis
? formatNumber(divinity ?? 0)
: "🔒"}
</span>
<span className="resource-label">{"Divinity"}</span>
</div>
<div className={`resource${hasApotheosis
? ""
: " resource-locked"}`}>
<span className="resource-icon">{"⭐"}</span>
<span className="resource-value">
{hasApotheosis
? formatNumber(stardust ?? 0)
: "🔒"}
</span>
<span className="resource-label">{"Stardust"}</span>
</div>
</div>
: null}
</div>