blackjack.js

import React from "react";
import { Helmet } from "react-helmet";
import { uuid } from "uuidv4";
import "./styles.css";
import "bootstrap/dist/css/bootstrap.min.css";

import TitleBar from "./components/titleBar";
import GameArea from "./components/gameArea";

export default class App extends React.Component {
  constructor(props) {
    super(props);
    this.state = {
      id: uuid(),
      isGameStart: false
    };
  }

  gameReset = () => {
    this.setState(() => ({ id: uuid() }));
  };

  backToMenu = () => {
    this.setState(() => ({ isGameStart: false }));
  };

  startGame = () => {
    this.setState(() => ({ isGameStart: true }));
  };

  render() {
    return (
      <div>
        <TitleBar />
        <div className="container" style={appStyle()}>
          <Helmet>
            <style>
              {`body {
                  background-color: #1e1e1e;
                  color: #fff;
                }`}
            </style>
          </Helmet>
          {this.state.isGameStart ? (
            <GameArea
              key={this.state.id}
              gameReset={this.gameReset}
              giveUp={this.backToMenu}
            />
          ) : (
            <div style={divStyle()}>
              <div
                style={{
                  display: "flex",
                  flexDirection: "column",
                  flexGrow: "1",
                  justifyContent: "center",
                  alignItems: "center"
                }}
              >
                <img
                  src="./images/blackjack.jpg"
                  style={imgStyle()}
                  alt="BlackJack Game"
                  onClick={this.startGame}
                />
                <h1>Tap to start</h1>
              </div>
            </div>
          )}
        </div>
      </div>
    );
  }
}

const appStyle = () => {
  return {
    backgroundColor: "#1E1E1E"
  };
};

const divStyle = () => {
  return {
    height: "100vh",
    display: "flex",
    flexGrow: "1",
    flexDirection: "column",
    alignItems: "center",
    justifyContent: "center"
  };
};

const imgStyle = () => {
  return {
    width: "100%"
  };
};