upgrade section and first upgrade,

correctly update guild upgrade cost

src/classes/Guild.ts

@@ -26,10 +26,12 @@ export class Guild {
         this.level += 1;
         if (this.level >= 7) {
             this.displayUpgradeCost = "Max level";
+            this.upgradeCost = null;
         } else {
             const newCost = this.getUpgradeCost();
             if (newCost === null) return;
             this.displayUpgradeCost = newCost;
+            this.upgradeCost = newCost;
         }
     }
 

src/classes/guildUpgrades/AdventurerCapacityUpgrade.ts

@@ -14,13 +14,14 @@ export class AdventurerCapacityUpgrade extends GuildUpgrade {
     }
 
     getCostForLevel(level: number): number {
-        return 1500 + ((level - 1) * 1.15 * 1500);
+        const scalingFactor = Math.pow(1.25, level - 1);
+        return Math.floor(1500 * scalingFactor * Math.pow(level, 1.25));
     }
 
     /**
      * Returns the number of adventurers the guild can have
      */
     getAdventurerCapacity(): number {
-        return 2 + this.level ;
+        return 1 + this.level ;
     }
 }

src/components/UpgradesList.vue

@@ -0,0 +1,68 @@
+<template>
+<section class="upgrades">
+<h2>Upgrades</h2>
+  <div class="upgrade">
+    <span>Adventurer capacity (level {{ guild.adventurerCapacity.level }})</span>
+    <button
+        v-if="guild.adventurerCapacity.nextLevelCost"
+        :disabled="guild.gold < guild.adventurerCapacity.nextLevelCost"
+        @click="upgradeAdventurerCapacity()"
+    >
+      Upgrade ({{guild.adventurerCapacity.nextLevelCost.toFixed(0)}} gold)
+    </button>
+  </div>
+</section>
+</template>
+
+<script lang="ts">
+import { Guild } from "@/classes/Guild";
+import {defineComponent, type PropType} from "vue";
+
+export default defineComponent({
+  name: "UpgradesList",
+  props: {
+    guild: {
+      type: Object as PropType<Guild>,
+      default() {
+        return new Guild(1, 0) as Guild;
+      }
+    }
+  },
+  methods: {
+    upgradeAdventurerCapacity(): void {
+      if (!this.guild.adventurerCapacity) return;
+      if (!this.guild.adventurerCapacity.nextLevelCost) return;
+      if (this.guild.gold < this.guild.adventurerCapacity.nextLevelCost) return;
+      this.guild.gold -= this.guild.adventurerCapacity.nextLevelCost;
+      this.guild.adventurerCapacity.upgrade();
+    }
+  }
+});
+</script>
+
+<style lang="scss" scoped>
+.upgrades {
+  display: flex;
+  flex-direction: column;
+  justify-content: center;
+  align-items: center;
+  gap: 1rem;
+  h2 {
+    font-size: 1.75rem;
+    margin: 2rem 0 0;
+    padding: 0;
+  }
+  .upgrade {
+    text-align: center;
+    font-size: 1.25rem;
+    font-weight: bold;
+    display: flex;
+    flex-direction: row;
+    flex-wrap: wrap;
+    width: min(25rem, 100%);
+    justify-content: center;
+    align-items: center;
+    gap: 1rem;
+  }
+}
+</style>

src/views/HomeView.vue

@@ -15,6 +15,9 @@
         <span>({{ guild.displayUpgradeCost }})</span>
       </button>
     </section>
+    <section class="upgrade">
+      <UpgradesList :guild="guild" />
+    </section>
     <section class="upgrade">
       <span class="wipe-save" @click="$emit('wipeSave')">Wipe your save data</span>
     </section>
@@ -27,9 +30,11 @@ import type {PropType} from "vue";
 import {Guild} from "@/classes/Guild";
 
 import {version} from "../../package.json"
+import UpgradesList from "@/components/UpgradesList.vue";
 
 export default defineComponent({
   name: "GuildView",
+  components: {UpgradesList},
   data: () => {
     return {
       version: version,