Tag: Global

I’m making my first card game with React.js and I’m stuck at one point.
How can I display the total win count?
For example, if in this game the computer scored 10 points and won, and in the next 15 more points the global counter should show 25.

App.js

import React from "react";
import './App.css';
import Start from "./components/Start";
import Game from "./components/Game";
import Result from "./components/Result";
import {game, result, start} from "./utils/constants";

class App extends React.Component{
    constructor(props) {
        super(props);
        this.state = {
            page: start,
            name: 'You',
            compWins: 0,
            playerWins: 0,
            countWinsPlayer: 0,
            countWinsComp: 0
        }
    }



     changePage = page => {
        this.setState({page});
     }

    changeName = name => {
        this.setState({name});
    }

    changeResult = (compWins, playerWins, countWinsPlayer,countWinsComp) => {
        this.setState({compWins, playerWins,countWinsPlayer,countWinsComp})
    }


    render() {
        switch (this.state.page) {
            case game:
                return <Game
                    name={this.state.name}
                    switchPage={this.changePage}
                    setResult={this.changeResult}/>;
            case result:
                return <Result
                    switchPage={this.changePage}
                    compWins={this.state.compWins}
                    playerWins={this.state.playerWins}
                    countWinsPlayer={this.state.countWinsPlayer}
                    countWinsComp={this.state.countWinsComp}
                    />;
            default:
                return <Start
                    switchName={this.changeName}
                    switchPage={this.changePage}/>;
        }
    }
}

export default App;

Start.js

import React from 'react';
import {game} from "../utils/constants";

class Start extends React.Component {
    constructor(props) {
        super(props);
        this.state = {
            name: ''
        }
    }

    render() {
        return (
            <div>
                <h1>Ready for war</h1>
                <input
                    onChange={(e) => this.setState({name: e.target.value})}
                    value={this.state.name}
                    type='text'
                    placeholder='Enter your name'/>
                <button onClick={() => {
                    this.props.switchPage(game);
                    this.props.switchName(this.state.name)
                }}>Start</button>
            </div>
        );
    }
}

export default Start;

Game.js

import React from 'react';
import {deck, result, shuffle} from "../utils/constants";

class Game extends React.Component {

    constructor(props) {
        super(props);
        this.state = {
            playerCard: 'Player card',
            compCard: 'Computer card',
            compWins: 0,
            playerWins: 0,
            countWinsPlayer: 0,
            countWinsComp: 0
        };
    }


    componentDidMount() {
        const cards = shuffle(deck);
        this.compCards = cards.slice(0, deck.length / 2);
        this.playerCards = cards.slice(deck.length / 2, deck.length);
    }

    handleClickNext = () => {
        if (this.playerCards.length) {
            const player = this.playerCards.pop();
            const comp = this.compCards.pop();

            if (player.rank > comp.rank) {
                //this.setState({playerWins: this.state.playerWins + 1});
                this.setState((state, props) => ({playerWins: state.playerWins + 1}));
                this.setState((state, props) => ({countWinsPlayer: state.countWinsPlayer + 1}));

            }
            if (player.rank < comp.rank) {
                this.setState({compWins: this.state.compWins + 1});
                this.setState({countWinsComp: this.state.countWinsComp + 1});
            }
            this.setState({
                playerCard: `${player.rank}, ${player.suit}`,
                compCard: `${comp.rank}, ${comp.suit}`
            });
        } else {
            this.props.setResult(this.state.compWins, this.state.playerWins, this.state.countWinsPlayer, this.countWinsComp);
            this.props.switchPage(result);
        }
    }

    render() {
        return (
            <div>
                <h1>Computer</h1>
                <p>{this.state.compCard}</p>
                <p>{this.state.playerCard}</p>
                <h1>{this.props.name}</h1>
                <button onClick={this.handleClickNext}>Next</button>
            </div>
        );
    }
}

export default Game;

Result.js

import React from 'react';
import {game} from "../utils/constants";

const Result = ({playerWins, compWins, switchPage, countWinsPlayer,countWinsComp}) => {
    const getResult = () => {
        if (playerWins > compWins) {
            return 'WIN';
        }
        if (playerWins < compWins) {
            return 'LOSE';
        }
        return 'DRAW';
    };
    return (
        <div>
            <h1>{getResult()}</h1>
            <h3>This game:</h3>
            <h3>Your wins {playerWins} - {compWins} Computer wins</h3>
            <h3>Total wins:</h3>
            <h3>Your wins {countWinsPlayer} - {countWinsComp} Computer wins</h3>
            <button onClick={() => switchPage(game)}>Again ?</button>
        </div>
    );
};

export default Result;

constans.js

export const start = 'Home';
export const game = 'Game';
export const result = 'Result';
export const createDeck = () => {
    const deck = ();
    const suits = ('spade', 'club', 'diamond', 'heart');
    for (let i = 0; i < suits.length; i++){
        for (let j = 1; j <= 13; j++){
            deck.push({rank: j, suit: suits(i)});
        }
    }
    return deck;
};
export const deck = createDeck();
export const shuffle = arr => {
    const res = (...arr);
    res.sort(() => Math.random() - 0.5);
    return res;
}