diff --git a/src/components/Game.css b/src/components/Game.css new file mode 100644 index 0000000..6074688 --- /dev/null +++ b/src/components/Game.css @@ -0,0 +1,6 @@ +.card { + border: 1px solid black; + padding: 20px; + margin: 20px; + display: inline-block; +} \ No newline at end of file diff --git a/src/components/Game.js b/src/components/Game.js index 7db9c36..e7c4322 100644 --- a/src/components/Game.js +++ b/src/components/Game.js @@ -1,24 +1,36 @@ import React from 'react' import { connect } from 'react-redux' +import { CARD_PLAYED } from '../store/actions' + +import './Game.css' const Game = (props) => { + const player1active = props.turn === 'Player 1' return (
-

Game

-
- {props.player1Deck.map((item) => { - return
{item}
- })} +

Turn: {props.turn}

+
+ {props.player1Deck.map((item) => ( + props.onCardPlayed(item)} + className='card'> + {item} + + ))}
-

Current Card: {props.playedCardsPile[0]}

+

Current Card: {props.playedCardsPile[props.playedCardsPile.length-1]}

-
- {props.player2Deck.map((item) => { - return
{item}
- })} +
+ {props.player2Deck.map((item) => ( + props.onCardPlayed(item)} + className='card'> + {item} + + ))}
) @@ -37,4 +49,10 @@ const mapStateToProps = (state) => { } } -export default connect(mapStateToProps)(Game) +const mapDispatchToProps = (dispatch) => { + return { + onCardPlayed: (card) => dispatch({type: CARD_PLAYED, payload: {cardPlayed: card}}) + } +} + +export default connect(mapStateToProps, mapDispatchToProps)(Game) diff --git a/src/store/actions.js b/src/store/actions.js index 09addcb..fa808a2 100644 --- a/src/store/actions.js +++ b/src/store/actions.js @@ -1 +1,2 @@ -export const START_GAME = 'START_GAME' \ No newline at end of file +export const START_GAME = 'START_GAME' +export const CARD_PLAYED = 'CARD_PLAYED' \ No newline at end of file diff --git a/src/store/reducer.js b/src/store/reducer.js index 64c4e4b..7a78e72 100644 --- a/src/store/reducer.js +++ b/src/store/reducer.js @@ -1,11 +1,11 @@ -import { START_GAME } from "./actions"; +import { CARD_PLAYED, START_GAME } from "./actions"; //pack of 108 cards const CARDS = [ - '0R', '1R', '1R', '2R', '2R', '3R', '3R', '4R', '4R', '5R', '5R', '6R', '6R', '7R', '7R', '8R', '8R', '9R', '9R', 'skipR', 'skipR', 'revR', 'revR', 'D2R', 'D2R', - '0G', '1G', '1G', '2G', '2G', '3G', '3G', '4G', '4G', '5G', '5G', '6G', '6G', '7G', '7G', '8G', '8G', '9G', '9G', 'skipG', 'skipG', 'revG', 'revG', 'D2G', 'D2G', - '0B', '1B', '1B', '2B', '2B', '3B', '3B', '4B', '4B', '5B', '5B', '6B', '6B', '7B', '7B', '8B', '8B', '9B', '9B', 'skipB', 'skipB', 'revB', 'revB', 'D2B', 'D2B', - '0Y', '1Y', '1Y', '2Y', '2Y', '3Y', '3Y', '4Y', '4Y', '5Y', '5Y', '6Y', '6Y', '7Y', '7Y', '8Y', '8Y', '9Y', '9Y', 'skipY', 'skipY', 'revY', 'revY', 'D2Y', 'D2Y', + '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' ] @@ -47,10 +47,10 @@ const reducer = (state = initialState, action) => { let startingCardIndex = Math.floor(Math.random() * 94) while(true) { startingCardIndex = Math.floor(Math.random() * 94) - if(shuffledCards[startingCardIndex]==='skipR' || shuffledCards[startingCardIndex]==='revR' || shuffledCards[startingCardIndex]==='D2R' || - shuffledCards[startingCardIndex]==='skipG' || shuffledCards[startingCardIndex]==='revG' || shuffledCards[startingCardIndex]==='D2G' || - shuffledCards[startingCardIndex]==='skipB' || shuffledCards[startingCardIndex]==='revB' || shuffledCards[startingCardIndex]==='D2B' || - shuffledCards[startingCardIndex]==='skipY' || shuffledCards[startingCardIndex]==='revY' || shuffledCards[startingCardIndex]==='D2Y' || + 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; } @@ -75,8 +75,76 @@ const reducer = (state = initialState, action) => { drawCardPile: [...drawCardPile], } } + + case CARD_PLAYED: { + const cardPlayedBy = state.turn + switch(action.payload.cardPlayed) { + 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': { + const numberOfPlayedCard = action.payload.cardPlayed.charAt(0) + const colorOfPlayedCard = action.payload.cardPlayed.charAt(1) + + if(state.currentColor === colorOfPlayedCard) { + console.log('colors matched!'); + if(cardPlayedBy === 'Player 1') { + const removeIndex = state.player1Deck.indexOf(action.payload.cardPlayed) + return { + ...state, + 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 { + const removeIndex = state.player2Deck.indexOf(action.payload.cardPlayed) + return { + ...state, + 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 + } + } + } + else if(state.currentNumber === numberOfPlayedCard) { + console.log('numbers matched!'); + if(cardPlayedBy === 'Player 1') { + const removeIndex = state.player1Deck.indexOf(action.payload.cardPlayed) + return { + ...state, + 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 { + const removeIndex = state.player2Deck.indexOf(action.payload.cardPlayed) + return { + ...state, + 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 + } + } + } + else { + alert('Invalid Move!') + } + + break; + } + } + } + + default: + return state } - return state } export default reducer \ No newline at end of file