|
|
|
|
@ -1,10 +1,15 @@
@@ -1,10 +1,15 @@
|
|
|
|
|
const storage = { |
|
|
|
|
resources: 'resources', |
|
|
|
|
buildings: 'buildings', |
|
|
|
|
currentQuest: 'currentQuest' |
|
|
|
|
}; |
|
|
|
|
|
|
|
|
|
let game = new Vue({ |
|
|
|
|
el: '#root', |
|
|
|
|
data: { |
|
|
|
|
money: 0, |
|
|
|
|
loaded: false, |
|
|
|
|
resources: { |
|
|
|
|
wood: 50, |
|
|
|
|
gold: 0, |
|
|
|
|
wood: 0, |
|
|
|
|
stone: 0, |
|
|
|
|
iron: 0, |
|
|
|
|
bricks: 0, |
|
|
|
|
@ -133,75 +138,100 @@ let game = new Vue({
@@ -133,75 +138,100 @@ let game = new Vue({
|
|
|
|
|
}, |
|
|
|
|
created() { |
|
|
|
|
this.checkBuildings(); |
|
|
|
|
|
|
|
|
|
this.money = this.getSavedMoney(); |
|
|
|
|
this.saveMoney(); |
|
|
|
|
this.loadResources(); |
|
|
|
|
this.loadResourcesFromStorage(); |
|
|
|
|
this.currentQuest = JSON.parse(localStorage.getItem('currentQuest')); |
|
|
|
|
|
|
|
|
|
this.loadBuildings(); |
|
|
|
|
this.loadBuildingsFromStorage(); |
|
|
|
|
this.reloadBuildings(); |
|
|
|
|
this.loaded = true; |
|
|
|
|
}, |
|
|
|
|
methods: { |
|
|
|
|
checkBuildings() { |
|
|
|
|
let savedBuildings = JSON.parse(localStorage.getItem('buildings')); |
|
|
|
|
|
|
|
|
|
if (savedBuildings.length !== this.buildings.length) { |
|
|
|
|
if (!savedBuildings) { |
|
|
|
|
localStorage.setItem('buildings', JSON.stringify(this.buildings)); |
|
|
|
|
} else if (savedBuildings.length !== this.buildings.length) { |
|
|
|
|
localStorage.setItem('buildings', JSON.stringify(this.buildings)); |
|
|
|
|
alert('Buildings have been resetted due to an important update.') |
|
|
|
|
this.sendInfo('Buildings have been resetted due to an important update.'); |
|
|
|
|
} |
|
|
|
|
}, |
|
|
|
|
|
|
|
|
|
saveMoney() { |
|
|
|
|
localStorage.setItem('money', String(this.money)); |
|
|
|
|
return this.getSavedMoney(); |
|
|
|
|
saveBuildingsToStorage() { |
|
|
|
|
localStorage.setItem('buildings', JSON.stringify(this.buildings)); |
|
|
|
|
}, |
|
|
|
|
|
|
|
|
|
getSavedMoney() { |
|
|
|
|
this.money = Number(localStorage.getItem('money') ?? 0); |
|
|
|
|
return this.money; |
|
|
|
|
loadBuildingsFromStorage() { |
|
|
|
|
let savedBuildings = JSON.parse(localStorage.getItem('buildings')); |
|
|
|
|
|
|
|
|
|
if (savedBuildings) { |
|
|
|
|
savedBuildings.forEach((building) => { |
|
|
|
|
if (building.isOwned) { |
|
|
|
|
building.loader = 10; |
|
|
|
|
} |
|
|
|
|
}); |
|
|
|
|
|
|
|
|
|
this.buildings = savedBuildings; |
|
|
|
|
} |
|
|
|
|
}, |
|
|
|
|
|
|
|
|
|
saveResourcesToStorage() { |
|
|
|
|
localStorage.setItem('resources', JSON.stringify(this.resources)); |
|
|
|
|
}, |
|
|
|
|
|
|
|
|
|
loadResourcesFromStorage: function () { |
|
|
|
|
let savedResources = JSON.parse(localStorage.getItem('resources')); |
|
|
|
|
|
|
|
|
|
if (savedResources) { |
|
|
|
|
this.resources = savedResources; |
|
|
|
|
} |
|
|
|
|
}, |
|
|
|
|
|
|
|
|
|
add(amount = 0, resource = 'gold') { |
|
|
|
|
switch (resource) { |
|
|
|
|
case 'wood': |
|
|
|
|
this.sendResourceMessage(amount, 'wood'); |
|
|
|
|
this.resources.wood += amount; |
|
|
|
|
break; |
|
|
|
|
case 'planks': |
|
|
|
|
this.sendResourceMessage(amount, 'planks'); |
|
|
|
|
this.resources.planks += amount; |
|
|
|
|
break; |
|
|
|
|
case 'stone': |
|
|
|
|
this.sendResourceMessage(amount, 'stone'); |
|
|
|
|
this.resources.stone += amount; |
|
|
|
|
break; |
|
|
|
|
case 'iron': |
|
|
|
|
this.resources.iron = Number(this.resources.iron + amount); |
|
|
|
|
break; |
|
|
|
|
case 'bricks': |
|
|
|
|
this.sendResourceMessage(amount, 'bricks'); |
|
|
|
|
this.resources.bricks += amount; |
|
|
|
|
break; |
|
|
|
|
case 'corn': |
|
|
|
|
this.resources.corn += amount; |
|
|
|
|
break; |
|
|
|
|
case 'coal': |
|
|
|
|
this.sendResourceMessage(amount, 'coal'); |
|
|
|
|
this.resources.coal += amount; |
|
|
|
|
break; |
|
|
|
|
case 'planks': |
|
|
|
|
this.resources.planks += amount; |
|
|
|
|
case 'iron': |
|
|
|
|
this.sendResourceMessage(amount, 'iron'); |
|
|
|
|
this.resources.iron = Number(this.resources.iron + amount); |
|
|
|
|
break; |
|
|
|
|
case 'corn': |
|
|
|
|
this.sendResourceMessage(amount, 'corn'); |
|
|
|
|
this.resources.corn += amount; |
|
|
|
|
break; |
|
|
|
|
case 'gold': |
|
|
|
|
this.money += amount; |
|
|
|
|
this.sendResourceMessage(amount, 'gold'); |
|
|
|
|
this.resources.gold += amount; |
|
|
|
|
break; |
|
|
|
|
} |
|
|
|
|
|
|
|
|
|
this.saveResources(); |
|
|
|
|
return this.saveMoney(); |
|
|
|
|
this.saveResourcesToStorage(); |
|
|
|
|
}, |
|
|
|
|
|
|
|
|
|
sub(amount = 0, resource = false) { |
|
|
|
|
this.money -= amount; |
|
|
|
|
return this.saveMoney(); |
|
|
|
|
this.resources.gold -= amount; |
|
|
|
|
return this.saveResourcesToStorage(); |
|
|
|
|
}, |
|
|
|
|
|
|
|
|
|
getAmount() { |
|
|
|
|
return this.money.toFixed(0); |
|
|
|
|
getFormattedNumber(value) { |
|
|
|
|
return value.toLocaleString('de-DE'); |
|
|
|
|
}, |
|
|
|
|
|
|
|
|
|
reloadBuildings() { |
|
|
|
|
@ -252,28 +282,28 @@ let game = new Vue({
@@ -252,28 +282,28 @@ let game = new Vue({
|
|
|
|
|
}, |
|
|
|
|
|
|
|
|
|
buyBuilding(building) { |
|
|
|
|
if (this.money >= building.price) { |
|
|
|
|
if (this.resources.gold >= building.price) { |
|
|
|
|
this.sub(building.price); |
|
|
|
|
building.isOwned = true; |
|
|
|
|
|
|
|
|
|
this.upgradeBuilding(building, true); |
|
|
|
|
this.saveBuildings(); |
|
|
|
|
this.saveBuildingsToStorage(); |
|
|
|
|
} else { |
|
|
|
|
alert('Not enough money'); |
|
|
|
|
this.sendWarning('Not enough gold'); |
|
|
|
|
} |
|
|
|
|
}, |
|
|
|
|
|
|
|
|
|
buyUpgrade(building) { |
|
|
|
|
if (building.level === 'MAX') { |
|
|
|
|
alert('Already at MAX-Level'); |
|
|
|
|
this.sendWarning('Already at MAX-Level'); |
|
|
|
|
return false; |
|
|
|
|
} |
|
|
|
|
|
|
|
|
|
if (this.money >= building.price) { |
|
|
|
|
if (this.resources.gold >= building.price) { |
|
|
|
|
this.sub(building.price); |
|
|
|
|
this.upgradeBuilding(building); |
|
|
|
|
} else { |
|
|
|
|
alert('Not enough money'); |
|
|
|
|
this.sendWarning('Not enough gold'); |
|
|
|
|
} |
|
|
|
|
}, |
|
|
|
|
|
|
|
|
|
@ -295,7 +325,7 @@ let game = new Vue({
@@ -295,7 +325,7 @@ let game = new Vue({
|
|
|
|
|
} |
|
|
|
|
|
|
|
|
|
this.reloadSingleBuilding(building); |
|
|
|
|
this.saveBuildings(); |
|
|
|
|
this.saveBuildingsToStorage(); |
|
|
|
|
}, |
|
|
|
|
|
|
|
|
|
reloadSingleBuilding(building) { |
|
|
|
|
@ -306,31 +336,7 @@ let game = new Vue({
@@ -306,31 +336,7 @@ let game = new Vue({
|
|
|
|
|
this.initiateIntervals(building); |
|
|
|
|
}, |
|
|
|
|
|
|
|
|
|
saveBuildings() { |
|
|
|
|
localStorage.setItem('buildings', JSON.stringify(this.buildings)); |
|
|
|
|
}, |
|
|
|
|
|
|
|
|
|
loadBuildings: function () { |
|
|
|
|
let savedBuildings = JSON.parse(localStorage.getItem('buildings')); |
|
|
|
|
|
|
|
|
|
if (savedBuildings) { |
|
|
|
|
this.buildings = savedBuildings; |
|
|
|
|
} |
|
|
|
|
}, |
|
|
|
|
|
|
|
|
|
saveResources() { |
|
|
|
|
localStorage.setItem('resources', JSON.stringify(this.resources)); |
|
|
|
|
}, |
|
|
|
|
|
|
|
|
|
loadResources: function () { |
|
|
|
|
let savedResources = JSON.parse(localStorage.getItem('resources')); |
|
|
|
|
|
|
|
|
|
if (savedResources) { |
|
|
|
|
this.resources = savedResources; |
|
|
|
|
} |
|
|
|
|
}, |
|
|
|
|
|
|
|
|
|
generateQuest() { |
|
|
|
|
generateQuestWithRandomItems() { |
|
|
|
|
let possibleAmountsForQuest = [ |
|
|
|
|
0, 0, 0, 5, 10, 15, 20, 25, 30, 35 |
|
|
|
|
]; |
|
|
|
|
@ -347,37 +353,37 @@ let game = new Vue({
@@ -347,37 +353,37 @@ let game = new Vue({
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
if (this.resources.wood > 0) { |
|
|
|
|
randomWood = this.getRandomElement(possibleAmountsForQuest); |
|
|
|
|
randomWood = this.getRandomElementForQuestResource(possibleAmountsForQuest); |
|
|
|
|
rewardSum += (randomWood * 5); |
|
|
|
|
} |
|
|
|
|
|
|
|
|
|
if (this.resources.stone > 0) { |
|
|
|
|
randomStone = this.getRandomElement(possibleAmountsForQuest); |
|
|
|
|
randomStone = this.getRandomElementForQuestResource(possibleAmountsForQuest); |
|
|
|
|
rewardSum += (randomStone * 7); |
|
|
|
|
} |
|
|
|
|
|
|
|
|
|
if (this.resources.iron > 0) { |
|
|
|
|
randomIron = this.getRandomElement(possibleAmountsForQuest); |
|
|
|
|
randomIron = this.getRandomElementForQuestResource(possibleAmountsForQuest); |
|
|
|
|
rewardSum += (randomIron * 200); |
|
|
|
|
} |
|
|
|
|
|
|
|
|
|
if (this.resources.bricks > 0) { |
|
|
|
|
randomBricks = this.getRandomElement(possibleAmountsForQuest); |
|
|
|
|
randomBricks = this.getRandomElementForQuestResource(possibleAmountsForQuest); |
|
|
|
|
rewardSum += (randomBricks * 25); |
|
|
|
|
} |
|
|
|
|
|
|
|
|
|
if (this.resources.corn > 0) { |
|
|
|
|
randomCorn = this.getRandomElement(possibleAmountsForQuest); |
|
|
|
|
randomCorn = this.getRandomElementForQuestResource(possibleAmountsForQuest); |
|
|
|
|
rewardSum += (randomCorn * 30); |
|
|
|
|
} |
|
|
|
|
|
|
|
|
|
if (this.resources.coal > 0) { |
|
|
|
|
randomCoal = this.getRandomElement(possibleAmountsForQuest); |
|
|
|
|
randomCoal = this.getRandomElementForQuestResource(possibleAmountsForQuest); |
|
|
|
|
rewardSum += (randomCoal * 10); |
|
|
|
|
} |
|
|
|
|
|
|
|
|
|
if (this.resources.planks > 0) { |
|
|
|
|
randomPlanks = this.getRandomElement(possibleAmountsForQuest); |
|
|
|
|
randomPlanks = this.getRandomElementForQuestResource(possibleAmountsForQuest); |
|
|
|
|
rewardSum += (randomPlanks * 5); |
|
|
|
|
} |
|
|
|
|
|
|
|
|
|
@ -401,43 +407,28 @@ let game = new Vue({
@@ -401,43 +407,28 @@ let game = new Vue({
|
|
|
|
|
return this.currentQuest; |
|
|
|
|
}, |
|
|
|
|
|
|
|
|
|
getRandomElement(possibleValues) { |
|
|
|
|
getRandomElementForQuestResource(possibleValues) { |
|
|
|
|
return possibleValues[Math.floor(Math.random() * possibleValues.length)]; |
|
|
|
|
}, |
|
|
|
|
|
|
|
|
|
isQuestRedeemable() { |
|
|
|
|
console.log(this.resources.wood + ' wood available'); |
|
|
|
|
console.log(this.currentQuest.wood + ' wood needed in quest'); |
|
|
|
|
console.log(this.resources.wood >= this.currentQuest.wood); |
|
|
|
|
console.log(this.resources.stone + ' stone available'); |
|
|
|
|
console.log(this.currentQuest.stone + ' wood needed in quest'); |
|
|
|
|
console.log(this.resources.stone >= this.currentQuest.stone); |
|
|
|
|
console.log(this.resources.iron + ' iron available'); |
|
|
|
|
console.log(this.currentQuest.iron + ' wood needed in quest'); |
|
|
|
|
console.log(this.resources.iron >= this.currentQuest.iron); |
|
|
|
|
console.log(this.resources.bricks + ' bricks available'); |
|
|
|
|
console.log(this.currentQuest.bricks + ' wood needed in quest'); |
|
|
|
|
console.log(this.resources.bricks >= this.currentQuest.bricks); |
|
|
|
|
console.log(this.resources.corn + ' corn available'); |
|
|
|
|
console.log(this.currentQuest.corn + ' wood needed in quest'); |
|
|
|
|
console.log(this.resources.corn >= this.currentQuest.corn); |
|
|
|
|
console.log(this.resources.coal + ' coal available'); |
|
|
|
|
console.log(this.currentQuest.coal + ' wood needed in quest'); |
|
|
|
|
console.log(this.resources.coal >= this.currentQuest.coal); |
|
|
|
|
|
|
|
|
|
return ( |
|
|
|
|
this.resources.wood >= this.currentQuest.wood && |
|
|
|
|
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.coal >= this.currentQuest.coal |
|
|
|
|
); |
|
|
|
|
let enoughWood = this.resources.wood >= this.currentQuest.wood; |
|
|
|
|
let enoughStone = this.resources.stone >= this.currentQuest.stone; |
|
|
|
|
let enoughIron = this.resources.iron >= this.currentQuest.iron; |
|
|
|
|
let enoughBricks = this.resources.bricks >= this.currentQuest.bricks; |
|
|
|
|
let enoughCorn = this.resources.corn >= this.currentQuest.corn; |
|
|
|
|
let enoughCoal = this.resources.coal >= this.currentQuest.coal; |
|
|
|
|
|
|
|
|
|
if (enoughWood && enoughStone && enoughIron && enoughBricks && enoughCorn && enoughCoal) { |
|
|
|
|
return true; |
|
|
|
|
} else { |
|
|
|
|
return false; |
|
|
|
|
} |
|
|
|
|
}, |
|
|
|
|
|
|
|
|
|
redeemReward() { |
|
|
|
|
if (this.isQuestRedeemable()) { |
|
|
|
|
this.money += this.currentQuest.reward; |
|
|
|
|
this.resources.gold += this.currentQuest.reward; |
|
|
|
|
this.resources.wood -= this.currentQuest.wood; |
|
|
|
|
this.resources.stone -= this.currentQuest.stone; |
|
|
|
|
this.resources.iron -= this.currentQuest.iron; |
|
|
|
|
@ -445,9 +436,10 @@ let game = new Vue({
@@ -445,9 +436,10 @@ let game = new Vue({
|
|
|
|
|
this.resources.corn -= this.currentQuest.corn; |
|
|
|
|
this.resources.coal -= this.currentQuest.coal; |
|
|
|
|
|
|
|
|
|
this.generateQuest(); |
|
|
|
|
this.sendRewardMessage(this.currentQuest.reward); |
|
|
|
|
this.generateQuestWithRandomItems(); |
|
|
|
|
} else { |
|
|
|
|
alert('Not enough resources to redeem reward.'); |
|
|
|
|
this.sendWarning('Not enough resources to redeem reward.'); |
|
|
|
|
return false; |
|
|
|
|
} |
|
|
|
|
}, |
|
|
|
|
@ -461,6 +453,7 @@ let game = new Vue({
@@ -461,6 +453,7 @@ let game = new Vue({
|
|
|
|
|
this.resources.coal -= building.requires.coal; |
|
|
|
|
}, |
|
|
|
|
|
|
|
|
|
// Templating
|
|
|
|
|
getResourceIconForBuilding(building) { |
|
|
|
|
return this.getResourceIcon(building.resource); |
|
|
|
|
}, |
|
|
|
|
@ -469,7 +462,7 @@ let game = new Vue({
@@ -469,7 +462,7 @@ let game = new Vue({
|
|
|
|
|
return '<img class="resource-icon" src="img/' + resource + '.png" title="' + resource + '" alt="' + resource + '">'; |
|
|
|
|
}, |
|
|
|
|
|
|
|
|
|
getRequirementsForProduction(building) { |
|
|
|
|
getRequirementsText(building) { |
|
|
|
|
let requirementList = '<br/>Uses'; |
|
|
|
|
|
|
|
|
|
if (building.requires.wood) { |
|
|
|
|
@ -480,15 +473,67 @@ let game = new Vue({
@@ -480,15 +473,67 @@ let game = new Vue({
|
|
|
|
|
requirementList += ' ' + building.requires.stone + ' ' + this.getResourceIcon('stone'); |
|
|
|
|
} |
|
|
|
|
|
|
|
|
|
if (building.requires.iron) { |
|
|
|
|
requirementList += ' ' + building.requires.iron + ' ' + this.getResourceIcon('iron'); |
|
|
|
|
} |
|
|
|
|
|
|
|
|
|
if (building.requires.bricks) { |
|
|
|
|
requirementList += ' ' + building.requires.bricks + ' ' + this.getResourceIcon('bricks'); |
|
|
|
|
} |
|
|
|
|
|
|
|
|
|
if (building.requires.coal) { |
|
|
|
|
requirementList += ' ' + building.requires.coal + ' ' + this.getResourceIcon('coal'); |
|
|
|
|
} |
|
|
|
|
|
|
|
|
|
if (building.requires.iron) { |
|
|
|
|
requirementList += ' ' + building.requires.iron + ' ' + this.getResourceIcon('iron'); |
|
|
|
|
if (building.requires.corn) { |
|
|
|
|
requirementList += ' ' + building.requires.corn + ' ' + this.getResourceIcon('corn'); |
|
|
|
|
} |
|
|
|
|
|
|
|
|
|
return requirementList + ' / ' + building.amount + ' ' + this.getResourceIconForBuilding(building); |
|
|
|
|
return requirementList + ' for ' + building.amount + ' ' + this.getResourceIconForBuilding(building); |
|
|
|
|
}, |
|
|
|
|
|
|
|
|
|
// Alerts
|
|
|
|
|
sendRewardMessage(reward) { |
|
|
|
|
iziToast.show({ |
|
|
|
|
image: 'img/gold.png', |
|
|
|
|
color: 'green', |
|
|
|
|
message: 'You got a reward of ' + reward + ' gold!', |
|
|
|
|
position: 'bottomCenter', |
|
|
|
|
timeout: 1500, |
|
|
|
|
}); |
|
|
|
|
}, |
|
|
|
|
|
|
|
|
|
sendResourceMessage(amount, resource) { |
|
|
|
|
iziToast.show({ |
|
|
|
|
image: 'img/' + resource + '.png', |
|
|
|
|
position: 'bottomCenter', |
|
|
|
|
message: 'Produced ' + amount + ' ' + resource + '!', |
|
|
|
|
timeout: 1000, |
|
|
|
|
}); |
|
|
|
|
}, |
|
|
|
|
|
|
|
|
|
sendNotification(message) { |
|
|
|
|
iziToast.show({ |
|
|
|
|
color: 'green', |
|
|
|
|
message: message, |
|
|
|
|
position: 'bottomCenter', |
|
|
|
|
}); |
|
|
|
|
}, |
|
|
|
|
|
|
|
|
|
sendWarning(message) { |
|
|
|
|
iziToast.show({ |
|
|
|
|
color: 'red', |
|
|
|
|
message: message, |
|
|
|
|
position: 'bottomCenter', |
|
|
|
|
}); |
|
|
|
|
}, |
|
|
|
|
|
|
|
|
|
sendInfo(message) { |
|
|
|
|
iziToast.show({ |
|
|
|
|
color: 'blue', |
|
|
|
|
message: message, |
|
|
|
|
position: 'bottomCenter', |
|
|
|
|
}); |
|
|
|
|
} |
|
|
|
|
}, |
|
|
|
|
} |
|
|
|
|
}); |
|
|
|
|
|
