diff --git a/css/app.css b/css/app.css index e69de29..58b6fa7 100644 --- a/css/app.css +++ b/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; +} \ No newline at end of file diff --git a/img/bricks.png b/img/bricks.png new file mode 100644 index 0000000..1a0738d Binary files /dev/null and b/img/bricks.png differ diff --git a/img/gold.png b/img/gold.png new file mode 100644 index 0000000..0012dda Binary files /dev/null and b/img/gold.png differ diff --git a/img/iron.png b/img/iron.png new file mode 100644 index 0000000..80108de Binary files /dev/null and b/img/iron.png differ diff --git a/img/medieval_largeCastle.png b/img/medieval_largeCastle.png new file mode 100644 index 0000000..cdf03db Binary files /dev/null and b/img/medieval_largeCastle.png differ diff --git a/img/medieval_lumber.png b/img/medieval_lumber.png new file mode 100644 index 0000000..41baedc Binary files /dev/null and b/img/medieval_lumber.png differ diff --git a/img/medieval_mine.png b/img/medieval_mine.png new file mode 100644 index 0000000..a9508e1 Binary files /dev/null and b/img/medieval_mine.png differ diff --git a/img/medieval_windmill.png b/img/medieval_windmill.png new file mode 100644 index 0000000..c5754eb Binary files /dev/null and b/img/medieval_windmill.png differ diff --git a/img/stone.png b/img/stone.png new file mode 100644 index 0000000..20172a7 Binary files /dev/null and b/img/stone.png differ diff --git a/img/wood.png b/img/wood.png new file mode 100644 index 0000000..3233a18 Binary files /dev/null and b/img/wood.png differ diff --git a/index.html b/index.html index ae7bae2..d2ed71e 100644 --- a/index.html +++ b/index.html @@ -12,34 +12,68 @@
-

{{ this.getAmountFormatted() }}

-
-

Buildings owned

-
    -
  • -
    - Upgrade for {{ building.price }} +
    +
    +

    Resources

    - {{ building.name }} (Level {{ building.level }}) earning {{ building.amount }} every {{ building.intervalInSeconds }} seconds.
    -
    -
    - {{ building.loader }} % -
    +
    +

    {{ this.getAmount() }}

    +
    +

    {{ resources.wood }}


    +

    {{ resources.stone }}


    +

    {{ resources.iron }}


    +

    {{ resources.bricks }}


    +
    +
    + +
    +
    +

    Owned buildings

    -
    • -
- -
-

Buildings to buy

+
+
    +
  • +
    + {{ building.price }} +
    +
    + +
    + {{ building.name }} (Level {{ building.level }})
    + {{ building.amount }} / {{ building.intervalInSeconds }}s
    +
    +
    + {{ building.loader }} % +
    +
    +
    • +
+
+
+ + + +
+
+

Available buildings

+
+
+
+
diff --git a/js/MoneyManager.js b/js/MoneyManager.js deleted file mode 100644 index aeb4dc0..0000000 --- a/js/MoneyManager.js +++ /dev/null @@ -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); - } -} \ No newline at end of file diff --git a/js/app.js b/js/app.js index fe04a97..5178b87 100644 --- a/js/app.js +++ b/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,26 +104,29 @@ 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) => { @@ -113,23 +165,33 @@ 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));