Version-3.1

Perrishnikov · Feb 25, 2016 · 3d7e6ab · 3d7e6ab
1 parent 726095e
commit 3d7e6ab
Show file tree

Hide file tree

Showing 5 changed files with 293 additions and 211 deletions.
diff --git a/cards.css b/cards.css
@@ -7,13 +7,24 @@ Another edit
 
 .card {
   background-image: url("graphics/cardback.gif");
-  border-color: #808080 #000000 #000000 #808080;
-  border-width: 1px;
-  border-style: solid;
+
   font-size: 20pt;
   position: absolute;
   width:  3.75em;
   height: 5.00em;
+  border-radius: 3px;
+  border: 1px solid gray;
+
+}
+.cardName {
+  font-size: 40%;
+  font-weight: bold;
+  text-align: center;
+  position: absolute;
+  right: 0.25em;
+  top:  0.35em;
+  border-radius: 1px; 
+  border: 1px solid black;
 }
 
 .cardArea {
@@ -43,7 +54,8 @@ Another edit
   height: 100%;
 }
 
-.red { color: #ff0000; }
+/*appending red color to class from cards.js spotChar*/
+.red { color: #ff0000; } 
 
 .index {
   font-size: 50%;
@@ -52,6 +64,7 @@ Another edit
   position: absolute;
   left: 0.25em;
   top:  0.25em;
+  border: 1px solid blue;
 }
 
 .ace {
@@ -70,20 +83,25 @@ Another edit
   height: 4.0em;
 }
 
-.spotA1 { position: absolute; left: 0.60em; top: 0.5em; }
-.spotA2 { position: absolute; left: 0.60em; top: 1.5em; }
-.spotA3 { position: absolute; left: 0.60em; top: 2.0em; }
-.spotA4 { position: absolute; left: 0.60em; top: 2.5em; }
-.spotA5 { position: absolute; left: 0.60em; top: 3.5em; }
+.spot{
+  border: 1px solid green;
+  position: absolute; 
+}
+
+.A1 { left: 0.60em; top: 0.5em; }
+.A2 { left: 0.60em; top: 1.5em; }
+.A3 { left: 0.60em; top: 2.0em; }
+.A4 { left: 0.60em; top: 2.5em; }
+.A5 { left: 0.60em; top: 3.5em; }
 
-.spotB1 { position: absolute; left: 1.55em; top: 0.5em; }
-.spotB2 { position: absolute; left: 1.55em; top: 1.0em; }
-.spotB3 { position: absolute; left: 1.55em; top: 2.0em; }
-.spotB4 { position: absolute; left: 1.55em; top: 3.0em; }
-.spotB5 { position: absolute; left: 1.55em; top: 3.5em; }
+.B1 { left: 1.55em; top: 0.5em; }
+.B2 { left: 1.55em; top: 1.0em; }
+.B3 { left: 1.55em; top: 2.0em; }
+.B4 { left: 1.55em; top: 3.0em; }
+.B5 { left: 1.55em; top: 3.5em; }
 
-.spotC1 { position: absolute; left: 2.50em; top: 0.5em; }
-.spotC2 { position: absolute; left: 2.50em; top: 1.5em; }
-.spotC3 { position: absolute; left: 2.50em; top: 2.0em; }
-.spotC4 { position: absolute; left: 2.50em; top: 2.5em; }
-.spotC5 { position: absolute; left: 2.50em; top: 3.5em; }
+.C1 { left: 2.50em; top: 0.5em; }
+.C2 { left: 2.50em; top: 1.5em; }
+.C3 { left: 2.50em; top: 2.0em; }
+.C4 { left: 2.50em; top: 2.5em; }
+.C5 { left: 2.50em; top: 3.5em; }
diff --git a/cards.js b/cards.js
@@ -1,7 +1,8 @@
+"use strict";
 //-----------------------------------------------------------------------------
 // Card constructor function.
 //-----------------------------------------------------------------------------
-
+// from stack.js stackMakeDeck()
 function Card(rank, suit) {
 
   this.rank = rank;
@@ -21,7 +22,7 @@ function cardToString() {
   var rank, suit;
 
   switch (this.rank) {
-    case "A" :
+    case "1" :
       rank = "Ace";
       break;
     case "2" :
@@ -51,13 +52,13 @@ function cardToString() {
     case "10" :
       rank = "Ten";
       break;
-    case "J" :
+    case "11" :
       rank = "Jack"
       break;
-    case "Q" :
+    case "12" :
       rank = "Queen"
       break;
-    case "K" :
+    case "13" :
       rank = "King"
       break;
     default :
@@ -101,13 +102,19 @@ var cardImg3 = new Image(); cardImg3.src= "graphics/king.gif";
 
 function cardCreateNode() {
 
-  var cardNode, frontNode, indexNode, spotNode, tempNode, textNode;
-  var indexStr, spotChar;
+  var cardNode; //will create element "DIV"
+  var frontNode; 
+  var indexNode; 
+  var spotNode; 
+  var tempNode; 
+  var textNode;
 
+    var nameNode;//////////////////////////////////////////////////  
+
   // This is the main node, a DIV tag.
 
   cardNode = document.createElement("DIV");
-  cardNode.className = "card";
+  cardNode.className = "card"; //create HTML class called "card"
 
   // Build the front of card.
 
@@ -116,7 +123,7 @@ function cardCreateNode() {
 
   // Get proper character for card suit and change font color if necessary.
 
-  spotChar = "\u00a0";
+  var spotChar = "\u00a0";
   switch (this.suit) {
     case "C" :
       spotChar = "\u2663";
@@ -134,20 +141,41 @@ function cardCreateNode() {
       break;
   }
 
+  //my node //use CSS to shape it
+    nameStr = this.toString();
+    if (this.toString() == "")
+
+    nameStr = "";//"\u00a0"; //why is this here?
+
+    nameNode = document.createElement("DIV");
+    nameNode.className = "cardName";
+
+    textNode = document.createTextNode(nameStr);
+    nameNode.appendChild(textNode);
+    nameNode.appendChild(document.createElement("BR"));
+
+    frontNode.appendChild(nameNode);
+
   // Create and add the index (rank) to the upper-left corner of the card.
 
-  indexStr = this.rank;
-  if (this.toString() == "")
-    indexStr = "\u00a0";
+  var indexStr = this.rank; //yes
+  if (this.toString() == "") //yes
+
+  indexStr = "\u00a0";
   spotNode = document.createElement("DIV");
   spotNode.className = "index";
+
   textNode = document.createTextNode(indexStr);
+
   spotNode.appendChild(textNode);
   spotNode.appendChild(document.createElement("BR"));
+
   textNode = document.createTextNode(spotChar);
   spotNode.appendChild(textNode);
+
   frontNode.appendChild(spotNode);
 
+
   // Create and add spots based on card rank (Ace thru 10).
 
   spotNode = document.createElement("DIV");
@@ -159,65 +187,65 @@ function cardCreateNode() {
     frontNode.appendChild(tempNode);
   }
   if (this.rank == "3" || this.rank == "5" || this.rank == "9") {
-    spotNode.className = "spotB3";
+    spotNode.className = "spot B3";
     tempNode = spotNode.cloneNode(true);
     frontNode.appendChild(tempNode);
   }
   if (this.rank == "2" || this.rank == "3") {
-    spotNode.className = "spotB1";
+    spotNode.className = "spot B1";
     tempNode = spotNode.cloneNode(true);
     frontNode.appendChild(tempNode);
   }
   if (this.rank == "2" || this.rank == "3") {
-    spotNode.className = "spotB5";
+    spotNode.className = "spot B5";
     tempNode = spotNode.cloneNode(true);
     frontNode.appendChild(tempNode);
   }
   if (this.rank == "4" || this.rank == "5" || this.rank == "6" ||
       this.rank == "7" || this.rank == "8" || this.rank == "9" ||
       this.rank == "10") {
-    spotNode.className = "spotA1";
+    spotNode.className = "spot A1";
     tempNode = spotNode.cloneNode(true);
     frontNode.appendChild(tempNode);
-    spotNode.className = "spotA5";
+    spotNode.className = "spot A5";
     tempNode = spotNode.cloneNode(true);
     frontNode.appendChild(tempNode);
-    spotNode.className = "spotC1";
+    spotNode.className = "spot C1";
     tempNode = spotNode.cloneNode(true);
     frontNode.appendChild(tempNode);
-    spotNode.className = "spotC5";
+    spotNode.className = "spot C5";
     tempNode = spotNode.cloneNode(true);
     frontNode.appendChild(tempNode);
   }
   if (this.rank == "6" || this.rank == "7" || this.rank == "8") {
-    spotNode.className = "spotA3";
+    spotNode.className = "spot A3";
     tempNode = spotNode.cloneNode(true);
     frontNode.appendChild(tempNode);
-    spotNode.className = "spotC3";
+    spotNode.className = "spot C3";
     tempNode = spotNode.cloneNode(true);
     frontNode.appendChild(tempNode);
   }
   if (this.rank == "7" || this.rank == "8" || this.rank == "10") {
-    spotNode.className = "spotB2";
+    spotNode.className = "spot B2";
     tempNode = spotNode.cloneNode(true);
     frontNode.appendChild(tempNode);
   }
   if (this.rank == "8" || this.rank == "10") {
-    spotNode.className = "spotB4";
+    spotNode.className = "spot B4";
     tempNode = spotNode.cloneNode(true);
     frontNode.appendChild(tempNode);
   }
   if (this.rank == "9" || this.rank == "10") {
-    spotNode.className = "spotA2";
+    spotNode.className = "spot A2";
     tempNode = spotNode.cloneNode(true);
     frontNode.appendChild(tempNode);
-    spotNode.className = "spotA4";
+    spotNode.className = "spot A4";
     tempNode = spotNode.cloneNode(true);
     frontNode.appendChild(tempNode);
-    spotNode.className = "spotC2";
+    spotNode.className = "spot C2";
     tempNode = spotNode.cloneNode(true);
     frontNode.appendChild(tempNode);
-    spotNode.className = "spotC4";
+    spotNode.className = "spot C4";
     tempNode = spotNode.cloneNode(true);
     frontNode.appendChild(tempNode);
   }
@@ -238,10 +266,10 @@ function cardCreateNode() {
 
   if (this.rank == "J" || this.rank == "Q" || this.rank == "K") {
     frontNode.appendChild(tempNode);
-    spotNode.className = "spotA1";
+    spotNode.className = "spot A1";
     tempNode = spotNode.cloneNode(true);
     frontNode.appendChild(tempNode);
-    spotNode.className = "spotC5";
+    spotNode.className = "spot C5";
     tempNode = spotNode.cloneNode(true);
     frontNode.appendChild(tempNode);
   }