5 Card Pyramath Version 2.0

by Ron Eaglin

HTML

<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/js/bootstrap.min.js"></script>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>
<script src="https://code.jquery.com/ui/1.12.1/jquery-ui.js"></script>
<div id="center">
  <h1>Pyramath (Javascript, HTML Version)</h1>
  <hr>
  <div id="game">
    <div id="pyramid" class="game">

    </div>
    <div id="texts" class="texts">
      <div id="score"></div>
      <br>
      <br>
      <div id="message"></div>
    </div>
    <div id="deal" class="timer" style="">
      <div id='timer'></div>
      <br>
      <button class="button" id="newCard">Deal Cards</button>
      <br>
      <br>
      <div id="card" class="ui-widget-content"></div>
    </div>
  </div>
</div>
  <div id="instructions">
    <p>Pyramath is played by placing cards between other cards based on math facts.</p>
    <p>
    The open spaces are locations where you can  drop cards. Examples of legal plays are below
    </p>
    <p>
    If the cards above a spot are a 4 and 7 the legal plays are:<br/>
    3 - because 7 - 4 = 3<br/>
    1 - because 7 + 4 = 1<u>1</u><br/>
    8 - because 7 * 4 = 2<u>8</u><br/><br/>
    Note - playing the ones digit for numbers greater than 10. 
    </p>
    <p>
    Press the <b>Deal Cards</b> button to start the timer and give you cards to drop onto the pyramid. Hitting this button will always give you another set of cards, but also reduce your score every time you hit it. 
    </p>
<p>
Once cards are dealt simply drag them onto the pyramid to make plays. 
</p>
  </div>

CSS

.game {
  position: relative;
  top: 10px;
  left: 20px; 
  width: 675px;
  height: 600px; 
}

.texts {
  left: 50px;
  bottom: 100px;
}

.timer {
  bottom: 60px;
  right: 200px;
}

.button {
  position: absolute;
  top: 600px;
  left: 20px;
  background-color: yellow;
  border: double;
  color: black;
  padding: 15px 32px;
  text-align: center;
  text-decoration: none;
  display: inline-block;
  font-size: 16px;
  margin: 4px 2px;
  cursor: pointer;
}

.ui-widget.instructions-dialog {
    font-family: Verdana,Arial,sans-serif;
    font-size: 1.2em;
}

.ui-widget-content.instructions-dialog {
    background: #F9F9F9;
    border: 1px solid #90d93f;
    color: #222222;
}

.ui-dialog.instructions-dialog {
    left: 0;
    outline: 0 none;
    padding: 0 !important;
    position: absolute;
    top: 0;
}

.ui-dialog.instructions-dialog .ui-dialog-content {
    background: none repeat scroll 0 0 transparent;
    border: 0 none;
    overflow: auto;
    position: relative;
    padding: 0 !important;
    margin: 0;
}

.ui-dialog.instructions-dialog .ui-widget-header {
    background: blue;
    border: 0;
    color: #fff;
    font-weight: normal;
}

.ui-dialog.instructions-dialog .ui-dialog-titlebar {
    padding: 0.1em .5em;
    position: relative;
    font-size: 1em;
}

JavaScript

jQuery.fn.exists = function() {
  return this.length > 0;
}

$(window).load(function() {
  var startGame = true;
  var timer = true;
  var interval;
  var time = 0;
  var deals = 0;

  var values = [];
  var pile = []; // This is all the cards on the lower pile
  // drops are labeled as rowcol 11 = row 1, col 1
  var drops = [
    ['11', '12', '13', '14', '15'],
    ['21', '22', '23', '24'],
    ['31', '32', '33'],
    ['41', '42'],
    ['51']
  ];
  // parents allow us o look at which id cards are above the card
  var parents = {
    '21': ['11', '12'],
    '22': ['12', '13'],
    '23': ['13', '14'],
    '24': ['14', '15'],
    '31': ['21', '22'],
    '32': ['22', '23'],
    '33': ['23', '24'],
    '41': ['31', '32'],
    '42': ['32', '33'],
    '51': ['41', '42']
  }

  var dropNum = 0;

  // Sets up drop zones on pyramid image. 

  for (var i = 0; i < 5; i++) {
    for (var j = 0; j < 5 - i; j++) {

      document.getElementById('pyramid').innerHTML += '<div class="drop" id="' + drops[i][j] + '" data="null" data-card="null" style="position: absolute; top:' + (5 + (i * 100)) + 'px;left:' + (5 + (i * 62.4) + (j * 135)) + 'px; width:125px; height:175px; background-color: #e0ffff; border: 5px solid navy;" ></div>';

    }
  }

  // Puts in the first row of cards. id = '11' through '15' 
  // attribute data is set to num which is the file number of the card

  for (var i = 1; i <= 5; i++) {
    // These stay random
    var num = Math.floor(Math.random() * 10);
    dropCard(num, '1' + i.toString());
    //    var div = document.getElementById('1' + i.toString());
    //   div.innerHTML += '<img src="https://cop4813eaglin.pbworks.com/f/' + num + '.png">';
    //  div.setAttribute("data", num);
  }

  $(init);

  // New Card button clicked
  // startGame - boolean true - before first click

  $(function() {
    $("#instructions").dialog({
      title: 'Pyramath Instructions',
      height: 500,
      width: 500,
      modal: true,
      resizable: false,
     ...