Stoke The Volune

Turn thermal energy into sound...?

by Jake Herman

HTML

<script src="https://code.jquery.com/jquery-1.11.3.js"></script>
<script src="https://code.jquery.com/ui/1.11.4/jquery-ui.js"></script>
<div id="indicators">
  <div id="volume-holder"></div>
  <div id="empty-volume"><div id="volume-level-bar-thing"></div>
  <div id="volume-text">0</div>
</div>

<div id = "campfire">
  <div id="logs">
     <div id="logg" style="transform:rotate(30deg)"></div>
     <div id="logg" style="transform:rotate(-30deg)"></div>
  </div>
  
  <div id="fire">
    <div id="flame" style="border-bottom: 25px solid red; top: -15px; left:20px;animation-name: flickerZ;animation-duration: 0.5s;animation-iteration-count:infinite;animation-direction:alternate"></div>
    <div id="flame" style="border-bottom: 25px solid orange; top: -15px; left: 10px;"></div>
  </div>
</div>

<div id="log-pile">
  <div id="log"></div>
</div>

CSS

#volume-holder {
  background-color:grey;
  z-index:-10;
  height: 25px;
  width: 200px;
  top: 0px;
  left: 0px;
  position:absolute;
}

#empty-volume {
  background-color:lightgrey;
  z-index:0;
  height: 15px;
  width:125px;
  top: 5px;
  left: 10px;
  position:absolute;
}

#volume-text {
  top: 0px;
  left: 130px;
  color: lightgrey;
  position:absolute;
}

#volume-level-bar-thing {
  background-color: #23ff5e;
  position:absolute;
  width: 50%;
  height: 100%;
  z-index: 10;
}

#log-pile {
  top: 200px;
  position: absolute;
}

#logg, #log{
  width: 75px;
  height:20px;
  background-color:#e8a053;
  position:absolute;
  z-index: -10;
}

#campfire {
  top: 200px;
  left: 200px;
  position: absolute;
}

#flame {
  width: 0; 
  height: 0; 
  border-left: 25px solid transparent;
  border-right: 25px solid transparent;
  top: -20px;
  left: 12px;
  position: absolute;
}

@keyframes flickerZ {
  from {
    z-index:-10;
  }

  to {
    z-index:10;
  }
}

JavaScript

var vol = 10;
var added = false;

$("#volume-text").text(vol);
$("#volume-level-bar-thing").width(vol + "%");

$("#log").draggable({
  drag: function(event, ui) {
    var posY = ui.position.top;
    var posX = ui.position.left;
    //checks log position to see if it is over the fire
    if(posY > -30 && posY < 10 && posX >175 && posX < 225 && added == false) {
    	//burn the wood and increase volume
      vol += 10;
      added= true;
      $("#log").fadeTo("0.5", 0);
      $("#volume-text").text(vol);
      $("#volume-level-bar-thing").width(vol + "%");
      $("#log").animate({top:0,left:0});
      $("#log").fadeTo("0.5", 1);
      added = false;
    }
  },
});