clean class structure, adjust routing & views;

src/App.vue

@@ -1,7 +1,7 @@
 <template>
   <nav>
     <router-link to="/">Home</router-link> |
-    <router-link to="/about">About</router-link>
+    <router-link to="/game">Game</router-link>
   </nav>
   <router-view/>
 </template>

src/data/Items.js

@@ -0,0 +1,3 @@
+export const ITEM_IRON_ORE = 1;
+export const ITEM_IRON_BAR = 2;
+export const ITEM_COAL = 3;

src/models/Cluster.js

@@ -0,0 +1,18 @@
+export default class Cluster {
+    constructor() {
+        this.inventory = [];
+        this.factories = [];
+    }
+
+    startAll() {
+        this.factories.forEach((factory) => {
+            factory.start();
+        })
+    }
+
+    stopAll() {
+        this.factories.forEach((factory) => {
+            factory.stop();
+        })
+    }
+}

src/models/Factory.js

@@ -1,8 +1,6 @@
-const ITEM_IRON_ORE = 1;
-const ITEM_IRON_BAR = 2;
-const ITEM_COAL = 3;
+import {ITEM_COAL, ITEM_IRON_BAR, ITEM_IRON_ORE} from "@/data/Items";
 
-class Factory {
+export default class Factory {
     static get price() {
         return 400;
     }
@@ -102,43 +100,3 @@ class Factory {
         return this.inventory.length >= this.inventoryLimit;
     }
 }
-
-class Cluster {
-    constructor() {
-        this.inventory = [];
-        this.factories = [];
-    }
-
-    startAll() {
-        this.factories.forEach((factory) => {
-            factory.start();
-        })
-    }
-
-    stopAll() {
-        this.factories.forEach((factory) => {
-            factory.stop();
-        })
-    }
-}
-
-class Game {
-    constructor() {
-        this.money = 1_000;
-        this.cluster = new Cluster();
-        this.inventory = [];
-    }
-
-    buyFactory() {
-        if (this.money >= Factory.price) {
-            this.cluster.factories.push(new Factory());
-            this.money -= Factory.price;
-        } else {
-            console.warn('💰 Not enough money to buy a factory');
-        }
-    }
-}
-
-let game = new Game();
-game.buyFactory();
-game.cluster.startAll();

src/models/Game.js

@@ -0,0 +1,19 @@
+import Cluster from "@/models/Cluster";
+import Factory from "@/models/Factory";
+
+export default class Game {
+    constructor() {
+        this.money = 1_000;
+        this.cluster = new Cluster();
+        this.inventory = [];
+    }
+
+    buyFactory() {
+        if (this.money >= Factory.price) {
+            this.cluster.factories.push(new Factory());
+            this.money -= Factory.price;
+        } else {
+            console.warn('💰 Not enough money to buy a factory');
+        }
+    }
+}

src/router/index.js

@@ -8,12 +8,12 @@ const routes = [
     component: HomeView
   },
   {
-    path: '/about',
+    path: '/game',
     name: 'about',
     // route level code-splitting
     // this generates a separate chunk (about.[hash].js) for this route
     // which is lazy-loaded when the route is visited.
-    component: () => import(/* webpackChunkName: "about" */ '../views/AboutView.vue')
+    component: () => import(/* webpackChunkName: "about" */ '../views/GameView.vue')
   }
 ]
 

src/views/AboutView.vue

@@ -1,5 +0,0 @@
-<template>
-  <div class="about">
-    <h1>This is an about page</h1>
-  </div>
-</template>

src/views/GameView.vue

@@ -0,0 +1,27 @@
+<template>
+    <div class="about">
+        <h1>Vactory</h1>
+        <button v-on:click="startGame">Start Gamne</button>
+    </div>
+</template>
+
+<script>
+import Game from "@/models/Game";
+
+export default {
+    data() {
+        return {
+            game: null,
+        }
+    },
+    mounted() {
+        this.game = new Game();
+    },
+    methods: {
+        startGame() {
+            this.game.buyFactory();
+            this.game.cluster.startAll();
+        }
+    }
+}
+</script>