From 3d7e6ab145d7ac0128ee17fa1efcf6379d6db89a Mon Sep 17 00:00:00 2001 From: Perrishnikov Date: Thu, 25 Feb 2016 16:58:51 -0600 Subject: [PATCH] Version-3.1 --- cards.css | 56 +++++++++++------ cards.js | 86 +++++++++++++++++--------- displaydemo.html | 124 ++++++------------------------------- main.js | 157 +++++++++++++++++++++++++++++++++++++++++++++++ stack.js | 81 +++++++----------------- 5 files changed, 293 insertions(+), 211 deletions(-) create mode 100644 main.js diff --git a/cards.css b/cards.css index 2db6929..38e33bd 100644 --- 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; } \ No newline at end of file +.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; } \ No newline at end of file diff --git a/cards.js b/cards.js index 9836537..a71080b 100644 --- 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); } diff --git a/displaydemo.html b/displaydemo.html index 249470f..b0e9ef6 100644 --- a/displaydemo.html +++ b/displaydemo.html @@ -1,116 +1,32 @@ - + CardCreator - - + - + -
-

This page shows how cards can be displayed using some DHTML. Again, use - the links below to shuffle the deck, deal a hand or return used cards to the - deck.

-

- Shuffle Deck - | - Deal - | - Discard - | - Reset Deck -

+
+

+
-
-
-
+
- - - - + + + + + - + diff --git a/main.js b/main.js new file mode 100644 index 0000000..7b6174f --- /dev/null +++ b/main.js @@ -0,0 +1,157 @@ +"use strict"; + +function init(){ + document.getElementById("messageAreaL0").innerHTML = "Main info: " + view.defaultGreeting; + document.getElementById("numCards").value = view.defaultNumCards; + document.getElementById("stackName").value = view.defaultStackName; + + //event handlers + var submitButton = document.getElementById("submit"); + submitButton.onclick = controller.handleSubmitButton; + + var resetButton = document.getElementById("reset"); + resetButton.onclick = controller.handleResetButton; +} + +var view = { + defaultGreeting : "Hello", + defaultStackName : "My Stack", + defaultNumCards : 13, + + //main info line + displayMessageL0 : function(msg){ + var messageArea = document.getElementById("messageAreaL0"); + messageArea.innerHTML = "Main info: " + msg; + }, + + //card number info line + displayMessageL1 : function(msg){ + var messageArea = document.getElementById("messageAreaL1"); + messageArea.innerHTML = "Name info: " + msg; + }, + //stack name info line + displayMessageL2 : function(msg){ + var messageArea = document.getElementById("messageAreaL2"); + messageArea.innerHTML = "Card info: " + msg; + } +}; + +var model = { + stack01 : [], //concvet to stacks Object and insert 01,02, etc + /////// + // numCards : null, + stack : null, + tags : { + rank : null, + suit : null + } +}; + +var controller = { + + handleSubmitButton : function() { + var cards = document.getElementById("numCards"); + var stack = document.getElementById("stackName"); + var tempNumCard = cards.value; + var stackName = stack.value; + + function checkNumber (){ + if(!isNaN(tempNumCard) && tempNumCard > 0 && tempNumCard < 52) { + model.numCards = tempNumCard; + view.displayMessageL2(tempNumCard); + view.displayMessageL1(stackName); + controller.setStackNum(tempNumCard); //calling setStackNum + + } else { + console.log("enter a number greater than 0, go back to start"); + view.displayMessageL0("Try again. Enter a number greater than 0"); + } + } + checkNumber(); + }, + + handleResetButton : function (){ + //****** delete stack01, + console.log("Before Length: " + model.stack01.length); + model.stack01.length = 0; + console.log("After Length: " + model.stack01.length); + model.numCards = 0; + + console.log ("model numCards = " + model.numCards); + console.log ("model stackName = " + model.stackName); + + view.displayMessageL0(view.defaultGreeting); + view.displayMessageL1(""); + view.displayMessageL2(""); + }, + + //----------- + // 01.makeStack = new Stack(); + // then run setStackNum() + // then display() + // ---------- + + //INSERT CARD NUMBERS INTO ARRAY + setStackNum: function() { + for (var i = 0; i < model.numCards; i++) { + model.stack01.push([i + 1]); + + } + console.log(model.stack01.toString()); + + + // + } + +}; + + +window.onload = init; + + +function deal() { + for (var i = 0; i < cards; i++){ + deck.addCard(deck.deal()); + } + + display(); +} + +function reset() { + + if (deck == null) return; + //New code to rerun init() with # of decks + var e = document.getElementById("deckNum"); + numDecks = e.value + + init(); + //Old code to combine other stacks + // discards.combine(hand); + // deck.combine(discards); + display(); +} + +function display() { + + var el, top, left; + var n; + + // Note: only a fraction of the cards in the deck and discard pile are + // displayed, just enough to get an idea of the number of cards in each. + + //hand + left = 0; + top = 0; + el = document.getElementById("deck"); + while (el.firstChild != null) + el.removeChild(el.firstChild); + for (var i = 0; i < cards; i++) { + node = deck.cards[i].createNode(); + node.style.left = left + "em"; + node.style.top = top + "em"; + el.appendChild(node); + left += 1.00; + top += 0.25; + } + +} diff --git a/stack.js b/stack.js index f5a2d0b..7094a0e 100644 --- a/stack.js +++ b/stack.js @@ -1,3 +1,4 @@ +"use strict"; //============================================================================= // Stack Object //============================================================================= @@ -10,62 +11,46 @@ function Stack() { // Create an empty array of cards. - this.cards = new Array(); + this.cards = new Array(); - this.makeDeck = stackMakeDeck; - this.shuffle = stackShuffle; + this.makeStack = stackMakeStack; //from deck.js init(), to below this.deal = stackDeal; this.draw = stackDraw; this.addCard = stackAddCard; - this.combine = stackCombine; - this.cardCount = stackCardCount; + } //----------------------------------------------------------------------------- -// stackMakeDeck(n): Initializes a stack using 'n' packs of cards. +// stackMakeStack(n): Initializes a stack using 'n' packs of cards. //----------------------------------------------------------------------------- -function stackMakeDeck(n) { //n from deck.js unit deck.makeDeck - - var ranks = new Array("A", "2", "3", "4", "5", "6", "7", "8", "9", "10", "J", "Q", "K"); - var suits = new Array("C", "D", "H", "S"); - - m = ranks.length * suits.length; - - // Set array of cards. - - this.cards = new Array(n * m); +function stackMakeStack() { //n from deck.js unit deck.makeStack - // Fill the array with 'n' packs of cards. + // var ranks = new Array("A", "2", "3", "4", "5", "6", "7", "8", "9", "10", "J", "Q", "K"); - for (var i = 0; i < n; i++) //# of decks - for (var j = 0; j < suits.length; j++) //# of suits - for (var k = 0; k < ranks.length; k++) //# of ranks - this.cards[i * m + j * ranks.length + k] = new Card(ranks[k], suits[j]); - - numCards = this.cards.length; // deck.js variable. Called in info.js + var ranks = model.deck01; + var suits = new Array("C", "D", "H", "S"); -} + var m = ranks * suits.length; + console.log("Total # of cards: " + m); -//----------------------------------------------------------------------------- -// stackShuffle(n): Shuffles a stack of cards 'n' times. -//----------------------------------------------------------------------------- + // Set array of cards. -function stackShuffle(n) { + this.cards = new Array(n * m); - var temp; + // Fill the array with 'n' packs of cards. + var n = 1 + for (var i = 0; i < n; i++) //# of decks + for (var j = 0; j < suits.length; j++) //# of suits + for (var k = 0; k < n ; k++) //# of ranks + this.cards[m + j * ranks.length + k] = new Card(ranks[k], suits[j]); - // Shuffle the stack 'n' times. + console.log(this.cards.length); + // numCards = this.cards.length; // deck.js variable. Called in info.js - for (var i = 0; i < n; i++) - for (var j = 0; j < this.cards.length; j++) { - var k = Math.floor(Math.random() * this.cards.length); - temp = this.cards[j]; - this.cards[j] = this.cards[k]; - this.cards[k] = temp; - } } + //----------------------------------------------------------------------------- // stackDeal(): Removes the first card in the stack and returns it. //----------------------------------------------------------------------------- @@ -104,25 +89,3 @@ function stackAddCard(card) { this.cards.push(card); } - -//----------------------------------------------------------------------------- -// stackCombine(stack): Adds the cards in the given stack to the current one. -// The given stack is emptied. -//----------------------------------------------------------------------------- - -function stackCombine(stack) { - - this.cards = this.cards.concat(stack.cards); - stack.cards = new Array(); -} - -//----------------------------------------------------------------------------- -// stackCardCount(): Returns the number of cards currently in the stack. -//----------------------------------------------------------------------------- -// used in deck.js display() "hand" and "discards" -function stackCardCount() { - - numInDeck = this.cards.length; //deck.js global variable, info.js - numInHand = this.cards.length; - return this.cards.length; -} \ No newline at end of file