1
0
mirror of https://github.com/mizanxali/uno-online synced 2024-11-05 02:35:26 +00:00

Replaced Redux completely with React hooks

This commit is contained in:
Mizanali Panjwani 2021-02-17 06:54:48 +05:30
parent ac6dee77bc
commit ff7cbe703e
7 changed files with 614 additions and 795 deletions

View File

@ -8,11 +8,8 @@
"@testing-library/user-event": "^12.7.0",
"react": "^17.0.1",
"react-dom": "^17.0.1",
"react-redux": "^7.2.2",
"react-router-dom": "^5.2.0",
"react-scripts": "4.0.2",
"redux": "^4.0.5",
"web-vitals": "^1.1.0"
"react-scripts": "4.0.2"
},
"scripts": {
"start": "react-scripts start",

View File

@ -1,64 +1,601 @@
import React from 'react'
import { connect } from 'react-redux'
import { CARD_DRAWN, CARD_PLAYED } from '../store/actions'
import React, { useEffect, useState } from 'react'
import PACK_OF_CARDS from '../utils/packOfCards'
import shuffleArray from '../utils/shuffleArray'
import './Game.css'
const Game = (props) => {
const player1active = props.turn === 'Player 1'
// return (
// props.gameOver ? <div><h1>GAME FORFEITED</h1>{props.winner !== '' && <><h1>GAME OVER</h1><h2>{props.winner} wins!</h2></>}<a href='/'>Home</a></div> :
// <div className='Game'>
// <h1>Turn: {props.turn}</h1>
// <div className='player1Deck' style={player1active ? null : {pointerEvents: 'none'}}>
// {props.player1Deck.map((item) => (
// <span
// onClick={() => props.onCardPlayed(item)}
// className='card'>
// {item}
// </span>
// ))}
// </div>
// <hr />
// <div>
// <h1>Current Card: {props.playedCardsPile[props.playedCardsPile.length-1]}</h1>
// <button onClick={props.onCardDrawn}>DRAW CARD</button>
// </div>
// <hr />
// <div className='player2Deck' style={player1active ? {pointerEvents: 'none'} : null}>
// {props.player2Deck.map((item) => (
// <span
// onClick={() => props.onCardPlayed(item)}
// className='card'>
// {item}
// </span>
// ))}
// </div>
// <a href='/'>Home</a>
// </div>
// )
return null
}
//NUMBER CODES FOR ACTION CARDS
//SKIP - 404
//DRAW 2 - 252
//WILD - 300
//DRAW 4 WILD - 600
const mapStateToProps = (state) => {
return {
gameOver: state.gameOver,
winner: state.winner,
turn: state.turn,
player1Deck: state.player1Deck,
player2Deck: state.player2Deck,
currentColor: state.currentColor,
currentNumber: state.currentNumber,
playedCardsPile: state.playedCardsPile,
drawCardPile: state.drawCardPile
const Game = () => {
//initialize game state
const [gameOver, setGameOver] = useState(true)
const [winner, setWinner] = useState('')
const [turn, setTurn] = useState('')
const [player1Deck, setPlayer1Deck] = useState([])
const [player2Deck, setPlayer2Deck] = useState([])
const [currentColor, setCurrentColor] = useState('')
const [currentNumber, setCurrentNumber] = useState('')
const [playedCardsPile, setPlayedCardsPile] = useState([])
const [drawCardPile, setDrawCardPile] = useState([])
const checkGameOver = (arr) => {
return arr.length === 1
}
}
const mapDispatchToProps = (dispatch) => {
return {
onCardPlayed: (card) => dispatch({type: CARD_PLAYED, payload: {cardPlayed: card}}),
onCardDrawn: () => dispatch({type: CARD_DRAWN})
const checkWinner = (arr, player) => {
return arr.length === 1 ? player : ''
}
//runs once on component mount
useEffect(() => {
//shuffle PACK_OF_CARDS array
const shuffledCards = shuffleArray(PACK_OF_CARDS)
//extract first 7 elements to player1Deck
const player1Deck = shuffledCards.splice(0, 7)
//extract first 7 elements to player2Deck
const player2Deck = shuffledCards.splice(0, 7)
//extract random card from shuffledCards and check if its not an action card
let startingCardIndex
while(true) {
startingCardIndex = Math.floor(Math.random() * 94)
if(shuffledCards[startingCardIndex]==='skipR' || shuffledCards[startingCardIndex]==='#R' || shuffledCards[startingCardIndex]==='D2R' ||
shuffledCards[startingCardIndex]==='skipG' || shuffledCards[startingCardIndex]==='#G' || shuffledCards[startingCardIndex]==='D2G' ||
shuffledCards[startingCardIndex]==='skipB' || shuffledCards[startingCardIndex]==='#B' || shuffledCards[startingCardIndex]==='D2B' ||
shuffledCards[startingCardIndex]==='skipY' || shuffledCards[startingCardIndex]==='#Y' || shuffledCards[startingCardIndex]==='D2Y' ||
shuffledCards[startingCardIndex]==='W' || shuffledCards[startingCardIndex]==='D4W') {
continue;
}
else
break;
}
//extract the card from that startingCardIndex into the playedCardsPile
const playedCardsPile = shuffledCards.splice(startingCardIndex, 1)
//store all remaining cards into drawCardPile
const drawCardPile = shuffledCards
//set initial state
setGameOver(false)
setTurn('Player 1')
setPlayer1Deck([...player1Deck])
setPlayer2Deck([...player2Deck])
setCurrentColor(playedCardsPile[0].charAt(1))
setCurrentNumber(playedCardsPile[0].charAt(0))
setPlayedCardsPile([...playedCardsPile])
setDrawCardPile([...drawCardPile])
}, [])
const onCardPlayedHandler = (played_card) => {
//extract player who played the card
const cardPlayedBy = turn
switch(played_card) {
//if card played was a number card
case '0R': case '1R': case '2R': case '3R': case '4R': case '5R': case '6R': case '7R': case '8R': case '9R': case '#R': case '0G': case '1G': case '2G': case '3G': case '4G': case '5G': case '6G': case '7G': case '8G': case '9G': case '#G': case '0B': case '1B': case '2B': case '3B': case '4B': case '5B': case '6B': case '7B': case '8B': case '9B': case '#B': case '0Y': case '1Y': case '2Y': case '3Y': case '4Y': case '5Y': case '6Y': case '7Y': case '8Y': case '9Y': case '#Y': {
//extract number and color of played card
const numberOfPlayedCard = played_card.charAt(0)
const colorOfPlayedCard = played_card.charAt(1)
//check for color match
if(currentColor === colorOfPlayedCard) {
console.log('colors matched!')
//check who played the card and return new state accordingly
if(cardPlayedBy === 'Player 1') {
//remove the played card from player1's deck and add it to playedCardsPile (immutably)
//then update turn, currentColor and currentNumber
const removeIndex = player1Deck.indexOf(played_card)
//set new state
setGameOver(checkGameOver(player1Deck))
setWinner(checkWinner(player1Deck, 'Player 1'))
setTurn('Player 2')
setPlayedCardsPile([...playedCardsPile.slice(0, playedCardsPile.length), played_card, ...playedCardsPile.slice(playedCardsPile.length)])
setPlayer1Deck([...player1Deck.slice(0, removeIndex), ...player1Deck.slice(removeIndex + 1)])
setCurrentColor(colorOfPlayedCard)
setCurrentNumber(numberOfPlayedCard)
}
else {
//remove the played card from player2's deck and add it to playedCardsPile (immutably)
//then update turn, currentColor and currentNumber
const removeIndex = player2Deck.indexOf(played_card)
//set new state
setGameOver(checkGameOver(player2Deck))
setWinner(checkWinner(player1Deck, 'Player 2'))
setTurn('Player 1')
setPlayedCardsPile([...playedCardsPile.slice(0, playedCardsPile.length), played_card, ...playedCardsPile.slice(playedCardsPile.length)])
setPlayer2Deck([...player2Deck.slice(0, removeIndex), ...player2Deck.slice(removeIndex + 1)])
setCurrentColor(colorOfPlayedCard)
setCurrentNumber(numberOfPlayedCard)
}
}
//check for number match
else if(currentNumber === numberOfPlayedCard) {
console.log('numbers matched!')
//check who played the card and return new state accordingly
if(cardPlayedBy === 'Player 1') {
//remove the played card from player1's deck and add it to playedCardsPile (immutably)
//then update turn, currentColor and currentNumber
const removeIndex = player1Deck.indexOf(played_card)
//set new state
setGameOver(checkGameOver(player1Deck))
setWinner(checkWinner(player1Deck, 'Player 1'))
setTurn('Player 2')
setPlayedCardsPile([...playedCardsPile.slice(0, playedCardsPile.length), played_card, ...playedCardsPile.slice(playedCardsPile.length)])
setPlayer1Deck([...player1Deck.slice(0, removeIndex), ...player1Deck.slice(removeIndex + 1)])
setCurrentColor(colorOfPlayedCard)
setCurrentNumber(numberOfPlayedCard)
}
else {
//remove the played card from player2's deck and add it to playedCardsPile (immutably)
//then update turn, currentColor and currentNumber
const removeIndex = player2Deck.indexOf(played_card)
//set new state
setGameOver(checkGameOver(player2Deck))
setWinner(checkWinner(player1Deck, 'Player 2'))
setTurn('Player 1')
setPlayedCardsPile([...playedCardsPile.slice(0, playedCardsPile.length), played_card, ...playedCardsPile.slice(playedCardsPile.length)])
setPlayer2Deck([...player2Deck.slice(0, removeIndex), ...player2Deck.slice(removeIndex + 1)])
setCurrentColor(colorOfPlayedCard)
setCurrentNumber(numberOfPlayedCard)
}
}
//if no color or number match, invalid move - do not update state
else {
alert('Invalid Move!')
}
break;
}
//if card played was a skip card
case 'skipR': case 'skipG': case 'skipB': case 'skipY': {
//extract color of played skip card
const colorOfPlayedCard = played_card.charAt(4)
//check for color match
if(currentColor === colorOfPlayedCard) {
console.log('colors matched!')
//check who played the card and return new state accordingly
if(cardPlayedBy === 'Player 1') {
//remove the played card from player1's deck and add it to playedCardsPile (immutably)
//then update currentColor and currentNumber
const removeIndex = player1Deck.indexOf(played_card)
//set new state
setGameOver(checkGameOver(player1Deck))
setWinner(checkWinner(player1Deck, 'Player 1'))
setPlayedCardsPile([...playedCardsPile.slice(0, playedCardsPile.length), played_card, ...playedCardsPile.slice(playedCardsPile.length)])
setPlayer1Deck([...player1Deck.slice(0, removeIndex), ...player1Deck.slice(removeIndex + 1)])
setCurrentColor(colorOfPlayedCard)
setCurrentNumber(404)
}
else {
//remove the played card from player2's deck and add it to playedCardsPile (immutably)
//then update currentColor and currentNumber
const removeIndex = player2Deck.indexOf(played_card)
//set new state
setGameOver(checkGameOver(player2Deck))
setWinner(checkWinner(player1Deck, 'Player 2'))
setPlayedCardsPile([...playedCardsPile.slice(0, playedCardsPile.length), played_card, ...playedCardsPile.slice(playedCardsPile.length)])
setPlayer2Deck([...player2Deck.slice(0, removeIndex), ...player2Deck.slice(removeIndex + 1)])
setCurrentColor(colorOfPlayedCard)
setCurrentNumber(404)
}
}
//check for number match - if skip card played on skip card
else if(currentNumber === 404) {
console.log('Numbers matched!')
//check who played the card and return new state accordingly
if(cardPlayedBy === 'Player 1') {
//remove the played card from player1's deck and add it to playedCardsPile (immutably)
//then update currentColor and currentNumber - turn will remain same
const removeIndex = player1Deck.indexOf(played_card)
//set new state
setGameOver(checkGameOver(player1Deck))
setWinner(checkWinner(player1Deck, 'Player 1'))
setPlayedCardsPile([...playedCardsPile.slice(0, playedCardsPile.length), played_card, ...playedCardsPile.slice(playedCardsPile.length)])
setPlayer1Deck([...player1Deck.slice(0, removeIndex), ...player1Deck.slice(removeIndex + 1)])
setCurrentColor(colorOfPlayedCard)
setCurrentNumber(404)
}
else {
//remove the played card from player2's deck and add it to playedCardsPile (immutably)
//then update currentColor and currentNumber - turn will remain same
const removeIndex = player2Deck.indexOf(played_card)
//set new state
setGameOver(checkGameOver(player2Deck))
setWinner(checkWinner(player1Deck, 'Player 2'))
setPlayedCardsPile([...playedCardsPile.slice(0, playedCardsPile.length), played_card, ...playedCardsPile.slice(playedCardsPile.length)])
setPlayer2Deck([...player2Deck.slice(0, removeIndex), ...player2Deck.slice(removeIndex + 1)])
setCurrentColor(colorOfPlayedCard)
setCurrentNumber(404)
}
}
//if no color or number match, invalid move - do not update state
else {
alert('Invalid Move!')
}
break;
}
//if card played was a draw 2 card
case 'D2R': case 'D2G': case 'D2B': case 'D2Y': {
//extract color of played skip card
const colorOfPlayedCard = played_card.charAt(2)
//check for color match
if(currentColor === colorOfPlayedCard) {
console.log('colors matched!')
//check who played the card and return new state accordingly
if(cardPlayedBy === 'Player 1') {
//remove the played card from player1's deck and add it to playedCardsPile (immutably)
//remove 2 new cards from drawCardPile and add them to player2's deck (immutably)
//then update currentColor and currentNumber - turn will remain same
const removeIndex = player1Deck.indexOf(played_card)
//make a copy of drawCardPile array
const copiedDrawCardPileArray = [...drawCardPile]
//pull out last two elements from it
const drawCard1 = copiedDrawCardPileArray.pop()
const drawCard2 = copiedDrawCardPileArray.pop()
//set new state
setGameOver(checkGameOver(player1Deck))
setWinner(checkWinner(player1Deck, 'Player 1'))
setPlayedCardsPile([...playedCardsPile.slice(0, playedCardsPile.length), played_card, ...playedCardsPile.slice(playedCardsPile.length)])
setPlayer1Deck([...player1Deck.slice(0, removeIndex), ...player1Deck.slice(removeIndex + 1)])
setPlayer2Deck([...player2Deck.slice(0, player2Deck.length), drawCard1, drawCard2, ...player2Deck.slice(player2Deck.length)])
setCurrentColor(colorOfPlayedCard)
setCurrentNumber(252)
setDrawCardPile([...copiedDrawCardPileArray])
}
else {
//remove the played card from player2's deck and add it to playedCardsPile (immutably)
//remove 2 new cards from drawCardPile and add them to player1's deck (immutably)
//then update currentColor and currentNumber - turn will remain same
const removeIndex = player2Deck.indexOf(played_card)
//make a copy of drawCardPile array
const copiedDrawCardPileArray = [...drawCardPile]
//pull out last two elements from it
const drawCard1 = copiedDrawCardPileArray.pop()
const drawCard2 = copiedDrawCardPileArray.pop()
//set new state
setGameOver(checkGameOver(player2Deck))
setWinner(checkWinner(player1Deck, 'Player 2'))
setPlayedCardsPile([...playedCardsPile.slice(0, playedCardsPile.length), played_card, ...playedCardsPile.slice(playedCardsPile.length)])
setPlayer2Deck([...player2Deck.slice(0, removeIndex), ...player2Deck.slice(removeIndex + 1)])
setPlayer1Deck([...player1Deck.slice(0, player1Deck.length), drawCard1, drawCard2, ...player1Deck.slice(player1Deck.length)])
setCurrentColor(colorOfPlayedCard)
setCurrentNumber(252)
setDrawCardPile([...copiedDrawCardPileArray])
}
}
//check for number match - if draw 2 card played on draw 2 card
else if(currentNumber === 252) {
console.log('number matched!')
//check who played the card and return new state accordingly
if(cardPlayedBy === 'Player 1') {
//remove the played card from player1's deck and add it to playedCardsPile (immutably)
//remove 2 new cards from drawCardPile and add them to player2's deck (immutably)
//then update currentColor and currentNumber - turn will remain same
const removeIndex = player1Deck.indexOf(played_card)
//make a copy of drawCardPile array
const copiedDrawCardPileArray = [...drawCardPile]
//pull out last two elements from it
const drawCard1 = copiedDrawCardPileArray.pop()
const drawCard2 = copiedDrawCardPileArray.pop()
//set new state
setGameOver(checkGameOver(player1Deck))
setWinner(checkWinner(player1Deck, 'Player 1'))
setPlayedCardsPile([...playedCardsPile.slice(0, playedCardsPile.length), played_card, ...playedCardsPile.slice(playedCardsPile.length)])
setPlayer1Deck([...player1Deck.slice(0, removeIndex), ...player1Deck.slice(removeIndex + 1)])
setPlayer2Deck([...player2Deck.slice(0, player2Deck.length), drawCard1, drawCard2, ...player2Deck.slice(player2Deck.length)])
setCurrentColor(colorOfPlayedCard)
setCurrentNumber(252)
setDrawCardPile([...copiedDrawCardPileArray])
}
else {
//remove the played card from player2's deck and add it to playedCardsPile (immutably)
//remove 2 new cards from drawCardPile and add them to player1's deck (immutably)
//then update currentColor and currentNumber - turn will remain same
const removeIndex = player2Deck.indexOf(played_card)
//make a copy of drawCardPile array
const copiedDrawCardPileArray = [...drawCardPile]
//pull out last two elements from it
const drawCard1 = copiedDrawCardPileArray.pop()
const drawCard2 = copiedDrawCardPileArray.pop()
//set new state
setGameOver(checkGameOver(player2Deck))
setWinner(checkWinner(player1Deck, 'Player 2'))
setPlayedCardsPile([...playedCardsPile.slice(0, playedCardsPile.length), played_card, ...playedCardsPile.slice(playedCardsPile.length)])
setPlayer2Deck([...player2Deck.slice(0, removeIndex), ...player2Deck.slice(removeIndex + 1)])
setPlayer1Deck([...player1Deck.slice(0, player1Deck.length), drawCard1, drawCard2, ...player1Deck.slice(player1Deck.length)])
setCurrentColor(colorOfPlayedCard)
setCurrentNumber(252)
setDrawCardPile([...copiedDrawCardPileArray])
}
}
//if no color or number match, invalid move - do not update state
else {
alert('Invalid Move!')
}
break;
}
//if card played was a wild card
case 'W': {
//check who played the card and return new state accordingly
if(cardPlayedBy === 'Player 1') {
//ask for new color
const newColor = prompt('Enter first letter of new color in uppercase (R/G/B/Y)')
//remove the played card from player1's deck and add it to playedCardsPile (immutably)
const removeIndex = player1Deck.indexOf(played_card)
//then update turn, currentColor and currentNumber
//set new state
setGameOver(checkGameOver(player1Deck))
setWinner(checkWinner(player1Deck, 'Player 1'))
setTurn('Player 2')
setPlayedCardsPile([...playedCardsPile.slice(0, playedCardsPile.length), played_card, ...playedCardsPile.slice(playedCardsPile.length)])
setPlayer1Deck([...player1Deck.slice(0, removeIndex), ...player1Deck.slice(removeIndex + 1)])
setCurrentColor(newColor)
setCurrentNumber(300)
}
else {
//ask for new color
const newColor = prompt('Enter first letter of new color in uppercase (R/G/B/Y)')
//remove the played card from player2's deck and add it to playedCardsPile (immutably)
const removeIndex = player2Deck.indexOf(played_card)
//then update turn, currentColor and currentNumber
//set new state
setGameOver(checkGameOver(player2Deck))
setWinner(checkWinner(player1Deck, 'Player 1'))
setTurn('Player 1')
setPlayedCardsPile([...playedCardsPile.slice(0, playedCardsPile.length), played_card, ...playedCardsPile.slice(playedCardsPile.length)])
setPlayer2Deck([...player2Deck.slice(0, removeIndex), ...player2Deck.slice(removeIndex + 1)])
setCurrentColor(newColor)
setCurrentNumber(300)
}
break;
}
//if card played was a draw four wild card
case 'D4W': {
//check who played the card and return new state accordingly
if(cardPlayedBy === 'Player 1') {
//ask for new color
const newColor = prompt('Enter first letter of new color in uppercase (R/G/B/Y)')
//remove the played card from player1's deck and add it to playedCardsPile (immutably)
const removeIndex = player1Deck.indexOf(played_card)
//remove 2 new cards from drawCardPile and add them to player2's deck (immutably)
//make a copy of drawCardPile array
const copiedDrawCardPileArray = [...drawCardPile]
//pull out last four elements from it
const drawCard1 = copiedDrawCardPileArray.pop()
const drawCard2 = copiedDrawCardPileArray.pop()
const drawCard3 = copiedDrawCardPileArray.pop()
const drawCard4 = copiedDrawCardPileArray.pop()
//then update currentColor and currentNumber - turn will remain same
//set new state
setGameOver(checkGameOver(player1Deck))
setWinner(checkWinner(player1Deck, 'Player 1'))
setPlayedCardsPile([...playedCardsPile.slice(0, playedCardsPile.length), played_card, ...playedCardsPile.slice(playedCardsPile.length)])
setPlayer1Deck([...player1Deck.slice(0, removeIndex), ...player1Deck.slice(removeIndex + 1)])
setPlayer2Deck([...player2Deck.slice(0, player2Deck.length), drawCard1, drawCard2, drawCard3, drawCard4, ...player2Deck.slice(player2Deck.length)])
setCurrentColor(newColor)
setCurrentNumber(600)
setDrawCardPile([...copiedDrawCardPileArray])
}
else {
//ask for new color
const newColor = prompt('Enter first letter of new color in uppercase (R/G/B/Y)')
//remove the played card from player2's deck and add it to playedCardsPile (immutably)
const removeIndex = player2Deck.indexOf(played_card)
//remove 2 new cards from drawCardPile and add them to player1's deck (immutably)
//make a copy of drawCardPile array
const copiedDrawCardPileArray = [...drawCardPile]
//pull out last four elements from it
const drawCard1 = copiedDrawCardPileArray.pop()
const drawCard2 = copiedDrawCardPileArray.pop()
const drawCard3 = copiedDrawCardPileArray.pop()
const drawCard4 = copiedDrawCardPileArray.pop()
//then update currentColor and currentNumber - turn will remain same
//set new state
setGameOver(checkGameOver(player2Deck))
setWinner(checkWinner(player1Deck, 'Player 1'))
setPlayedCardsPile([...playedCardsPile.slice(0, playedCardsPile.length), played_card, ...playedCardsPile.slice(playedCardsPile.length)])
setPlayer2Deck([...player2Deck.slice(0, removeIndex), ...player2Deck.slice(removeIndex + 1)])
setPlayer1Deck([...player1Deck.slice(0, player1Deck.length), drawCard1, drawCard2, drawCard3, drawCard4, ...player1Deck.slice(player1Deck.length)])
setCurrentColor(newColor)
setCurrentNumber(600)
setDrawCardPile([...copiedDrawCardPileArray])
}
}
break;
}
}
const onCardDrawnHandler = () => {
//extract player who drew the card
const cardDrawnBy = turn
//check who drew the card and return new state accordingly
if(cardDrawnBy === 'Player 1') {
//remove 1 new card from drawCardPile and add it to player1's deck (immutably)
//make a copy of drawCardPile array
const copiedDrawCardPileArray = [...drawCardPile]
//pull out last element from it
const drawCard = copiedDrawCardPileArray.pop()
console.log(drawCard);
//extract number and color of drawn card
const colorOfDrawnCard = drawCard.charAt(drawCard.length - 1)
let numberOfDrawnCard = drawCard.charAt(0)
if(drawCard === 'skipR' || drawCard === 'skipG' || drawCard === 'skipB' || drawCard === 'skipY') {
//set new state
setPlayedCardsPile([...playedCardsPile.slice(0, playedCardsPile.length), drawCard, ...playedCardsPile.slice(playedCardsPile.length)])
setCurrentColor(colorOfDrawnCard)
setCurrentNumber(404)
}
if(drawCard === 'D2R' || drawCard === 'D2G' || drawCard === 'D2B' || drawCard === 'D2Y') {
//remove 2 new cards from drawCardPile and add them to player2's deck (immutably)
//make a copy of drawCardPile array
const copiedDrawCardPileArray = [...drawCardPile]
//pull out last two elements from it
const drawCard1 = copiedDrawCardPileArray.pop()
const drawCard2 = copiedDrawCardPileArray.pop()
//set new state
setPlayedCardsPile([...playedCardsPile.slice(0, playedCardsPile.length), drawCard, ...playedCardsPile.slice(playedCardsPile.length)])
setPlayer2Deck([...player2Deck.slice(0, player2Deck.length), drawCard1, drawCard2, ...player2Deck.slice(player2Deck.length)])
setCurrentColor(colorOfDrawnCard)
setCurrentNumber(252)
setDrawCardPile([...copiedDrawCardPileArray])
}
if(drawCard === 'W') {
//ask for new color
const newColor = prompt('Enter first letter of new color in uppercase (R/G/B/Y)')
//set new state
setTurn('Player 2')
setPlayedCardsPile([...playedCardsPile.slice(0, playedCardsPile.length), drawCard, ...playedCardsPile.slice(playedCardsPile.length)])
setCurrentColor(newColor)
setCurrentNumber(300)
}
if(drawCard === 'D4W') {
//ask for new color
const newColor = prompt('Enter first letter of new color in uppercase (R/G/B/Y)')
//remove 2 new cards from drawCardPile and add them to player1's deck (immutably)
//make a copy of drawCardPile array
const copiedDrawCardPileArray = [...drawCardPile]
//pull out last four elements from it
const drawCard1 = copiedDrawCardPileArray.pop()
const drawCard2 = copiedDrawCardPileArray.pop()
const drawCard3 = copiedDrawCardPileArray.pop()
const drawCard4 = copiedDrawCardPileArray.pop()
//set new state
setPlayedCardsPile([...playedCardsPile.slice(0, playedCardsPile.length), drawCard, ...playedCardsPile.slice(playedCardsPile.length)])
setPlayer1Deck([...player1Deck.slice(0, player1Deck.length), drawCard1, drawCard2, drawCard3, drawCard4, ...player1Deck.slice(player1Deck.length)])
setCurrentColor(newColor)
setCurrentNumber(600)
setDrawCardPile([...copiedDrawCardPileArray])
}
//if not action card - check if drawn card is playable
if(numberOfDrawnCard === currentNumber || colorOfDrawnCard === currentColor) {
//set new state
setTurn('Player 2')
setPlayedCardsPile([...playedCardsPile.slice(0, playedCardsPile.length), drawCard, ...playedCardsPile.slice(playedCardsPile.length)])
setCurrentColor(colorOfDrawnCard)
setCurrentNumber(numberOfDrawnCard)
setDrawCardPile([...copiedDrawCardPileArray])
}
//else add the drawn card to player1's deck
//set new state
setTurn('Player 2')
setPlayer1Deck([...player1Deck.slice(0, player1Deck.length), drawCard, ...player1Deck.slice(player1Deck.length)])
setDrawCardPile([...copiedDrawCardPileArray])
}
else {
//remove 1 new card from drawCardPile and add it to player2's deck (immutably)
//make a copy of drawCardPile array
const copiedDrawCardPileArray = [...drawCardPile]
//pull out last element from it
const drawCard = copiedDrawCardPileArray.pop()
console.log(drawCard);
//extract number and color of drawn card
const colorOfDrawnCard = drawCard.charAt(drawCard.length - 1)
let numberOfDrawnCard = drawCard.charAt(0)
if(drawCard === 'skipR' || drawCard === 'skipG' || drawCard === 'skipB' || drawCard === 'skipY') {
//set new state
setPlayedCardsPile([...playedCardsPile.slice(0, playedCardsPile.length), drawCard, ...playedCardsPile.slice(playedCardsPile.length)])
setCurrentColor(colorOfDrawnCard)
setCurrentNumber(404)
}
if(drawCard === 'D2R' || drawCard === 'D2G' || drawCard === 'D2B' || drawCard === 'D2Y') {
//remove 2 new cards from drawCardPile and add them to player2's deck (immutably)
//make a copy of drawCardPile array
const copiedDrawCardPileArray = [...drawCardPile]
//pull out last two elements from it
const drawCard1 = copiedDrawCardPileArray.pop()
const drawCard2 = copiedDrawCardPileArray.pop()
//set new state
setPlayedCardsPile([...playedCardsPile.slice(0, playedCardsPile.length), drawCard, ...playedCardsPile.slice(playedCardsPile.length)])
setPlayer2Deck([...player2Deck.slice(0, player2Deck.length), drawCard1, drawCard2, ...player2Deck.slice(player2Deck.length)])
setCurrentColor(colorOfDrawnCard)
setCurrentNumber(252)
setDrawCardPile([...copiedDrawCardPileArray])
}
if(drawCard === 'W') {
//ask for new color
const newColor = prompt('Enter first letter of new color in uppercase (R/G/B/Y)')
//set new state
setTurn('Player 1')
setPlayedCardsPile([...playedCardsPile.slice(0, playedCardsPile.length), drawCard, ...playedCardsPile.slice(playedCardsPile.length)])
setCurrentColor(newColor)
setCurrentNumber(300)
}
if(drawCard === 'D4W') {
//ask for new color
const newColor = prompt('Enter first letter of new color in uppercase (R/G/B/Y)')
//remove 2 new cards from drawCardPile and add them to player1's deck (immutably)
//make a copy of drawCardPile array
const copiedDrawCardPileArray = [...drawCardPile]
//pull out last four elements from it
const drawCard1 = copiedDrawCardPileArray.pop()
const drawCard2 = copiedDrawCardPileArray.pop()
const drawCard3 = copiedDrawCardPileArray.pop()
const drawCard4 = copiedDrawCardPileArray.pop()
//set new state
setPlayedCardsPile([...playedCardsPile.slice(0, playedCardsPile.length), drawCard, ...playedCardsPile.slice(playedCardsPile.length)])
setPlayer1Deck([...player1Deck.slice(0, player1Deck.length), drawCard1, drawCard2, drawCard3, drawCard4, ...player1Deck.slice(player1Deck.length)])
setCurrentColor(newColor)
setCurrentNumber(600)
setDrawCardPile([...copiedDrawCardPileArray])
}
//if not action card - check if drawn card is playable
if(numberOfDrawnCard === currentNumber || colorOfDrawnCard === currentColor) {
//set new state
setTurn('Player 1')
setPlayedCardsPile([...playedCardsPile.slice(0, playedCardsPile.length), drawCard, ...playedCardsPile.slice(playedCardsPile.length)])
setCurrentColor(colorOfDrawnCard)
setCurrentNumber(numberOfDrawnCard)
setDrawCardPile([...copiedDrawCardPileArray])
}
//else add the drawn card to player2's deck
//set new state
setTurn('Player 1')
setPlayer2Deck([...player2Deck.slice(0, player2Deck.length), drawCard, ...player2Deck.slice(player2Deck.length)])
setDrawCardPile([...copiedDrawCardPileArray])
}
}
return (
gameOver ? <div><h1>GAME FORFEITED</h1>{winner !== '' && <><h1>GAME OVER</h1><h2>{winner} wins!</h2></>}<a href='/'>Home</a></div> :
<div className='Game'>
<h1>Turn: {turn}</h1>
<div className='player1Deck' style={turn === 'Player 1' ? null : {pointerEvents: 'none'}}>
{player1Deck.map((item) => (
<span
onClick={() => onCardPlayedHandler(item)}
className='card'>
{item}
</span>
))}
</div>
<hr />
<div>
<h1>Current Card: {playedCardsPile[playedCardsPile.length-1]}</h1>
<h2>Current Color: {currentColor}</h2>
<button onClick={onCardDrawnHandler}>DRAW CARD</button>
</div>
<hr />
<div className='player2Deck' style={turn === 'Player 1' ? {pointerEvents: 'none'} : null}>
{player2Deck.map((item) => (
<span
onClick={() => onCardPlayedHandler(item)}
className='card'>
{item}
</span>
))}
</div>
<a href='/'>Home</a>
</div>
)
}
export default connect(mapStateToProps, mapDispatchToProps)(Game)
export default Game

View File

@ -3,19 +3,12 @@ import ReactDOM from 'react-dom'
import './index.css'
import App from './App'
import { BrowserRouter } from 'react-router-dom'
import { Provider } from 'react-redux'
import { createStore } from 'redux'
import reducer from './store/reducer'
const store = createStore(reducer)
ReactDOM.render(
<React.StrictMode>
<Provider store={store}>
<BrowserRouter>
<App />
</BrowserRouter>
</Provider>
<BrowserRouter>
<App />
</BrowserRouter>
</React.StrictMode>,
document.getElementById('root')
)

View File

@ -1,3 +0,0 @@
export const START_GAME = 'START_GAME'
export const CARD_PLAYED = 'CARD_PLAYED'
export const CARD_DRAWN = 'CARD_DRAWN'

View File

@ -1,722 +0,0 @@
import { CARD_DRAWN, CARD_PLAYED, START_GAME } from "./actions";
//pack of 108 cards (# = reverse)
const CARDS = [
'0R', '1R', '1R', '2R', '2R', '3R', '3R', '4R', '4R', '5R', '5R', '6R', '6R', '7R', '7R', '8R', '8R', '9R', '9R', 'skipR', 'skipR', '#R', '#R', 'D2R', 'D2R',
'0G', '1G', '1G', '2G', '2G', '3G', '3G', '4G', '4G', '5G', '5G', '6G', '6G', '7G', '7G', '8G', '8G', '9G', '9G', 'skipG', 'skipG', '#G', '#G', 'D2G', 'D2G',
'0B', '1B', '1B', '2B', '2B', '3B', '3B', '4B', '4B', '5B', '5B', '6B', '6B', '7B', '7B', '8B', '8B', '9B', '9B', 'skipB', 'skipB', '#B', '#B', 'D2B', 'D2B',
'0Y', '1Y', '1Y', '2Y', '2Y', '3Y', '3Y', '4Y', '4Y', '5Y', '5Y', '6Y', '6Y', '7Y', '7Y', '8Y', '8Y', '9Y', '9Y', 'skipY', 'skipY', '#Y', '#Y', 'D2Y', 'D2Y',
'W', 'W', 'W', 'W', 'D4W', 'D4W', 'D4W', 'D4W'
]
//NUMBER CODES FOR ACTION CARDS
//SKIP - 404
//DRAW 2 - 252
//WILD - 300
//DRAW 4 WILD - 600
const initialState = {
gameOver: true,
winner: '',
turn: '',
player1Deck: [],
player2Deck: [],
currentColor: '',
currentNumber: '',
playedCardsPile: [],
drawCardPile: []
}
const checkGameOver = (arr) => {
return arr.length === 1
}
const setWinner = (arr, player) => {
return arr.length === 1 ? player : ''
}
const reducer = (state = initialState, action) => {
switch(action.type) {
case START_GAME: {
//shuffle array function
function shuffleArray(array) {
for (var i = array.length - 1; i > 0; i--) {
var j = Math.floor(Math.random() * (i + 1))
var temp = array[i]
array[i] = array[j]
array[j] = temp;
}
return array
}
//shuffle CARDS array
const shuffledCards = shuffleArray(CARDS)
//extract first 7 elements to player1Deck
const player1Deck = shuffledCards.splice(0, 7)
//extract first 7 elements to player2Deck
const player2Deck = shuffledCards.splice(0, 7)
//extract random card from shuffledCards and check if its not an action card
let startingCardIndex
while(true) {
startingCardIndex = Math.floor(Math.random() * 94)
if(shuffledCards[startingCardIndex]==='skipR' || shuffledCards[startingCardIndex]==='#R' || shuffledCards[startingCardIndex]==='D2R' ||
shuffledCards[startingCardIndex]==='skipG' || shuffledCards[startingCardIndex]==='#G' || shuffledCards[startingCardIndex]==='D2G' ||
shuffledCards[startingCardIndex]==='skipB' || shuffledCards[startingCardIndex]==='#B' || shuffledCards[startingCardIndex]==='D2B' ||
shuffledCards[startingCardIndex]==='skipY' || shuffledCards[startingCardIndex]==='#Y' || shuffledCards[startingCardIndex]==='D2Y' ||
shuffledCards[startingCardIndex]==='W' || shuffledCards[startingCardIndex]==='D4W') {
continue;
}
else
break;
}
//extract the card from that startingCardIndex into the playedCardsPile
const playedCardsPile = shuffledCards.splice(startingCardIndex, 1)
//store all remaining cards into drawCardPile
const drawCardPile = shuffledCards
//return new state
return {
gameOver: false,
turn: 'Player 1',
player1Deck: [...player1Deck],
player2Deck: [...player2Deck],
currentColor: playedCardsPile[0].charAt(1),
currentNumber: playedCardsPile[0].charAt(0),
playedCardsPile: [...playedCardsPile],
drawCardPile: [...drawCardPile],
}
}
case CARD_PLAYED: {
//extract player who played the card
const cardPlayedBy = state.turn
switch(action.payload.cardPlayed) {
//if card played was a number card
case '0R': case '1R': case '2R': case '3R': case '4R': case '5R': case '6R': case '7R': case '8R': case '9R': case '#R': case '0G': case '1G': case '2G': case '3G': case '4G': case '5G': case '6G': case '7G': case '8G': case '9G': case '#G': case '0B': case '1B': case '2B': case '3B': case '4B': case '5B': case '6B': case '7B': case '8B': case '9B': case '#B': case '0Y': case '1Y': case '2Y': case '3Y': case '4Y': case '5Y': case '6Y': case '7Y': case '8Y': case '9Y': case '#Y': {
//extract number and color of played card
const numberOfPlayedCard = action.payload.cardPlayed.charAt(0)
const colorOfPlayedCard = action.payload.cardPlayed.charAt(1)
//check for color match
if(state.currentColor === colorOfPlayedCard) {
console.log('colors matched!')
//check who played the card and return new state accordingly
if(cardPlayedBy === 'Player 1') {
//remove the played card from player1's deck and add it to playedCardsPile (immutably)
//then update turn, currentColor and currentNumber
const removeIndex = state.player1Deck.indexOf(action.payload.cardPlayed)
//return new state
return {
...state,
gameOver: checkGameOver(state.player1Deck),
winner: setWinner(state.player1Deck, 'Player 1'),
turn: 'Player 2',
playedCardsPile: [...state.playedCardsPile.slice(0, state.playedCardsPile.length), action.payload.cardPlayed, ...state.playedCardsPile.slice(state.playedCardsPile.length)],
player1Deck: [...state.player1Deck.slice(0, removeIndex), ...state.player1Deck.slice(removeIndex + 1)],
currentColor: colorOfPlayedCard,
currentNumber: numberOfPlayedCard
}
}
else {
//remove the played card from player2's deck and add it to playedCardsPile (immutably)
//then update turn, currentColor and currentNumber
const removeIndex = state.player2Deck.indexOf(action.payload.cardPlayed)
//return new state
return {
...state,
gameOver: checkGameOver(state.player2Deck),
winner: setWinner(state.player1Deck, 'Player 2'),
turn: 'Player 1',
playedCardsPile: [...state.playedCardsPile.slice(0, state.playedCardsPile.length), action.payload.cardPlayed, ...state.playedCardsPile.slice(state.playedCardsPile.length)],
player2Deck: [...state.player2Deck.slice(0, removeIndex), ...state.player2Deck.slice(removeIndex + 1)],
currentColor: colorOfPlayedCard,
currentNumber: numberOfPlayedCard
}
}
}
//check for number match
else if(state.currentNumber === numberOfPlayedCard) {
console.log('numbers matched!')
//check who played the card and return new state accordingly
if(cardPlayedBy === 'Player 1') {
//remove the played card from player1's deck and add it to playedCardsPile (immutably)
//then update turn, currentColor and currentNumber
const removeIndex = state.player1Deck.indexOf(action.payload.cardPlayed)
//return new state
return {
...state,
gameOver: checkGameOver(state.player1Deck),
winner: setWinner(state.player1Deck, 'Player 1'),
turn: 'Player 2',
playedCardsPile: [...state.playedCardsPile.slice(0, state.playedCardsPile.length), action.payload.cardPlayed, ...state.playedCardsPile.slice(state.playedCardsPile.length)],
player1Deck: [...state.player1Deck.slice(0, removeIndex), ...state.player1Deck.slice(removeIndex + 1)],
currentColor: colorOfPlayedCard,
currentNumber: numberOfPlayedCard
}
}
else {
//remove the played card from player2's deck and add it to playedCardsPile (immutably)
//then update turn, currentColor and currentNumber
const removeIndex = state.player2Deck.indexOf(action.payload.cardPlayed)
//return new state
return {
...state,
gameOver: checkGameOver(state.player2Deck),
winner: setWinner(state.player1Deck, 'Player 2'),
turn: 'Player 1',
playedCardsPile: [...state.playedCardsPile.slice(0, state.playedCardsPile.length), action.payload.cardPlayed, ...state.playedCardsPile.slice(state.playedCardsPile.length)],
player2Deck: [...state.player2Deck.slice(0, removeIndex), ...state.player2Deck.slice(removeIndex + 1)],
currentColor: colorOfPlayedCard,
currentNumber: numberOfPlayedCard
}
}
}
//if no color or number match, invalid move - do not update state
else {
alert('Invalid Move!')
return state
}
}
//if card played was a skip card
case 'skipR': case 'skipG': case 'skipB': case 'skipY': {
//extract color of played skip card
const colorOfPlayedCard = action.payload.cardPlayed.charAt(4)
//check for color match
if(state.currentColor === colorOfPlayedCard) {
console.log('colors matched!')
//check who played the card and return new state accordingly
if(cardPlayedBy === 'Player 1') {
//remove the played card from player1's deck and add it to playedCardsPile (immutably)
//then update currentColor and currentNumber
const removeIndex = state.player1Deck.indexOf(action.payload.cardPlayed)
//return new state
return {
...state,
gameOver: checkGameOver(state.player1Deck),
winner: setWinner(state.player1Deck, 'Player 1'),
playedCardsPile: [...state.playedCardsPile.slice(0, state.playedCardsPile.length), action.payload.cardPlayed, ...state.playedCardsPile.slice(state.playedCardsPile.length)],
player1Deck: [...state.player1Deck.slice(0, removeIndex), ...state.player1Deck.slice(removeIndex + 1)],
currentColor: colorOfPlayedCard,
currentNumber: 404
}
}
else {
//remove the played card from player2's deck and add it to playedCardsPile (immutably)
//then update currentColor and currentNumber
const removeIndex = state.player2Deck.indexOf(action.payload.cardPlayed)
//return new state
return {
...state,
gameOver: checkGameOver(state.player2Deck),
winner: setWinner(state.player1Deck, 'Player 2'),
playedCardsPile: [...state.playedCardsPile.slice(0, state.playedCardsPile.length), action.payload.cardPlayed, ...state.playedCardsPile.slice(state.playedCardsPile.length)],
player2Deck: [...state.player2Deck.slice(0, removeIndex), ...state.player2Deck.slice(removeIndex + 1)],
currentColor: colorOfPlayedCard,
currentNumber: 404
}
}
}
//check for number match - if skip card played on skip card
else if(state.currentNumber === 404) {
console.log('Numbers matched!')
//check who played the card and return new state accordingly
if(cardPlayedBy === 'Player 1') {
//remove the played card from player1's deck and add it to playedCardsPile (immutably)
//then update currentColor and currentNumber - turn will remain same
const removeIndex = state.player1Deck.indexOf(action.payload.cardPlayed)
//return new state
return {
...state,
gameOver: checkGameOver(state.player1Deck),
winner: setWinner(state.player1Deck, 'Player 1'),
playedCardsPile: [...state.playedCardsPile.slice(0, state.playedCardsPile.length), action.payload.cardPlayed, ...state.playedCardsPile.slice(state.playedCardsPile.length)],
player1Deck: [...state.player1Deck.slice(0, removeIndex), ...state.player1Deck.slice(removeIndex + 1)],
currentColor: colorOfPlayedCard,
currentNumber: 404
}
}
else {
//remove the played card from player2's deck and add it to playedCardsPile (immutably)
//then update currentColor and currentNumber - turn will remain same
const removeIndex = state.player2Deck.indexOf(action.payload.cardPlayed)
//return new state
return {
...state,
gameOver: checkGameOver(state.player2Deck),
winner: setWinner(state.player1Deck, 'Player 2'),
playedCardsPile: [...state.playedCardsPile.slice(0, state.playedCardsPile.length), action.payload.cardPlayed, ...state.playedCardsPile.slice(state.playedCardsPile.length)],
player2Deck: [...state.player2Deck.slice(0, removeIndex), ...state.player2Deck.slice(removeIndex + 1)],
currentColor: colorOfPlayedCard,
currentNumber: 404
}
}
}
//if no color or number match, invalid move - do not update state
else {
alert('Invalid Move!')
return state
}
}
//if card played was a draw 2 card
case 'D2R': case 'D2G': case 'D2B': case 'D2Y': {
//extract color of played skip card
const colorOfPlayedCard = action.payload.cardPlayed.charAt(2)
//check for color match
if(state.currentColor === colorOfPlayedCard) {
console.log('colors matched!')
//check who played the card and return new state accordingly
if(cardPlayedBy === 'Player 1') {
//remove the played card from player1's deck and add it to playedCardsPile (immutably)
//remove 2 new cards from drawCardPile and add them to player2's deck (immutably)
//then update currentColor and currentNumber - turn will remain same
const removeIndex = state.player1Deck.indexOf(action.payload.cardPlayed)
//make a copy of drawCardPile array
const copiedDrawCardPileArray = [...state.drawCardPile]
//pull out last two elements from it
const drawCard1 = copiedDrawCardPileArray.pop()
const drawCard2 = copiedDrawCardPileArray.pop()
//return new state
return {
...state,
gameOver: checkGameOver(state.player1Deck),
winner: setWinner(state.player1Deck, 'Player 1'),
playedCardsPile: [...state.playedCardsPile.slice(0, state.playedCardsPile.length), action.payload.cardPlayed, ...state.playedCardsPile.slice(state.playedCardsPile.length)],
player1Deck: [...state.player1Deck.slice(0, removeIndex), ...state.player1Deck.slice(removeIndex + 1)],
player2Deck: [...state.player2Deck.slice(0, state.player2Deck.length), drawCard1, drawCard2, ...state.player2Deck.slice(state.player2Deck.length)],
currentColor: colorOfPlayedCard,
currentNumber: 252,
drawCardPile: [...copiedDrawCardPileArray]
}
}
else {
//remove the played card from player2's deck and add it to playedCardsPile (immutably)
//remove 2 new cards from drawCardPile and add them to player1's deck (immutably)
//then update currentColor and currentNumber - turn will remain same
const removeIndex = state.player2Deck.indexOf(action.payload.cardPlayed)
//make a copy of drawCardPile array
const copiedDrawCardPileArray = [...state.drawCardPile]
//pull out last two elements from it
const drawCard1 = copiedDrawCardPileArray.pop()
const drawCard2 = copiedDrawCardPileArray.pop()
//return new state
return {
...state,
gameOver: checkGameOver(state.player2Deck),
winner: setWinner(state.player1Deck, 'Player 2'),
playedCardsPile: [...state.playedCardsPile.slice(0, state.playedCardsPile.length), action.payload.cardPlayed, ...state.playedCardsPile.slice(state.playedCardsPile.length)],
player2Deck: [...state.player2Deck.slice(0, removeIndex), ...state.player2Deck.slice(removeIndex + 1)],
player1Deck: [...state.player1Deck.slice(0, state.player1Deck.length), drawCard1, drawCard2, ...state.player1Deck.slice(state.player1Deck.length)],
currentColor: colorOfPlayedCard,
currentNumber: 252,
drawCardPile: [...copiedDrawCardPileArray]
}
}
}
//check for number match - if draw 2 card played on draw 2 card
else if(state.currentNumber === 252) {
console.log('number matched!')
//check who played the card and return new state accordingly
if(cardPlayedBy === 'Player 1') {
//remove the played card from player1's deck and add it to playedCardsPile (immutably)
//remove 2 new cards from drawCardPile and add them to player2's deck (immutably)
//then update currentColor and currentNumber - turn will remain same
const removeIndex = state.player1Deck.indexOf(action.payload.cardPlayed)
//make a copy of drawCardPile array
const copiedDrawCardPileArray = [...state.drawCardPile]
//pull out last two elements from it
const drawCard1 = copiedDrawCardPileArray.pop()
const drawCard2 = copiedDrawCardPileArray.pop()
//return new state
return {
...state,
gameOver: checkGameOver(state.player1Deck),
winner: setWinner(state.player1Deck, 'Player 1'),
playedCardsPile: [...state.playedCardsPile.slice(0, state.playedCardsPile.length), action.payload.cardPlayed, ...state.playedCardsPile.slice(state.playedCardsPile.length)],
player1Deck: [...state.player1Deck.slice(0, removeIndex), ...state.player1Deck.slice(removeIndex + 1)],
player2Deck: [...state.player2Deck.slice(0, state.player2Deck.length), drawCard1, drawCard2, ...state.player2Deck.slice(state.player2Deck.length)],
currentColor: colorOfPlayedCard,
currentNumber: 252,
drawCardPile: [...copiedDrawCardPileArray]
}
}
else {
//remove the played card from player2's deck and add it to playedCardsPile (immutably)
//remove 2 new cards from drawCardPile and add them to player1's deck (immutably)
//then update currentColor and currentNumber - turn will remain same
const removeIndex = state.player2Deck.indexOf(action.payload.cardPlayed)
//make a copy of drawCardPile array
const copiedDrawCardPileArray = [...state.drawCardPile]
//pull out last two elements from it
const drawCard1 = copiedDrawCardPileArray.pop()
const drawCard2 = copiedDrawCardPileArray.pop()
//return new state
return {
...state,
gameOver: checkGameOver(state.player2Deck),
winner: setWinner(state.player1Deck, 'Player 2'),
playedCardsPile: [...state.playedCardsPile.slice(0, state.playedCardsPile.length), action.payload.cardPlayed, ...state.playedCardsPile.slice(state.playedCardsPile.length)],
player2Deck: [...state.player2Deck.slice(0, removeIndex), ...state.player2Deck.slice(removeIndex + 1)],
player1Deck: [...state.player1Deck.slice(0, state.player1Deck.length), drawCard1, drawCard2, ...state.player1Deck.slice(state.player1Deck.length)],
currentColor: colorOfPlayedCard,
currentNumber: 252,
drawCardPile: [...copiedDrawCardPileArray]
}
}
}
//if no color or number match, invalid move - do not update state
else {
alert('Invalid Move!')
return state
}
}
//if card played was a wild card
case 'W': {
//check who played the card and return new state accordingly
if(cardPlayedBy === 'Player 1') {
//ask for new color
const newColor = prompt('Enter first letter of new color in uppercase (R/G/B/Y)')
//remove the played card from player1's deck and add it to playedCardsPile (immutably)
const removeIndex = state.player1Deck.indexOf(action.payload.cardPlayed)
//then update turn, currentColor and currentNumber
//return new state
return {
...state,
gameOver: checkGameOver(state.player1Deck),
winner: setWinner(state.player1Deck, 'Player 1'),
turn: 'Player 2',
playedCardsPile: [...state.playedCardsPile.slice(0, state.playedCardsPile.length), action.payload.cardPlayed, ...state.playedCardsPile.slice(state.playedCardsPile.length)],
player1Deck: [...state.player1Deck.slice(0, removeIndex), ...state.player1Deck.slice(removeIndex + 1)],
currentColor: newColor,
currentNumber: 300,
}
}
else {
//ask for new color
const newColor = prompt('Enter first letter of new color in uppercase (R/G/B/Y)')
//remove the played card from player2's deck and add it to playedCardsPile (immutably)
const removeIndex = state.player2Deck.indexOf(action.payload.cardPlayed)
//then update turn, currentColor and currentNumber
//return new state
return {
...state,
gameOver: checkGameOver(state.player2Deck),
winner: setWinner(state.player1Deck, 'Player 1'),
turn: 'Player 1',
playedCardsPile: [...state.playedCardsPile.slice(0, state.playedCardsPile.length), action.payload.cardPlayed, ...state.playedCardsPile.slice(state.playedCardsPile.length)],
player2Deck: [...state.player2Deck.slice(0, removeIndex), ...state.player2Deck.slice(removeIndex + 1)],
currentColor: newColor,
currentNumber: 300,
}
}
}
//if card played was a draw four wild card
case 'D4W': {
//check who played the card and return new state accordingly
if(cardPlayedBy === 'Player 1') {
//ask for new color
const newColor = prompt('Enter first letter of new color in uppercase (R/G/B/Y)')
//remove the played card from player1's deck and add it to playedCardsPile (immutably)
const removeIndex = state.player1Deck.indexOf(action.payload.cardPlayed)
//remove 2 new cards from drawCardPile and add them to player2's deck (immutably)
//make a copy of drawCardPile array
const copiedDrawCardPileArray = [...state.drawCardPile]
//pull out last four elements from it
const drawCard1 = copiedDrawCardPileArray.pop()
const drawCard2 = copiedDrawCardPileArray.pop()
const drawCard3 = copiedDrawCardPileArray.pop()
const drawCard4 = copiedDrawCardPileArray.pop()
//then update currentColor and currentNumber - turn will remain same
//return new state
return {
...state,
gameOver: checkGameOver(state.player1Deck),
winner: setWinner(state.player1Deck, 'Player 1'),
playedCardsPile: [...state.playedCardsPile.slice(0, state.playedCardsPile.length), action.payload.cardPlayed, ...state.playedCardsPile.slice(state.playedCardsPile.length)],
player1Deck: [...state.player1Deck.slice(0, removeIndex), ...state.player1Deck.slice(removeIndex + 1)],
player2Deck: [...state.player2Deck.slice(0, state.player2Deck.length), drawCard1, drawCard2, drawCard3, drawCard4, ...state.player2Deck.slice(state.player2Deck.length)],
currentColor: newColor,
currentNumber: 600,
drawCardPile: [...copiedDrawCardPileArray]
}
}
else {
//ask for new color
const newColor = prompt('Enter first letter of new color in uppercase (R/G/B/Y)')
//remove the played card from player2's deck and add it to playedCardsPile (immutably)
const removeIndex = state.player2Deck.indexOf(action.payload.cardPlayed)
//remove 2 new cards from drawCardPile and add them to player1's deck (immutably)
//make a copy of drawCardPile array
const copiedDrawCardPileArray = [...state.drawCardPile]
//pull out last four elements from it
const drawCard1 = copiedDrawCardPileArray.pop()
const drawCard2 = copiedDrawCardPileArray.pop()
const drawCard3 = copiedDrawCardPileArray.pop()
const drawCard4 = copiedDrawCardPileArray.pop()
//then update currentColor and currentNumber - turn will remain same
//return new state
return {
...state,
gameOver: checkGameOver(state.player2Deck),
winner: setWinner(state.player1Deck, 'Player 1'),
playedCardsPile: [...state.playedCardsPile.slice(0, state.playedCardsPile.length), action.payload.cardPlayed, ...state.playedCardsPile.slice(state.playedCardsPile.length)],
player2Deck: [...state.player2Deck.slice(0, removeIndex), ...state.player2Deck.slice(removeIndex + 1)],
player1Deck: [...state.player1Deck.slice(0, state.player1Deck.length), drawCard1, drawCard2, drawCard3, drawCard4, ...state.player1Deck.slice(state.player1Deck.length)],
currentColor: newColor,
currentNumber: 600,
drawCardPile: [...copiedDrawCardPileArray]
}
}
}
}
}
case CARD_DRAWN: {
//extract player who drew the card
const cardDrawnBy = state.turn
//check who drew the card and return new state accordingly
if(cardDrawnBy === 'Player 1') {
//remove 1 new card from drawCardPile and add it to player1's deck (immutably)
//make a copy of drawCardPile array
const copiedDrawCardPileArray = [...state.drawCardPile]
//pull out last element from it
const drawCard = copiedDrawCardPileArray.pop()
console.log(drawCard);
//extract number and color of drawn card
const colorOfDrawnCard = drawCard.charAt(drawCard.length - 1)
let numberOfDrawnCard = drawCard.charAt(0)
if(drawCard === 'skipR' || drawCard === 'skipG' || drawCard === 'skipB' || drawCard === 'skipY') {
//return new state
return {
...state,
playedCardsPile: [...state.playedCardsPile.slice(0, state.playedCardsPile.length), drawCard, ...state.playedCardsPile.slice(state.playedCardsPile.length)],
currentColor: colorOfDrawnCard,
currentNumber: 404
}
}
if(drawCard === 'D2R' || drawCard === 'D2G' || drawCard === 'D2B' || drawCard === 'D2Y') {
//remove 2 new cards from drawCardPile and add them to player2's deck (immutably)
//make a copy of drawCardPile array
const copiedDrawCardPileArray = [...state.drawCardPile]
//pull out last two elements from it
const drawCard1 = copiedDrawCardPileArray.pop()
const drawCard2 = copiedDrawCardPileArray.pop()
//return new state
return {
...state,
playedCardsPile: [...state.playedCardsPile.slice(0, state.playedCardsPile.length), drawCard, ...state.playedCardsPile.slice(state.playedCardsPile.length)],
player2Deck: [...state.player2Deck.slice(0, state.player2Deck.length), drawCard1, drawCard2, ...state.player2Deck.slice(state.player2Deck.length)],
currentColor: colorOfDrawnCard,
currentNumber: 252,
drawCardPile: [...copiedDrawCardPileArray]
}
}
if(drawCard === 'W') {
//ask for new color
const newColor = prompt('Enter first letter of new color in uppercase (R/G/B/Y)')
//return new state
return {
...state,
turn: 'Player 2',
playedCardsPile: [...state.playedCardsPile.slice(0, state.playedCardsPile.length), drawCard, ...state.playedCardsPile.slice(state.playedCardsPile.length)],
currentColor: newColor,
currentNumber: 300,
}
}
if(drawCard === 'D4W') {
//ask for new color
const newColor = prompt('Enter first letter of new color in uppercase (R/G/B/Y)')
//remove 2 new cards from drawCardPile and add them to player1's deck (immutably)
//make a copy of drawCardPile array
const copiedDrawCardPileArray = [...state.drawCardPile]
//pull out last four elements from it
const drawCard1 = copiedDrawCardPileArray.pop()
const drawCard2 = copiedDrawCardPileArray.pop()
const drawCard3 = copiedDrawCardPileArray.pop()
const drawCard4 = copiedDrawCardPileArray.pop()
//return new state
return {
...state,
playedCardsPile: [...state.playedCardsPile.slice(0, state.playedCardsPile.length), drawCard, ...state.playedCardsPile.slice(state.playedCardsPile.length)],
player1Deck: [...state.player1Deck.slice(0, state.player1Deck.length), drawCard1, drawCard2, drawCard3, drawCard4, ...state.player1Deck.slice(state.player1Deck.length)],
currentColor: newColor,
currentNumber: 600,
drawCardPile: [...copiedDrawCardPileArray]
}
}
//if not special card - check if drawn card is playable
if(numberOfDrawnCard === state.currentNumber || colorOfDrawnCard === state.currentColor) {
//return new state
return {
...state,
turn: 'Player 2',
playedCardsPile: [...state.playedCardsPile.slice(0, state.playedCardsPile.length), drawCard, ...state.playedCardsPile.slice(state.playedCardsPile.length)],
currentColor: colorOfDrawnCard,
currentNumber: numberOfDrawnCard,
drawCardPile: [...copiedDrawCardPileArray]
}
}
//else add the drawn card to player1's deck
//return new state
return {
...state,
turn: 'Player 2',
player1Deck: [...state.player1Deck.slice(0, state.player1Deck.length), drawCard, ...state.player1Deck.slice(state.player1Deck.length)],
drawCardPile: [...copiedDrawCardPileArray]
}
}
else {
//remove 1 new card from drawCardPile and add it to player2's deck (immutably)
//make a copy of drawCardPile array
const copiedDrawCardPileArray = [...state.drawCardPile]
//pull out last element from it
const drawCard = copiedDrawCardPileArray.pop()
console.log(drawCard);
//extract number and color of drawn card
const colorOfDrawnCard = drawCard.charAt(drawCard.length - 1)
let numberOfDrawnCard = drawCard.charAt(0)
if(drawCard === 'skipR' || drawCard === 'skipG' || drawCard === 'skipB' || drawCard === 'skipY') {
//return new state
return {
...state,
playedCardsPile: [...state.playedCardsPile.slice(0, state.playedCardsPile.length), drawCard, ...state.playedCardsPile.slice(state.playedCardsPile.length)],
currentColor: colorOfDrawnCard,
currentNumber: 404
}
}
if(drawCard === 'D2R' || drawCard === 'D2G' || drawCard === 'D2B' || drawCard === 'D2Y') {
//remove 2 new cards from drawCardPile and add them to player2's deck (immutably)
//make a copy of drawCardPile array
const copiedDrawCardPileArray = [...state.drawCardPile]
//pull out last two elements from it
const drawCard1 = copiedDrawCardPileArray.pop()
const drawCard2 = copiedDrawCardPileArray.pop()
//return new state
return {
...state,
playedCardsPile: [...state.playedCardsPile.slice(0, state.playedCardsPile.length), drawCard, ...state.playedCardsPile.slice(state.playedCardsPile.length)],
player2Deck: [...state.player2Deck.slice(0, state.player2Deck.length), drawCard1, drawCard2, ...state.player2Deck.slice(state.player2Deck.length)],
currentColor: colorOfDrawnCard,
currentNumber: 252,
drawCardPile: [...copiedDrawCardPileArray]
}
}
if(drawCard === 'W') {
//ask for new color
const newColor = prompt('Enter first letter of new color in uppercase (R/G/B/Y)')
//return new state
return {
...state,
turn: 'Player 1',
playedCardsPile: [...state.playedCardsPile.slice(0, state.playedCardsPile.length), drawCard, ...state.playedCardsPile.slice(state.playedCardsPile.length)],
currentColor: newColor,
currentNumber: 300,
}
}
if(drawCard === 'D4W') {
//ask for new color
const newColor = prompt('Enter first letter of new color in uppercase (R/G/B/Y)')
//remove 2 new cards from drawCardPile and add them to player1's deck (immutably)
//make a copy of drawCardPile array
const copiedDrawCardPileArray = [...state.drawCardPile]
//pull out last four elements from it
const drawCard1 = copiedDrawCardPileArray.pop()
const drawCard2 = copiedDrawCardPileArray.pop()
const drawCard3 = copiedDrawCardPileArray.pop()
const drawCard4 = copiedDrawCardPileArray.pop()
//return new state
return {
...state,
playedCardsPile: [...state.playedCardsPile.slice(0, state.playedCardsPile.length), drawCard, ...state.playedCardsPile.slice(state.playedCardsPile.length)],
player1Deck: [...state.player1Deck.slice(0, state.player1Deck.length), drawCard1, drawCard2, drawCard3, drawCard4, ...state.player1Deck.slice(state.player1Deck.length)],
currentColor: newColor,
currentNumber: 600,
drawCardPile: [...copiedDrawCardPileArray]
}
}
//if not special card - check if drawn card is playable
if(numberOfDrawnCard === state.currentNumber || colorOfDrawnCard === state.currentColor) {
//return new state
return {
...state,
turn: 'Player 1',
playedCardsPile: [...state.playedCardsPile.slice(0, state.playedCardsPile.length), drawCard, ...state.playedCardsPile.slice(state.playedCardsPile.length)],
currentColor: colorOfDrawnCard,
currentNumber: numberOfDrawnCard,
drawCardPile: [...copiedDrawCardPileArray]
}
}
//else add the drawn card to player2's deck
//return new state
return {
...state,
turn: 'Player 1',
player2Deck: [...state.player2Deck.slice(0, state.player2Deck.length), drawCard, ...state.player2Deck.slice(state.player2Deck.length)],
drawCardPile: [...copiedDrawCardPileArray]
}
}
}
default:
return state
}
}
export default reducer

8
src/utils/packOfCards.js Normal file
View File

@ -0,0 +1,8 @@
//pack of 108 cards (# = reverse)
export default CARDS = [
'0R', '1R', '1R', '2R', '2R', '3R', '3R', '4R', '4R', '5R', '5R', '6R', '6R', '7R', '7R', '8R', '8R', '9R', '9R', 'skipR', 'skipR', '#R', '#R', 'D2R', 'D2R',
'0G', '1G', '1G', '2G', '2G', '3G', '3G', '4G', '4G', '5G', '5G', '6G', '6G', '7G', '7G', '8G', '8G', '9G', '9G', 'skipG', 'skipG', '#G', '#G', 'D2G', 'D2G',
'0B', '1B', '1B', '2B', '2B', '3B', '3B', '4B', '4B', '5B', '5B', '6B', '6B', '7B', '7B', '8B', '8B', '9B', '9B', 'skipB', 'skipB', '#B', '#B', 'D2B', 'D2B',
'0Y', '1Y', '1Y', '2Y', '2Y', '3Y', '3Y', '4Y', '4Y', '5Y', '5Y', '6Y', '6Y', '7Y', '7Y', '8Y', '8Y', '9Y', '9Y', 'skipY', 'skipY', '#Y', '#Y', 'D2Y', 'D2Y',
'W', 'W', 'W', 'W', 'D4W', 'D4W', 'D4W', 'D4W'
]

View File

@ -0,0 +1,9 @@
export default function shuffleArray(array) {
for (var i = array.length - 1; i > 0; i--) {
var j = Math.floor(Math.random() * (i + 1))
var temp = array[i]
array[i] = array[j]
array[j] = temp;
}
return array
}