React

by maxalmonte14

HTML

<div id="app"></div>

CSS

html {
    width: 100%
}

#app {
    width: 60%;
    margin: auto;
}

.Card {
    width: 75px;
    height: 125px;
    border: 1px solid lightgray;
    border-radius: 5px;
    background-color: white;
    display: inline-block;
    margin: 5px;
    padding: 5px 10px;
}

.Center {
    display: block;
    margin-left: auto;
    margin-right: auto;
    width: 50%;
    height: 50%;
}

.Paragraph {
    margin: 0px;
}

.Button {
    padding: 10px;
    font-weight: 600;
    color: white;
    background-color: #0652DD;
    border: none;
    border-radius: 2px;
    margin: 2px;
}

React

class Game extends React.Component {
    constructor(props) {
        super(props);

        this.defaultData = {
            cards: this.shuffle([
                {number: 'A', symbol: 'heart'},
                {number: 2, symbol: 'diamond'},
                {number: 3, symbol: 'ace'},
                {number: 4, symbol: 'clover'},
                {number: 5, symbol: 'heart'},
                {number: 6, symbol: 'diamond'},
                {number: 7, symbol: 'ace'},
                {number: 8, symbol: 'clover'},
                {number: 9, symbol: 'heart'},
                {number: 10, symbol: 'diamond'},
                {number: 'J', symbol: 'ace'},
                {number: 'Q', symbol: 'clover'},
                {number: 'K', symbol: 'heart'},
                {number: 'A', symbol: 'diamond'},
                {number: 2, symbol: 'ace'},
                {number: 3, symbol: 'clover'},
                {number: 4, symbol: 'heart'},
                {number: 5, symbol: 'diamond'},
                {number: 6, symbol: 'ace'},
                {number: 7, symbol: 'clover'},
                {number: 8, symbol: 'heart'},
            ]),
            lap: 0,
            started: false,
            ended: false,
            deck1: null,
            deck2: null,
            deck3: null
        };

        this.state = this.defaultData;
        this.handleStartGameClick = this.handleStartGameClick.bind(this);
        this.handleRestartGameClick = this.handleRestartGameClick.bind(this);
    }

    handleStartGameClick() {
        const shuffledArray = this.shuffle(this.state.cards);
        const chunkedArray = this.chunkArray(shuffledArray, 7);

        this.setState({
            cards: shuffledArray,
            started: true,
            deck1: chunkedArray[0],
            deck2: chunkedArray[1],
            deck3: chunkedArray[2],
            lap: 1
        });
    }

    handleRestartGameClick() {
        this.setState({
            lap: 0,
            started: false,
   ...