diff --git a/src/ui/CharacterStats.tsx b/src/ui/CharacterStats.tsx
index f1b387d34..8e6e8b940 100644
--- a/src/ui/CharacterStats.tsx
+++ b/src/ui/CharacterStats.tsx
@@ -19,22 +19,27 @@ import { Money } from "./React/Money";
import { StatsRow } from "./React/StatsRow";
import { StatsTable } from "./React/StatsTable";
-function Employers(): React.ReactElement {
- const player = use.Player();
- if (player.jobs && Object.keys(player.jobs).length !== 0)
- return (
- <>
- All Employers:
+interface EmployersModalProps {
+ open: boolean;
+ onClose: () => void;
+}
+
+const EmployersModal = ({ open, onClose }: EmployersModalProps): React.ReactElement => {
+ const player = use.Player();
+ return (
+
+ <>
+ All Employers
{Object.keys(player.jobs).map((j) => (
- * {j}
+ * {j}
))}
>
- );
- return <>>;
-}
+
+ );
+};
interface MultTableProps {
rows: (string | number)[][];
@@ -213,6 +218,7 @@ function MoneyModal({ open, onClose }: IMoneyModalProps): React.ReactElement {
export function CharacterStats(): React.ReactElement {
const player = use.Player();
const [moneyOpen, setMoneyOpen] = useState(false);
+ const [employersOpen, setEmployersOpen] = useState(false);
const setRerender = useState(false)[1];
function rerender(): void {
setRerender((old) => !old);
@@ -261,6 +267,16 @@ export function CharacterStats(): React.ReactElement {
/>
>
)}
+ {player.jobs && Object.keys(player.jobs).length !== 0 && (
+
+ <>
+ {Object.keys(player.jobs).length} total
+ setEmployersOpen(true)} sx={{ p: 0 }}>
+
+
+ >
+
+ )}
-
Skills
@@ -496,6 +511,7 @@ export function CharacterStats(): React.ReactElement {
setMoneyOpen(false)} />
+ setEmployersOpen(false)} />
>
);
}