diff --git a/client/bluff.css b/client/bluff.css index 988b9dd..b8e0034 100644 --- 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; +} \ No newline at end of file diff --git a/client/index.ejs b/client/index.ejs index bf6cbbd..39d27c6 100644 --- a/client/index.ejs +++ b/client/index.ejs @@ -10,8 +10,13 @@ + + + + + @@ -20,8 +25,33 @@
-

CentralDeck

+
+

CentralDeck

+

Current Rank:

+

Current Player:

+
+
- + \ No newline at end of file diff --git a/client/js/Game.js b/client/js/Game.js index 7edd715..b5da298 100644 --- 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 new file mode 100644 index 0000000..095ac4a --- /dev/null +++ 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 +} \ No newline at end of file diff --git a/client/js/bluff.js b/client/js/bluff.js index c7ed9da..01c0dde 100644 --- 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) +}) \ No newline at end of file diff --git a/client/js/bluffData.js b/client/js/bluffData.js new file mode 100644 index 0000000..bc26d5b --- /dev/null +++ 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 + } +} \ No newline at end of file diff --git a/client/js/cardClick/moveCards.js b/client/js/cardClick/moveCards.js index 545dcf3..ea61b37 100644 --- 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 new file mode 100644 index 0000000..36c6e21 --- /dev/null +++ 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 +} \ No newline at end of file diff --git a/client/js/deactivatePlayer.js b/client/js/deactivatePlayer.js new file mode 100644 index 0000000..93ba84a --- /dev/null +++ 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 +} \ No newline at end of file diff --git a/client/js/renderDeck.js b/client/js/renderDeck.js index 89b33ad..9847e41 100644 --- 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 new file mode 100644 index 0000000..ae7539a --- /dev/null +++ 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 +} \ No newline at end of file