Pen Settings

HTML

CSS

CSS Base

Vendor Prefixing

Add External Stylesheets/Pens

Any URL's added here will be added as <link>s in order, and before the CSS in the editor. If you link to another Pen, it will include the CSS from that Pen. If the preprocessor matches, it will attempt to combine them before processing.

+ add another resource

JavaScript

Babel includes JSX processing.

Add External Scripts/Pens

Any URL's added here will be added as <script>s in order, and run before the JavaScript in the editor. You can use the URL of any other Pen and it will include the JavaScript from that Pen.

+ add another resource

Packages

Add Packages

Search for and use JavaScript packages from npm here. By selecting a package, an import statement will be added to the top of the JavaScript editor for this package.

Behavior

Save Automatically?

If active, Pens will autosave every 30 seconds after being saved once.

Auto-Updating Preview

If enabled, the preview panel updates automatically as you code. If disabled, use the "Run" button to update.

Format on Save

If enabled, your code will be formatted when you actively save your Pen. Note: your code becomes un-folded during formatting.

Editor Settings

Code Indentation

Want to change your Syntax Highlighting theme, Fonts and more?

Visit your global Editor Settings.

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

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

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



              
            
!
999px

Console