Github/uno-online
1
0
Fork 1
mirror of https://github.com/mizanxali/uno-online synced 2024-11-17 00:04:55 +00:00
Code Issues Projects Releases Wiki Activity

Added draw new card functionality

Browse Source
This commit is contained in:
Mizanali Panjwani 2021-02-14 20:17:31 +05:30
parent d784ba7d31
commit 5a78088c6e
3 changed files with 107 additions and 6 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

6
src/components/Game.js
View File

@ -1,6 +1,6 @@
import React from 'react'
import { connect } from 'react-redux'
import { CARD_PLAYED } from '../store/actions'
import { CARD_DRAWN, CARD_PLAYED } from '../store/actions'
import './Game.css'
@ -22,6 +22,7 @@ const Game = (props) => {
<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}>
@ -53,7 +54,8 @@ const mapStateToProps = (state) => {
const mapDispatchToProps = (dispatch) => {
return {
onCardPlayed: (card) => dispatch({type: CARD_PLAYED, payload: {cardPlayed: card}})
onCardPlayed: (card) => dispatch({type: CARD_PLAYED, payload: {cardPlayed: card}}),
onCardDrawn: () => dispatch({type: CARD_DRAWN})
}
}

3
src/store/actions.js
View File

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

104
src/store/reducer.js
View File

@ -1,4 +1,4 @@
import { CARD_PLAYED, START_GAME } from "./actions";
import { CARD_DRAWN, CARD_PLAYED, START_GAME } from "./actions";
//pack of 108 cards
const CARDS = [
@ -429,8 +429,8 @@ const reducer = (state = initialState, action) => {
const drawCard4 = copiedDrawCardPileArray.pop()
//then update currentColor and currentNumber - turn will remain same
//return new state
return {
//return new state
return {
...state,
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)],
@ -472,6 +472,104 @@ const reducer = (state = initialState, action) => {
}
}
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') {
numberOfDrawnCard = 404
}
if(drawCard === 'D2R' || drawCard === 'D2G' || drawCard === 'D2B' || drawCard === 'D2Y') {
numberOfDrawnCard = 252
}
if(drawCard === 'W') {
numberOfDrawnCard = 300
}
if(drawCard === 'D4W') {
numberOfDrawnCard = 600
}
//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
}
}
//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') {
numberOfDrawnCard = 404
}
if(drawCard === 'D2R' || drawCard === 'D2G' || drawCard === 'D2B' || drawCard === 'D2Y') {
numberOfDrawnCard = 252
}
if(drawCard === 'W') {
numberOfDrawnCard = 300
}
if(drawCard === 'D4W') {
numberOfDrawnCard = 600
}
//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
}
}
//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
}