Browse Source

Refactor; Add farm; reformat;

master
Nero Ignis 4 years ago
parent
commit
66d5845213
  1. 1
      .idea/idle-build-up.iml
  2. 2
      .idea/jsLibraryMappings.xml
  3. BIN
      img/corn.png
  4. BIN
      img/medieval_farm.png
  5. 34
      index.html
  6. 69
      js/app.js

1
.idea/idle-build-up.iml

@ -5,5 +5,6 @@ @@ -5,5 +5,6 @@
<orderEntry type="inheritedJdk" />
<orderEntry type="sourceFolder" forTests="false" />
<orderEntry type="library" name="tailwindcss" level="application" />
<orderEntry type="library" name="jquery-3.2.1.slim" level="application" />
</component>
</module>

2
.idea/jsLibraryMappings.xml

@ -1,6 +1,6 @@ @@ -1,6 +1,6 @@
<?xml version="1.0" encoding="UTF-8"?>
<project version="4">
<component name="JavaScriptLibraryMappings">
<file url="PROJECT" libraries="{tailwindcss}" />
<file url="PROJECT" libraries="{jquery-3.2.1.slim, tailwindcss}" />
</component>
</project>

BIN
img/corn.png

Binary file not shown.

After

Width:  |  Height:  |  Size: 2.9 KiB

BIN
img/medieval_farm.png

Binary file not shown.

After

Width:  |  Height:  |  Size: 6.4 KiB

34
index.html

@ -13,34 +13,34 @@ @@ -13,34 +13,34 @@
<div class="row">
<div class="col-md-12">
<div class="card">
<div class="card-header">
<a class="card-header" data-toggle="collapse" href="#collapseResources" role="button" aria-expanded="true" aria-controls="collapseResources">
<h3>Resources</h3>
</div>
<div class="card-body">
<h1><img class="resource-icon" src="img/gold.png"> {{ this.getAmount() }}</h2>
</a>
<div class="card-body" id="collapseResources">
<h1><img class="resource-icon" src="img/gold.png"> {{ this.getAmount() }}</h1>
<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/>
<h3 v-if="resources.wood > 0"><img class="resource-icon" src="img/wood.png"> {{ resources.wood }}</h3>
<h3 v-if="resources.stone > 0"><img class="resource-icon" src="img/stone.png"> {{ resources.stone }}</h3>
<h3 v-if="resources.iron > 0"><img class="resource-icon" src="img/iron.png"> {{ resources.iron }}</h3>
<h3 v-if="resources.bricks > 0"><img class="resource-icon" src="img/bricks.png"> {{ resources.bricks }}</h3>
</div>
</div>
<div class="card">
<div class="card-header">
<div class="card-header" data-toggle="collapse" href="#collapseOwned" role="button" aria-expanded="true" aria-controls="collapseOwned">
<h3>Owned buildings</h3>
</div>
<div class="card-body">
<div class="card-body" id="collapseOwned">
<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'">
<img class="building-icon" :src="'img/' + building.icon + '.png'" :alt="building.name + '_icon'">
</div>
<strong>{{ building.name }} (Level {{ building.level }})</strong><br>
{{ building.amount }} <img class="resource-icon" :src= "'img/' + building.resource + '.png'"> / {{ building.intervalInSeconds }}s<br/>
{{ building.amount }} <img class="resource-icon" :src="'img/' + building.resource + '.png'" :alt="building.resource + '_icon'"> / {{ 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 }} %
@ -52,12 +52,11 @@ @@ -52,12 +52,11 @@
</div>
<div class="card">
<div class="card-header">
<div class="card-header" data-toggle="collapse" href="#collapseAvailable" role="button" aria-expanded="true" aria-controls="collapseAvailable">
<h3>Available buildings</h3>
</div>
<div class="card-body">
<div class="card-body" id="collapseAvailable">
<ul class="list-group">
<li class="list-group-item" v-for="building in buildings" v-if="!building.isOwned">
<div class="float-right">
@ -68,7 +67,6 @@ @@ -68,7 +67,6 @@
</div>
<strong>{{ building.name }}</strong><br>
{{ building.amount }} <img class="resource-icon" :src="'img/' + building.resource + '.png'"> / {{ building.intervalInSeconds }}s<br/>
</li>
</ul>
</div>
@ -77,9 +75,11 @@ @@ -77,9 +75,11 @@
</div>
</div>
<script src="https://code.jquery.com/jquery-3.2.1.slim.min.js" integrity="sha384-KJ3o2DKtIkvYIK3UENzmM7KCkRr/rE9/Qpg6aAZGJwFDMVNA/GpGFF93hXpG5KkN" crossorigin="anonymous"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.12.9/umd/popper.min.js" integrity="sha384-ApNbgh9B+Y1QKtv3Rn7W3mgPxhU9K/ScQsAP7hUibX39j7fakFPskvXusvfa0b4Q" crossorigin="anonymous"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/js/bootstrap.min.js" integrity="sha384-JZR6Spejh4U02d8jOt6vLEHfe/JQGiRRSQQxSfFWpi1MquVdAyjUar5+76PVCmYl" crossorigin="anonymous"></script>
<script src="https://kit.fontawesome.com/b54a4cceff.js" crossorigin="anonymous"></script>
<script src="https://cdn.jsdelivr.net/npm/vue@2/dist/vue.js"></script>
<script src="js/MoneyManager.js"></script>
<script src="js/app.js"></script>
</body>
</html>

69
js/app.js

@ -4,52 +4,74 @@ let game = new Vue({ @@ -4,52 +4,74 @@ let game = new Vue({
money: 0,
resources: {
wood: 0,
stone: 0
stone: 0,
iron: 0,
bricks: 0,
corn: 0
},
buildings: [
{
name: 'Bank',
intervalInSeconds: 15,
amount: 100,
level: 1,
price: 1000,
resource: 'gold',
icon: 'medieval_largeCastle',
level: 1,
maxLevel: 20,
isOwned: true,
isUpgradeable: true,
maxLevel: 20,
amount: 100,
amountMultiplicator: 1.5,
intervalInSeconds: 30,
intervalMultiplicator: 1,
price: 1000,
priceMultiplicator: 10,
intervalMultiplicator: 0.95,
icon: 'medieval_largeCastle'
},
{
name: 'Lumberjack',
intervalInSeconds: 10,
amount: 2,
level: 0,
price: 100,
resource: 'wood',
icon: 'medieval_lumber',
level: 0,
maxLevel: 15,
isOwned: false,
isUpgradeable: true,
maxLevel: 15,
priceMultiplicator: 2,
amount: 2,
amountMultiplicator: 1,
intervalInSeconds: 10,
intervalMultiplicator: 0.95,
icon: 'medieval_lumber'
price: 100,
priceMultiplicator: 2
},
{
name: 'Quarry',
intervalInSeconds: 20,
amount: 2,
resource: 'stone',
icon: 'medieval_mine',
level: 0,
maxLevel: 15,
isOwned: false,
isUpgradeable: true,
amount: 2,
amountMultiplicator: 1,
intervalInSeconds: 20,
intervalMultiplicator: 0.95,
price: 250,
resource: 'stone',
priceMultiplicator: 2
},
{
name: 'Farm',
resource: 'corn',
icon: 'medieval_farm',
level: 0,
maxLevel: 25,
isOwned: false,
isUpgradeable: true,
maxLevel: 15,
amount: 5,
amountMultiplicator: 2,
price: 500,
priceMultiplicator: 2,
intervalMultiplicator: 0.95,
icon: 'medieval_mine'
intervalInSeconds: 60,
intervalMultiplicator: 1
},
],
currentQuest: null,
loadedIntervals: []
},
created() {
@ -77,6 +99,9 @@ let game = new Vue({ @@ -77,6 +99,9 @@ let game = new Vue({
case 'stone':
this.resources.stone += amount;
break;
case 'corn':
this.resources.corn += amount;
break;
case 'gold':
this.money += amount;
break;
@ -91,7 +116,7 @@ let game = new Vue({ @@ -91,7 +116,7 @@ let game = new Vue({
},
getAmount() {
return this.money;
return this.money.toFixed(0);
},
getAmountFormatted() {

Loading…
Cancel
Save