nhcarrigan/elysium
9
0
Fork 0
generated from nhcarrigan/template
Code Issues 5 Pull Requests 1 Actions Releases 10 Activity

feat: replace resource bar profile buttons with avatar dropdown (#103)

Browse Source 
Condenses the Donate, Discord, Support, View Profile, and Edit Profile
buttons into a single avatar image button. Clicking it opens a dropdown
menu with all five actions, significantly decluttering the resource bar.
This commit is contained in:
Hikari
2026-03-23 14:21:47 -07:00
committed by Naomi Carrigan
parent 4c3b9acfc5
commit fc222ac522
3 changed files with 160 additions and 94 deletions
Download Patch File Download Diff File Expand all files Collapse all files
apps/web/src/components/game/gameLayout.tsx
-2
View File
@@ -135,7 +135,6 @@ const GameLayout = (): JSX.Element => {
);
}
const profileUrl = `/profile/${state.player.discordId}`;
const codexBadgeCount = pendingCodexEntryIds.length;
const storyBadgeCount = pendingStoryChapterIds.length;
@@ -160,7 +159,6 @@ const GameLayout = (): JSX.Element => {
onEditProfile={handleOpenEditProfile}
onForceSync={forceSync}
prestigeCount={state.prestige.count}
profileUrl={profileUrl}
resources={state.resources}
runestones={state.prestige.runestones}
transcendenceCount={state.transcendence?.count ?? 0}
apps/web/src/components/ui/resourceBar.tsx
+96 -49
View File
@@ -5,11 +5,12 @@
* @author Naomi Carrigan
*/
/* eslint-disable max-lines-per-function -- Large header with many resource and action elements */
/* eslint-disable max-statements -- Resource bar requires many local computations and handlers */
/* eslint-disable complexity -- Many conditional resource and badge render paths */
import { useState, type FocusEvent, type JSX } from "react";
import { useGame } from "../../context/gameContext.js";
import { RESOURCE_CAP, computeGoldPerSecond } from "../../engine/tick.js";
import type { Resource } from "@elysium/types";
import type { JSX } from "react";
interface ResourceBarProperties {
readonly resources: Resource;
@@ -17,7 +18,6 @@ interface ResourceBarProperties {
readonly prestigeCount: number;
readonly transcendenceCount: number;
readonly apotheosisCount: number;
readonly profileUrl: string;
readonly onEditProfile: ()=> void;
readonly lastSavedAt: number | null;
readonly isSyncing: boolean;
@@ -58,7 +58,6 @@ const resourceFullTooltip = [
* @param props.prestigeCount - The number of prestiges completed.
* @param props.transcendenceCount - The number of transcendences completed.
* @param props.apotheosisCount - The number of apotheoses completed.
* @param props.profileUrl - The URL of the player's public profile.
* @param props.onEditProfile - Callback to open the edit profile modal.
* @param props.lastSavedAt - Timestamp of the last cloud save.
* @param props.isSyncing - Whether a sync is currently in progress.
@@ -71,13 +70,14 @@ const ResourceBar = ({
prestigeCount,
transcendenceCount,
apotheosisCount,
profileUrl,
onEditProfile,
lastSavedAt,
isSyncing,
onForceSync,
}: ResourceBarProperties): JSX.Element => {
const { formatNumber, syncError, state } = useGame();
const [ isProfileOpen, setIsProfileOpen ] = useState(false);
const { gold, essence, crystals } = resources;
let partyCombatPower = 0;
let goldPerSecond = 0;
@@ -88,6 +88,17 @@ const ResourceBar = ({
}
goldPerSecond = computeGoldPerSecond(state);
}
let avatarUrl: string | null = null;
if (state !== null) {
avatarUrl = state.player.avatar === null
? `https://cdn.discordapp.com/embed/avatars/${String(Number.parseInt(state.player.discordId, 10) % 5)}.png`
: `https://cdn.discordapp.com/avatars/${state.player.discordId}/${state.player.avatar}.png?size=64`;
}
const profileUrl = state === null
? "#"
: `/profile/${state.player.discordId}`;
const resourceValues = [ gold, essence, crystals ];
const anyFull = resourceValues.some((v) => {
return v >= RESOURCE_CAP;
@@ -100,6 +111,23 @@ const ResourceBar = ({
void onForceSync();
}
function handleToggleProfile(): void {
setIsProfileOpen((previous) => {
return !previous;
});
}
function handleProfileBlur(event: FocusEvent<HTMLDivElement>): void {
if (!event.currentTarget.contains(event.relatedTarget)) {
setIsProfileOpen(false);
}
}
function handleEditProfile(): void {
setIsProfileOpen(false);
onEditProfile();
}
return (
<>
<header className="resource-bar">
@@ -174,34 +202,7 @@ const ResourceBar = ({
{prestigeCount}
</div>
}
<div className="profile-buttons">
<a
className="profile-link-button"
href="https://donate.nhcarrigan.com"
rel="noreferrer"
target="_blank"
title="Support the developer"
>
{"💜"} <span className="btn-label">{"Donate"}</span>
</a>
<a
className="profile-link-button"
href="https://chat.nhcarrigan.com"
rel="noreferrer"
target="_blank"
title="Join our Discord"
>
{"💬"} <span className="btn-label">{"Discord"}</span>
</a>
<a
className="profile-link-button"
href="https://support.nhcarrigan.com"
rel="noreferrer"
target="_blank"
title="Get support on our forum"
>
{"🆘"} <span className="btn-label">{"Support"}</span>
</a>
<div className="resource-bar-actions">
{syncError === null
? null
: <span className="save-status save-error" title={syncError}>
@@ -228,23 +229,69 @@ const ResourceBar = ({
? "⏳"
: "💾"}
</button>
<a
className="profile-link-button"
href={profileUrl}
rel="noreferrer"
target="_blank"
title="View your public profile"
>
{"👤"} <span className="btn-label">{"Profile"}</span>
</a>
<button
className="profile-edit-button"
onClick={onEditProfile}
title="Edit your profile"
type="button"
>
{"✏️"}
</button>
{avatarUrl === null
? null
: <div
className="profile-menu"
onBlur={handleProfileBlur}
>
<button
className="profile-avatar-button"
onClick={handleToggleProfile}
title="Account"
type="button"
>
<img
alt="Profile"
className="profile-avatar-img"
src={avatarUrl}
/>
</button>
{isProfileOpen
? <div className="profile-dropdown">
<a
className="profile-dropdown-item"
href={profileUrl}
rel="noreferrer"
target="_blank"
>
{"👤 View Profile"}
</a>
<button
className="profile-dropdown-item"
onClick={handleEditProfile}
type="button"
>
{"✏️ Edit Profile"}
</button>
<hr className="profile-dropdown-divider" />
<a
className="profile-dropdown-item"
href="https://donate.nhcarrigan.com"
rel="noreferrer"
target="_blank"
>
{"💜 Donate"}
</a>
<a
className="profile-dropdown-item"
href="https://chat.nhcarrigan.com"
rel="noreferrer"
target="_blank"
>
{"💬 Discord"}
</a>
<a
className="profile-dropdown-item"
href="https://support.nhcarrigan.com"
rel="noreferrer"
target="_blank"
>
{"🆘 Support"}
</a>
</div>
: null}
</div>}
</div>
</header>
{anyFull
apps/web/src/styles.css
+64 -43
View File
@@ -1492,57 +1492,87 @@ body::before {
font-size: 0.85rem;
}
/* ── Profile buttons in ResourceBar ────────────────────────────────────── */
/* ── Resource bar actions (save + profile menu) ─────────────────────────── */
.profile-buttons {
.resource-bar-actions {
align-items: center;
display: flex;
gap: 0.35rem;
margin-left: auto;
}
.profile-link-button {
align-items: center;
background: rgba(255, 255, 255, 0.06);
border: 1px solid rgba(147, 51, 234, 0.4);
border-radius: 1rem;
color: var(--colour-text-muted);
display: flex;
font-size: 0.8rem;
gap: 0.3rem;
padding: 0.3rem 0.8rem;
text-decoration: none;
transition: all 0.2s;
white-space: nowrap;
.profile-menu {
position: relative;
}
.profile-link-button:hover {
background: rgba(147, 51, 234, 0.2);
border-color: var(--colour-primary);
color: var(--colour-text);
}
.profile-edit-button {
background: rgba(255, 255, 255, 0.06);
border: 1px solid rgba(147, 51, 234, 0.4);
.profile-avatar-button {
background: none;
border: 2px solid rgba(147, 51, 234, 0.4);
border-radius: 50%;
color: var(--colour-text-muted);
cursor: pointer;
font-family: inherit;
font-size: 0.85rem;
display: flex;
height: 2rem;
line-height: 1;
overflow: hidden;
padding: 0;
transition: all 0.2s;
transition: border-color 0.2s;
width: 2rem;
}
.profile-edit-button:hover {
background: rgba(147, 51, 234, 0.2);
.profile-avatar-button:hover {
border-color: var(--colour-primary);
}
.profile-avatar-img {
height: 100%;
object-fit: cover;
width: 100%;
}
.profile-dropdown {
background: var(--colour-surface);
border: 1px solid rgba(147, 51, 234, 0.4);
border-radius: 0.5rem;
box-shadow: 0 4px 16px rgba(0, 0, 0, 0.4);
display: flex;
flex-direction: column;
min-width: 10rem;
padding: 0.25rem;
position: absolute;
right: 0;
top: calc(100% + 0.4rem);
z-index: 100;
}
.profile-dropdown-item {
align-items: center;
background: none;
border: none;
border-radius: 0.35rem;
color: var(--colour-text-muted);
cursor: pointer;
display: flex;
font-family: inherit;
font-size: 0.85rem;
gap: 0.4rem;
padding: 0.45rem 0.75rem;
text-align: left;
text-decoration: none;
transition: background 0.15s, color 0.15s;
white-space: nowrap;
width: 100%;
}
.profile-dropdown-item:hover {
background: rgba(147, 51, 234, 0.15);
color: var(--colour-text);
}
.profile-dropdown-divider {
border: none;
border-top: 1px solid rgba(147, 51, 234, 0.2);
margin: 0.25rem 0;
}
.save-status {
color: var(--colour-text-muted);
font-size: 0.75rem;
@@ -3167,10 +3197,10 @@ body::before {
display: none;
}
/* Profile buttons fill their own row, aligned right */
.profile-buttons {
margin-left: 0;
/* Resource bar actions fill their own row, aligned right */
.resource-bar-actions {
justify-content: flex-end;
margin-left: 0;
width: 100%;
}
@@ -3240,15 +3270,6 @@ body::before {
/* --- Small mobile (≤ 480px) --------------------------- */
@media (max-width: 480px) {
/* Icon-only profile link buttons to save horizontal space */
.btn-label {
display: none;
}
.profile-link-button {
padding: 0.3rem 0.5rem;
}
/* Slightly smaller tab buttons */
.tab-button {
font-size: 0.8rem;