From 1b61ec0e1204ac87a75f2eef9d558ceff48caa14 Mon Sep 17 00:00:00 2001
From: borisflagell <clement.delrue@gmail.com>
Date: Fri, 14 Oct 2022 13:59:56 +0300
Subject: [PATCH 1/2] Update HospitalLocation.tsx

---
 src/Locations/ui/HospitalLocation.tsx | 45 +++++++++------------------
 1 file changed, 14 insertions(+), 31 deletions(-)

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<Record<string, never>, 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<HTMLElement>): void {
+  function getHealed(e: React.MouseEvent<HTMLElement>): void {
     if (!e.isTrusted) {
       return;
     }
@@ -46,14 +35,12 @@ export class HospitalLocation extends React.Component<Record<string, never>, 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<Record<string, never>, ISt
     );
   }
 
-  render(): React.ReactNode {
-    const cost = this.getCost();
-
-    return (
-      <Button onClick={this.getHealed} style={this.btnStyle}>
-        Get treatment for wounds - <Money money={cost} forPurchase={true} />
-      </Button>
-    );
-  }
+  return (
+    <Button onClick={getHealed} style={btnStyle}>
+      Get treatment for wounds - <Money money={getHospitalizationCost()} forPurchase={true} />
+    </Button>
+  );
 }

From baa149fa80dd4ac3a2ba67c1bbafd7f0a7a48d70 Mon Sep 17 00:00:00 2001
From: borisflagell <clement.delrue@gmail.com>
Date: Fri, 14 Oct 2022 14:13:53 +0300
Subject: [PATCH 2/2] Update HospitalLocation.tsx

Add auto-refreshing to the component
---
 src/Locations/ui/HospitalLocation.tsx | 8 ++++++--
 1 file changed, 6 insertions(+), 2 deletions(-)

diff --git a/src/Locations/ui/HospitalLocation.tsx b/src/Locations/ui/HospitalLocation.tsx
index a92c6a024..9039831bf 100644
--- a/src/Locations/ui/HospitalLocation.tsx
+++ b/src/Locations/ui/HospitalLocation.tsx
@@ -12,17 +12,21 @@ import { getHospitalizationCost } from "../../Hospital/Hospital";
 import { Money } from "../../ui/React/Money";
 
 import { dialogBoxCreate } from "../../ui/React/DialogBox";
-import { useState } from "react";
+import { useEffect, useState } from "react";
 
 export function HospitalLocation(): React.ReactElement {
   /** Stores button styling that sets them all to block display */
   const btnStyle = { display: "block" };
-
   const setRerender = useState(false)[1];
   function rerender(): void {
     setRerender((old) => !old);
   }
 
+  useEffect(() => {
+    const id = setInterval(rerender, 200);
+    return () => clearInterval(id);
+  }, []);
+
   function getHealed(e: React.MouseEvent<HTMLElement>): void {
     if (!e.isTrusted) {
       return;