A7

Web Sys 1

by Tori Hoelscher

HTML

<p>
  Draw some cards. Think of a question in your head, if it's red it's a yes! If it's black, it's a no. 
</p>


<button id=drawcards>Draw Cards</button>
<br><br><br>
<div id=output>

</div>




<br>
<br>
<br>
<br>




<h3>
  Drop here:
</h3>
<div id=drop class=drop>

</div>


<!--
<script
			  src="https://code.jquery.com/jquery-3.3.1.js"
			  integrity="sha256-2Kok7MbOyxpgUVvAk/HJ2jigOSYS2auK4Pfzbm7uH60="
			  crossorigin="anonymous"></script>
        -->

<link rel="stylesheet" href="https://ajax.googleapis.com/ajax/libs/jqueryui/1.12.1/themes/smoothness/jquery-ui.css">
<script src="https://ajax.googleapis.com/ajax/libs/jqueryui/1.12.1/jquery-ui.min.js"></script>

CSS

img {
  width: 90px;
  height: 100px;
}

.drop {
  height: 400px;
  width: 800px;
  border: 1px solid black;
  background-color: grey;
  color: white;
}

JavaScript

var cards = ["ace", "jack", "king", "queen", "2", "3", "4", "5", "6", "7", "8", "9", "10"];

var typeCard = ["Hearts", "Spades", "Clubs", "Diamonds"];




$("#drawcards").click(function() {
  randCard()
});





function init() {
  $("#drag").draggable();

  $("#drop").droppable({

    drop: handleDropEvent
  });

}


function handleDropEvent(event, ui) {
  var draggable = ui.draggable;
  alert('The card with ID "' + draggable.attr('id') + '" was dropped onto this box!');
}


function randCard() {
  //var r = Math.Random(Math.floor() * typeCard);
  var r = typeCard[Math.floor(Math.random() * typeCard.length)];
  var c = cards[Math.floor(Math.random() * cards.length)];

  Deal(r, c);

}

function Deal(deck, card) {
  if (cards.length == 0) return false;
  //  var r = Math.floor(Math.random() * 67);

  var img = document.createElement("img");
  img.src = "https://alotofthean.com/cards/" + deck + "/" + card + "_" + "of" + "_" + deck.toLowerCase() + ".png";
  img.id = 'drag';

  /*$("#drag").each ({
  	draggable: true
  });
    */


  document.getElementById("output").appendChild(img);

  $(init);

  /*
   $("#drag").draggable({
   //	helper: "clone",
    //stack: "#drag"

   });
   */



  removeCard(deck, card);
  // document.body.appendChild(img);
  //removeCard(i);

}




function removeCard(t, c) {

  var st = t.tostring(); //type of card
  var se = c.tostring(); //cards

  // simply make every higher numbered card move down 1
  for (var i = st; i <= typeCard.length - 2; i++) {
    typeCard[i] = typeCard[i + 1];
  }
  for (var j = se; j <= cards.length - 2; j++) {

    cards[j] = cards[j + 1];
  }

  cards--;


  /* 
    for (var i=t; i <= typeCard.length - 2; i++)
    {
        typeCard[i] = typeCard[i+1];
    }
    typeCard--;
}
*/

}