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

Add useable resources for buildings; Refactor; New buildings & materials; add testing-buttons; add new assets;

master
Nero Ignis 4 years ago
parent
9fda713068
commit
d8739d94e0
6 changed files with 180 additions and 30 deletions
Whitespace
Show all changes Ignore whitespace when comparing lines Ignore changes in amount of whitespace Ignore changes in whitespace at EOL
Split View
Diff Options
Show Stats Download Patch File Download Diff File
  1. BIN
      img/coal.png
  2. BIN
      img/iron.png
  3. BIN
      img/medieval_blacksmith.png
  4. BIN
      img/planks.png
  5. 34
      index.html
  6. 172
      js/app.js

BIN
img/coal.png
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 7.2 KiB

BIN
img/iron.png
View File

Binary file not shown.
Side by Side Swipe Overlay

Before

Width:  |  Height:  |  Size: 6.5 KiB

After

Width:  |  Height:  |  Size: 1.7 KiB

BIN
img/medieval_blacksmith.png
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 7.6 KiB

BIN
img/planks.png
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 4.3 KiB

34
index.html
Unescape View File

@ -2,7 +2,7 @@ @@ -2,7 +2,7 @@
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Idle Buildup</title>
<title>Idle Gathering</title>
<link rel="stylesheet" href="https://bootswatch.com/4/darkly/bootstrap.min.css">
<link rel="stylesheet" href="https://unpkg.com/tailwindcss@^2/dist/tailwind.min.css">
<link rel="stylesheet" href="css/app.css">
@ -10,7 +10,7 @@ @@ -10,7 +10,7 @@
</head>
<body>
<div id="root" class="container mt-2">
<div class="row">
<div class="row" v-if="loaded">
<div class="col-md-12">
<div class="card">
<a class="card-header" data-toggle="collapse" href="#collapseResources" role="button" aria-expanded="true" aria-controls="collapseResources">
@ -19,10 +19,12 @@ @@ -19,10 +19,12 @@
<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>
<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>
<span v-if="resources.wood > 0"><img class="resource-icon" src="img/wood.png"> {{ resources.wood }}</span>
<span v-if="resources.planks > 0"><img class="resource-icon" src="img/planks.png"> {{ resources.planks }}</span>
<span v-if="resources.stone > 0"><img class="resource-icon" src="img/stone.png"> {{ resources.stone }}</span>
<span v-if="resources.iron > 0"><img class="resource-icon" src="img/iron.png"> {{ resources.iron }}</span>
<span v-if="resources.bricks > 0"><img class="resource-icon" src="img/bricks.png"> {{ resources.bricks }}</span>
<span v-if="resources.corn > 0"><img class="resource-icon" src="img/corn.png"> {{ resources.corn }}</span>
</div>
</div>
@ -41,9 +43,15 @@ @@ -41,9 +43,15 @@
</div>
<strong>{{ building.name }} (Level {{ building.level }})</strong><br>
{{ building.amount }} <img class="resource-icon" :src="'img/' + building.resource + '.png'" :alt="building.resource + '_icon'"> / {{ building.intervalInSeconds }}s<br/>
<span v-if="building.hasRequirements" v-html="getRequirementsForProduction(building)"></span>
<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 }} %
<span v-if="!building.hasMissingResources">
{{ building.loader }} %
</span>
<span class="text-danger" v-else>
Missing resources!
</span>
</div>
</div>
</li>
@ -67,6 +75,7 @@ @@ -67,6 +75,7 @@
</div>
<strong>{{ building.name }}</strong><br>
{{ building.amount }} <img class="resource-icon" :src="'img/' + building.resource + '.png'"> / {{ building.intervalInSeconds }}s<br/>
<span v-if="building.hasRequirements" v-html="getRequirementsForProduction(building)"></span>
</li>
</ul>
</div>
@ -92,6 +101,17 @@ @@ -92,6 +101,17 @@
</div>
</div>
</div>
<div class="card">
<div class="card-header" data-toggle="collapse hide" href="#collapseDebug" role="button" aria-expanded="true" aria-controls="collapseDebug">
<h3>Testing & Debugging</h3>
</div>
<div class="card-body" id="collapseDebug">
<a class="btn btn-sm btn-danger" href="" @click="localStorage.removeItem('buildings')">Reset buildings (to reload newly added ones)</a><br/><br/>
<a class="btn btn-sm btn-danger" href="" @click="localStorage.clear()">Reset everything (also coins!)</a><br/><br/>
<a class="btn btn-sm btn-danger" href="" @click="money += 10000">Add 10.000 coins</a><br/><br/>
</div>
</div>
</div>
</div>
</div>

172
js/app.js
Unescape View File

@ -2,12 +2,15 @@ let game = new Vue({ @@ -2,12 +2,15 @@ let game = new Vue({
el: '#root',
data: {
money: 0,
loaded: false,
resources: {
wood: 50,
stone: 0,
iron: 0,
bricks: 0,
corn: 0
corn: 0,
coal: 0,
planks: 0
},
buildings: [
{
@ -40,6 +43,25 @@ let game = new Vue({ @@ -40,6 +43,25 @@ let game = new Vue({
price: 100,
priceMultiplicator: 2
},
{
name: 'Carpenter',
resource: 'planks',
icon: 'medieval_lumber',
level: 0,
maxLevel: 15,
isOwned: false,
isUpgradeable: true,
amount: 5,
amountMultiplicator: 1,
intervalInSeconds: 25,
intervalMultiplicator: 0.80,
price: 15000,
priceMultiplicator: 2,
hasRequirements: true,
requires: {
wood: 2
}
},
{
name: 'Quarry',
resource: 'stone',
@ -55,6 +77,41 @@ let game = new Vue({ @@ -55,6 +77,41 @@ let game = new Vue({
price: 250,
priceMultiplicator: 2
},
{
name: 'Coal Mine',
resource: 'coal',
icon: 'medieval_mine',
level: 0,
maxLevel: 15,
isOwned: false,
isUpgradeable: true,
amount: 2,
amountMultiplicator: 1,
intervalInSeconds: 20,
intervalMultiplicator: 0.95,
price: 600,
priceMultiplicator: 2
},
{
name: 'Blacksmith',
resource: 'iron',
icon: 'medieval_blacksmith',
level: 0,
maxLevel: 15,
isOwned: false,
isUpgradeable: true,
amount: 2,
amountMultiplicator: 3,
intervalInSeconds: 20,
intervalMultiplicator: 0.95,
price: 1000,
priceMultiplicator: 2.5,
hasRequirements: true,
requires: {
stone: 2,
coal: 1
}
},
{
name: 'Farm',
resource: 'corn',
@ -81,6 +138,7 @@ let game = new Vue({ @@ -81,6 +138,7 @@ let game = new Vue({
this.loadBuildings();
this.reloadBuildings();
this.loaded = true;
},
methods: {
saveMoney() {
@ -101,9 +159,18 @@ let game = new Vue({ @@ -101,9 +159,18 @@ let game = new Vue({
case 'stone':
this.resources.stone += amount;
break;
case 'bricks':
this.resources.bricks += amount;
break;
case 'corn':
this.resources.corn += amount;
break;
case 'coal':
this.resources.coal += amount;
break;
case 'planks':
this.resources.planks += amount;
break;
case 'gold':
this.money += amount;
break;
@ -127,8 +194,6 @@ let game = new Vue({ @@ -127,8 +194,6 @@ let game = new Vue({
},
reloadBuildings() {
this.killIntervals();
let game = this;
this.buildings.forEach((building) => {
if (building.isOwned) {
@ -139,7 +204,26 @@ let game = new Vue({ @@ -139,7 +204,26 @@ let game = new Vue({
initiateIntervals(building) {
building.intervalEarnID = setInterval(() => {
game.add(building.amount, building.resource);
if (building.requires) {
if (
building.requires.wood > game.resources.wood ||
building.requires.stone > game.resources.stone ||
building.requires.iron > game.resources.iron ||
building.requires.bricks > game.resources.bricks ||
building.requires.coal > game.resources.coal ||
building.requires.corn > game.resources.corn
) {
building.hasMissingResources = true;
clearInterval(building.intervalLoadingID);
} else {
building.hasMissingResources = false;
game.useRequiredResources(building);
game.add(building.amount, building.resource);
game.reloadSingleBuilding(building);
}
} else {
game.add(building.amount, building.resource);
}
}, building.intervalInSeconds * 1000);
building.intervalLoadingID = setInterval(() => {
@ -156,16 +240,6 @@ let game = new Vue({ @@ -156,16 +240,6 @@ let game = new Vue({
this.loadedIntervals.push(building.intervalEarnID, building.intervalLoadingID);
},
killIntervals() {
this.buildings.forEach((building) => {
building.loader = 0;
});
this.loadedIntervals.forEach((interval) => {
clearInterval(interval)
});
},
buyBuilding(building) {
if (this.money >= building.price) {
this.sub(building.price);
@ -193,8 +267,6 @@ let game = new Vue({ @@ -193,8 +267,6 @@ let game = new Vue({
},
upgradeBuilding(building, first = false) {
// this.killIntervals();
if (building.level < (building.maxLevel - 1)) {
building.level++;
} else {
@ -202,13 +274,15 @@ let game = new Vue({ @@ -202,13 +274,15 @@ let game = new Vue({
building.isUpgradeable = false;
}
building.price = Number(building.price * building.priceMultiplicator).toFixed(2);
building.price = Number(
building.price * building.priceMultiplicator
).toFixed(2);
if (first === false) {
building.amount = building.amount * building.amountMultiplicator;
building.intervalInSeconds = Number(building.intervalInSeconds * building.intervalMultiplicator).toFixed(2);
}
// this.reloadBuildings();
this.reloadSingleBuilding(building);
this.saveBuildings();
},
@ -247,7 +321,7 @@ let game = new Vue({ @@ -247,7 +321,7 @@ let game = new Vue({
generateQuest() {
let possibleAmountsForQuest = [
0, 5, 10, 15, 20, 25, 30, 35
0, 0, 0, 5, 10, 15, 20, 25, 30, 35
];
let randomWood = 0;
@ -255,6 +329,9 @@ let game = new Vue({ @@ -255,6 +329,9 @@ let game = new Vue({
let randomIron = 0;
let randomBricks = 0;
let randomCorn = 0;
let randomCoal = 0;
let randomPlanks = 0;
let rewardSum = 0;
@ -270,7 +347,7 @@ let game = new Vue({ @@ -270,7 +347,7 @@ let game = new Vue({
if (this.resources.iron > 0) {
randomIron = this.getRandomElement(possibleAmountsForQuest);
rewardSum += (randomIron * 15);
rewardSum += (randomIron * 200);
}
if (this.resources.bricks > 0) {
@ -283,6 +360,16 @@ let game = new Vue({ @@ -283,6 +360,16 @@ let game = new Vue({
rewardSum += (randomCorn * 30);
}
if (this.resources.coal > 0) {
randomCoal = this.getRandomElement(possibleAmountsForQuest);
rewardSum += (randomCoal * 10);
}
if (this.resources.planks > 0) {
randomPlanks = this.getRandomElement(possibleAmountsForQuest);
rewardSum += (randomPlanks * 5);
}
if (rewardSum > 0) {
this.currentQuest = {
wood: randomWood,
@ -290,6 +377,8 @@ let game = new Vue({ @@ -290,6 +377,8 @@ let game = new Vue({
iron: randomIron,
bricks: randomBricks,
corn: randomCorn,
coal: randomCoal,
planks: randomPlanks,
reward: rewardSum
};
} else {
@ -309,7 +398,8 @@ let game = new Vue({ @@ -309,7 +398,8 @@ let game = new Vue({
this.resources.stone >= this.currentQuest.stone &&
this.resources.iron >= this.currentQuest.iron &&
this.resources.bricks >= this.currentQuest.bricks &&
this.resources.corn >= this.currentQuest.corn
this.resources.corn >= this.currentQuest.corn &&
this.resources.coal >= this.currentQuest.coal
);
},
@ -321,11 +411,51 @@ let game = new Vue({ @@ -321,11 +411,51 @@ let game = new Vue({
this.resources.iron -= this.currentQuest.iron;
this.resources.bricks -= this.currentQuest.bricks;
this.resources.corn -= this.currentQuest.corn;
this.resources.coal -= this.currentQuest.coal;
this.generateQuest();
} else {
return false;
}
},
useRequiredResources(building) {
this.resources.wood -= building.requires.wood;
this.resources.stone -= building.requires.stone;
this.resources.iron -= building.requires.iron;
this.resources.bricks -= building.requires.bricks;
this.resources.corn -= building.requires.corn;
this.resources.coal -= building.requires.coal;
},
getResourceIconForBuilding(building) {
return this.getResourceIcon(building.resource);
},
getResourceIcon(resource) {
return '<img class="resource-icon" src="img/' + resource + '.png" title="' + resource + '" alt="' + resource + '">';
},
getRequirementsForProduction(building) {
let requirementList = '<br/>Uses';
if (building.requires.wood) {
requirementList += ' ' + building.requires.wood + ' ' + this.getResourceIcon('wood');
}
if (building.requires.stone) {
requirementList += ' ' + building.requires.stone + ' ' + this.getResourceIcon('stone');
}
if (building.requires.coal) {
requirementList += ' ' + building.requires.coal + ' ' + this.getResourceIcon('coal');
}
if (building.requires.iron) {
requirementList += ' ' + building.requires.iron + ' ' + this.getResourceIcon('iron');
}
return requirementList + ' / ' + building.amount + ' ' + this.getResourceIconForBuilding(building);
}
},
});

Write Preview
Loading…
Cancel
Save