diff --git a/src/Locations/ui/HospitalLocation.tsx b/src/Locations/ui/HospitalLocation.tsx index 27f1cebbb..a92c6a024 100644 --- a/src/Locations/ui/HospitalLocation.tsx +++ b/src/Locations/ui/HospitalLocation.tsx @@ -12,29 +12,18 @@ import { getHospitalizationCost } from "../../Hospital/Hospital"; import { Money } from "../../ui/React/Money"; import { dialogBoxCreate } from "../../ui/React/DialogBox"; +import { useState } from "react"; -type IState = { - currHp: number; -}; - -//Todo: Make this a functional component -export class HospitalLocation extends React.Component, IState> { +export function HospitalLocation(): React.ReactElement { /** Stores button styling that sets them all to block display */ - btnStyle = { display: "block" }; + const btnStyle = { display: "block" }; - constructor() { - super({}); - - this.state = { - currHp: Player.hp.current, - }; + const setRerender = useState(false)[1]; + function rerender(): void { + setRerender((old) => !old); } - getCost(): number { - return getHospitalizationCost(); - } - - getHealed(e: React.MouseEvent): void { + function getHealed(e: React.MouseEvent): void { if (!e.isTrusted) { return; } @@ -46,14 +35,12 @@ export class HospitalLocation extends React.Component, ISt return; } - const cost = this.getCost(); + const cost = getHospitalizationCost(); Player.loseMoney(cost, "hospitalization"); Player.hp.current = Player.hp.max; // This just forces a re-render to update the cost - this.setState({ - currHp: Player.hp.current, - }); + rerender(); dialogBoxCreate( <> @@ -62,13 +49,9 @@ export class HospitalLocation extends React.Component, ISt ); } - render(): React.ReactNode { - const cost = this.getCost(); - - return ( - - ); - } + return ( + + ); }