Dirigible Plum Doctor

Caring for Dirigible Plums on HEXRPG.com

by Ben Wochinski

HTML

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js"></script>
<!-- Fullscreen URL
http://jsfiddle.net/bwochinski/9qLszsy8/embedded/result/dark/?fontColor=101516&accentColor=101516&menuColor=101516
-->
<!-- CREATED by Ben Wochinski -->
<div id="#content">
  <h1>Dirigible Plum Doctor</h1>
  <div class="roomy">
    Today is: <span id="wDay"></span> (Method <span id="method">999</span>)
  </div>
  <table>
  <tr>
    <td colspan="5" id="msg">
      <iframe src="about:blank" id="loader1" name="loader1" class="loader" scrolling="no">
      </iframe>
      <iframe src="about:blank" id="loader2" name="loader2" class="loader" scrolling="no">
      </iframe>
      <iframe src="about:blank" id="loader3" name="loader3" class="loader" scrolling="no">
      </iframe>
      <iframe src="about:blank" id="loader4" name="loader4" class="loader" scrolling="no">
      </iframe>
      <iframe src="about:blank" id="loader5" name="loader5" class="loader" scrolling="no">
      </iframe>
    </td>
  </tr>
  <tr>
    <td>
    <h3>Plum 1</h3>
      <div class="plumDiv">
        <iframe src="http://www.hexrpg.com/dp/plum.php?id=1" class="plumIframe" name="p1frame" id="p1frame" scrolling="no"></iframe>
      </div>
    </td>
    <td>
    <h3>Plum 2</h3>
      <div class="plumDiv">
        <iframe src="http://www.hexrpg.com/dp/plum.php?id=2" class="plumIframe" name="p2frame" id="p2frame" scrolling="no"></iframe>
      </div>
    </td>
    <td>
    <h3>Plum 3</h3>
      <div class="plumDiv">
        <iframe src="http://www.hexrpg.com/dp/plum.php?id=3" class="plumIframe" name="p3frame" id="p3frame" scrolling="no"></iframe>
      </div>
    </td>
    <td>
    <h3>Plum 4</h3>
      <div class="plumDiv">
        <iframe src="http://www.hexrpg.com/dp/plum.php?id=4" class="plumIframe"  name="p4frame" id="p4frame" scrolling="no"></iframe>
      </div>
    </td>
    <td>
    <h3>Plum 5</h3>
      <div class="plumDiv">
        <iframe...

CSS

body {
  color: #ddd;
  background: #101516;
  text-align: center;
}

#content {
  text-align: center;
  margin-left: auto;
  margin-right: auto;
}

h3 {
  padding: 0px;
  margin: 5px;
}

iframe.loader {
  display: none;
  position: relative;
  float: left;
  top: 30px;
  left: 0px;
  border: 2px solid #505556;
  padding: 0px;
  margin-top: -29px;
  margin-left: 120px;
  margin-right: auto;
  width: 400px;
  height: 25px;
}

table {
  margin-left: auto;
  margin-right: auto;
  max-width: 662px;
  border-collapse: collapse;
}

table tr td {
  text-align: center;
  border-left: 1px solid #333;
  border-right: 1px solid #333;
  padding: 5px;
  vertical-align: top;
}
table tr:last-child td {
  border-bottom: 1px solid #333;
}
table tr td#msg {
  text-align: center;
  height: 30px;
  padding-top: 0px;
  border: 0px;
  border-bottom: 1px solid #333;
}

table tr td input {
  margin: 2px;
  width: 110px;
  background-color: rgb(56, 83, 82);
  color: rgb(120, 178, 176);
  font-family: hopfer_hornbookregular;
  font-size: 15px;
  text-transform: uppercase;
  border-color: rgb(120, 178, 176);
  border-width: 1px;
  cursor: pointer;
}

div.roomy {
  margin: -15px 0 15px 0;
}

span#wDay {
  font-weight: bold;
  padding: 5px;
}

div.plumDiv {
    width    : 120px;
    height   : 160px;
    overflow : hidden;
    position : relative;
}
 
iframe.plumIframe {
    position : absolute;
    top      : -95px;
    left     : -230px;
    width    : 430px;
    height   : 560px;
}

div#help {
  margin-top: 25px;
  margin-left: auto;
  margin-right: auto;
  font-size: 11px;
  font-family: Verdana;
  width: 662px;
}

JavaScript

$(function() {
	var weekDay = ["Sunday", "Monday", "Tuesday", "Wednesday", "Thursday", "Friday", "Saturday"];
  //Ugly timezone conversion - good enough
  var now = new Date(); 
	var d = new Date(now.getUTCFullYear(), now.getUTCMonth(), now.getUTCDate(),  now.getUTCHours(), now.getUTCMinutes(), now.getUTCSeconds());
	d.setHours(d.getHours()-6);
  var day = d.getDay();
  var method = (4 - Math.abs(day - 3));
  
  $('#wDay').text(weekDay[day]);
  $('#method').text(method.toString());
  
  $('input[name="waterMethod"]').val(method);
  $('input[name="feedMethod"]').val(method);
  $('input[name="fertilizeMethod"]').val(method);
  $('input[name="pruneMethod"]').val(method);
  $('input[name="moveMethod"]').val(method-1);
  $('input[name="weedMethod"]').val(method);
  
 
  $('#loader1').load(function() {
  	$('#p1frame').attr('src', function ( i, val ) { return val; });
    $('#loader1').fadeIn(100).delay(1000).fadeOut(150);
  });
  $('#loader2').load(function() {
  	$('#p2frame').attr('src', function ( i, val ) { return val; });
    $('#loader2').fadeIn(100).delay(1000).fadeOut(150);
  });
  $('#loader3').load(function() {
  	$('#p3frame').attr('src', function ( i, val ) { return val; });
    $('#loader3').fadeIn(100).delay(1000).fadeOut(150);
  });
  $('#loader4').load(function() {
  	$('#p4frame').attr('src', function ( i, val ) { return val; });
    $('#loader4').fadeIn(100).delay(1000).fadeOut(150);
  });
  $('#loader5').load(function() {
  	$('#p5frame').attr('src', function ( i, val ) { return val; });
    $('#loader5').fadeIn(100).delay(1000).fadeOut(150);
  });
});