Massive refactor; design;

css/app.css

@@ -0,0 +1,17 @@
+.resource-icon {
+    max-height: 1.5em;
+    display: inline;
+}
+
+.building-icon {
+    max-height: 3em;
+    padding-right: 1em;
+}
+
+.card {
+    margin-bottom: 2em;
+}
+
+.progress {
+    margin-top: 1em;
+}

index.html

@@ -12,34 +12,68 @@
 <div id="root" class="container mt-2">
     <div class="row">
         <div class="col-md-12">
-            <h1 style="font-size: 42pt">{{ this.getAmountFormatted() }}</h1>
-            <hr>
-            <h3>Buildings owned</h3>
-            <ul class="list-group">
-                <li class="list-group-item" v-for="building in buildings" v-if="building.isOwned">
-                    <div class="float-right">
-                        <a href="javascript:" @click="buyUpgrade(building)"><i class="fas fa-arrow-up text-success"></i> Upgrade for {{ building.price }}</a>
+            <div class="card">
+                 <div class="card-header">
+                        <h3>Resources</h3>
                     </div>
-                    {{ building.name }} (Level {{ building.level }}) earning {{ building.amount }} every {{ building.intervalInSeconds }} seconds.<br/>
-                    <div class="progress">
-                        <div class="progress-bar progress-bar-striped" role="progressbar" :style="'width: ' + building.loader + '%;'" aria-valuenow="10" aria-valuemin="0" aria-valuemax="100">
-                            {{ building.loader }} %
-                        </div>
+                <div class="card-body">
+                    <h1><img class="resource-icon" src="img/gold.png">  {{ this.getAmount() }}</h2>
+                    <br>
+                    <h3 v-if="resources.wood > 0"><img class="resource-icon" src="img/wood.png"> {{ resources.wood }}</h3><br/>
+                    <h3 v-if="resources.stone > 0"><img class="resource-icon" src="img/stone.png"> {{ resources.stone }}</h3><br/>
+                    <h3 v-if="resources.iron > 0"><img class="resource-icon" src="img/iron.png"> {{ resources.iron }}</h3><br/>
+                    <h3 v-if="resources.bricks > 0"><img class="resource-icon" src="img/bricks.png"> {{ resources.bricks }}</h3><br/>
+                </div>
+            </div>
+           
+            <div class="card">
+                 <div class="card-header">
+                        <h3>Owned buildings</h3>
                     </div>
-                </li>
-            </ul>
+                <div class="card-body">
+                      <ul class="list-group">
+                        <li class="list-group-item" v-for="building in buildings" v-if="building.isOwned">
+                            <div class="float-right">
+                                <a href="javascript:" @click="buyUpgrade(building)"><i class="fas fa-arrow-up text-success"></i> {{ building.price }} <img class="resource-icon" src="img/gold.png"> </a>
+                             </div>
+                              <div class="float-left">
+                                  <img class="building-icon" :src="'img/' + building.icon + '.png'">
+                              </div>
+                            <strong>{{ building.name }} (Level {{ building.level }})</strong><br> 
+                            {{ building.amount }} <img class="resource-icon" :src=  "'img/' + building.resource + '.png'"> / {{ building.intervalInSeconds }}s<br/>
+                            <div class="progress">
+                                <div class="progress-bar progress-bar-success text-light" role="progressbar" :style="'width: ' + building.loader + '%;'" aria-valuenow="10" aria-valuemin="0" aria-valuemax="100">
+                                   {{ building.loader }} %
+                                </div>
+                            </div>
+                        </li>
+                    </ul>
+                </div>
+                </div>
+        
            
-            <hr>
-            <h3>Buildings to buy</h3>
+          
+       <div class="card">
+                 <div class="card-header">
+                        <h3>Available buildings</h3>
+                    </div>
+                <div class="card-body">
             <ul class="list-group">
                 <li class="list-group-item" v-for="building in buildings" v-if="!building.isOwned">
                     <div class="float-right">
-                        <a href="javascript:" @click="buyBuilding(building)"><i class="fas fa-shopping-basket text-success"></i> Buy for {{ building.price }}</a>
+                        <a href="javascript:" @click="buyBuilding(building)"><i class="fas fa-shopping-basket text-success"></i> {{ building.price }} <img class="resource-icon" src="img/gold.png"> </a>
+                    </div>
+                    <div class="float-left">
+                        <img class="building-icon" :src="'img/' + building.icon + '.png'">
                     </div>
-                    {{ building.name }} could earn {{ building.amount }} every {{ building.intervalInSeconds }} seconds.<br/>
+                    <strong>{{ building.name }}</strong><br>
+                          {{ building.amount }} <img class="resource-icon" :src=  "'img/' + building.resource + '.png'"> / {{ building.intervalInSeconds }}s<br/>
+                       
                 </li>
             </ul>
         </div>
+        </div>
+        </div>
     </div>
 </div>
 

js/MoneyManager.js

@@ -1,34 +0,0 @@
-class MoneyManager {
-    constructor(startMoney = null) {
-        this.money = startMoney ?? this.getSavedMoney();
-        return this.saveMoney();
-    }
-
-    saveMoney() {
-        localStorage.setItem('money', String(this.money));
-        return this.getSavedMoney();
-    }
-
-    getSavedMoney() {
-        this.money = Number(localStorage.getItem('money') ?? 0);
-        return this.money;
-    }
-
-    add(amount = 0) {
-        this.money += amount;
-        return this.saveMoney();
-    }
-
-    sub(amount = 0) {
-        this.money -= amount;
-        return this.saveMoney();
-    }
-
-    getAmount() {
-        return this.money;
-    }
-
-    getAmountFormatted() {
-        return Intl.NumberFormat('de-DE', {style: 'currency', currency: 'EUR'}).format(this.money);
-    }
-}

js/app.js

@@ -2,15 +2,53 @@ let game = new Vue({
     el: '#root',
     data: {
         money: 0,
+        resources: {
+            wood: 0,
+            stone: 0
+        },
         buildings: [
             {
-                name: 'TestBuilding',
+                name: 'Bank',
+                intervalInSeconds: 15,
+                amount: 100,
+                level: 1,
+                price: 1000,
+                resource: 'gold',
+                isOwned: true,
+                isUpgradeable: true,
+                maxLevel: 20,
+                priceMultiplicator: 10,
+                intervalMultiplicator: 0.95,
+                icon: 'medieval_largeCastle'
+            },
+            {
+                name: 'Lumberjack',
                 intervalInSeconds: 10,
-                amount: 1000,
+                amount: 2,
                 level: 0,
                 price: 100,
-                isOwned: false
-            }
+                resource: 'wood',
+                isOwned: false,
+                isUpgradeable: true,
+                maxLevel: 15,
+                priceMultiplicator: 2,
+                intervalMultiplicator: 0.95,
+                icon: 'medieval_lumber'
+            },
+            {
+                name: 'Quarry',
+                intervalInSeconds: 20,
+                amount: 2,
+                level: 0,
+                price: 250,
+                resource: 'stone',
+                isOwned: false,
+                isUpgradeable: true,
+                maxLevel: 15,
+                priceMultiplicator: 2,
+                intervalMultiplicator: 0.95,
+                icon: 'medieval_mine'
+            },
         ],
         loadedIntervals: []
     },
@@ -31,12 +69,23 @@ let game = new Vue({
             return this.money;
         },
 
-        add(amount = 0) {
-            this.money += amount;
+        add(amount = 0, resource = 'gold') {
+            switch (resource) {
+                case 'wood':
+                   this.resources.wood += amount;
+                   break;
+                case 'stone':
+                   this.resources.stone += amount;
+                   break;
+                case 'gold':
+                   this.money += amount;
+                   break;
+            }
+            
             return this.saveMoney();
         },
 
-        sub(amount = 0) {
+        sub(amount = 0, resource = false) {
             this.money -= amount;
             return this.saveMoney();
         },
@@ -55,27 +104,30 @@ let game = new Vue({
             let game = this;
             this.buildings.forEach((building) => {
                 if (building.isOwned) {
-                    this.loadedIntervals.push(
-                        setInterval(() => {
-                            game.add(building.amount);
-                        }, building.intervalInSeconds * 1000)
-                    );
-
-                    this.loadedIntervals.push(
-                        setInterval(() => {
-                            if (building.loader < 100) {
-                                building.loader += 10;
-                            } else {
-                                building.loader = 10;
-                            }
-
-                            game.$forceUpdate()
-                        }, building.intervalInSeconds / 10 * 1000)
-                    )
+                    game.initiateIntervals(building);
                 }
             });
         },
         
+        initiateIntervals(building) {
+            building.intervalEarnID = setInterval(() => {
+                            game.add(building.amount, building.resource);
+                        }, building.intervalInSeconds * 1000);
+                    
+                    building.intervalLoadingID = setInterval(() => {
+                        if (building.loader < 100) {
+                            building.loader += 10;
+                        } else {
+                            building.loader = 10;
+                        }
+
+                        game.$forceUpdate()
+                    }, building.intervalInSeconds / 10 * 1000)
+                   
+
+                    this.loadedIntervals.push(building.intervalEarnID, building.intervalLoadingID);
+        },
+
         killIntervals() {
             this.buildings.forEach((building) => {
                 building.loader = 0;
@@ -113,24 +165,34 @@ let game = new Vue({
         },
 
         upgradeBuilding(building, first = false) {
-            this.killIntervals();
+            // this.killIntervals();
 
-            if (building.level < 15) {
+            if (building.level < (building.maxLevel - 1)) {
                 building.level++;
             } else {
                 building.level = 'MAX';
+                building.isUpgradeable = false;
             }
 
-            building.price = Number(building.price * 1.25).toFixed(2);
+            building.price = Number(building.price * building.priceMultiplicator).toFixed(2);
 
             if (first === false) {
-                building.intervalInSeconds = Number(building.intervalInSeconds * 0.95).toFixed(2);
+                building.intervalInSeconds = Number(building.intervalInSeconds * building.intervalMultiplicator).toFixed(2);
             }
 
-            this.reloadBuildings();
+            // this.reloadBuildings();
+            this.reloadSingleBuilding(building);
             this.saveBuildings();
         },
         
+        reloadSingleBuilding(building) {
+            clearInterval(building.intervalEarnID);
+            clearInterval(building.intervalLoadingID);
+            building.loader = 10;
+            
+            this.initiateIntervals(building);
+        },
+
         saveBuildings() {
             localStorage.setItem('buildings', JSON.stringify(this.buildings));
         },