style buttons and fix up number formatting

src/App.vue

@@ -157,7 +157,8 @@ export default defineComponent({
             data.portrait,
             data.attackExponent ?? 1.1,
             data.level ?? 1,
-            data.exp ?? 0
+            data.exp ?? 0,
+            data.prestige ?? 0,
           );
           adventurer.busy = data.busy;
           adventurers[data.id] = adventurer;

src/assets/main.scss

@@ -1,8 +1,3 @@
-
-:root {
-
-}
-
 body {
   margin: 0;
   padding: 0 0 10rem;
@@ -62,3 +57,28 @@ body {
     border-image: url("/img/borders/metal_corner.png") 30 round;
   }
 }
+
+.button {
+  padding: 0.5rem 1rem;
+  font-size: 1.2rem;
+  font-family: 'EB Garamond', serif;
+  font-weight: bold;
+  cursor: pointer;
+  border: 2px solid rgb(0, 0, 0);
+  transition: filter 0.05s linear;
+  white-space: nowrap;
+  &.metal {
+    background-image: url("/img/borders/metal_strip.png");
+    background-size: contain;
+    background-blend-mode: darken;
+    background-repeat: repeat;
+    color: #dcdcdc;
+  }
+  &:disabled {
+    opacity: 0.55;
+    cursor: not-allowed;
+  }
+  &:hover:not(:disabled) {
+    filter: brightness(1.2);
+  }
+}

src/classes/Guild.ts

@@ -1,6 +1,7 @@
 import type {GuildUpgrade} from "@/classes/GuildUpgrade";
 import {AdventurerCapacityUpgrade} from "@/classes/guildUpgrades/AdventurerCapacityUpgrade";
-import formatGold from "@/classes/NumberMagic";
+import {formatGold} from "@/classes/NumberMagic";
+
 
 export class Guild {
     gold: number;

src/classes/NumberMagic.ts

@@ -1,10 +1,20 @@
-const formatter = new Intl.NumberFormat('en-US', {
+const goldFormatter = 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 {
+const damageFormatter = new Intl.NumberFormat('en-US', {
-    return formatter.format(number);
+    maximumFractionDigits: 2,
+    // @ts-ignore - typescript doesn't know about this option for some godforsaken reason
+    notation: "compact",
+});
+
+export function formatGold(number: number): string {
+    return goldFormatter.format(number);
+}
+
+export function formatDamage(number: number): string {
+    return damageFormatter.format(number);
 }

src/components/AdventurerDetails.vue

@@ -11,10 +11,11 @@
       <p>Prestige level: {{ adventurer.prestige }}</p>
 
       <p>Exp: {{ adventurer.exp }} / {{ adventurer.getNextLevelExpRequirement() }}</p>
-      <p>DPS: {{ adventurer.getDPS().toPrecision(2) }}</p>
+      <p>DPS: {{ formatDamage(adventurer.getDPS()) }}</p>
     </div>
     <div class="adventurer-upgrades">
       <button
+          class="button metal"
           :disabled="!adventurer.canPrestigeUp()"
           :title="!adventurer.canPrestigeUp() ? 'Adventurer needs to be at max level to prestige up' : ''"
           @click="() => {
@@ -33,9 +34,11 @@
 <script lang="ts">
 import type {Adventurer} from "@/classes/Adventurer";
 import {defineComponent, type PropType} from "vue";
+import {formatDamage} from "../classes/NumberMagic";
 
 export default defineComponent({
   name: "AdventurerDetails",
+  methods: {formatDamage},
   props: {
     adventurer: {
       type: Object as PropType<Adventurer | null>,

src/components/UpgradesList.vue

@@ -4,6 +4,7 @@
     <div class="upgrade">
       <span>Adventurer capacity (level {{ guild.adventurerCapacity.level }})</span>
       <button
+          class="button metal"
           v-if="guild.adventurerCapacity.nextLevelCost"
           :disabled="guild.gold < guild.adventurerCapacity.nextLevelCost"
           @click="upgradeAdventurerCapacity()"
@@ -17,7 +18,7 @@
 <script lang="ts">
 import {Guild} from "@/classes/Guild";
 import {defineComponent, type PropType} from "vue";
-import formatGold from "../classes/NumberMagic";
+import {formatGold} from "@/classes/NumberMagic";
 
 export default defineComponent({
   name: "UpgradesList",
@@ -67,7 +68,7 @@ export default defineComponent({
     width: min(25rem, 100%);
     justify-content: center;
     align-items: center;
-    gap: 1rem;
+    gap: 0.2rem;
   }
 }
 </style>

src/views/HomeView.vue

@@ -17,8 +17,12 @@
       </section>
       <section class="upgrade">
         <p>Guild level: {{ guild.level }}</p>
-        <button :disabled="guild.upgradeCost ? guild.gold < guild.upgradeCost : true" @click="guild.upgrade()">
+        <button
-          <span>Upgrade guild level</span><br>
+            class="button metal"
+            :disabled="guild.upgradeCost ? guild.gold < guild.upgradeCost : true"
+            @click="guild.upgrade()"
+        >
+          <span>Upgrade guild level </span>
           <span>({{ guild.displayUpgradeCost }})</span>
         </button>
       </section>
@@ -40,7 +44,7 @@ import {Guild} from "@/classes/Guild";
 
 import {version} from "../../package.json"
 import UpgradesList from "@/components/UpgradesList.vue";
-import formatGold from "../classes/NumberMagic";
+import {formatGold} from "@/classes/NumberMagic";
 
 export default defineComponent({
   name: "GuildView",