1nicerOli
/
idle-buildup
1
0
Fork 0
Code Issues 1 Pull Requests Releases Wiki Activity
Browse Source

Refactor; Add farm; reformat;

master
Nero Ignis 4 years ago
parent
7bb26feaef
commit
66d5845213
6 changed files with 120 additions and 94 deletions
Whitespace
Show all changes Ignore whitespace when comparing lines Ignore changes in amount of whitespace Ignore changes in whitespace at EOL
Unified View
Diff Options
Show Stats Download Patch File Download Diff File
  1. 1
      .idea/idle-build-up.iml
  2. 2
      .idea/jsLibraryMappings.xml
  3. BIN
      img/corn.png
  4. BIN
      img/medieval_farm.png
  5. 86
      index.html
  6. 105
      js/app.js

1
.idea/idle-build-up.iml
Unescape View File

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

2
.idea/jsLibraryMappings.xml
Unescape View File

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

BIN
img/corn.png
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 2.9 KiB

BIN
img/medieval_farm.png
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 6.4 KiB

86
index.html
Unescape View File

@ -13,73 +13,73 @@
<div class="row"> <div class="row">
<div class="col-md-12"> <div class="col-md-12">
<div class="card"> <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> <h3>Resources</h3>
</div> </a>
<div class="card-body"> <div class="card-body" id="collapseResources">
<h1><img class="resource-icon" src="img/gold.png"> {{ this.getAmount() }}</h2> <h1><img class="resource-icon" src="img/gold.png"> {{ this.getAmount() }}</h1>
<br> <br>
<h3 v-if="resources.wood > 0"><img class="resource-icon" src="img/wood.png"> {{ resources.wood }}</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><br/> <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><br/> <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><br/> <h3 v-if="resources.bricks > 0"><img class="resource-icon" src="img/bricks.png"> {{ resources.bricks }}</h3>
</div> </div>
</div> </div>
<div class="card"> <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> <h3>Owned buildings</h3>
</div> </div>
<div class="card-body"> <div class="card-body" id="collapseOwned">
<ul class="list-group"> <ul class="list-group">
<li class="list-group-item" v-for="building in buildings" v-if="building.isOwned"> <li class="list-group-item" v-for="building in buildings" v-if="building.isOwned">
<div class="float-right"> <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> <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>
<div class="float-left"> <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> </div>
<strong>{{ building.name }} (Level {{ building.level }})</strong><br> <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">
<div class="progress-bar progress-bar-success text-light" role="progressbar" :style="'width: ' + building.loader + '%;'" aria-valuenow="10" aria-valuemin="0" aria-valuemax="100"> <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 }} % {{ building.loader }} %
</div> </div>
</div> </div>
</li> </li>
</ul> </ul>
</div> </div>
</div> </div>
<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> {{ 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 }}</strong><br>
{{ building.amount }} <img class="resource-icon" :src= "'img/' + building.resource + '.png'"> / {{ building.intervalInSeconds }}s<br/>
</li> <div class="card">
</ul> <div class="card-header" data-toggle="collapse" href="#collapseAvailable" role="button" aria-expanded="true" aria-controls="collapseAvailable">
</div> <h3>Available buildings</h3>
</div> </div>
<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">
<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>
<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> </div>
</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://kit.fontawesome.com/b54a4cceff.js" crossorigin="anonymous"></script>
<script src="https://cdn.jsdelivr.net/npm/vue@2/dist/vue.js"></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> <script src="js/app.js"></script>
</body> </body>
</html> </html>

105
js/app.js
Unescape View File

@ -4,52 +4,74 @@ let game = new Vue({
money: 0, money: 0,
resources: { resources: {
wood: 0, wood: 0,
stone: 0 stone: 0,
iron: 0,
bricks: 0,
corn: 0
}, },
buildings: [ buildings: [
{ {
name: 'Bank', name: 'Bank',
intervalInSeconds: 15,
amount: 100,
level: 1,
price: 1000,
resource: 'gold', resource: 'gold',
icon: 'medieval_largeCastle',
level: 1,
maxLevel: 20,
isOwned: true, isOwned: true,
isUpgradeable: true, isUpgradeable: true,
maxLevel: 20, amount: 100,
amountMultiplicator: 1.5,
intervalInSeconds: 30,
intervalMultiplicator: 1,
price: 1000,
priceMultiplicator: 10, priceMultiplicator: 10,
intervalMultiplicator: 0.95,
icon: 'medieval_largeCastle'
}, },
{ {
name: 'Lumberjack', name: 'Lumberjack',
intervalInSeconds: 10,
amount: 2,
level: 0,
price: 100,
resource: 'wood', resource: 'wood',
icon: 'medieval_lumber',
level: 0,
maxLevel: 15,
isOwned: false, isOwned: false,
isUpgradeable: true, isUpgradeable: true,
maxLevel: 15, amount: 2,
priceMultiplicator: 2, amountMultiplicator: 1,
intervalInSeconds: 10,
intervalMultiplicator: 0.95, intervalMultiplicator: 0.95,
icon: 'medieval_lumber' price: 100,
priceMultiplicator: 2
}, },
{ {
name: 'Quarry', name: 'Quarry',
intervalInSeconds: 20, resource: 'stone',
amount: 2, icon: 'medieval_mine',
level: 0, level: 0,
maxLevel: 15,
isOwned: false,
isUpgradeable: true,
amount: 2,
amountMultiplicator: 1,
intervalInSeconds: 20,
intervalMultiplicator: 0.95,
price: 250, price: 250,
resource: 'stone', priceMultiplicator: 2
},
{
name: 'Farm',
resource: 'corn',
icon: 'medieval_farm',
level: 0,
maxLevel: 25,
isOwned: false, isOwned: false,
isUpgradeable: true, isUpgradeable: true,
maxLevel: 15, amount: 5,
amountMultiplicator: 2,
price: 500,
priceMultiplicator: 2, priceMultiplicator: 2,
intervalMultiplicator: 0.95, intervalInSeconds: 60,
icon: 'medieval_mine' intervalMultiplicator: 1
}, },
], ],
currentQuest: null,
loadedIntervals: [] loadedIntervals: []
}, },
created() { created() {
@ -72,14 +94,17 @@ let game = new Vue({
add(amount = 0, resource = 'gold') { add(amount = 0, resource = 'gold') {
switch (resource) { switch (resource) {
case 'wood': case 'wood':
this.resources.wood += amount; this.resources.wood += amount;
break; break;
case 'stone': case 'stone':
this.resources.stone += amount; this.resources.stone += amount;
break; break;
case 'corn':
this.resources.corn += amount;
break;
case 'gold': case 'gold':
this.money += amount; this.money += amount;
break; break;
} }
return this.saveMoney(); return this.saveMoney();
@ -91,7 +116,7 @@ let game = new Vue({
}, },
getAmount() { getAmount() {
return this.money; return this.money.toFixed(0);
}, },
getAmountFormatted() { getAmountFormatted() {
@ -111,21 +136,21 @@ let game = new Vue({
initiateIntervals(building) { initiateIntervals(building) {
building.intervalEarnID = setInterval(() => { building.intervalEarnID = setInterval(() => {
game.add(building.amount, building.resource); game.add(building.amount, building.resource);
}, building.intervalInSeconds * 1000); }, building.intervalInSeconds * 1000);
building.intervalLoadingID = setInterval(() => { building.intervalLoadingID = setInterval(() => {
if (building.loader < 100) { if (building.loader < 100) {
building.loader += 10; building.loader += 10;
} else { } else {
building.loader = 10; building.loader = 10;
} }
game.$forceUpdate() game.$forceUpdate()
}, building.intervalInSeconds / 10 * 1000) }, building.intervalInSeconds / 10 * 1000)
this.loadedIntervals.push(building.intervalEarnID, building.intervalLoadingID); this.loadedIntervals.push(building.intervalEarnID, building.intervalLoadingID);
}, },
killIntervals() { killIntervals() {

Write Preview
Loading…
Cancel
Save