Kenneth PTBC 2

depreciated functions.js

@@ -0,0 +1,44 @@
+const dealCardBtn = () => {
+  // button is placed in overall container only FYI
+  const btnEl = document.createElement('button');
+  btnEl.innerText = 'Deal Cards';
+  btnEl.classList.add('btn-deal-cards', 'btn');
+  overallContainer.appendChild(btnEl);
+  btnEl.addEventListener('click', () => {
+    for (let i = 0; i < 5; i += 1) {
+      const card = deck.pop();
+      card.holdStatus = false;
+      userHand.push(card);
+
+      console.log(`${userHand[i].name} of ${userHand[i].suit} dealt`);
+      const cardEl = makeCard(userHand[i]);
+
+      // adds the index of the card to saved card array on 1st click
+      let clickedTimes = 0;
+      cardEl.addEventListener('click', () => {
+        cardEl.classList.toggle('clicked');
+        console.log(`cardname: ${card.name}`);
+
+        if (clickedTimes % 2 === 0) {
+          // console.log('clickedTimes = 0');
+          savedCardsArray.splice(i, 0, i);
+          console.log(`array of card: ${i}`);
+          // removes index of card from array on 2nd click
+        } else if (clickedTimes % 2 === 1) {
+          if (i >= savedCardsArray.length) {
+            savedCardsArray.splice(-1, 1);
+            console.log('last');
+          } else {
+            savedCardsArray.splice(i, 1);
+          }
+          console.log(`splicing: ${i}`);
+          // console.log('clickedTimes = 1');
+        }
+        clickedTimes += 1;
+        console.log(savedCardsArray);
+      });
+
+      gameContainer.appendChild(cardEl);
+    }
+  });
+};

eventListeners.js

@@ -0,0 +1,173 @@
+/**
+ * function to bet one credit
+ */
+betOneBtn.addEventListener('click', () => {
+  gameContainer.innerText = '';
+  gameContainer.appendChild(image0);
+  gameContainer.appendChild(image1);
+  gameContainer.appendChild(image2);
+  gameContainer.appendChild(image3);
+  gameContainer.appendChild(image4);
+
+  if (gameMode === 'bet' || gameMode === 'deal') {
+    if (betAmount < 5) {
+      credits -= 1;
+      betAmount += 1;
+      updateCredits();
+      outputContainer.innerText = 'Come on, you can bet more! 💸';
+      gameMode = 'deal';
+      betFiveBtn.disabled = true;
+    }
+    if (betAmount === 5) {
+      gameMode = 'deal';
+      outputContainer.innerText = "That's the way to play! Good luck! 😁";
+      betOneBtn.disabled = true;
+      betFiveBtn.disabled = true;
+    }
+  }
+
+  // highlight the pointsBoard that corresponds to the betAmount
+  let highLight0 = document.querySelector('.board0');
+  let highLight1 = document.querySelector('.board1');
+  let highLight2 = document.querySelector('.board2');
+  let highLight3 = document.querySelector('.board3');
+  let highLight4 = document.querySelector('.board4');
+
+  switch (betAmount) {
+    case 1:
+      highLight0.classList.add('highLightBoard');
+      break;
+    case 2:
+      highLight0.classList.remove('highLightBoard');
+      highLight1.classList.add('highLightBoard');
+      break;
+    case 3:
+      highLight1.classList.remove('highLightBoard');
+      highLight2.classList.add('highLightBoard');
+      break;
+    case 4:
+      highLight2.classList.remove('highLightBoard');
+      highLight3.classList.add('highLightBoard');
+      break;
+    case 5:
+      highLight3.classList.remove('highLightBoard');
+      highLight4.classList.add('highLightBoard');
+      break;
+  }
+
+  dealCardsBtn.disabled = false;
+});
+
+/**
+ * function to bet five credits
+ */
+betFiveBtn.addEventListener('click', () => {
+  gameContainer.innerText = '';
+  gameContainer.appendChild(image0);
+  gameContainer.appendChild(image1);
+  gameContainer.appendChild(image2);
+  gameContainer.appendChild(image3);
+  gameContainer.appendChild(image4);
+  if (gameMode === 'bet') {
+    credits -= 5;
+    betAmount = 5;
+    updateCredits();
+    gameMode = 'deal';
+    outputContainer.innerText = 'All the best to ya boss! 😎';
+  }
+
+  let highlight4 = document.querySelector('.board4');
+  highlight4.classList.add('highLightBoard');
+
+  dealCardsBtn.disabled = false;
+  betFiveBtn.disabled = true;
+  betOneBtn.disabled = true;
+});
+
+/**
+ * function to create a button to deal shuffled cards
+ * also displays cards in gameContainer
+ */
+dealCardsBtn.addEventListener('click', () => {
+  if (gameMode === 'deal') {
+    // empties user hand array
+    userHand = [];
+
+    gameContainer.innerText = '';
+    for (let i = 0; i < 5; i += 1) {
+      const card = deck.pop();
+      card.holdStatus = false;
+      userHand.push(card);
+
+      console.log(`${userHand[i].name} of ${userHand[i].suit} dealt`);
+      const cardEl = makeCard(userHand[i]);
+
+      // adds the index of the card to saved card array on 1st click
+      let clickedTimes = 0;
+      cardEl.addEventListener('click', () => {
+        cardEl.classList.toggle('clicked');
+        console.log(`cardname: ${card.name}`);
+
+        if (clickedTimes % 2 === 0) {
+          // console.log('clickedTimes = 0');
+          card.holdStatus = true;
+          // removes index of card from array on 2nd click
+        } else if (clickedTimes % 2 === 1) {
+          card.holdStatus = false;
+          // console.log('clickedTimes = 1');
+        }
+        clickedTimes += 1;
+      });
+      gameContainer.appendChild(cardEl);
+      outputContainer.innerText =
+        'Looks good! Click on the cards you want to hold. ✋';
+    }
+    // calcHandScore(userHand);
+    gameMode = 'swap';
+    betOneBtn.disabled = true;
+    betFiveBtn.disabled = true;
+    swapCardsBtn.disabled = false;
+    dealCardsBtn.disabled = true;
+  }
+});
+
+/**
+ * function to swap cards that are not under holdStatus true
+ */
+swapCardsBtn.addEventListener('click', () => {
+  if (gameMode === 'swap') {
+    // saves cards on 'hold' status to an array
+    savedCardsArray = userHand.filter((x) => x.holdStatus === true);
+    console.log(savedCardsArray);
+    const amtOfCardsToFillHand = 5 - savedCardsArray.length;
+    console.log(`amt of cards needed = ${amtOfCardsToFillHand}`);
+    // add x amt of cards into saved hand array to make it 5
+    for (let i = 0; i < amtOfCardsToFillHand; i += 1) {
+      const newCard = deck.pop();
+      savedCardsArray.push(newCard);
+    }
+    // makeCards this new array and deal
+    gameContainer.innerText = '';
+    for (let i = 0; i < savedCardsArray.length; i += 1) {
+      const card = savedCardsArray[i];
+      const cardEl = makeCard(card);
+      gameContainer.appendChild(cardEl);
+    }
+    // calculate the score of this card
+    calcHandScore(savedCardsArray);
+    // empties savedCardsArray
+    savedCardsArray = [];
+    // calculates credits & add them to credits
+    calcPointsToAdd();
+    // updates credits in HTML
+    updateCredits();
+    gameMode = 'bet';
+  }
+  betOneBtn.disabled = false;
+  betFiveBtn.disabled = false;
+  swapCardsBtn.disabled = true;
+  dealCardsBtn.disabled = true;
+
+  gameContainer.style.fontSize = '1.5rem';
+  // gameContainer.innerHTML = 'Start betting to play again!';
+});

index.html

@@ -0,0 +1,17 @@
+<!DOCTYPE html>
+<html lang="en">
+  <head>
+    <link rel="stylesheet" href="styles.css" />
+    <meta charset="UTF-8" />
+    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
+    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+    <title>Video Poker!</title>
+  </head>
+  <body>
+    <script src="init.js"></script>
+    <script src="eventListeners.js"></script>
+    <script src="makeDeck.js"></script>
+    <script src="script.js"></script>
+    <!-- <script src="testHands.js"></script> -->
+  </body>
+</html>

init.js

@@ -0,0 +1,139 @@
+let overallContainer; // contains all assets
+let gameContainer;
+let cardComboContainer;
+let statusContainer;
+let outputContainer;
+let inputContainer;
+let buttonsContainer;
+let betOneBtn;
+let betFiveBtn;
+let swapCardsBtn;
+let dealCardsBtn;
+
+let output;
+let input;
+
+// add images
+const image0 = document.createElement('img');
+const image1 = document.createElement('img');
+const image2 = document.createElement('img');
+const image3 = document.createElement('img');
+const image4 = document.createElement('img');
+image0.src = 'cardbacking.png';
+image1.src = 'cardbacking.png';
+image2.src = 'cardbacking.png';
+image3.src = 'cardbacking.png';
+image4.src = 'cardbacking.png';
+
+const initGame = () => {
+  // create overall container
+  overallContainer = document.createElement('div');
+  overallContainer.classList.add('overall-container');
+  document.body.appendChild(overallContainer);
+
+  // create card combination container
+  cardComboContainer = document.createElement('div');
+  // cardComboContainer.innerText = 'VIDEO POKER';
+  cardComboContainer.classList.add('card-combo-container', 'section');
+  overallContainer.appendChild(cardComboContainer);
+
+  // create card display container
+  gameContainer = document.createElement('div');
+  gameContainer.innerHTML = '♥♦ Video Poker ♠♣';
+  gameContainer.classList.add('game-container', 'section');
+  overallContainer.appendChild(gameContainer);
+
+  // create output container
+  outputContainer = document.createElement('div');
+  outputContainer.innerText = '💰PLACE YOUR BETS!💰';
+  outputContainer.classList.add('output-container', 'section');
+  overallContainer.appendChild(outputContainer);
+
+  // create status container
+  // tracks credits, bet amount
+  statusContainer = document.createElement('div');
+  statusContainer.classList.add('status-container', 'section');
+  statusContainer.innerText = 'Total Credits: 100';
+  overallContainer.appendChild(statusContainer);
+
+  // buttonsContainer
+  buttonsContainer = document.createElement('div');
+  buttonsContainer.classList.add('buttons-container');
+  overallContainer.appendChild(buttonsContainer);
+
+  // create bet one button
+  betOneBtn = document.createElement('button');
+  betOneBtn.classList.add('btn', 'betOneBtn');
+  betOneBtn.innerText = 'Bet One';
+  buttonsContainer.appendChild(betOneBtn);
+
+  // create bet five button
+  betFiveBtn = document.createElement('button');
+  betFiveBtn.classList.add('btn', 'betFiveBtn');
+  betFiveBtn.innerText = 'Bet Five';
+  buttonsContainer.appendChild(betFiveBtn);
+
+  // create deal cards button
+  dealCardsBtn = document.createElement('button');
+  dealCardsBtn.innerText = 'DEAL';
+  dealCardsBtn.classList.add('btn-deal-cards', 'btn', 'play');
+  buttonsContainer.appendChild(dealCardsBtn);
+  dealCardsBtn.disabled = true;
+
+  // create swap cards button
+  swapCardsBtn = document.createElement('button');
+  swapCardsBtn.innerText = 'SWAP';
+  swapCardsBtn.classList.add('btn-swap-cards', 'btn', 'play');
+  buttonsContainer.appendChild(swapCardsBtn);
+  swapCardsBtn.disabled = true;
+
+  /**
+   * Variables & functions that make the betting slider function
+   */
+  const rangeInput = document.querySelector('.input-bet');
+  const rangeOutput = document.querySelector('.output');
+
+  // add scoreBoard & card names DOING
+  const scoreBoardName = document.createElement('div');
+  scoreBoardName.classList.add('score-board', 'hand');
+  // scoreBoardName.innerText = 'Video Poker';
+  scoreBoardName.innerHTML =
+    'Royal Flush<br>Straight Flush<br>Four of a Kind<br>Full House<br>Flush<br>Straight<br>Three of a Kind<br>Two Pair';
+  cardComboContainer.appendChild(scoreBoardName);
+  const scoreBoard = document.createElement('div');
+  scoreBoard.classList.add('score-board');
+
+  ////////////////INPUT SLIDER (DEPRECIATED)
+  // // create input container, bet input and submit
+  // inputContainer = document.createElement('div');
+  // inputContainer.classList.add('input-container');
+  // buttonsContainer.appendChild(inputContainer);
+
+  /** removed input slider */
+  // bet input slider
+  // input = document.createElement('input');
+  // input.type = 'range';
+  // input.name = 'quantity';
+  // input.classList.add('input-bet');
+  // input.min = 0;
+  // input.max = 100;
+  // inputContainer.appendChild(input);
+  // // output for slider
+  // output = document.createElement('output');
+  // output.classList.add('output');
+  // output.setAttribute('for', 'quantity');
+  // inputContainer.appendChild(output);
+
+  /** logic for input slider */
+  // const outputDefaultState = () => {
+  //   rangeOutput.value = rangeInput.value;
+  // };
+  // rangeInput.addEventListener('input', function () {
+  //   rangeOutput.value = this.value;
+  // });
+  // document.addEventListener('DOMContentLoaded', function () {
+  //   outputDefaultState();
+  // });
+};
+
+initGame();