A Pen by Samuel Beard on CodePen.
Created
February 24, 2020 17:15
-
-
Save JIBSIL/f67be6785cce704141304ad82a5776b1 to your computer and use it in GitHub Desktop.
Incremental RPG v0.5
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
<div class="row header"> | |
<div class="col-md-12"> | |
<h1>Incremental RPG<small> v0.5</small></h1> | |
</div> | |
</div> | |
<div class="row"> | |
<div class="col-md-12"> | |
<h1><span id="townName"></span><small> Mayor:</small><span id="mayorName"></span></h1> | |
</div> | |
</div> | |
<div class="container"> | |
<div class="row"> | |
<div class="col-md-6"> | |
<div class="alert alert-info alert-dismissable"> | |
<button type="button" class="close" data-dismiss="alert" aria-hidden="true">×</button> | |
<strong>Welcome to Incremental RPG!</strong> | |
<p>To start building your town, click 'Chop Wood', 'Mine Stone' and 'Gather Food' to gather the respective resources.</p> | |
</div> | |
<div class="row"> | |
<div class="col-xs-4"> | |
<button type="button" id="chopWood" class="btn btn-primary btn-block">Chop Wood</button> | |
</div> | |
<div class="col-xs-4"> | |
<button class="btn btn-default btn-block disabled"> | |
<span id="woodAmount" >0</span>/<span id="maxWood">0</span> | |
</button> | |
</div> | |
<div class="col-xs-4"> | |
<span class="btn btn-default btn-block disabled"> | |
<span id="woodIncrement">0</span><span>/5s</span> | |
</span> | |
</div> | |
</div><!--.row--> | |
<div class="row"> | |
<div class="col-xs-4"> | |
<button type="button" id="mineStone" class="btn btn-primary btn-block">Mine Stone</button> | |
</div> | |
<div class="col-xs-4"> | |
<button class="btn btn-default btn-block disabled"> | |
<span id="stoneAmount" >0</span>/<span id="maxStone">0</span> | |
</button> | |
</div> | |
<div class="col-xs-4"> | |
<span class="btn btn-default btn-block disabled"> | |
<span id="stoneIncrement">0</span><span>/5s</span> | |
</span> | |
</div> | |
</div><!--.row--> | |
<div class="row"> | |
<div class="col-xs-4"> | |
<button type="button" id="gatherFood" class="btn btn-primary btn-block">Gather Food</button> | |
</div> | |
<div class="col-xs-4"> | |
<button class="btn btn-default btn-block disabled"> | |
<span id="foodAmount" >0</span>/<span id="maxFood">0</span> | |
</button> | |
</div> | |
<div class="col-xs-4"> | |
<span class="btn btn-default btn-block disabled"> | |
<span id="foodIncrement">0</span><span>/5s</span> | |
</span> | |
</div> | |
</div><!--.row--> | |
<hr> | |
</div><!----> | |
<div class="col-md-6"> | |
<div class="alert alert-info alert-dismissable"> | |
<button type="button" class="close" data-dismiss="alert" aria-hidden="true">×</button> | |
<p>Click the buttons below to create workers who will gather resources for you. You will need somewhere for them to live first though.</p> | |
</div> | |
<div class="row"> | |
<div class="col-xs-6"> | |
<div class="btn-group btn-group-justified"> | |
<span class="btn btn-default disabled">Population</span> | |
<span id="workerAmount" class="btn btn-default disabled">0</span> | |
</div> | |
</div> | |
<div class="col-xs-6"> | |
<div class="btn-group btn-group-justified"> | |
<span class="btn btn-default disabled">Max</span> | |
<span id="maxPop" class="btn btn-default disabled">0</span> | |
</div> | |
</div> | |
</div><!--.row--> | |
<div class="row"> | |
<div class="col-xs-4"> | |
<button type="button" id="createLumberjack" class="btn btn-block btn-success">Create Lumberjack</button> | |
</div> | |
<div class="col-xs-4"> | |
<button type="button" id="lumberjackAmount" class="btn btn-block btn-default disabled">0</button> | |
</div> | |
<div class="col-xs-4"> | |
<h6><span id="lumberjackCost">10</span> Food</h6> | |
</div> | |
</div><!--.row--> | |
<div class="row"> | |
<div class="col-xs-4"> | |
<button type="button" id="createMiner" class="btn btn-block btn-success">Create Miner</button> | |
</div> | |
<div class="col-xs-4"> | |
<button type="button" id="minerAmount" class="btn btn-block btn-default disabled">0</button> | |
</div> | |
<div class="col-xs-4"> | |
<h6><span id="minerCost">10</span> Food</h6> | |
</div> | |
</div><!--.row--> | |
<div class="row"> | |
<div class="col-xs-4"> | |
<button type="button" id="createHunter" class="btn btn-block btn-success">Create Hunter</button> | |
</div> | |
<div class="col-xs-4"> | |
<button type="button" id="hunterAmount" class="btn btn-block btn-default disabled">0</button> | |
</div> | |
<div class="col-xs-4"> | |
<h6><span id="hunterCost">10</span> Food</h6> | |
</div> | |
</div><!--.row--> | |
<hr> | |
</div><!--.col-md-6--> | |
</div><!--.row--> | |
<div class="row"> | |
<div class="col-md-6"> | |
<div class="alert alert-info alert-dismissable"> | |
<button type="button" class="close" data-dismiss="alert" aria-hidden="true">×</button> | |
<p>Use the resources you have gathered to build some accommodation so that you can hire workers.</p> | |
<p>Some buildings need to be researched before you are able to build them.</p> | |
</div> | |
<div class="row"> | |
<div class="col-xs-4"> | |
<button type="button" id="buildTent" class="btn btn-danger btn-block">Build Tent</button> | |
</div> | |
<div class="col-xs-4"> | |
<button type="button" id="tentAmount" class="btn btn-default btn-block disabled">0</button> | |
</div> | |
<div class="col-xs-4"> | |
<h6>Cost: <span id="tentCostWood">0</span> Wood | +<span id="tentResidents">0</span> Population</h6> | |
</div> | |
</div><!--.row--> | |
<div class="row"> | |
<div class="col-xs-4"> | |
<button type="button" id="buildHouse" class="btn btn-danger btn-block">Build House</button> | |
</div> | |
<div class="col-xs-4"> | |
<button type="button" id="houseAmount" class="btn btn-default btn-block disabled">0</button> | |
</div> | |
<div class="col-xs-4"> | |
<h6>Cost: <span id="houseCostWood">0</span> Wood, <span id="houseCostStone">0</span> Stone | +<span id="houseResidents">0</span> Population</h6> | |
</div> | |
</div><!--.row--> | |
<div class="row"> | |
<div class="col-xs-4"> | |
<button id="researchHostel" class="btn btn-danger btn-block">Research Hostel</button> | |
<div class="progress-wrap-hostel progress hidden" data-progress-percent-hostel="100"> | |
<div class="progress-bar-hostel progress"><span class="researchingComment">Researching</span></div> | |
</div> | |
<button id="buildHostel" class="btn btn-danger btn-block hidden">Build Hostel</button> | |
</div> | |
<div class="col-xs-4"> | |
<button type="button" id="hostelAmount" class="btn btn-default btn-block disabled">0</button> | |
</div> | |
<div class="col-xs-4"> | |
<h6 class="hostelInfo hidden">Cost: <span id="hostelCostWood">0</span> Wood, <span id="hostelCostStone">0</span> Stone | +<span id="hostelResidents">0</span> Population</h6> | |
<h6 class="hostelResearchInfo">Cost: 400 Wood, 150 Stone</h6> | |
</div> | |
</div><!--.row--> | |
<div class="alert alert-info alert-dismissable"> | |
<button type="button" class="close" data-dismiss="alert" aria-hidden="true">×</button> | |
<p>Build storage houses to store more resources.</p> | |
</div> | |
<div class="row"> | |
<div class="col-xs-4"> | |
<button type="button" id="buildWoodStorage" class="btn btn-danger btn-block">Build Wood Storage</button> | |
</div> | |
<div class="col-xs-4"> | |
<button type="button" id="woodStorageAmount" class="btn btn-default btn-block disabled">0</button> | |
</div> | |
<div class="col-xs-4"> | |
<h6>Cost: <span id="woodStorageCostWood">0</span> Wood, <span id="woodStorageCostStone">0</span> Stone | + 100 Wood Storage</h6> | |
</div> | |
</div><!--.row--> | |
<div class="row"> | |
<div class="col-xs-4"> | |
<button type="button" id="buildStoneStorage" class="btn btn-danger btn-block">Build Stone Storage</button> | |
</div> | |
<div class="col-xs-4"> | |
<button type="button" id="stoneStorageAmount" class="btn btn-default btn-block disabled">0</button> | |
</div> | |
<div class="col-xs-4"> | |
<h6>Cost: <span id="stoneStorageCostWood">0</span> Wood, <span id="stoneStorageCostStone">0</span> Stone | + 100 Stone Storage</h6> | |
</div> | |
</div><!--.row--> | |
<div class="row"> | |
<div class="col-xs-4"> | |
<button type="button" id="buildFoodStorage" class="btn btn-danger btn-block">Build Food Storage</button> | |
</div> | |
<div class="col-xs-4"> | |
<button type="button" id="foodStorageAmount" class="btn btn-default btn-block disabled">0</button> | |
</div> | |
<div class="col-xs-4"> | |
<h6>Cost: <span id="foodStorageCostWood">0</span> Wood, <span id="foodStorageCostStone">0</span> Stone | + 100 Food Storage</h6> | |
</div> | |
</div><!--.row--> | |
<hr> | |
</div><!--.col-md-6--> | |
<div class="col-md-6"> | |
<div class="row upgradeTwoFingers"> | |
<div class="col-xs-4"> | |
<button type="button" id="upgradeTwoFingers" class="btn btn-warning btn-block">Two Fingers</button> | |
</div> | |
<div class="col-xs-4"> | |
<h6>Cost: 100 Wood, 100 Stone, 100 Food</h6> | |
</div> | |
<div class="col-xs-4"> | |
<h6>Two resources per click.</h6> | |
</div> | |
</div><!--.row--> | |
<div class="row upgradeFourFingers hidden"> | |
<div class="col-xs-4"> | |
<button type="button" id="upgradeFourFingers" class="btn btn-warning btn-block">Four Fingers</button> | |
</div> | |
<div class="col-xs-4"> | |
<h6>Cost: 1000 Wood, 1000 Stone, 1000 Food</h6> | |
</div> | |
<div class="col-xs-4"> | |
<h6>Four resources per click.</h6> | |
</div> | |
</div><!--.row--> | |
<div class="row upgradeDoubleSleepingBags"> | |
<div class="col-xs-4"> | |
<button type="button" id="upgradeDoubleSleepingBags" class="btn btn-warning btn-block">Double Sleeping Bags</button> | |
</div> | |
<div class="col-xs-4"> | |
<h6>Cost: 100 Wood, 100 Stone, 100 Food</h6> | |
</div> | |
<div class="col-xs-4"> | |
<h6>Allow two people to live in one tent.</h6> | |
</div> | |
</div><!--.row--> | |
<div class="row upgradeBunkBeds"> | |
<div class="col-xs-4"> | |
<button type="button" id="upgradeBunkBeds" class="btn btn-warning btn-block">Bunk Beds</button> | |
</div> | |
<div class="col-xs-4"> | |
<h6>Cost: 100 Wood, 100 Stone, 100 Food</h6> | |
</div> | |
<div class="col-xs-4"> | |
<h6>Allow five people to live in one house.</h6> | |
</div> | |
</div><!--.row--> | |
<div class="row upgradeSharpenAxes"> | |
<div class="col-xs-4"> | |
<button type="button" id="upgradeSharpenAxes" class="btn btn-warning btn-block">Sharpen Axes</button> | |
</div> | |
<div class="col-xs-4"> | |
<h6>Cost: 50 Wood, 100 Stone, 50 Food</h6> | |
</div> | |
<div class="col-xs-4"> | |
<h6>Lumberjacks gather two wood every five seconds.</h6> | |
</div> | |
</div><!--.row--> | |
<div class="row upgradeSharpenPicks"> | |
<div class="col-xs-4"> | |
<button type="button" id="upgradeSharpenPicks" class="btn btn-warning btn-block">Sharpen Picks</button> | |
</div> | |
<div class="col-xs-4"> | |
<h6>Cost: 50 Wood, 100 Stone, 50 Food</h6> | |
</div> | |
<div class="col-xs-4"> | |
<h6>Miners gather two stone every five seconds.</h6> | |
</div> | |
</div><!--.row--> | |
<div class="row upgradeSharpenArrows"> | |
<div class="col-xs-4"> | |
<button type="button" id="upgradeSharpenArrows" class="btn btn-warning btn-block">Sharpen Arrows</button> | |
</div> | |
<div class="col-xs-4"> | |
<h6>Cost: 50 Wood, 100 Stone, 50 Food</h6> | |
</div> | |
<div class="col-xs-4"> | |
<h6>Hunters gather two food every five seconds.</h6> | |
</div> | |
</div><!--.row--> | |
<div class="row upgradeMatesRatesWood"> | |
<div class="col-xs-4"> | |
<button type="button" id="upgradeMatesRatesWood" class="btn btn-warning btn-block">Mates Rates - Wood</button> | |
</div> | |
<div class="col-xs-4"> | |
<h6>Cost: 150 Stone, 50 Food</h6> | |
</div> | |
<div class="col-xs-4"> | |
<h6>Befriend the lumberjacks so houses and tents cost less wood.</h6> | |
</div> | |
</div><!--.row--> | |
<div class="row upgradeMatesRatesStone"> | |
<div class="col-xs-4"> | |
<button type="button" id="upgradeMatesRatesStone" class="btn btn-warning btn-block">Mates Rates - Stone</button> | |
</div> | |
<div class="col-xs-4"> | |
<h6>Cost: 150 Wood, 50 Food</h6> | |
</div> | |
<div class="col-xs-4"> | |
<h6>Befriend the miners so houses cost less stone.</h6> | |
</div> | |
</div><!--.row--> | |
<hr> | |
</div><!--.col-md-6--> | |
</div><!--.row--> | |
<div class="row"> | |
<div class="col-md-6 well"> | |
<h3>Information</h3> | |
<div id="info" class="info"></div> | |
</div> | |
<div class="col-md-6 well"> | |
<h3>Upgrades</h3> | |
<div id="upgrades" class="info"></div> | |
</div> | |
</div><!--.row--> | |
</div><!--.container--> |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
// Variables | |
var names = { | |
town:"", | |
mayor:"", | |
}, | |
wood = { | |
name:"wood", | |
amount:0, | |
increment:0, | |
max:100, | |
storage:0, | |
storageCost: { | |
wood:50, | |
stone:50 | |
} | |
}, | |
stone = { | |
name:"stone", | |
amount:0, | |
increment:0, | |
max:100, | |
storage:0, | |
storageCost: { | |
wood:50, | |
stone:50 | |
} | |
}, | |
food = { | |
name:"food", | |
amount:0, | |
increment:0, | |
max:100, | |
storage:0, | |
storageCost: { | |
wood:50, | |
stone:50 | |
} | |
}, | |
worker = { | |
name:"worker", | |
amount:0, | |
lumberjack:{ | |
increment:1, | |
amount:0, | |
cost:10 | |
}, | |
miner:{ | |
increment:1, | |
amount:0, | |
cost:10 | |
}, | |
hunter:{ | |
increment:1, | |
amount:0, | |
cost:10 | |
} | |
}, // Buildings | |
tent = { | |
amount:0, | |
residents:1, | |
cost:{ | |
wood:30 | |
} | |
}, | |
house = { | |
amount:0, | |
residents:4, | |
cost:{ | |
wood:75, | |
stone:25 | |
} | |
}, | |
hostel = { | |
amount:0, | |
residents:10, | |
cost:{ | |
wood:200, | |
stone:215 | |
} | |
}; | |
var maxPop = (tent.residents * tent.amount) + (house.residents * house.amount); | |
var clickIncrement = 1; // Consider changing this to specific materials. | |
// Set all values to zero at the start of the game. | |
$(document).ready(function(){ | |
updateValues(); | |
}); | |
// Request name of town and mayor. COMMENTED DURING DEVELOPMENT BECAUSE ITS FREAKING ANNOYING. | |
$(document).ready(function(){ | |
names.town = prompt("Name your town.") | |
document.getElementById("townName").innerHTML = names.town; | |
names.mayor = prompt("Name your Mayor.") | |
document.getElementById("mayorName").innerHTML = names.mayor; | |
}); | |
// Display the correct values. | |
function updateValues(){ | |
document.getElementById("woodAmount").innerHTML = wood.amount; | |
document.getElementById("maxWood").innerHTML = wood.max; | |
document.getElementById("woodIncrement").innerHTML = wood.increment; | |
document.getElementById("stoneAmount").innerHTML = stone.amount; | |
document.getElementById("maxStone").innerHTML = stone.max; | |
document.getElementById("stoneIncrement").innerHTML = stone.increment; | |
document.getElementById("foodAmount").innerHTML = food.amount; | |
document.getElementById("maxFood").innerHTML = food.max; | |
document.getElementById("foodIncrement").innerHTML = food.increment; | |
document.getElementById("workerAmount").innerHTML = worker.amount; | |
document.getElementById("maxPop").innerHTML = maxPop; | |
document.getElementById("lumberjackAmount").innerHTML = worker.lumberjack.amount; | |
document.getElementById("lumberjackCost").innerHTML = worker.lumberjack.cost; | |
document.getElementById("minerAmount").innerHTML = worker.miner.amount; | |
document.getElementById("minerCost").innerHTML = worker.miner.cost; | |
document.getElementById("hunterAmount").innerHTML = worker.hunter.amount; | |
document.getElementById("hunterCost").innerHTML = worker.hunter.cost; | |
document.getElementById("tentAmount").innerHTML = tent.amount; | |
document.getElementById("tentCostWood").innerHTML = tent.cost.wood; | |
document.getElementById("tentResidents").innerHTML = tent.residents; | |
document.getElementById("houseAmount").innerHTML = house.amount; | |
document.getElementById("houseCostWood").innerHTML = house.cost.wood; | |
document.getElementById("houseCostStone").innerHTML = house.cost.stone; | |
document.getElementById("houseResidents").innerHTML = house.residents; | |
document.getElementById("hostelAmount").innerHTML = hostel.amount; | |
document.getElementById("hostelCostWood").innerHTML = hostel.cost.wood; | |
document.getElementById("hostelCostStone").innerHTML = hostel.cost.stone; | |
document.getElementById("hostelResidents").innerHTML = hostel.residents; | |
document.getElementById("woodStorageAmount").innerHTML = wood.storage; | |
document.getElementById("woodStorageCostWood").innerHTML = wood.storageCost.wood; | |
document.getElementById("woodStorageCostStone").innerHTML = wood.storageCost.stone; | |
document.getElementById("stoneStorageAmount").innerHTML = stone.storage; | |
document.getElementById("stoneStorageCostWood").innerHTML = stone.storageCost.wood; | |
document.getElementById("stoneStorageCostStone").innerHTML = stone.storageCost.stone; | |
document.getElementById("foodStorageAmount").innerHTML = food.storage; | |
document.getElementById("foodStorageCostWood").innerHTML = food.storageCost.wood; | |
document.getElementById("foodStorageCostStone").innerHTML = food.storageCost.stone; | |
} | |
// Click to Chop, Mine, Gather | |
$('#chopWood').click(function(){ | |
wood.amount = wood.amount + clickIncrement; | |
checkMaxWood(); | |
updateValues(); | |
}); | |
$('#mineStone').click(function(){ | |
stone.amount = stone.amount + clickIncrement; | |
checkMaxStone(); | |
updateValues(); | |
}); | |
$('#gatherFood').click(function(){ | |
food.amount = food.amount + clickIncrement; | |
checkMaxFood(); | |
updateValues(); | |
}); | |
//Iniciate gathering resources | |
beginGatherWood(); | |
beginGatherStone(); | |
beginGatherFood(); | |
// Create Workers | |
$('#createLumberjack').click(function(){ | |
if (worker.amount < maxPop) { | |
if (food.amount >= worker.lumberjack.cost) { | |
food.amount = food.amount - worker.lumberjack.cost; | |
worker.amount++; | |
worker.lumberjack.amount++; | |
worker.lumberjack.cost++; | |
updateValues(); | |
} else {$("#info").prepend($('<p>You need more food.</p>').fadeIn('slow'));} | |
} else {$("#info").prepend($('<p>You need to build more accommodation.</p>').fadeIn('slow'));} | |
}); | |
$('#createMiner').click(function(){ | |
if (worker.amount < maxPop) { | |
if (food.amount >= worker.miner.cost) { | |
food.amount = food.amount - worker.miner.cost; | |
worker.amount++; | |
worker.miner.amount++; | |
worker.miner.cost++; | |
updateValues(); | |
} else {$("#info").prepend($('<p>You need more food.</p>').fadeIn('slow'));} | |
} else {$("#info").prepend($('<p>You need to build more accommodation.</p>').fadeIn('slow'));} | |
}); | |
$('#createHunter').click(function(){ | |
if (worker.amount < maxPop) { | |
if (food.amount >= worker.hunter.cost) { | |
food.amount = food.amount - worker.hunter.cost; | |
worker.amount++; | |
worker.hunter.amount++; | |
worker.hunter.cost++; | |
updateValues(); | |
} else {$("#info").prepend($('<p>You need more food.</p>').fadeIn('slow'));} | |
} else {$("#info").prepend($('<p>You need to build more accommodation.</p>').fadeIn('slow'));} | |
}); | |
// Lumberjacks Gather Wood | |
function beginGatherWood(){ | |
nIntervId = setInterval(gatherWood, 5000); | |
} | |
function gatherWood(){ | |
wood.increment = worker.lumberjack.increment * worker.lumberjack.amount; | |
wood.amount = wood.amount + wood.increment; | |
checkMaxWood(); | |
updateValues(); | |
} | |
// Miner Gather Stone | |
function beginGatherStone(){ | |
nIntervId = setInterval(gatherStone, 5000); | |
} | |
function gatherStone(){ | |
stone.increment = worker.miner.increment * worker.miner.amount; | |
stone.amount = stone.amount + stone.increment; | |
checkMaxStone(); | |
updateValues(); | |
} | |
// Hunter Gather Food | |
function beginGatherFood(){ | |
nIntervId = setInterval(gatherFood, 5000); | |
} | |
function gatherFood(){ | |
food.increment = worker.hunter.increment * worker.hunter.amount; | |
food.amount = food.amount + food.increment; | |
checkMaxFood(); | |
updateValues(); | |
} | |
// Test max resources | |
function checkMaxWood(){ | |
if (wood.amount > wood.max){ | |
wood.amount = wood.max; | |
} | |
} | |
function checkMaxStone(){ | |
if (stone.amount > stone.max){ | |
stone.amount = stone.max; | |
} | |
} | |
function checkMaxFood(){ | |
if (food.amount > food.max){ | |
food.amount = food.max; | |
} | |
} | |
// Build a tent | |
$('#buildTent').click(function(){ | |
if (wood.amount >= tent.cost.wood) { | |
wood.amount = wood.amount - tent.cost.wood; | |
tent.amount++; | |
tent.cost.wood = tent.cost.wood * 1.2; | |
tent.cost.wood = tent.cost.wood.toFixed(0); | |
maxPop = maxPop + tent.residents; | |
updateValues(); | |
} else{$("#info").prepend($('<p>You need more wood.</p>').fadeIn('slow'));} | |
}); | |
// Build a house | |
$('#buildHouse').click(function(){ | |
if (wood.amount >= house.cost.wood && stone.amount >= house.cost.stone) { | |
wood.amount = wood.amount - house.cost.wood; | |
stone.amount = stone.amount - house.cost.stone; | |
house.amount++; | |
house.cost.wood = house.cost.wood * 1.2; | |
house.cost.stone = house.cost.stone * 1.2; | |
house.cost.wood = house.cost.wood.toFixed(0); | |
house.cost.stone = house.cost.stone.toFixed(0); | |
maxPop = maxPop + house.residents; | |
updateValues(); | |
} else {$("#info").prepend($('<p>You need more building materials.</p>').fadeIn('slow'));} | |
}); | |
// Research Hostel | |
$('#researchHostel').click(function() { | |
if (wood.amount >= 400 && stone.amount >= 150){ | |
wood.amount = wood.amount - 400; | |
stone.amount = stone.amount - 150; | |
$('#researchHostel').addClass('hidden'); | |
$('.progress-wrap-hostel').removeClass('hidden'); | |
var getPercent = ($('.progress-wrap-hostel').data('progress-percent-hostel') / 100); | |
var getProgressWrapWidth = $('.progress-wrap-hostel').width(); | |
var progressTotal = getPercent * getProgressWrapWidth; | |
var animationLength = 600000; | |
$('.progress-bar-hostel').stop().animate({ | |
left: progressTotal | |
}, | |
animationLength, | |
function(){ | |
$('#buildHostel').removeClass('hidden'); | |
$('.progress-wrap-hostel').addClass('hidden'); | |
$('.hostelInfo').removeClass('hidden'); | |
$('.hostelResearchInfo').addClass('hidden'); | |
}); | |
} else {$("#info").prepend($('<p>You need more building materials.</p>').fadeIn('slow'));} | |
}); | |
// Build a hostel | |
$('#buildHostel').click(function(){ | |
if (wood.amount >= hostel.cost.wood && stone.amount >= hostel.cost.stone) { | |
wood.amount = wood.amount - hostel.cost.wood; | |
stone.amount = stone.amount - hostel.cost.stone; | |
hostel.amount++; | |
hostel.cost.wood = hostel.cost.wood * 1.2; | |
hostel.cost.stone = hostel.cost.stone * 1.2; | |
hostel.cost.wood = hostel.cost.wood.toFixed(0); | |
hostel.cost.stone = hostel.cost.stone.toFixed(0); | |
maxPop = maxPop + hostel.residents; | |
updateValues(); | |
} else {$("#info").prepend($('<p>You need more building materials.</p>').fadeIn('slow'));} | |
}); | |
// Build wood storage | |
$('#buildWoodStorage').click(function(){ | |
if (wood.amount >= wood.storageCost.wood && stone.amount >= wood.storageCost.stone){ | |
wood.amount = wood.amount - wood.storageCost.wood; | |
stone.amount = stone.amount - wood.storageCost.stone; | |
wood.storage++; | |
wood.max = wood.max + 100; | |
updateValues(); | |
} else {$("#info").prepend($('<p>You need more building materials.</p>').fadeIn('slow'));} | |
}); | |
// Build stone storage | |
$('#buildStoneStorage').click(function(){ | |
if (wood.amount >= stone.storageCost.wood && stone.amount >= stone.storageCost.stone){ | |
wood.amount = wood.amount - stone.storageCost.wood; | |
stone.amount = stone.amount - stone.storageCost.stone; | |
stone.storage++; | |
stone.max = stone.max + 100; | |
updateValues(); | |
} else {$("#info").prepend($('<p>You need more building materials.</p>').fadeIn('slow'));} | |
}); | |
// Build food storage | |
$('#buildFoodStorage').click(function(){ | |
if (wood.amount >= food.storageCost.wood && stone.amount >= food.storageCost.stone){ | |
wood.amount = wood.amount - food.storageCost.wood; | |
stone.amount = stone.amount - food.storageCost.stone; | |
food.storage++; | |
food.max = food.max + 100; | |
updateValues(); | |
} else {$("#info").prepend($('<p>You need more building materials.</p>').fadeIn('slow'));} | |
}); | |
// Upgrades | |
$('#upgradeTwoFingers').click(function(){ | |
if (wood.amount >= 100 && stone.amount >= 100 && food.amount >= 100) { | |
wood.amount = wood.amount - 100; | |
stone.amount = stone.amount - 100; | |
food.amount = food.amount - 100; | |
clickIncrement = clickIncrement + 1; | |
$('.upgradeTwoFingers').addClass('hidden'); | |
$('.upgradeFourFingers').removeClass('hidden'); | |
$("#upgrades").prepend($('<p>Two Fingers | Two Resources Per Click</p>').fadeIn('slow')); | |
updateValues(); | |
} else {$("#info").prepend($('<p>You need more resources.</p>').fadeIn('slow'));} | |
}); | |
$('#upgradeFourFingers').click(function(){ | |
if (wood.amount >= 1000 && stone.amount >= 1000 && food.amount >= 1000) { | |
wood.amount = wood.amount - 1000; | |
stone.amount = stone.amount - 1000; | |
food.amount = food.amount - 1000; | |
clickIncrement = clickIncrement + 2; | |
$('.upgradeFourFingers').addClass('hidden'); | |
$("#upgrades").prepend($('<p>Four Fingers | Four Resources Per Click</p>').fadeIn('slow')); | |
updateValues(); | |
} else {$("#info").prepend($('<p>You need more resources.</p>').fadeIn('slow'));} | |
}); | |
$('#upgradeDoubleSleepingBags').click(function(){ | |
if (wood.amount >= 100 && stone.amount >= 100 && food.amount >= 100) { | |
wood.amount = wood.amount - 100; | |
stone.amount = stone.amount - 100; | |
food.amount = food.amount - 100; | |
tent.residents = 2; | |
maxPop = maxPop + tent.amount; //This only works because we are adding ONE resident. | |
$('.upgradeDoubleSleepingBags').addClass('hidden'); | |
$("#upgrades").prepend($('<p>Double Sleeping Bags | Two People, One Tent</p>').fadeIn('slow')); | |
updateValues(); | |
} else {$("#info").prepend($('<p>You need more resources.</p>').fadeIn('slow'));} | |
}); | |
$('#upgradeBunkBeds').click(function(){ | |
if (wood.amount >= 100 && stone.amount >= 100 && food.amount >= 100) { | |
wood.amount = wood.amount - 100; | |
stone.amount = stone.amount - 100; | |
food.amount = food.amount - 100; | |
house.residents = 5; | |
maxPop = maxPop + house.amount; //This only works because we are adding ONE resident. | |
$('.upgradeBunkBeds').addClass('hidden'); | |
$("#upgrades").prepend($('<p>Bunk Beds | Five People, One House</p>').fadeIn('slow')); | |
updateValues(); | |
} else {$("#info").prepend($('<p>You need more resources.</p>').fadeIn('slow'));} | |
}); | |
$('#upgradeSharpenAxes').click(function(){ | |
if (wood.amount >= 50 && stone.amount >= 100 && food.amount >= 50) { | |
wood.amount = wood.amount - 50; | |
stone.amount = stone.amount - 100; | |
food.amount = food.amount - 50; | |
worker.lumberjack.increment = 2; | |
$('.upgradeSharpenAxes').addClass('hidden'); | |
$("#upgrades").prepend($('<p>Sharpen Axes | Lumberjacks Chop Two Wood Each</p>').fadeIn('slow')); | |
updateValues(); | |
} else {$("#info").prepend($('<p>You need more resources.</p>').fadeIn('slow'));} | |
}); | |
$('#upgradeSharpenPicks').click(function(){ | |
if (wood.amount >= 50 && stone.amount >= 100 && food.amount >= 50) { | |
wood.amount = wood.amount - 50; | |
stone.amount = stone.amount - 100; | |
food.amount = food.amount - 50; | |
worker.miner.increment = 2; | |
$('.upgradeSharpenPicks').addClass('hidden'); | |
$("#upgrades").prepend($('<p>Sharpen Picks | Miners Mine Two Stone Each</p>').fadeIn('slow')); | |
updateValues(); | |
} else {$("#info").prepend($('<p>You need more resources.</p>').fadeIn('slow'));} | |
}); | |
$('#upgradeSharpenArrows').click(function(){ | |
if (wood.amount >= 50 && stone.amount >= 100 && food.amount >= 50) { | |
wood.amount = wood.amount - 50; | |
stone.amount = stone.amount - 100; | |
food.amount = food.amount - 50; | |
worker.hunter.increment = 2; | |
$('.upgradeSharpenArrows').addClass('hidden'); | |
$("#upgrades").prepend($('<p>Sharpen Arrows | Hunters Gather Two Food Each</p>').fadeIn('slow')); | |
updateValues(); | |
} else {$("#info").prepend($('<p>You need more resources.</p>').fadeIn('slow'));} | |
}); | |
$('#upgradeMatesRatesWood').click(function(){ | |
if (stone.amount >= 150 && food.amount >= 50) { | |
stone.amount = stone.amount - 150; | |
food.amount = food.amount - 50; | |
house.cost.wood = house.cost.wood - 20; | |
tent.cost.wood = tent.cost.wood - 15; | |
$('.upgradeMatesRatesWood').addClass('hidden'); | |
$("#upgrades").prepend($('<p>Mates Rates - Wood | Houses and Tents Cost Less Wood</p>').fadeIn('slow')); | |
updateValues(); | |
} else {$("#info").prepend($('<p>You need more resources.</p>').fadeIn('slow'));} | |
}); | |
$('#upgradeMatesRatesStone').click(function(){ | |
if (wood.amount >= 150 && food.amount >= 50) { | |
wood.amount = wood.amount - 150; | |
food.amount = food.amount - 50; | |
house.cost.stone = house.cost.stone - 20; | |
$('.upgradeMatesRatesStone').addClass('hidden'); | |
$("#upgrades").prepend($('<p>Mates Rates - Stone | Houses Cost Less Stone</p>').fadeIn('slow')); | |
updateValues(); | |
} else {$("#info").prepend($('<p>You need more resources.</p>').fadeIn('slow'));} | |
}); | |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/2.1.3/jquery.min.js"></script> | |
<script src="https://netdna.bootstrapcdn.com/bootstrap/3.1.1/js/bootstrap.min.js"></script> |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
.header { | |
text-align:center; | |
} | |
.row { | |
margin-bottom:2px; | |
text-align:center; | |
} | |
.col-md-6 { | |
padding-left:25px; | |
padding-right:25px; | |
} | |
.col-xs-4, .col-xs-3, .col-xs-6 { | |
padding-left:1px; | |
padding-right:1px; | |
} | |
/* Research Bars */ | |
.progress { | |
width: 100%; | |
height: 38px; | |
} | |
.progress-wrap-hostel { | |
background: #df6e1e; | |
margin: 0px 0; | |
overflow: hidden; | |
position: relative; | |
} | |
.progress-bar-hostel { | |
background: #ddd; | |
left: 0; | |
position: absolute; | |
top: 0; | |
border-radius:0; | |
} | |
.researchingComment { | |
line-height:38px; | |
color:black; | |
} | |
.info { | |
overflow:hidden; | |
max-height:200px; | |
} | |
.info p { | |
text-align:left; | |
} | |
.well { | |
padding-top:0; | |
} |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
<link href="https://netdna.bootstrapcdn.com/bootswatch/3.1.1/amelia/bootstrap.min.css" rel="stylesheet" /> |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment