Merge pull request #21 from DhairyaShah01/Dhairya-Shah-Step3

Step 3
bitsacm · Aug 19, 2020 · 9e2dbdd · 9e2dbdd
2 parents a504bd1 + 425c516
commit 9e2dbdd
Show file tree

Hide file tree

Showing 11 changed files with 183 additions and 10 deletions.
diff --git a/client/bluff.css b/client/bluff.css
@@ -76,3 +76,24 @@
 h1 {
   text-align: center;
 }
+
+.modal {
+  display: none; /* Hidden by default */
+  position: fixed; /* Stay in place */
+  z-index: 1; /* Sit on top */
+  overflow: auto; /* Enable scroll if needed */
+  background-color: #ffffff;
+  top: 0;
+  left: 100px;
+}
+
+/* Modal Content/Box */
+.modal-content {
+  margin: 15% auto; /* 15% from the top and centered */
+  padding: 20px;
+  width: 80%; /* Could be more or less, depending on screen size */
+}
+
+h2 {
+  text-align: center;
+}
diff --git a/client/index.ejs b/client/index.ejs
@@ -10,8 +10,13 @@
 <script src="js/renderDeck.js"></script>
 <script src="js/bluff.js"></script>
 <script src="js/cardClick/moveCards.js"></script>
+<script src="js/activatePlayer.js"></script>
+<script src="js/deactivatePlayer.js"></script>
+<script src="js/bluffData.js"></script>
 <script src="js/cardClick/cardStack.js"></script>
 <script src="js/cardClick/handleCardClick.js"></script>
+<script src="js/submitCard.js"></script>
+<script src="js/check.js"></script>
 <head>
     <meta charset="UTF-8">
     <meta name="viewport" content="width=device-width, initial-scale=1.0">
@@ -20,8 +25,33 @@
 </head>
 <body>
     <div id = "root">
-      <div id = "CentralStack"> <h1>CentralDeck</h1> </div>
+      <div id = "CentralStack">
+        <h1>CentralDeck</h1>
+        <h2>Current Rank: </h2>
+        <h2>Current Player: </h2>
+      </div>
+      <div id="cardModal" class="modal">
+        <div class="modal-content">
+          <h2>'Which rank card have you added?(You may BLUFF)'</h2>
+          <select name="selectCard" id="selectCard">
+            <option value="2">2</option>
+            <option value="3">3</option>
+            <option value="4">4</option>
+            <option value="5">5</option>
+            <option value="6">6</option>
+            <option value="7">7</option>
+            <option value="8">8</option>
+            <option value="9">9</option>
+            <option value="10">10</option>
+            <option value="J">Jack</option>
+            <option value="Q">Queen</option>
+            <option value="K">King</option>
+            <option value="A">Ace</option>
+          </select>
+          <button id="submit">Submit</button>
+        </div>
+      </div>
     </div>  
 </body>
 </div>
-</html>
+</html>
diff --git a/client/js/Game.js b/client/js/Game.js
@@ -3,10 +3,18 @@
 // Will take care of the game attributes like creating players, distributing cards and so on.
 
 class Game {
-  constructor () {
+  constructor (start) {
     this.players = []
+    this._turn = start // Adding a turn to track whose turn it is
+    this.record = [] // Adding a record to store whether the last player bluffed or not
+    this.currentRank = '' // Data of which rank is currently being played  
+  }
+  get turn() {
+    return this._turn
+  }
+  set turn(x) {
+    this._turn = x
   }
-
   // Creating players based on the user input
   createPlayers (playerCount, deck) {
     for (let i = 0; i < playerCount; i++) {

diff --git a/client/js/activatePlayer.js b/client/js/activatePlayer.js
@@ -0,0 +1,13 @@
+// Activating the next player
+function activatePlayer(game){
+    const playerList = document.getElementById('root').children
+    const currentPlayer = playerList[game.turn + 1]
+    const activate = currentPlayer.querySelectorAll('.Card')
+    const buttonactive = currentPlayer.querySelectorAll('.buttons')[0]
+    activate.forEach((Card) => {
+        Card.style['pointer-events'] = 'auto' // Activating all Cards for current player
+        })
+    buttonactive.disabled = false // Activating the button for current player
+    const currentPlayerName = currentPlayer.getElementsByTagName('h1')[0].textContent
+    document.getElementsByTagName('h2')[1].innerHTML = 'Current Player: ' + currentPlayerName
+}
diff --git a/client/js/bluff.js b/client/js/bluff.js
@@ -18,10 +18,22 @@ window.addEventListener('DOMContentLoaded', () => {
     newDeck.formDeck()
   }
   const finalDeck = newDeck.shuffleDeck() // Creating a final deck to be used after shuffling
-  const game = new Game() // Create a new Game instance
+  let start = Math.floor(Math.random() * playerCount) + 1
+  const game = new Game(start) // Create a new Game instance
   game.createPlayers(playerCount, finalDeck) // Creating n players based on user input
   players = game.distributeCards(playerCount, finalDeck) // Distribute the cards to n players created before
   for (let i = 0; i < playerCount; i++) {
-    renderDeck(players[i].playerName, players[i].playerCards) // Rendering the cards of players on the screen
+    renderDeck(players[i].playerName, players[i].playerCards, game, playerCount) // Rendering the cards of players on the screen
   }
-})
+  let playerDiv = document.querySelectorAll('.PlayerDiv') // Storing all elements with class PlayerDiv 
+  playerDiv.forEach((player) => { // Looping through each element to deactivate them
+    let deactivate = player.querySelectorAll('.Card')
+    deactivate.forEach((Card) => {
+      Card.setAttribute('style', 'pointer-events:none') // Deactivating click on each Card
+    })
+  })
+  activatePlayer(game) // Activating one player to start the game
+  // Alerting which player will start the game
+  let message = game.players[game.turn - 1].playerName + ' will start.'
+  window.alert(message) 
+})
diff --git a/client/js/bluffData.js b/client/js/bluffData.js
@@ -0,0 +1,14 @@
+/* eslint-disable no-undef */
+/* eslint-disable no-unused-vars */
+// Storing data if the player bluffed or not 
+function bluffData(game, centralStack, initialNoOfCards, finalNoOfCards) {
+    if(game.currentRank === '') { // Checking if it is the first chance or not 
+        document.getElementById('cardModal').style.display = "block" // Displaying the modal
+        document.getElementById('submit').onclick = function() { // Adding an onClick to the submit button of the modal
+            game.currentRank = submitCard(game, centralStack, initialNoOfCards, finalNoOfCards) // Storing the current rank to game.currentRank
+        }
+    }
+    else {
+        check(game, game.currentRank, centralStack, initialNoOfCards, finalNoOfCards) // If not the first turn, check if the player bluffed or not
+    }
+}
diff --git a/client/js/cardClick/moveCards.js b/client/js/cardClick/moveCards.js
@@ -1,5 +1,6 @@
-function moveCards () {
+function moveCards (game, playerCount) {
   return function () {
+    let initialNoOfCards = centralStack.length // Calculating no. of cards initially in the central stack 
     arrayId.forEach ((ID) => {
       const cardElement = document.getElementById(ID)
       cardElement.parentNode.removeChild(cardElement)
@@ -16,6 +17,15 @@ function moveCards () {
     })
     arrayId = []
     console.log(centralStack)      // To see the current state of central stack
+    const finalNoOfCards = centralStack.length // Calculating no. of cards in the Central Stack after adding new card(s) 
+    if (game.turn ===  parseInt(playerCount)) { // Checking if it was last player's turn or not
+      deactivatePlayer(game) // Deactivating the current player
+      bluffData(game, centralStack, initialNoOfCards, finalNoOfCards)
+    } 
+    else {
+      deactivatePlayer(game) // Deactivating the current player
+      bluffData(game, centralStack, initialNoOfCards, finalNoOfCards)
+    }
   }
 }
 
diff --git a/client/js/check.js b/client/js/check.js
@@ -0,0 +1,35 @@
+// Function to check whether the player bluffed or not
+function check(game, currentRank, centralStack, initialNoOfCards, finalNoOfCards) {
+    let j = 0 // Initialise a flag
+    for (let i = initialNoOfCards; i < finalNoOfCards; i++) { // Looping through cards added in this chance
+        if (centralStack[i].value !== 'Joker') { // Checking if value is not a joker
+            if(centralStack[i].value === currentRank) { // Comparing the value of newly added cards added to the data entered 
+                j += 1 // Adding 1 to the flag if true card is added
+            }
+        }
+        else {
+            j += 1 // Also, adding 1 to the flag if the card added is a joker
+        }
+    }
+    const noOfCardsMoved = finalNoOfCards - initialNoOfCards // Calculating the number of cards added in this chance
+    const msg = game.players[game.turn - 1].playerName + ' added ' + noOfCardsMoved + ' card(s) to the stack.'
+    window.alert(msg)
+    // If value of flag is equal to the number of cards added in this turn
+    // Set record to not bluffed 
+    if (j === noOfCardsMoved) { 
+        game.record = 'Not Bluffed'
+    }
+    // Set record to Bluffed
+    else {
+        game.record = 'Bluffed'
+    }
+    if(game.turn === game.players.length) {
+        game.turn = 1
+        activatePlayer(game) // Activating the next player
+    }
+    else {
+        game.turn += 1
+        activatePlayer(game) // Activating the next player
+    }
+    console.log(game.record) // To see whether last player bluffed or not
+}
diff --git a/client/js/deactivatePlayer.js b/client/js/deactivatePlayer.js
@@ -0,0 +1,11 @@
+// Deactivating the previously active player
+function deactivatePlayer(game) {
+    const playerList = document.getElementById('root').children
+    const currentPlayer = playerList[game.turn + 1]
+    const activate = currentPlayer.querySelectorAll('.Card')
+    const buttonactive = currentPlayer.querySelectorAll('.buttons')[0]
+    activate.forEach((Card) => {
+        Card.style['pointer-events'] = 'none' // Activating all Cards for current player
+        })
+    buttonactive.disabled = true // Activating the button for current player
+}
diff --git a/client/js/renderDeck.js b/client/js/renderDeck.js
@@ -4,7 +4,7 @@
      * newCard is a child element of #root
      * all divs are assigned their class names for styling reference
      */
-function renderDeck (name, deck) {
+function renderDeck (name, deck, game, playerCount) {
   const playerCards = document.createElement('div') // Separate parent div to store cards of individual players
   playerCards.className = 'PlayerDiv'
   const playerName = document.createElement('h1') // Seperate element to display the name of the player
@@ -34,7 +34,8 @@ function renderDeck (name, deck) {
   const moveButton = document.createElement("button")
   moveButton.innerHTML = "Finished selecting"
   moveButton.className = "buttons"
-  moveButton.addEventListener("click", moveCards (), false) 
+  moveButton.disabled = true // Deactivating all buttons
+  moveButton.addEventListener("click", moveCards (game, playerCount), false)
   playerCards.appendChild(moveButton)
   document.getElementById('root').appendChild(playerCards)
 }
diff --git a/client/js/submitCard.js b/client/js/submitCard.js
@@ -0,0 +1,18 @@
+// Function which executes when the submit button is clicked 
+function submitCard(game, centralStack, initialNoOfCards, finalNoOfCards) {
+    const modal = document.getElementById('cardModal')
+    modal.style.display = 'none' // Removing the modal from the screen
+    const selectedCard = document.getElementById('selectCard') // Storing all the options in select menu
+    let optSelected = null
+    // Looping thropugh the options to check if the option was selected or not
+    for ( let i = 0; i < selectedCard.options.length; i++) {
+        optSelected = selectedCard.options[i]
+        if ( optSelected.selected === true) {
+            break // If option was selected
+        }
+    }
+    const h2 = document.getElementsByTagName('h2')[0]
+    h2.innerHTML = 'Current Rank: ' + optSelected.value // Updating the h2 inside centralStack
+    check(game, optSelected.value, centralStack, initialNoOfCards, finalNoOfCards) // Calling check for the first time
+    return optSelected.value // Return the value of selected option
+}