1
0
mirror of https://github.com/mizanxali/uno-online synced 2024-06-17 05:18:28 +00:00

Improvements

This commit is contained in:
Mizanali Panjwani 2021-02-17 17:20:54 +05:30
parent 8b12e81206
commit 6d4f183acc
3 changed files with 38 additions and 31 deletions

View File

@ -1,3 +1,10 @@
.App { .App {
text-align: center; text-align: center;
}
.card {
border: 1px solid black;
padding: 20px;
margin: 20px;
display: inline-block;
} }

View File

@ -1,6 +0,0 @@
.card {
border: 1px solid black;
padding: 20px;
margin: 20px;
display: inline-block;
}

View File

@ -2,8 +2,6 @@ import React, { useEffect, useState } from 'react'
import PACK_OF_CARDS from '../utils/packOfCards' import PACK_OF_CARDS from '../utils/packOfCards'
import shuffleArray from '../utils/shuffleArray' import shuffleArray from '../utils/shuffleArray'
import './Game.css'
//NUMBER CODES FOR ACTION CARDS //NUMBER CODES FOR ACTION CARDS
//SKIP - 404 //SKIP - 404
//DRAW 2 - 252 //DRAW 2 - 252
@ -23,14 +21,6 @@ const Game = () => {
const [playedCardsPile, setPlayedCardsPile] = useState([]) const [playedCardsPile, setPlayedCardsPile] = useState([])
const [drawCardPile, setDrawCardPile] = useState([]) const [drawCardPile, setDrawCardPile] = useState([])
const checkGameOver = (arr) => {
return arr.length === 1
}
const checkWinner = (arr, player) => {
return arr.length === 1 ? player : ''
}
//runs once on component mount //runs once on component mount
useEffect(() => { useEffect(() => {
//shuffle PACK_OF_CARDS array //shuffle PACK_OF_CARDS array
@ -73,6 +63,15 @@ const Game = () => {
setPlayedCardsPile([...playedCardsPile]) setPlayedCardsPile([...playedCardsPile])
setDrawCardPile([...drawCardPile]) setDrawCardPile([...drawCardPile])
}, []) }, [])
//some util functions
const checkGameOver = (arr) => {
return arr.length === 1
}
const checkWinner = (arr, player) => {
return arr.length === 1 ? player : ''
}
const onCardPlayedHandler = (played_card) => { const onCardPlayedHandler = (played_card) => {
//extract player who played the card //extract player who played the card
@ -421,18 +420,18 @@ const Game = () => {
const copiedDrawCardPileArray = [...drawCardPile] const copiedDrawCardPileArray = [...drawCardPile]
//pull out last element from it //pull out last element from it
const drawCard = copiedDrawCardPileArray.pop() const drawCard = copiedDrawCardPileArray.pop()
console.log(drawCard);
//extract number and color of drawn card //extract number and color of drawn card
const colorOfDrawnCard = drawCard.charAt(drawCard.length - 1) const colorOfDrawnCard = drawCard.charAt(drawCard.length - 1)
let numberOfDrawnCard = drawCard.charAt(0) let numberOfDrawnCard = drawCard.charAt(0)
if(drawCard === 'skipR' || drawCard === 'skipG' || drawCard === 'skipB' || drawCard === 'skipY') { if(colorOfDrawnCard === currentColor && (drawCard === 'skipR' || drawCard === 'skipG' || drawCard === 'skipB' || drawCard === 'skipY')) {
alert(`You drew ${drawCard}. It was played for you.`)
//set new state //set new state
setPlayedCardsPile([...playedCardsPile.slice(0, playedCardsPile.length), drawCard, ...playedCardsPile.slice(playedCardsPile.length)]) setPlayedCardsPile([...playedCardsPile.slice(0, playedCardsPile.length), drawCard, ...playedCardsPile.slice(playedCardsPile.length)])
setCurrentColor(colorOfDrawnCard) setCurrentColor(colorOfDrawnCard)
setCurrentNumber(404) setCurrentNumber(404)
} }
if(drawCard === 'D2R' || drawCard === 'D2G' || drawCard === 'D2B' || drawCard === 'D2Y') { else if(colorOfDrawnCard === currentColor && (drawCard === 'D2R' || drawCard === 'D2G' || drawCard === 'D2B' || drawCard === 'D2Y')) {
alert(`You drew ${drawCard}. It was played for you.`)
//remove 2 new cards from drawCardPile and add them to player2's deck (immutably) //remove 2 new cards from drawCardPile and add them to player2's deck (immutably)
//make a copy of drawCardPile array //make a copy of drawCardPile array
const copiedDrawCardPileArray = [...drawCardPile] const copiedDrawCardPileArray = [...drawCardPile]
@ -446,7 +445,8 @@ const Game = () => {
setCurrentNumber(252) setCurrentNumber(252)
setDrawCardPile([...copiedDrawCardPileArray]) setDrawCardPile([...copiedDrawCardPileArray])
} }
if(drawCard === 'W') { else if(drawCard === 'W') {
alert(`You drew ${drawCard}. It was played for you.`)
//ask for new color //ask for new color
const newColor = prompt('Enter first letter of new color in uppercase (R/G/B/Y)') const newColor = prompt('Enter first letter of new color in uppercase (R/G/B/Y)')
//set new state //set new state
@ -455,7 +455,8 @@ const Game = () => {
setCurrentColor(newColor) setCurrentColor(newColor)
setCurrentNumber(300) setCurrentNumber(300)
} }
if(drawCard === 'D4W') { else if(drawCard === 'D4W') {
alert(`You drew ${drawCard}. It was played for you.`)
//ask for new color //ask for new color
const newColor = prompt('Enter first letter of new color in uppercase (R/G/B/Y)') 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) //remove 2 new cards from drawCardPile and add them to player1's deck (immutably)
@ -474,7 +475,8 @@ const Game = () => {
setDrawCardPile([...copiedDrawCardPileArray]) setDrawCardPile([...copiedDrawCardPileArray])
} }
//if not action card - check if drawn card is playable //if not action card - check if drawn card is playable
if(numberOfDrawnCard === currentNumber || colorOfDrawnCard === currentColor) { else if(numberOfDrawnCard === currentNumber || colorOfDrawnCard === currentColor) {
alert(`You drew ${drawCard}. It was played for you.`)
//set new state //set new state
setTurn('Player 2') setTurn('Player 2')
setPlayedCardsPile([...playedCardsPile.slice(0, playedCardsPile.length), drawCard, ...playedCardsPile.slice(playedCardsPile.length)]) setPlayedCardsPile([...playedCardsPile.slice(0, playedCardsPile.length), drawCard, ...playedCardsPile.slice(playedCardsPile.length)])
@ -484,6 +486,7 @@ const Game = () => {
} }
//else add the drawn card to player1's deck //else add the drawn card to player1's deck
else { else {
alert(`You drew ${drawCard}.`)
//set new state //set new state
setTurn('Player 2') setTurn('Player 2')
setPlayer1Deck([...player1Deck.slice(0, player1Deck.length), drawCard, ...player1Deck.slice(player1Deck.length)]) setPlayer1Deck([...player1Deck.slice(0, player1Deck.length), drawCard, ...player1Deck.slice(player1Deck.length)])
@ -496,18 +499,18 @@ const Game = () => {
const copiedDrawCardPileArray = [...drawCardPile] const copiedDrawCardPileArray = [...drawCardPile]
//pull out last element from it //pull out last element from it
const drawCard = copiedDrawCardPileArray.pop() const drawCard = copiedDrawCardPileArray.pop()
console.log(drawCard);
//extract number and color of drawn card //extract number and color of drawn card
const colorOfDrawnCard = drawCard.charAt(drawCard.length - 1) const colorOfDrawnCard = drawCard.charAt(drawCard.length - 1)
let numberOfDrawnCard = drawCard.charAt(0) let numberOfDrawnCard = drawCard.charAt(0)
if(drawCard === 'skipR' || drawCard === 'skipG' || drawCard === 'skipB' || drawCard === 'skipY') { if(colorOfDrawnCard === currentColor && (drawCard === 'skipR' || drawCard === 'skipG' || drawCard === 'skipB' || drawCard === 'skipY')) {
alert(`You drew ${drawCard}. It was played for you.`)
//set new state //set new state
setPlayedCardsPile([...playedCardsPile.slice(0, playedCardsPile.length), drawCard, ...playedCardsPile.slice(playedCardsPile.length)]) setPlayedCardsPile([...playedCardsPile.slice(0, playedCardsPile.length), drawCard, ...playedCardsPile.slice(playedCardsPile.length)])
setCurrentColor(colorOfDrawnCard) setCurrentColor(colorOfDrawnCard)
setCurrentNumber(404) setCurrentNumber(404)
} }
if(drawCard === 'D2R' || drawCard === 'D2G' || drawCard === 'D2B' || drawCard === 'D2Y') { else if(colorOfDrawnCard === currentColor && (drawCard === 'D2R' || drawCard === 'D2G' || drawCard === 'D2B' || drawCard === 'D2Y')) {
alert(`You drew ${drawCard}. It was played for you.`)
//remove 2 new cards from drawCardPile and add them to player2's deck (immutably) //remove 2 new cards from drawCardPile and add them to player2's deck (immutably)
//make a copy of drawCardPile array //make a copy of drawCardPile array
const copiedDrawCardPileArray = [...drawCardPile] const copiedDrawCardPileArray = [...drawCardPile]
@ -521,7 +524,8 @@ const Game = () => {
setCurrentNumber(252) setCurrentNumber(252)
setDrawCardPile([...copiedDrawCardPileArray]) setDrawCardPile([...copiedDrawCardPileArray])
} }
if(drawCard === 'W') { else if(drawCard === 'W') {
alert(`You drew ${drawCard}. It was played for you.`)
//ask for new color //ask for new color
const newColor = prompt('Enter first letter of new color in uppercase (R/G/B/Y)') const newColor = prompt('Enter first letter of new color in uppercase (R/G/B/Y)')
//set new state //set new state
@ -530,7 +534,8 @@ const Game = () => {
setCurrentColor(newColor) setCurrentColor(newColor)
setCurrentNumber(300) setCurrentNumber(300)
} }
if(drawCard === 'D4W') { else if(drawCard === 'D4W') {
alert(`You drew ${drawCard}. It was played for you.`)
//ask for new color //ask for new color
const newColor = prompt('Enter first letter of new color in uppercase (R/G/B/Y)') 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) //remove 2 new cards from drawCardPile and add them to player1's deck (immutably)
@ -548,9 +553,9 @@ const Game = () => {
setCurrentNumber(600) setCurrentNumber(600)
setDrawCardPile([...copiedDrawCardPileArray]) setDrawCardPile([...copiedDrawCardPileArray])
} }
//if not action card - check if drawn card is playable //if not action card - check if drawn card is playable
if(numberOfDrawnCard === currentNumber || colorOfDrawnCard === currentColor) { else if(numberOfDrawnCard === currentNumber || colorOfDrawnCard === currentColor) {
alert(`You drew ${drawCard}. It was played for you.`)
//set new state //set new state
setTurn('Player 1') setTurn('Player 1')
setPlayedCardsPile([...playedCardsPile.slice(0, playedCardsPile.length), drawCard, ...playedCardsPile.slice(playedCardsPile.length)]) setPlayedCardsPile([...playedCardsPile.slice(0, playedCardsPile.length), drawCard, ...playedCardsPile.slice(playedCardsPile.length)])
@ -560,6 +565,7 @@ const Game = () => {
} }
//else add the drawn card to player2's deck //else add the drawn card to player2's deck
else { else {
alert(`You drew ${drawCard}.`)
//set new state //set new state
setTurn('Player 1') setTurn('Player 1')
setPlayer2Deck([...player2Deck.slice(0, player2Deck.length), drawCard, ...player2Deck.slice(player2Deck.length)]) setPlayer2Deck([...player2Deck.slice(0, player2Deck.length), drawCard, ...player2Deck.slice(player2Deck.length)])