dostulata/initiative
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Color player character names instead of left border
All checks were successful
CI / check (push) Successful in 45s
Details
CI / build-image (push) Successful in 18s
Details

Browse Source 
Player characters now show their chosen color on their name text
rather than as a left border glow. Left border is reserved for
active row (accent) and concentration (purple).

Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com>
This commit is contained in:
Lukas
2026-03-13 11:52:09 +01:00
parent 76ca78c169
commit 96b37d4bdd
1 changed files with 7 additions and 5 deletions
Download Patch File Download Diff File Expand all files Collapse all files

8
apps/web/src/components/combatant-row.tsx
View File

@@ -49,11 +49,13 @@ function EditableName({
combatantId, combatantId,
onRename, onRename,
onShowStatBlock, onShowStatBlock,
color,
}: { }: {
name: string; name: string;
combatantId: CombatantId; combatantId: CombatantId;
onRename: (id: CombatantId, newName: string) => void; onRename: (id: CombatantId, newName: string) => void;
onShowStatBlock?: () => void; onShowStatBlock?: () => void;
color?: string;
}) { }) {
const [editing, setEditing] = useState(false); const [editing, setEditing] = useState(false);
const [draft, setDraft] = useState(name); const [draft, setDraft] = useState(name);
@@ -143,6 +145,7 @@ function EditableName({
onTouchCancel={cancelLongPress} onTouchCancel={cancelLongPress}
onTouchMove={cancelLongPress} onTouchMove={cancelLongPress}
className="truncate text-left text-sm text-foreground cursor-text hover:text-hover-neutral transition-colors" className="truncate text-left text-sm text-foreground cursor-text hover:text-hover-neutral transition-colors"
style={color ? { color } : undefined}
> >
{name} {name}
</button> </button>
@@ -482,8 +485,7 @@ export function CombatantRow({
} }
}, [combatant.isConcentrating]); }, [combatant.isConcentrating]);
const pcColor = const pcColor = combatant.color
combatant.color && !isActive && !combatant.isConcentrating
? PLAYER_COLOR_HEX[combatant.color as keyof typeof PLAYER_COLOR_HEX] ? PLAYER_COLOR_HEX[combatant.color as keyof typeof PLAYER_COLOR_HEX]
: undefined; : undefined;
@@ -499,7 +501,6 @@ export function CombatantRow({
isPulsing && "animate-concentration-pulse", isPulsing && "animate-concentration-pulse",
onShowStatBlock && "cursor-pointer", onShowStatBlock && "cursor-pointer",
)} )}
style={pcColor ? { borderLeftColor: pcColor } : undefined}
onClick={onShowStatBlock} onClick={onShowStatBlock}
onKeyDown={ onKeyDown={
onShowStatBlock ? activateOnKeyDown(onShowStatBlock) : undefined onShowStatBlock ? activateOnKeyDown(onShowStatBlock) : undefined
@@ -566,6 +567,7 @@ export function CombatantRow({
combatantId={id} combatantId={id}
onRename={onRename} onRename={onRename}
onShowStatBlock={onShowStatBlock} onShowStatBlock={onShowStatBlock}
color={pcColor}
/> />
<ConditionTags <ConditionTags
conditions={combatant.conditions} conditions={combatant.conditions}