Incremental RPG v0.5

incremental-rpg-v0-5.markdown

Incremental RPG v0.5

A Pen by Samuel Beard on CodePen.

License.

index.html

<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">&times;</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">&times;</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">&times;</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">&times;</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-->

script.js

// 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'));}
});

scripts

<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>

style.css

.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;
}

styles

<link href="https://netdna.bootstrapcdn.com/bootswatch/3.1.1/amelia/bootstrap.min.css" rel="stylesheet" />