diff --git a/cardsPng/10_of_clubs.png b/cardsPng/10_of_clubs.png new file mode 100644 index 00000000..18af741d Binary files /dev/null and b/cardsPng/10_of_clubs.png differ diff --git a/cardsPng/10_of_diamonds.png b/cardsPng/10_of_diamonds.png new file mode 100644 index 00000000..3bbc4e06 Binary files /dev/null and b/cardsPng/10_of_diamonds.png differ diff --git a/cardsPng/10_of_hearts.png b/cardsPng/10_of_hearts.png new file mode 100644 index 00000000..3eb83d72 Binary files /dev/null and b/cardsPng/10_of_hearts.png differ diff --git a/cardsPng/10_of_spades.png b/cardsPng/10_of_spades.png new file mode 100644 index 00000000..0b3d2947 Binary files /dev/null and b/cardsPng/10_of_spades.png differ diff --git a/cardsPng/2_of_clubs.png b/cardsPng/2_of_clubs.png new file mode 100644 index 00000000..291ed975 Binary files /dev/null and b/cardsPng/2_of_clubs.png differ diff --git a/cardsPng/2_of_diamonds.png b/cardsPng/2_of_diamonds.png new file mode 100644 index 00000000..4deee7cc Binary files /dev/null and b/cardsPng/2_of_diamonds.png differ diff --git a/cardsPng/2_of_hearts.png b/cardsPng/2_of_hearts.png new file mode 100644 index 00000000..75a014f3 Binary files /dev/null and b/cardsPng/2_of_hearts.png differ diff --git a/cardsPng/2_of_spades.png b/cardsPng/2_of_spades.png new file mode 100644 index 00000000..1ce0ffe8 Binary files /dev/null and b/cardsPng/2_of_spades.png differ diff --git a/cardsPng/3_of_clubs.png b/cardsPng/3_of_clubs.png new file mode 100644 index 00000000..076ab318 Binary files /dev/null and b/cardsPng/3_of_clubs.png differ diff --git a/cardsPng/3_of_diamonds.png b/cardsPng/3_of_diamonds.png new file mode 100644 index 00000000..8ee0b4b9 Binary files /dev/null and b/cardsPng/3_of_diamonds.png differ diff --git a/cardsPng/3_of_hearts.png b/cardsPng/3_of_hearts.png new file mode 100644 index 00000000..8e74673f Binary files /dev/null and b/cardsPng/3_of_hearts.png differ diff --git a/cardsPng/3_of_spades.png b/cardsPng/3_of_spades.png new file mode 100644 index 00000000..f9e06b4f Binary files /dev/null and b/cardsPng/3_of_spades.png differ diff --git a/cardsPng/4_of_clubs.png b/cardsPng/4_of_clubs.png new file mode 100644 index 00000000..8be9e089 Binary files /dev/null and b/cardsPng/4_of_clubs.png differ diff --git a/cardsPng/4_of_diamonds.png b/cardsPng/4_of_diamonds.png new file mode 100644 index 00000000..70e82e83 Binary files /dev/null and b/cardsPng/4_of_diamonds.png differ diff --git a/cardsPng/4_of_hearts.png b/cardsPng/4_of_hearts.png new file mode 100644 index 00000000..ceecbfe0 Binary files /dev/null and b/cardsPng/4_of_hearts.png differ diff --git a/cardsPng/4_of_spades.png b/cardsPng/4_of_spades.png new file mode 100644 index 00000000..95abe3e7 Binary files /dev/null and b/cardsPng/4_of_spades.png differ diff --git a/cardsPng/5_of_clubs.png b/cardsPng/5_of_clubs.png new file mode 100644 index 00000000..bde97776 Binary files /dev/null and b/cardsPng/5_of_clubs.png differ diff --git a/cardsPng/5_of_diamonds.png b/cardsPng/5_of_diamonds.png new file mode 100644 index 00000000..bb925255 Binary files /dev/null and b/cardsPng/5_of_diamonds.png differ diff --git a/cardsPng/5_of_hearts.png b/cardsPng/5_of_hearts.png new file mode 100644 index 00000000..d923456f Binary files /dev/null and b/cardsPng/5_of_hearts.png differ diff --git a/cardsPng/5_of_spades.png b/cardsPng/5_of_spades.png new file mode 100644 index 00000000..53a1aad2 Binary files /dev/null and b/cardsPng/5_of_spades.png differ diff --git a/cardsPng/6_of_clubs.png b/cardsPng/6_of_clubs.png new file mode 100644 index 00000000..a9660a03 Binary files /dev/null and b/cardsPng/6_of_clubs.png differ diff --git a/cardsPng/6_of_diamonds.png b/cardsPng/6_of_diamonds.png new file mode 100644 index 00000000..78a80ad0 Binary files /dev/null and b/cardsPng/6_of_diamonds.png differ diff --git a/cardsPng/6_of_hearts.png b/cardsPng/6_of_hearts.png new file mode 100644 index 00000000..361643ef Binary files /dev/null and b/cardsPng/6_of_hearts.png differ diff --git a/cardsPng/6_of_spades.png b/cardsPng/6_of_spades.png new file mode 100644 index 00000000..40242a71 Binary files /dev/null and b/cardsPng/6_of_spades.png differ diff --git a/cardsPng/7_of_clubs.png b/cardsPng/7_of_clubs.png new file mode 100644 index 00000000..9d6b5455 Binary files /dev/null and b/cardsPng/7_of_clubs.png differ diff --git a/cardsPng/7_of_diamonds.png b/cardsPng/7_of_diamonds.png new file mode 100644 index 00000000..6ad5f15b Binary files /dev/null and b/cardsPng/7_of_diamonds.png differ diff --git a/cardsPng/7_of_hearts.png b/cardsPng/7_of_hearts.png new file mode 100644 index 00000000..19b89a2e Binary files /dev/null and b/cardsPng/7_of_hearts.png differ diff --git a/cardsPng/7_of_spades.png b/cardsPng/7_of_spades.png new file mode 100644 index 00000000..b9f1b93d Binary files /dev/null and b/cardsPng/7_of_spades.png differ diff --git a/cardsPng/8_of_clubs.png b/cardsPng/8_of_clubs.png new file mode 100644 index 00000000..cec743cb Binary files /dev/null and b/cardsPng/8_of_clubs.png differ diff --git a/cardsPng/8_of_diamonds.png b/cardsPng/8_of_diamonds.png new file mode 100644 index 00000000..ed129512 Binary files /dev/null and b/cardsPng/8_of_diamonds.png differ diff --git a/cardsPng/8_of_hearts.png b/cardsPng/8_of_hearts.png new file mode 100644 index 00000000..fb39723c Binary files /dev/null and b/cardsPng/8_of_hearts.png differ diff --git a/cardsPng/8_of_spades.png b/cardsPng/8_of_spades.png new file mode 100644 index 00000000..b6b3b381 Binary files /dev/null and b/cardsPng/8_of_spades.png differ diff --git a/cardsPng/9_of_clubs.png b/cardsPng/9_of_clubs.png new file mode 100644 index 00000000..2174db58 Binary files /dev/null and b/cardsPng/9_of_clubs.png differ diff --git a/cardsPng/9_of_diamonds.png b/cardsPng/9_of_diamonds.png new file mode 100644 index 00000000..0b933fb0 Binary files /dev/null and b/cardsPng/9_of_diamonds.png differ diff --git a/cardsPng/9_of_hearts.png b/cardsPng/9_of_hearts.png new file mode 100644 index 00000000..7b196d6d Binary files /dev/null and b/cardsPng/9_of_hearts.png differ diff --git a/cardsPng/9_of_spades.png b/cardsPng/9_of_spades.png new file mode 100644 index 00000000..3c3b5ffb Binary files /dev/null and b/cardsPng/9_of_spades.png differ diff --git a/cardsPng/ace_of_clubs.png b/cardsPng/ace_of_clubs.png new file mode 100644 index 00000000..42bf5ec9 Binary files /dev/null and b/cardsPng/ace_of_clubs.png differ diff --git a/cardsPng/ace_of_diamonds.png b/cardsPng/ace_of_diamonds.png new file mode 100644 index 00000000..79cd3b8a Binary files /dev/null and b/cardsPng/ace_of_diamonds.png differ diff --git a/cardsPng/ace_of_hearts.png b/cardsPng/ace_of_hearts.png new file mode 100644 index 00000000..b4221240 Binary files /dev/null and b/cardsPng/ace_of_hearts.png differ diff --git a/cardsPng/ace_of_spades.png b/cardsPng/ace_of_spades.png new file mode 100644 index 00000000..103f56d1 Binary files /dev/null and b/cardsPng/ace_of_spades.png differ diff --git a/cardsPng/back.png b/cardsPng/back.png new file mode 100644 index 00000000..84575a2a Binary files /dev/null and b/cardsPng/back.png differ diff --git a/cardsPng/jack_of_clubs.png b/cardsPng/jack_of_clubs.png new file mode 100644 index 00000000..5e003be2 Binary files /dev/null and b/cardsPng/jack_of_clubs.png differ diff --git a/cardsPng/jack_of_diamonds.png b/cardsPng/jack_of_diamonds.png new file mode 100644 index 00000000..131a9773 Binary files /dev/null and b/cardsPng/jack_of_diamonds.png differ diff --git a/cardsPng/jack_of_hearts.png b/cardsPng/jack_of_hearts.png new file mode 100644 index 00000000..bf342bcb Binary files /dev/null and b/cardsPng/jack_of_hearts.png differ diff --git a/cardsPng/jack_of_spades.png b/cardsPng/jack_of_spades.png new file mode 100644 index 00000000..f539c19c Binary files /dev/null and b/cardsPng/jack_of_spades.png differ diff --git a/cardsPng/king_of_clubs.png b/cardsPng/king_of_clubs.png new file mode 100644 index 00000000..68e57747 Binary files /dev/null and b/cardsPng/king_of_clubs.png differ diff --git a/cardsPng/king_of_diamonds.png b/cardsPng/king_of_diamonds.png new file mode 100644 index 00000000..e21d6a0a Binary files /dev/null and b/cardsPng/king_of_diamonds.png differ diff --git a/cardsPng/king_of_hearts.png b/cardsPng/king_of_hearts.png new file mode 100644 index 00000000..1d3c468d Binary files /dev/null and b/cardsPng/king_of_hearts.png differ diff --git a/cardsPng/king_of_spades.png b/cardsPng/king_of_spades.png new file mode 100644 index 00000000..2edbbc14 Binary files /dev/null and b/cardsPng/king_of_spades.png differ diff --git a/cardsPng/queen_of_clubs.png b/cardsPng/queen_of_clubs.png new file mode 100644 index 00000000..7be5f9a9 Binary files /dev/null and b/cardsPng/queen_of_clubs.png differ diff --git a/cardsPng/queen_of_diamonds.png b/cardsPng/queen_of_diamonds.png new file mode 100644 index 00000000..928f6501 Binary files /dev/null and b/cardsPng/queen_of_diamonds.png differ diff --git a/cardsPng/queen_of_hearts.png b/cardsPng/queen_of_hearts.png new file mode 100644 index 00000000..21839e68 Binary files /dev/null and b/cardsPng/queen_of_hearts.png differ diff --git a/cardsPng/queen_of_spades.png b/cardsPng/queen_of_spades.png new file mode 100644 index 00000000..7983d034 Binary files /dev/null and b/cardsPng/queen_of_spades.png differ diff --git a/index.html b/index.html new file mode 100644 index 00000000..3554a192 --- /dev/null +++ b/index.html @@ -0,0 +1,29 @@ + + + + SWE101_yx + + + + /> + + + +

VIDEO POKER 🚀

+ +
+
+
+
+
+
+
+
+ + + + + diff --git a/script.js b/script.js new file mode 100644 index 00000000..201c1b28 --- /dev/null +++ b/script.js @@ -0,0 +1,738 @@ + let playerScore = 100; + + const gameLoop = () => { + + let deck = []; + let playerHandArray = []; + const playerHandSize = 5; + let gameMode = 0 + let betAmount = 0; + let playerHandArray2 = []; + let playerHandArrayFinal = []; + let royalFlush = false; + let straightFlush = false; + let fourOfAKind = false; + let fullHouse = false; + let flush = false; + let straight = false; + let threeOfAKind = false; + let twoPair = false; + let onePair = false; + + /** + * A function that builds deck + */ + const makeDeck = () => { + // create the empty deck at the beginning + const newDeck = []; + const suitInfo = [ + { suitsShape: "hearts", suitsSymbol: "♥️", suitsColour: "red" }, + { suitsShape: "diamonds", suitsSymbol: "♦️", suitsColour: "red" }, + { suitsShape: "clubs", suitsSymbol: "♣️", suitsColour: "black" }, + { suitsShape: "spades", suitsSymbol: "♠️", suitsColour: "black" }, + ]; + + for (let suitIndex = 0; suitIndex < suitInfo.length; suitIndex += 1) { + // make a variable of the current suit + let currentSuit = suitInfo[suitIndex].suitsShape; + let currentSymbol = suitInfo[suitIndex].suitsSymbol; + let currentColour = suitInfo[suitIndex].suitsColour; + + // loop to create all cards in this suit + // rank 1-13 + for (let rankCounter = 1; rankCounter <= 13; rankCounter += 1) { + // Convert rankCounter to string + let cardName = `${rankCounter}`; + + // 1, 11, 12 ,13 + if (cardName === '1') { + cardName = 'ace'; + displayName = "A"; + } else if (cardName === '11') { + cardName = 'jack'; + displayName = "J"; + } else if (cardName === '12') { + cardName = 'queen'; + displayName = "Q"; + } else if (cardName === '13') { + cardName = 'king'; + displayName = "K"; + } + + // make a single card object variable + const card = { + name: cardName, + suit: currentSuit, + rank: rankCounter, + pic: `./cardsPng/${cardName}_of_${currentSuit}.png`, + display: displayName, //1,2,J,K + colour: currentColour, //red,black + suitSymbol: currentSymbol, //"♥️" + }; + + // add the card to the deck + newDeck.push(card); + } + } + return newDeck; + }; + + /** + * A function that gets a random number + * @param max {number} max number to be generated + * @return {number} random number from 0 to max + */ + const getRandomIndex = (max) => Math.floor(Math.random() * max); + + /** + * A function that switches the items in an array + * @param cards {number} the max length of the array + * @return {array} {array} returns the array with its items shuffled + */ + const shuffleCards = (cards) => { + // Loop over the card deck array once + for (let currentIndex = 0; currentIndex < cards.length; currentIndex += 1) { + // Select a random index in the deck + const randomIndex = getRandomIndex(cards.length); + // Select the card that corresponds to randomIndex + const randomCard = cards[randomIndex]; + // Select the card that corresponds to currentIndex + const currentCard = cards[currentIndex]; + // Swap positions of randomCard and currentCard in the deck + cards[currentIndex] = randomCard; + cards[randomIndex] = currentCard; + } + // Return the shuffled deck + return cards; + }; + + /** + * A function which creates a standard board that will go on the screen + * @return an empty board which holds 5 slots for cards + */ + const buildPlayerHand = () => { + // create a div which represents the player's hand + let playerHand = document.createElement('div'); + // give it a class for CSS purposes + playerHand.classList.add('playerHand', 'child'); + // making 5 squares within the board + for (let i = 0; i < 5; i += 1) { + // create the square element in each row + const square = document.createElement('div'); + const innersquare = document.createElement('div'); + innersquare.classList.add("inner-square"); + square.appendChild(innersquare); + // set a class for CSS purposes + // The squares are created. + square.classList.add('square'); + square.id = `square${i}` + playerHand.appendChild(square); + } + //appending each square in the row div + return playerHand; + }; + + /** + * A function which creates a score board which helps the player understand how the game works + * @return a div board which contains various elements + */ + const buildScoreBoard = () => { + let scoreBoardBackgroundBorder = document.createElement('div'); + scoreBoardBackgroundBorder.id = "score-board-background-border"; + let scoreBoardContainer = document.createElement('div'); + scoreBoardContainer.id = "score-board-container" + scoreBoardContainer.classList.add("child") + let firstColumn = ['', 'Royal Flush', 'Straight Flush', 'Four of a kind', 'Full House', 'Flush', 'Straight', 'Three of a kind', 'Two pair'] + // let secondColumn = [1, 250, 50, 25, 9, 6, 4, 3, 2, 1] + let secondColumn = ['1', '250', '50', '25', '9','6', '4', '3', '2'] + let thirdColumn = ['2', '500', '100', '50', '18', '12', '8', '6', '4'] + let fourthColumn = ['3', '750', '150', '75', '27', '18', '12', '9', '6'] + let fifthColumn = ['4', '1000', '200', '100', '36', '24', '16', '12', '8'] + let sixthColumn = ['5', '1250', '250', '125', '45', '30', '20', '15', '10'] + // create a div which contains the elements of the scoreboard + let scoreBoard = document.createElement('table'); + // give it a class for CSS purposes + scoreBoard.classList.add('scoreBoard'); + scoreBoard.innerHTML = `` + for (let i = 0; i' + secondColumn[i] + '' + thirdColumn[i] + '' + fourthColumn[i] + '' + fifthColumn[i] + '' + sixthColumn[i] + ''; + } + scoreBoard.innerHTML += '' + scoreBoardContainer.appendChild(scoreBoard); + scoreBoardBackgroundBorder.appendChild(scoreBoardContainer); + return scoreBoardBackgroundBorder; + + }; + + /** + * A function to deal cards into the squares when the deal button is pressed + * @param squares {div} targets the squares of playerHand + * @return a filled playerHand when deal is clicked. + */ + const dealCards = () => { + //store card value within the squares + if (gameMode === 0) { + for (let i = 0; i < 5; i+= 1) { + document.getElementById(`square${i}`).innerHTML = ``; + document.getElementById(`square${i}`).innerHTML = ``; + gameMode = 1; + //instructions for player to switch out cards + msgForPlayer(); + console.log("this is the first time deal button is pressed") + //adding event listeners to the squares + clickUnclick(); + } + } else if (gameMode === 1) { + //so deal button will not work anymore + gameMode = 99; + console.log("this is the second time deal button is pressed") + for (let i = 0; i < 5; i+= 1) { + if (document.getElementById(`square${i}`).classList.contains("clickedContainer")){ + document.getElementById(`square${i}`).innerHTML = ``; + //I'm storing this into a final array so we can easily compare winning condition + let holder = playerHandArray2[i] + playerHandArrayFinal[i] = holder; + } else { + //I'm storing this into a final array so we can easily compare winning condition + let holder = playerHandArray[i] + playerHandArrayFinal[i] = holder; + } + } + console.log(playerHandArrayFinal); + calcHandScore(); + msgForPlayer(); + } + else { + //remove all the elements in gameContainer + const myNode = document.getElementById("gameContainer"); + while (myNode.firstChild) { + myNode.removeChild(myNode.lastChild); + } + gameLoop(); + } + } + /** + * A function which adds an event listener onto the squares to register the cards which user wants to change. Event listener function will change the playerHandArray, so the next time the deal button is pressed, it outputs different cards + * @return a different playerHandArray + */ + const clickUnclick = () => { + for (let i = 0; i < 5; i += 1) { + document.getElementById(`square${i}`).addEventListener("click", ()=>{ + // if the containers already have a class called clickedContainer, it removes the clickedContainer class + if(document.getElementById(`square${i}`).classList.contains("clickedContainer")) { + document.getElementById(`square${i}`).classList.remove("clickedContainer") + } + else { + document.getElementById(`square${i}`).classList.add("clickedContainer") + } + }) + } + } + + const buildButtonBoard = () => { + let buttonContainer = document.createElement('div'); + buttonContainer.id = "button-container" + buttonContainer.classList.add("child") + + const buildDealButton = () => { + // create a deal button + let makeDealButton = document.createElement('button'); + // give it a class for CSS purposes + makeDealButton.classList.add('button'); + // give it an id + makeDealButton.id = "deal-button" + makeDealButton.innerText = "DEAL" + // when button is clicked, it takes from the playerHandArray and stores it in the each squares. + makeDealButton.addEventListener("click", dealCards) + return makeDealButton; + } + + const buildBetOneButton = () => { + // create a betOne button + let makeBetOneButton = document.createElement('button'); + // give it a class for CSS purposes + makeBetOneButton.classList.add('button'); + // give it an id + makeBetOneButton.id = "bet-one-button" + makeBetOneButton.innerText = "BET ONE" + // when button is clicked, it takes from the playerHandArray and stores it in the each squares. + makeBetOneButton.addEventListener("click", betOnePoints) + return makeBetOneButton; + } + + const buildBetMaxButton = () => { + // create a betMax button + let makeBetMaxButton = document.createElement('button'); + // give it a class for CSS purposes + makeBetMaxButton.classList.add('button'); + // give it an id + makeBetMaxButton.id = "bet-max-button" + makeBetMaxButton.innerText = "BET MAX" + // when button is clicked, it takes from the playerHandArray and stores it in the each squares. + makeBetMaxButton.addEventListener("click", betMaxPoints) + return makeBetMaxButton; + } + + const betOnePoints = () => { + if (betAmount < 5 && gameMode === 0) { + betAmount += 1; + playerScore -= 1; + //pardon the hardcode here. Wouldn't need to do it if my classes were numerical, I mean I could change it... + if (betAmount === 1) { + document.getElementById("second-column").classList.add("column-style"); + } + else if (betAmount === 2) { + document.getElementById("second-column").classList.remove("column-style"); + document.getElementById("third-column").classList.add("column-style"); + } + else if (betAmount === 3) { + document.getElementById("third-column").classList.remove("column-style"); + document.getElementById("fourth-column").classList.add("column-style"); + } + else if (betAmount === 4) { + document.getElementById("fourth-column").classList.remove("column-style"); + document.getElementById("fifth-column").classList.add("column-style"); + } + else if (betAmount === 5) { + document.getElementById("fifth-column").classList.remove("column-style"); + document.getElementById("sixth-column").classList.add("column-style"); + } + betMsg(); + outputPlayerCreditMsg() + } else + console.log("Max bet Amount reached") + } + + const betMaxPoints = () => { + if (betAmount < 5 && gameMode === 0) { + //reset playerScore and betAmount + playerScore += betAmount; + betAmount = 0; + betAmount += 5; + playerScore -= 5; + document.getElementById("fifth-column").classList.remove("column-style") + document.getElementById("second-column").classList.remove("column-style") + document.getElementById("third-column").classList.remove("column-style") + document.getElementById("fourth-column").classList.remove("column-style") + document.getElementById("sixth-column").classList.add("column-style") + betMsg(); + outputPlayerCreditMsg() + } else + console.log("Max bet Amount reached") + } + buttonContainer.appendChild(buildDealButton()); + buttonContainer.appendChild(buildBetOneButton()); + buttonContainer.appendChild(buildBetMaxButton()); + return buttonContainer + } + + + /** + * A function which creates messages relating to the betting. Msg should change output whenever betting buttons are clicked. + */ + const betMsg = () => { + let betMsgDiv = document.querySelector('#bet-msg') + betMsgDiv.innerHTML = `Your Current Bet: ${betAmount}` + } + + /** + * A function which creates messages relating to the player's credits. Msg should change output whenever betting buttons are clicked. + */ + const outputPlayerCreditMsg = () => { + let playerCreditMsgDiv = document.querySelector('#player-credit') + playerCreditMsgDiv.innerHTML = `Total Credits: ${playerScore}` + } + + /** + * A function which initialises the game + */ + const initGame = () => { + //makes a deck and stores it in deck variable + deck = makeDeck(); + //shuffles deck + shuffleCards(deck); + document.querySelector('#gameContainer').appendChild(buildScoreBoard()) + // deal the cards out to playerHandArray. playerHandSize is 5 + for (let i = 0; i < playerHandSize; i += 1) { + //playerHandArray is an empty array, pushes 5 cards into the array + playerHandArray.push(deck.pop()); + } + for (let i = 0; i < playerHandSize; i += 1) { + //playerHandArray2 is an empty array, pushes another 5 cards into the array, in preparation for swap + playerHandArray2.push(deck.pop()); + } + //storing playerHand into gameContainer div + document.querySelector('#gameContainer').appendChild(buildPlayerHand()); + // document.body.appendChild(buildPlayerHand()); + document.querySelector('#gameContainer').appendChild(buildButtonBoard()); + //show 0 bet + betMsg(); + //show 100 credits + outputPlayerCreditMsg(); + //First Msg for player, which is "PLACE YOUR BET!" + msgForPlayer(); + }; + + //tester, rmb to delete + // const playerHandArrayFinalTest = [ + // {rank: 1, suit: "hearts"}, + // {rank: 10, suit: "hearts"}, + // {rank: 11, suit: "hearts"}, + // {rank: 12, suit: "hearts"}, + // {rank: 13, suit: "hearts"} + // ] + + console.log(playerHandArrayFinal); + + const calcHandScore = () => { + let cardRankTally = {}; + let counter = 0; + + // I'll sort the array first + playerHandArrayFinal.sort(function (a, b) { + return a.rank - b.rank; + }); + + //Creates an object which tallies the cards + for (let i = 0; i < playerHandArrayFinal.length; i += 1) { + var cardRank = playerHandArrayFinal[i].rank; + // If we have seen the card name before, increment its count + if (cardRank in cardRankTally) { + cardRankTally[cardRank] += 1; + } + // Else, initialise count of this card name to 1 + else { + cardRankTally[cardRank] = 1; + } + } + console.log(cardRankTally); + + let talliedArray = []; + //What object.values does is that it takes the values of the object and stores them into an array. In this case, I name it talliedArray + //I'm doing this because I want to loop through the array. I'm not sure how to do it via the object. + talliedArray = Object.values(cardRankTally); + + + //test twoPair + for (let i = 0; i < talliedArray.length; i += 1) { + if (talliedArray[i] === 2) { + counter += 1; + onePair = true; + console.log("onePair is true") + } + if (counter === 2) { + twoPair = true; + console.log("twoPair is true") + } + } + counter = 0; + + //test threeOfAKind + for (let i = 0; i < talliedArray.length; i += 1) { + if (talliedArray[i] === 3) { + counter += 1; + } + if (counter === 1) { + threeOfAKind = true; + console.log("threeOfAKind is true") + } + } + counter = 0; + + //test fourOfAKind + for (let i = 0; i < talliedArray.length; i += 1) { + if (talliedArray[i] === 4) { + counter += 1; + } + if (counter === 1) { + fourOfAKind = true; + console.log("fourOfAKind is true") + } + } + counter = 0; + + //test straights + for (let i = 0; i < (playerHandArrayFinal.length - 1); i++) { + let storeRank = playerHandArrayFinal[i].rank + let scoreDifference = storeRank - playerHandArrayFinal[i+1].rank + if (scoreDifference === -1) { + counter += 1; + } + //account for A, 10, J, Q, K + if ((counter === 4) || ((playerHandArrayFinal[0].rank === 1) && (playerHandArrayFinal[1].rank === 10) && (counter === 3))) { + straight = true; + console.log("straights is true") + } + } + + counter = 0; + + //test flush + let storeSuit = playerHandArrayFinal[0].suit + for (let i = 0; i < playerHandArrayFinal.length; i++) + if (storeSuit === playerHandArrayFinal[i].suit) { + counter += 1; + } + if (counter === 5) { + flush = true; + console.log("flush is true") + } + + counter = 0; + + //test straightFlush + if (straight === true && flush === true) { + straightFlush = true; + console.log("straight flush is true") + } + + //test fullHouse + if (onePair === true && threeOfAKind === true) { + fullHouse = true; + console.log("fullHouse is true") + } + + //test royalFlush + for (let i = 0; i < (playerHandArrayFinal.length - 1); i++) { + let storeRank = playerHandArrayFinal[i].rank + let scoreDifference = storeRank - playerHandArrayFinal[i+1].rank + if (scoreDifference === -1) { + counter += 1; + } + //account for A, 10, J, Q, K + if ((flush === true) && ((playerHandArrayFinal[0].rank === 1) && (playerHandArrayFinal[1].rank === 10) && (counter === 3))) { + royalFlush = true; + console.log("royalFlush is true") + } + } + console.log("end") + } + + // const countProb = () => { + // // let playerholdArray is created within the countProb function as it needs to be emptied when the function is called. + // let playerHoldArray = []; + // let noDrawnCards = 0; + // let cardRankTally = {}; + // let counter = 0; + // // countProb will probably be integrated in the tablescore + // // countProb will fire when squares are clicked. Because that's when the probabilities will have to change + // // if card has the clickedContainer class, it means I want to remove it. + // // I need to know what's left in my playerHandArray + + // // I have to create a way to combine both the clickedContainer class reader and the playerHandArray + // // I circulate through the squares to find those with without classes, meaning, those which player intends to keep. + // for (let i = 0; i < 5; i += 1) { + // if (document.getElementById(`square${i}`).classList.contains("clickedContainer" === false)) { + // //I register the card in an array (For now) + // playerHoldArray.push(playerHandArray[i]) + // } + // } + // // I need to know how many cards I'm drawing + // noDrawnCards = 5 - playerHoldArray.length + // // I need to calculate probability of each of the winning hands occuring + + // // Not sure if I have to sort the array first, but here it is + // playerHoldArray.sort(function (a, b) { + // return a.rank - b.rank; + // }); + + // //Creates an object which tallies the cards + // for (let i = 0; i < playerHoldArray.length; i += 1) { + // let cardRank = playerHoldArray[i].rank; + // // If we have seen the card name before, increment its count + // if (cardRank in cardRankTally) { + // cardRankTally[cardRank] += 1; + // } + // // Else, initialise count of this card name to 1 + // else { + // cardRankTally[cardRank] = 1; + // } + // } + // console.log(cardRankTally); + + // let talliedArray = []; + // //What object.values does is that it takes the values of the object and stores them into an array. In this case, I name it talliedArray + // talliedArray = Object.values(cardRankTally); + + // //test twoPair + // for (let i = 0; i < talliedArray.length; i += 1) { + // if (talliedArray[i] === 2) { + // counter += 1; + // onePair = true; + // console.log("onePair is true") + // } + // if (counter === 2) { + // twoPair = true; + // console.log("twoPair is true") + // } + // } + // counter = 0; + + // //test threeOfAKind + // for (let i = 0; i < talliedArray.length; i += 1) { + // if (talliedArray[i] === 3) { + // counter += 1; + // } + // if (counter === 1) { + // threeOfAKind = true; + // console.log("threeOfAKind is true") + // } + // } + // counter = 0; + + // //test fourOfAKind + // for (let i = 0; i < talliedArray.length; i += 1) { + // if (talliedArray[i] === 4) { + // counter += 1; + // } + // if (counter === 1) { + // fourOfAKind = true; + // console.log("fourOfAKind is true") + // } + // } + // counter = 0; + + // //test straights + // for (let i = 0; i < (playerHandArrayFinal.length - 1); i++) { + // let storeRank = playerHandArrayFinal[i].rank + // let scoreDifference = storeRank - playerHandArrayFinal[i+1].rank + // if (scoreDifference === -1) { + // counter += 1; + // } + // //account for A, 10, J, Q, K + // if ((counter === 4) || ((playerHandArrayFinal[0].rank === 1) && (playerHandArrayFinal[1].rank === 10) && (counter === 3))) { + // straight = true; + // console.log("straights is true") + // } + // } + + // counter = 0; + + // //test flush + // let storeSuit = playerHandArrayFinal[0].suit + // for (let i = 0; i < playerHandArrayFinal.length; i++) + // if (storeSuit === playerHandArrayFinal[i].suit) { + // counter += 1; + // } + // if (counter === 5) { + // flush = true; + // console.log("flush is true") + // } + + // counter = 0; + + // //test straightFlush + // if (straight === true && flush === true) { + // straightFlush = true; + // console.log("straight flush is true") + // } + + // //test fullHouse + // if (onePair === true && threeOfAKind === true) { + // fullHouse = true; + // console.log("fullHouse is true") + // } + + // //test royalFlush + // for (let i = 0; i < (playerHandArrayFinal.length - 1); i++) { + // let storeRank = playerHandArrayFinal[i].rank + // let scoreDifference = storeRank - playerHandArrayFinal[i+1].rank + // if (scoreDifference === -1) { + // counter += 1; + // } + // //account for A, 10, J, Q, K + // if ((flush === true) && ((playerHandArrayFinal[0].rank === 1) && (playerHandArrayFinal[1].rank === 10) && (counter === 3))) { + // royalFlush = true; + // console.log("royalFlush is true") + // } + // } + // console.log("end") + // } + + + /** + * A function which creates messages for the player to understand what's going on in the game. + */ + const msgForPlayer = () => { + let winAmount = 0; + if (gameMode === 0) { + let msgsForPlayer = document.querySelector('#player-msg') + msgsForPlayer.innerHTML = `PLACE YOUR BET!` + } else if (gameMode === 1) { + let msgsForPlayer = document.querySelector('#player-msg') + msgsForPlayer.innerHTML = `CLICK ON THE CARDS YOU WANT TO SWITCH OUT!` + } else if (gameMode === 99) { + if (royalFlush === true) { + let msgsForPlayer = document.querySelector('#player-msg') + msgsForPlayer.innerHTML = `YOU GOT A ROYAL FLUSH!` + msgsForPlayer.innerHTML += `
CLICK DEAL TO PLAY AGAIN!` + winAmount = betAmount * 250 + playerScore += winAmount + betAmount + outputPlayerCreditMsg(); + } else if (straightFlush === true) { + let msgsForPlayer = document.querySelector('#player-msg') + msgsForPlayer.innerHTML = `YOU GOT A STRAIGHT FLUSH!` + msgsForPlayer.innerHTML += `
CLICK DEAL TO PLAY AGAIN!` + winAmount = betAmount * 50 + playerScore += winAmount + betAmount + outputPlayerCreditMsg(); + } else if (fourOfAKind === true) { + let msgsForPlayer = document.querySelector('#player-msg') + msgsForPlayer.innerHTML = `YOU GOT A FOUR OF A KIND!` + msgsForPlayer.innerHTML += `
CLICK DEAL TO PLAY AGAIN!` + winAmount = betAmount * 25 + playerScore += winAmount + betAmount + outputPlayerCreditMsg(); + } else if (fullHouse === true) { + let msgsForPlayer = document.querySelector('#player-msg') + msgsForPlayer.innerHTML = `YOU GOT A FULL HOUSE!` + msgsForPlayer.innerHTML += `
CLICK DEAL TO PLAY AGAIN!` + winAmount = betAmount * 9 + playerScore += winAmount + betAmount + outputPlayerCreditMsg(); + } else if (flush === true) { + let msgsForPlayer = document.querySelector('#player-msg') + msgsForPlayer.innerHTML = `YOU GOT A FLUSH!` + msgsForPlayer.innerHTML += `
CLICK DEAL TO PLAY AGAIN!` + winAmount = betAmount * 6 + playerScore += winAmount + betAmount + outputPlayerCreditMsg(); + } else if (straight === true) { + let msgsForPlayer = document.querySelector('#player-msg') + msgsForPlayer.innerHTML = `YOU GOT A STRAIGHT!` + msgsForPlayer.innerHTML += `
CLICK DEAL TO PLAY AGAIN!` + winAmount = betAmount * 4 + playerScore += winAmount + betAmount + outputPlayerCreditMsg(); + } else if (threeOfAKind === true) { + let msgsForPlayer = document.querySelector('#player-msg') + msgsForPlayer.innerHTML = `YOU GOT A THREE OF A KIND!` + msgsForPlayer.innerHTML += `
CLICK DEAL TO PLAY AGAIN!` + winAmount = betAmount * 3 + playerScore += winAmount + betAmount + outputPlayerCreditMsg(); + } else if (twoPair === true) { + let msgsForPlayer = document.querySelector('#player-msg') + msgsForPlayer.innerHTML = `YOU GOT A TWO PAIR!` + msgsForPlayer.innerHTML += `
CLICK DEAL TO PLAY AGAIN!` + winAmount = betAmount * 2 + playerScore += winAmount + betAmount + outputPlayerCreditMsg(); + } else { + let msgsForPlayer = document.querySelector('#player-msg') + msgsForPlayer.innerHTML = `BETTER LUCK NEXT TIME!` + msgsForPlayer.innerHTML += `
CLICK DEAL TO PLAY AGAIN!` + } + } + } + + initGame(); + + + + } + + gameLoop(); + + diff --git a/styles.css b/styles.css new file mode 100644 index 00000000..e8504cfb --- /dev/null +++ b/styles.css @@ -0,0 +1,297 @@ +#header { + font-family: "cursive"; + font-size: 80px; + color: #fff; + text-align: center; + -webkit-animation: glow 1s ease-in-out infinite alternate; + -moz-animation: glow 1s ease-in-out infinite alternate; + animation: glow 1s ease-in-out infinite alternate; +} + +@-webkit-keyframes glow { + from { + text-shadow: 0 0 10px #fff, 0 0 20px #fff, 0 0 30px #e60073, + 0 0 40px #e60073, 0 0 50px #e60073, 0 0 60px #e60073, 0 0 70px #e60073; + } + to { + text-shadow: 0 0 20px #fff, 0 0 30px #ff4da6, 0 0 40px #ff4da6, + 0 0 50px #ff4da6, 0 0 60px #ff4da6, 0 0 70px #ff4da6, 0 0 80px #ff4da6; + } +} + +@-webkit-keyframes glow2 { + from { + text-shadow: 0 0 10px #fff, 0 0 20px #fff, 0 0 30px #2300e6, + 0 0 40px #2300e6, 0 0 50px #2300e6, 0 0 60px #2300e6, 0 0 70px #2300e6; + } + to { + text-shadow: 0 0 20px #fff, 0 0 30px #5f4dff, 0 0 40px #5f4dff, + 0 0 50px #5f4dff, 0 0 60px #5f4dff, 0 0 70px #5f4dff, 0 0 80px #5f4dff; + } +} + +body { + background-color: black; +} +/* Also given a parent-1 class */ +#gameContainer { + background-color: black; + height: 860px; +} + +#score-board-background-border { + display: flex; + width: 60%; + height: 385px; + justify-content: center; + margin: auto; + background: linear-gradient( + 45deg, + #ff6600, + #00ffff, + #ff00ff, + #ff0099, + #e6fb04, + #6e0dd0, + #00ff66, + #ff3300, + #099fff + ); + background-size: 400%; + animation: animate 20s linear infinite; +} + +/* Also given a child class */ +#score-board-container { + /* display: flex; */ + padding: 10px 10px; + justify-content: center; + background-color: black; + width: 98%; + margin: auto; +} + +.scoreBoard { + margin: auto; +} + +.table { + text-align: center; +} + +td { + padding: 1px; + width: 200px; +} + +tr { + border: 1px black solid; + background-color: black; + font-family: "Teko", sans-serif; + font-size: 25px; + color: #fff; + text-align: center; + -webkit-animation: glow2 1s ease-in-out infinite alternate; + -moz-animation: glow2 1s ease-in-out infinite alternate; + animation: glow2 1s ease-in-out infinite alternate; +} + +/* Also given a child class */ +.playerHand { + display: flex; + justify-content: center; + align-items: center; + background-color: black; + height: 400px; + width: 80%; + margin: auto; +} + +.card-pic { + padding: 5px 2px; + width: 190px; + height: 290px; +} + +.inner-square { + content: ""; + padding: 4.5px 3.5px; + margin-left: 7px; + margin-top: 6px; + width: 180px; + height: 280px; + background: black; +} + +.column-style { + background: linear-gradient( + 45deg, + #ff6600, + #00ffff, + #ff00ff, + #ff0099, + #e6fb04, + #6e0dd0, + #00ff66, + #ff3300, + #099fff + ); + background-size: 400%; + animation: animate 500s linear infinite; +} + +.square { + margin: 10px; + /* background-color: red; */ + background: linear-gradient( + 45deg, + #e6fb04, + #ff6600, + #00ff66, + #00ffff, + #ff00ff, + #ff0099, + #6e0dd0, + #ff3300, + #099fff + ); + animation: animate 20s linear infinite; + display: inline-block; + height: 300px; + width: 200px; + background-size: 400%; + text-align: center; +} + +@keyframes animate { + 0% { + background-position: 0 0; + } + 50% { + background-position: 400% 0; + } + 100% { + background-position: 0 0; + } +} + +.clickedContainer { + margin: 10px; + background: white; + display: inline-block; + height: 300px; + width: 200px; + text-align: center; +} + +.card-pic { + padding: 5px 2px; + width: 190px; + height: 290px; +} + +#button-container { + display: flex; + justify-content: space-around; + align-items: center; + background-color: black; + height: 100px; + width: 80%; + margin: auto; + font-family: "Teko", sans-serif; +} + +#msgContainer { + background-color: black; + height: 300px; + text-align: center; +} + +/* #deal-button, +#bet-one-button, +#bet-max-button { + font-family: "Teko", sans-serif; + padding: 15px 30px; + color: #2196f3; + letter-spacing: 4px; + text-decoration: none; + font-size: 24px; + overflow: hidden; + transition: 0.2s; +} + +#deal-button:hover, +#bet-one-button:hover, +#bet-max-button:hover { + color: #255784; + background: #2196f3; + box-shadow: 0 0 10px #2196f3, 0 0 40px #2196f3, 0 0 80px #2196f3; + transition-delay: 1s; +} */ + +#deal-button, +#bet-one-button, +#bet-max-button { + font-family: "Teko", sans-serif; + padding: 15px 30px; + background-color: black; + color: #fff; + letter-spacing: 4px; + text-decoration: none; + font-size: 24px; + -webkit-animation: glow 1s ease-in-out infinite alternate; + -moz-animation: glow 1s ease-in-out infinite alternate; + animation: glow 1s ease-in-out infinite alternate; +} + +#deal-button:hover, +#bet-one-button:hover, +#bet-max-button:hover { + background: black; + box-shadow: 0 0 30px #ff4da6; +} + +#player-credit { + font-family: "Teko", sans-serif; + padding: 20px; + margin-top: 20px; + margin-right: 30px; + color: #fff; + font-size: 35px; + -webkit-animation: glow3 1s ease-in-out infinite alternate; + -moz-animation: glow3 1s ease-in-out infinite alternate; + animation: glow3 1s ease-in-out infinite alternate; +} + +#bet-msg { + font-family: "Teko", sans-serif; + padding: 20px; + margin-right: 30px; + color: #fff; + font-size: 35px; + -webkit-animation: glow3 1s ease-in-out infinite alternate; + -moz-animation: glow3 1s ease-in-out infinite alternate; + animation: glow3 1s ease-in-out infinite alternate; +} + +#player-msg { + font-family: "Teko", sans-serif; + padding: 20px; + margin-right: 30px; + color: #fff; + font-size: 35px; + -webkit-animation: glow3 1s ease-in-out infinite alternate; + -moz-animation: glow3 1s ease-in-out infinite alternate; + animation: glow3 1s ease-in-out infinite alternate; +} + +@-webkit-keyframes glow3 { + from { + text-shadow: 0 0 10px #fff, 0 0 20px #fff, 0 0 30px #00e613, + 0 0 40px #00e613, 0 0 50px #00e613, 0 0 60px #00e613, 0 0 70px #00e613; + } + to { + text-shadow: 0 0 20px #fff, 0 0 30px #5cff4d, 0 0 40px #5cff4d, + 0 0 50px #5cff4d, 0 0 60px #5cff4d, 0 0 70px #5cff4d, 0 0 80px #5cff4d; + } +}