Refactor everything to oop because c# brainwash

src/App.vue

@@ -1,21 +1,61 @@
 <script setup lang="ts">
-import player from '@/player'
-import { map } from './scripts/map'
-import { computed } from 'vue'
-import HeaderDiv from './components/NavDiv/HeaderDiv.vue'
-import NavDiv from './components/NavDiv/NavDiv.vue'
+import { computed } from "vue";
 
-const x = computed(() => player.position[0])
-const y = computed(() => player.position[1])
+import player from "@/player";
+import { format } from "@/common/notations";
+import { map } from "@/map/map";
+
+import ArrowButtons from "@/map/ArrowButtons.vue";
+
+const x = computed(() => player.position[0]);
+const y = computed(() => player.position[1]);
 </script>
 
 <template>
     <header></header>
     <main>
-        <HeaderDiv />
+        <!--Game header (for grass)-->
+        <div class="header">
+            <div class="grass">
+                {{ format(player.grass, 2, 0) }}
+            </div>
+        </div>
+        <!--Main game window-->
         <component :is="map[y][x]" />
-        <NavDiv />
+        <!--Game footer (arrows)-->
+        <div class="footer">
+            <ArrowButtons />
+        </div>
     </main>
 </template>
 
-<style scoped></style>
+<style scoped>
+.header {
+    position: fixed;
+    top: 0%;
+    left: 0%;
+    width: 100vw;
+    padding: 10px;
+    background-color: red;
+    margin: auto;
+}
+
+div.grass {
+    margin: auto;
+    border: 3px solid green;
+    background-color: greenyellow;
+    width: 50%;
+    text-align: right;
+    font-size: 32px;
+    text-emphasis-color: white;
+}
+
+div.footer {
+    position: fixed;
+    display: inline;
+    left: 0%;
+    bottom: 0%;
+    width: 100%;
+    height: 100px;
+}
+</style>

src/accel/CityWindow.vue

@@ -0,0 +1,21 @@
+<script setup lang="ts">
+import GrassCanvas from "@/grass/GrassCanvas.vue";
+import { NormalGrassField } from "@/grass/grass";
+
+const field = new NormalGrassField();
+</script>
+
+<template>
+    <div class="window">
+        <GrassCanvas :grassField="field" />
+        <GrassCanvas :grassField="field" />
+        <GrassCanvas :grassField="field" />
+        <GrassCanvas :grassField="field" />
+    </div>
+</template>
+
+<style scoped>
+.window {
+    background-color: rgb(0, 255, 213);
+}
+</style>

src/accel/FieldWindow.vue

@@ -0,0 +1,21 @@
+<script setup lang="ts">
+import { NormalGrassField } from "@/grass/grass";
+
+import UpgradeGrid from "@/common/Upgrade/UpgradeGrid.vue";
+import GrassCanvas from "@/grass/GrassCanvas.vue";
+
+const field = new NormalGrassField();
+</script>
+
+<template>
+    <div class="window">
+        <UpgradeGrid />
+        <GrassCanvas :grassField="field" />
+    </div>
+</template>
+
+<style scoped>
+.window {
+    background-color: rgb(0, 255, 213);
+}
+</style>

src/assets/base.css

@@ -70,14 +70,14 @@ body {
         Inter,
         -apple-system,
         BlinkMacSystemFont,
-        'Segoe UI',
+        "Segoe UI",
         Roboto,
         Oxygen,
         Ubuntu,
         Cantarell,
-        'Fira Sans',
-        'Droid Sans',
-        'Helvetica Neue',
+        "Fira Sans",
+        "Droid Sans",
+        "Helvetica Neue",
         sans-serif;
     font-size: 15px;
     text-rendering: optimizeLegibility;

src/assets/main.css

@@ -1,4 +1,4 @@
-@import './base.css';
+@import "./base.css";
 
 #app {
     max-width: 1280px;

src/common/Currency.ts

@@ -0,0 +1,6 @@
+import type Decimal from "break_infinity.js";
+
+export interface Currency {
+    get amount(): Decimal;
+    set amount(value: Decimal);
+}

src/common/Upgrade/Upgrade.ts

@@ -0,0 +1,49 @@
+import type Decimal from "break_infinity.js";
+import type { Currency } from "../Currency";
+
+export abstract class Upgrade {
+    /** Currency the upgrade acts upon */
+    public readonly currency: Currency;
+
+    /** Description of the upgrade in expanded view */
+    public readonly description: string;
+
+    constructor(currency: Currency, description: string) {
+        this.currency = currency;
+        this.description = description;
+    }
+
+    /** The current level of the upgrade */
+    abstract level(): number;
+    /** The max level of the upgrade */
+    abstract levelCap(): number;
+
+    /** The next cost of an upgrde */
+    abstract nextCost(): Decimal;
+
+    /** 
+     * return {boolean} whether buying was successful or not 
+     */
+    abstract buyOne(): boolean;
+
+    /** Buy the next 25 levels */
+    buyNext(): void {
+        const remaining = this.level() % 25;
+        for (let purchased = 25 - remaining; purchased > 0; purchased--) {
+            if (!this.buyOne()) {
+                break;
+            }
+        }
+    }
+
+    buyMax() {
+        while (this.buyOne()) {
+            continue;
+        }
+    }
+
+    /** The icon on top of the upgrade */
+    abstract icon(): string;
+    /** The background behind the upgrade */
+    abstract background(): string;
+}