Skip to content

Commit 9e2dbdd

Browse files
pratham1002pratham1002
authored
Merge pull request #21 from DhairyaShah01/Dhairya-Shah-Step3
Step 3
2 parents a504bd1 + 425c516 commit 9e2dbdd

11 files changed

+183
-10
lines changed

‎client/bluff.css

Lines changed: 21 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -76,3 +76,24 @@
7676
h1 {
7777
text-align: center;
7878
}
79+
80+
.modal {
81+
display: none; /* Hidden by default */
82+
position: fixed; /* Stay in place */
83+
z-index: 1; /* Sit on top */
84+
overflow: auto; /* Enable scroll if needed */
85+
background-color: #ffffff;
86+
top: 0;
87+
left: 100px;
88+
}
89+
90+
/* Modal Content/Box */
91+
.modal-content {
92+
margin: 15% auto; /* 15% from the top and centered */
93+
padding: 20px;
94+
width: 80%; /* Could be more or less, depending on screen size */
95+
}
96+
97+
h2 {
98+
text-align: center;
99+
}

‎client/index.ejs

Lines changed: 32 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -10,8 +10,13 @@
1010
<script src="js/renderDeck.js"></script>
1111
<script src="js/bluff.js"></script>
1212
<script src="js/cardClick/moveCards.js"></script>
13+
<script src="js/activatePlayer.js"></script>
14+
<script src="js/deactivatePlayer.js"></script>
15+
<script src="js/bluffData.js"></script>
1316
<script src="js/cardClick/cardStack.js"></script>
1417
<script src="js/cardClick/handleCardClick.js"></script>
18+
<script src="js/submitCard.js"></script>
19+
<script src="js/check.js"></script>
1520
<head>
1621
<meta charset="UTF-8">
1722
<meta name="viewport" content="width=device-width, initial-scale=1.0">
@@ -20,8 +25,33 @@
2025
</head>
2126
<body>
2227
<div id = "root">
23-
<div id = "CentralStack"> <h1>CentralDeck</h1> </div>
28+
<div id = "CentralStack">
29+
<h1>CentralDeck</h1>
30+
<h2>Current Rank: </h2>
31+
<h2>Current Player: </h2>
32+
</div>
33+
<div id="cardModal" class="modal">
34+
<div class="modal-content">
35+
<h2>'Which rank card have you added?(You may BLUFF)'</h2>
36+
<select name="selectCard" id="selectCard">
37+
<option value="2">2</option>
38+
<option value="3">3</option>
39+
<option value="4">4</option>
40+
<option value="5">5</option>
41+
<option value="6">6</option>
42+
<option value="7">7</option>
43+
<option value="8">8</option>
44+
<option value="9">9</option>
45+
<option value="10">10</option>
46+
<option value="J">Jack</option>
47+
<option value="Q">Queen</option>
48+
<option value="K">King</option>
49+
<option value="A">Ace</option>
50+
</select>
51+
<button id="submit">Submit</button>
52+
</div>
53+
</div>
2454
</div>
2555
</body>
2656
</div>
27-
</html>
57+
</html>

‎client/js/Game.js

Lines changed: 10 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -3,10 +3,18 @@
33
// Will take care of the game attributes like creating players, distributing cards and so on.
44

55
class Game {
6-
constructor () {
6+
constructor (start) {
77
this.players = []
8+
this._turn = start // Adding a turn to track whose turn it is
9+
this.record = [] // Adding a record to store whether the last player bluffed or not
10+
this.currentRank = '' // Data of which rank is currently being played
11+
}
12+
get turn() {
13+
return this._turn
14+
}
15+
set turn(x) {
16+
this._turn = x
817
}
9-
1018
// Creating players based on the user input
1119
createPlayers (playerCount, deck) {
1220
for (let i = 0; i < playerCount; i++) {

‎client/js/activatePlayer.js

Lines changed: 13 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,13 @@
1+
// Activating the next player
2+
function activatePlayer(game){
3+
const playerList = document.getElementById('root').children
4+
const currentPlayer = playerList[game.turn + 1]
5+
const activate = currentPlayer.querySelectorAll('.Card')
6+
const buttonactive = currentPlayer.querySelectorAll('.buttons')[0]
7+
activate.forEach((Card) => {
8+
Card.style['pointer-events'] = 'auto' // Activating all Cards for current player
9+
})
10+
buttonactive.disabled = false // Activating the button for current player
11+
const currentPlayerName = currentPlayer.getElementsByTagName('h1')[0].textContent
12+
document.getElementsByTagName('h2')[1].innerHTML = 'Current Player: ' + currentPlayerName
13+
}

‎client/js/bluff.js

Lines changed: 15 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -18,10 +18,22 @@ window.addEventListener('DOMContentLoaded', () => {
1818
newDeck.formDeck()
1919
}
2020
const finalDeck = newDeck.shuffleDeck() // Creating a final deck to be used after shuffling
21-
const game = new Game() // Create a new Game instance
21+
let start = Math.floor(Math.random() * playerCount) + 1
22+
const game = new Game(start) // Create a new Game instance
2223
game.createPlayers(playerCount, finalDeck) // Creating n players based on user input
2324
players = game.distributeCards(playerCount, finalDeck) // Distribute the cards to n players created before
2425
for (let i = 0; i < playerCount; i++) {
25-
renderDeck(players[i].playerName, players[i].playerCards) // Rendering the cards of players on the screen
26+
renderDeck(players[i].playerName, players[i].playerCards, game, playerCount) // Rendering the cards of players on the screen
2627
}
27-
})
28+
let playerDiv = document.querySelectorAll('.PlayerDiv') // Storing all elements with class PlayerDiv
29+
playerDiv.forEach((player) => { // Looping through each element to deactivate them
30+
let deactivate = player.querySelectorAll('.Card')
31+
deactivate.forEach((Card) => {
32+
Card.setAttribute('style', 'pointer-events:none') // Deactivating click on each Card
33+
})
34+
})
35+
activatePlayer(game) // Activating one player to start the game
36+
// Alerting which player will start the game
37+
let message = game.players[game.turn - 1].playerName + ' will start.'
38+
window.alert(message)
39+
})

‎client/js/bluffData.js

Lines changed: 14 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,14 @@
1+
/* eslint-disable no-undef */
2+
/* eslint-disable no-unused-vars */
3+
// Storing data if the player bluffed or not
4+
function bluffData(game, centralStack, initialNoOfCards, finalNoOfCards) {
5+
if(game.currentRank === '') { // Checking if it is the first chance or not
6+
document.getElementById('cardModal').style.display = "block" // Displaying the modal
7+
document.getElementById('submit').onclick = function() { // Adding an onClick to the submit button of the modal
8+
game.currentRank = submitCard(game, centralStack, initialNoOfCards, finalNoOfCards) // Storing the current rank to game.currentRank
9+
}
10+
}
11+
else {
12+
check(game, game.currentRank, centralStack, initialNoOfCards, finalNoOfCards) // If not the first turn, check if the player bluffed or not
13+
}
14+
}

‎client/js/cardClick/moveCards.js

Lines changed: 11 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1,5 +1,6 @@
1-
function moveCards () {
1+
function moveCards (game, playerCount) {
22
return function () {
3+
let initialNoOfCards = centralStack.length // Calculating no. of cards initially in the central stack
34
arrayId.forEach ((ID) => {
45
const cardElement = document.getElementById(ID)
56
cardElement.parentNode.removeChild(cardElement)
@@ -16,6 +17,15 @@ function moveCards () {
1617
})
1718
arrayId = []
1819
console.log(centralStack) // To see the current state of central stack
20+
const finalNoOfCards = centralStack.length // Calculating no. of cards in the Central Stack after adding new card(s)
21+
if (game.turn === parseInt(playerCount)) { // Checking if it was last player's turn or not
22+
deactivatePlayer(game) // Deactivating the current player
23+
bluffData(game, centralStack, initialNoOfCards, finalNoOfCards)
24+
}
25+
else {
26+
deactivatePlayer(game) // Deactivating the current player
27+
bluffData(game, centralStack, initialNoOfCards, finalNoOfCards)
28+
}
1929
}
2030
}
2131

‎client/js/check.js

Lines changed: 35 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,35 @@
1+
// Function to check whether the player bluffed or not
2+
function check(game, currentRank, centralStack, initialNoOfCards, finalNoOfCards) {
3+
let j = 0 // Initialise a flag
4+
for (let i = initialNoOfCards; i < finalNoOfCards; i++) { // Looping through cards added in this chance
5+
if (centralStack[i].value !== 'Joker') { // Checking if value is not a joker
6+
if(centralStack[i].value === currentRank) { // Comparing the value of newly added cards added to the data entered
7+
j += 1 // Adding 1 to the flag if true card is added
8+
}
9+
}
10+
else {
11+
j += 1 // Also, adding 1 to the flag if the card added is a joker
12+
}
13+
}
14+
const noOfCardsMoved = finalNoOfCards - initialNoOfCards // Calculating the number of cards added in this chance
15+
const msg = game.players[game.turn - 1].playerName + ' added ' + noOfCardsMoved + ' card(s) to the stack.'
16+
window.alert(msg)
17+
// If value of flag is equal to the number of cards added in this turn
18+
// Set record to not bluffed
19+
if (j === noOfCardsMoved) {
20+
game.record = 'Not Bluffed'
21+
}
22+
// Set record to Bluffed
23+
else {
24+
game.record = 'Bluffed'
25+
}
26+
if(game.turn === game.players.length) {
27+
game.turn = 1
28+
activatePlayer(game) // Activating the next player
29+
}
30+
else {
31+
game.turn += 1
32+
activatePlayer(game) // Activating the next player
33+
}
34+
console.log(game.record) // To see whether last player bluffed or not
35+
}

‎client/js/deactivatePlayer.js

Lines changed: 11 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,11 @@
1+
// Deactivating the previously active player
2+
function deactivatePlayer(game) {
3+
const playerList = document.getElementById('root').children
4+
const currentPlayer = playerList[game.turn + 1]
5+
const activate = currentPlayer.querySelectorAll('.Card')
6+
const buttonactive = currentPlayer.querySelectorAll('.buttons')[0]
7+
activate.forEach((Card) => {
8+
Card.style['pointer-events'] = 'none' // Activating all Cards for current player
9+
})
10+
buttonactive.disabled = true // Activating the button for current player
11+
}

‎client/js/renderDeck.js

Lines changed: 3 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -4,7 +4,7 @@
44
* newCard is a child element of #root
55
* all divs are assigned their class names for styling reference
66
*/
7-
function renderDeck (name, deck) {
7+
function renderDeck (name, deck, game, playerCount) {
88
const playerCards = document.createElement('div') // Separate parent div to store cards of individual players
99
playerCards.className = 'PlayerDiv'
1010
const playerName = document.createElement('h1') // Seperate element to display the name of the player
@@ -34,7 +34,8 @@ function renderDeck (name, deck) {
3434
const moveButton = document.createElement("button")
3535
moveButton.innerHTML = "Finished selecting"
3636
moveButton.className = "buttons"
37-
moveButton.addEventListener("click", moveCards (), false)
37+
moveButton.disabled = true // Deactivating all buttons
38+
moveButton.addEventListener("click", moveCards (game, playerCount), false)
3839
playerCards.appendChild(moveButton)
3940
document.getElementById('root').appendChild(playerCards)
4041
}

‎client/js/submitCard.js

Lines changed: 18 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,18 @@
1+
// Function which executes when the submit button is clicked
2+
function submitCard(game, centralStack, initialNoOfCards, finalNoOfCards) {
3+
const modal = document.getElementById('cardModal')
4+
modal.style.display = 'none' // Removing the modal from the screen
5+
const selectedCard = document.getElementById('selectCard') // Storing all the options in select menu
6+
let optSelected = null
7+
// Looping thropugh the options to check if the option was selected or not
8+
for ( let i = 0; i < selectedCard.options.length; i++) {
9+
optSelected = selectedCard.options[i]
10+
if ( optSelected.selected === true) {
11+
break // If option was selected
12+
}
13+
}
14+
const h2 = document.getElementsByTagName('h2')[0]
15+
h2.innerHTML = 'Current Rank: ' + optSelected.value // Updating the h2 inside centralStack
16+
check(game, optSelected.value, centralStack, initialNoOfCards, finalNoOfCards) // Calling check for the first time
17+
return optSelected.value // Return the value of selected option
18+
}

0 commit comments

Comments
 (0)