add formatting to gold display

package.json

@@ -1,6 +1,6 @@
 {
   "name": "adventurers-guild",
-  "version": "0.3.0",
+  "version": "0.4.0",
   "private": true,
   "scripts": {
     "dev": "vite",

src/classes/Guild.ts

@@ -1,5 +1,6 @@
 import type {GuildUpgrade} from "@/classes/GuildUpgrade";
 import {AdventurerCapacityUpgrade} from "@/classes/guildUpgrades/AdventurerCapacityUpgrade";
+import formatGold from "@/classes/NumberMagic";
 
 export class Guild {
     gold: number;
@@ -30,7 +31,7 @@ export class Guild {
         } else {
             const newCost = this.getUpgradeCost();
             if (newCost === null) return;
-            this.displayUpgradeCost = newCost;
+            this.displayUpgradeCost = formatGold(newCost);
             this.upgradeCost = newCost;
         }
     }

src/classes/NumberMagic.ts

@@ -0,0 +1,10 @@
+const formatter = new Intl.NumberFormat('en-US', {
+    maximumFractionDigits: 3,
+    // @ts-ignore - typescript doesn't know about this option for some godforsaken reason
+    notation: "compact",
+    useGrouping: true,
+});
+
+export default function formatGold(number: number): string {
+    return formatter.format(number);
+}

src/components/UpgradesList.vue

@@ -8,7 +8,7 @@
           :disabled="guild.gold < guild.adventurerCapacity.nextLevelCost"
           @click="upgradeAdventurerCapacity()"
       >
-        Upgrade ({{ guild.adventurerCapacity.nextLevelCost.toFixed(0) }} gold)
+        Upgrade ({{ formatGold(guild.adventurerCapacity.nextLevelCost) }} gold)
       </button>
     </div>
   </section>
@@ -17,6 +17,7 @@
 <script lang="ts">
 import {Guild} from "@/classes/Guild";
 import {defineComponent, type PropType} from "vue";
+import formatGold from "../classes/NumberMagic";
 
 export default defineComponent({
   name: "UpgradesList",
@@ -30,6 +31,7 @@ export default defineComponent({
     }
   },
   methods: {
+    formatGold,
     upgradeAdventurerCapacity(): void {
       if (!this.guild.adventurerCapacity) return;
       if (!this.guild.adventurerCapacity.nextLevelCost) return;

src/views/HomeView.vue

@@ -13,7 +13,7 @@
         <img src="/img/quests/overlays/nail.png" alt="" draggable="false"/>
       </div>
       <section class="coffer">
-        <p>Coffer: {{ guild.gold }} gold</p>
+        <p>Coffer: {{ formatGold(guild.gold) }} gold</p>
       </section>
       <section class="upgrade">
         <p>Guild level: {{ guild.level }}</p>
@@ -40,9 +40,11 @@ import {Guild} from "@/classes/Guild";
 
 import {version} from "../../package.json"
 import UpgradesList from "@/components/UpgradesList.vue";
+import formatGold from "../classes/NumberMagic";
 
 export default defineComponent({
   name: "GuildView",
+  methods: {formatGold},
   components: {UpgradesList},
   data: () => {
     return {