From 56407505ea5c02aad446c0b792b05adb21c6532f Mon Sep 17 00:00:00 2001
From: YouHaveTrouble <youhavetrouble@youhavetrouble.me>
Date: Sun, 2 Apr 2023 21:54:11 +0200
Subject: [PATCH] add formatting to gold display

---
 package.json                    |  2 +-
 src/classes/Guild.ts            |  3 ++-
 src/classes/NumberMagic.ts      | 10 ++++++++++
 src/components/UpgradesList.vue |  4 +++-
 src/views/HomeView.vue          |  4 +++-
 5 files changed, 19 insertions(+), 4 deletions(-)
 create mode 100644 src/classes/NumberMagic.ts

diff --git a/package.json b/package.json
index 46b3bc0..0026dc8 100644
--- a/package.json
+++ b/package.json
@@ -1,6 +1,6 @@
 {
   "name": "adventurers-guild",
-  "version": "0.3.0",
+  "version": "0.4.0",
   "private": true,
   "scripts": {
     "dev": "vite",
diff --git a/src/classes/Guild.ts b/src/classes/Guild.ts
index c4c31aa..eeaab3d 100644
--- a/src/classes/Guild.ts
+++ b/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;
         }
     }
diff --git a/src/classes/NumberMagic.ts b/src/classes/NumberMagic.ts
new file mode 100644
index 0000000..6f7673e
--- /dev/null
+++ b/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);
+}
\ No newline at end of file
diff --git a/src/components/UpgradesList.vue b/src/components/UpgradesList.vue
index 709da7e..d23003e 100644
--- a/src/components/UpgradesList.vue
+++ b/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;
diff --git a/src/views/HomeView.vue b/src/views/HomeView.vue
index aea130b..299058a 100644
--- a/src/views/HomeView.vue
+++ b/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 {