Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

From Master #7

Open
wants to merge 1 commit into
base: master
Choose a base branch
from
Open

From Master #7

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
1 commit
Select commit
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
56 changes: 37 additions & 19 deletions cards.css
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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 {
Expand Down Expand Up @@ -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%;
Expand All @@ -52,6 +64,7 @@ Another edit
position: absolute;
left: 0.25em;
top: 0.25em;
border: 1px solid blue;
}

.ace {
Expand All @@ -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; }
77 changes: 52 additions & 25 deletions cards.js
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,7 +1,7 @@
//-----------------------------------------------------------------------------
// Card constructor function.
//-----------------------------------------------------------------------------

// from stack.js stackMakeDeck()
function Card(rank, suit) {

this.rank = rank;
Expand Down Expand Up @@ -101,13 +101,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.

Expand All @@ -116,7 +122,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";
Expand All @@ -134,20 +140,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");
Expand All @@ -159,65 +186,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);
}
Expand All @@ -238,10 +265,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);
}
Expand Down
17 changes: 13 additions & 4 deletions displaydemo.html
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -11,7 +11,7 @@ <h3>Card Display Demo</h3>
<table>
<tr>
<td id="settings">
<table border="1" style="border-collapse:collapse; border:1px solid black; color:#000000; width:300" cellpadding="3" cellspacing="3">
<table border="1" style="border-collapse:collapse; border:1px solid black; color:#000000; width:300" cellpadding="3" cellspacing="3">

<tr>
<td align="center">Fixed Settings</td>
Expand Down Expand Up @@ -55,12 +55,21 @@ <h3>Card Display Demo</h3>
</tr>

<tr>
<td align="center">Dynamic Settings</td>
<td></td>
<td id=""></td>
<td></td>
</tr>

</table></td>
</table>
</td>

<form>
<p>Create
<input type="text" id="numCards" placeholder="52">
cards in a stack called
<input type="text" id="numCards" placeholder="My Deck">.
<input type="button" id="addCard" value="NOW">
</form>

<td id="information">
<table border="1" style="border-collapse:collapse; border:1px solid black; color:#000000; width:300" cellpadding="3" cellspacing="3">
<tr>
Expand Down
Loading