PartyMemberFull vs PartyMemberCompact

These components render an actor from the current party in either a detailed card (PartyMemberFull) or a minimal row (PartyMemberCompact). Both are reactive (MobX) and update live as HP/MP change.

Files

menus/src/components/PartyMemberFull.tsx
menus/src/components/PartyMemberCompact.tsx
Props type: menus/src/util/PartyMemberProps.ts

Props (PartyMemberProps)

member: any — the RPG Maker actor object (from gameParty.members())
selected: boolean — whether this row/card is currently selected (affects highlight)
Inherits BaseMenuScreenProps (unused in render but may be passed through)

Minimal usage with Chooser

import React from 'react';
import Chooser from '../../components/Chooser';
import PartyMemberCompact from '../../components/PartyMemberCompact';

const PartyMenu: React.FC<{ hasFocus: boolean; party: any[] }>
  = ({ hasFocus, party }) => {
  return (
    <Chooser items={party} hasFocus={hasFocus}
             onItemSelected={(actor) => console.log('picked', actor.name())}>
      {(actor, selected) => (
        <PartyMemberCompact member={actor} selected={selected}
                            isTestMenu={false} hasFocus={hasFocus} />
      )}
    </Chooser>
  );
};
export default PartyMenu;

Switching to the full card

import PartyMemberFull from '../../components/PartyMemberFull';
// ...inside Chooser children
<PartyMemberFull member={actor} selected={selected}
                 isTestMenu={false} hasFocus={hasFocus} />

Styling

Both components use Tailwind‑style utility classes in this template; feel free to add a wrapper div to control layout.
selected typically toggles background/outline. Keep it visually strong for controller users.