<file_sep>import './App.css';
import Header from "./components/Header";
import Main from "./components/Main";
import {BrowserRouter as Router, Route, Switch} from "react-router-dom";
import { Helmet } from "react-helmet";

function App() {
  return (
    <div className="App">
      <Router>
        <Switch>
          <Route path='/'>
            <Helmet>
              <title>Card matching game</title>
            </Helmet>
            <Header />
            <Main />
          </Route>
        </Switch>
      </Router>

    </div>
  );
}

export default App;
<file_sep># sx-homework
<file_sep>import React, {useEffect, useState} from "react";
import styled from "styled-components";
import Card from "./Card";
import {images} from "../data/cards";

const GameArea = () => {

  const [cards, setCards] = useState([]);
  const [openCards, setOpenCards] = useState([]);

  const duplicateImages = () => {
    setCards(images.concat(images));
  }

  useEffect(() => {
    duplicateImages();
  }, []);

  return(
    <Container>
      {
        cards
          .sort(() => Math.random() - 0.5)
          .map((card, index) => (
            <Card
              key={index}
              card={card}
            />
          ))
      }
    </Container>
  )
}

export default GameArea;

const Container = styled.div`
  width: 50%;
  display: flex;
  flex-wrap: wrap;
  row-gap: 10px;
  column-gap: 10px;
  align-items: center;
  justify-content: space-between;
`
<file_sep>import React from "react";
import styled from "styled-components";
import Display from "./Display";
import GameArea from "./GameArea";

const Main = () => {

  return(
    <Container>
      <Display />
      <GameArea />
    </Container>
  )
}

export default Main;

const Container = styled.div`
  display: flex;
  flex-direction: column;
  align-items: center;
`
<file_sep>import React from "react";
import styled from "styled-components";
import { useHistory } from 'react-router-dom';

const Header = () => {

  const history = useHistory();

  return(
    <Container>
      <Logo src={require(`../images/splendex-logo.svg`).default} onClick={() => {history.push('/')}} />
    </Container>
  )
}

export default Header;

const Container = styled.div`
  height: 60px;
  width: 100%;
  background: black;
  display: flex;
  align-items: center;
`

const Logo = styled.img`
  height: 50px;
  background: transparent;
  margin-left: 10px;
  cursor: pointer;
`

const NewGame = styled.div`
  background: red;
  color: white;
  border: 2px solid black;
  border-radius: 4px;
  height: 40px;
  display: flex;
  justify-content: center;
  align-items: center;
  opacity: 0.85;
  text-transform: uppercase;
  cursor: pointer;
  padding: 2px 8px;
  font-weight: 600;
`
<file_sep>import angular from '../images/angular.png';
import d3 from '../images/d3.png';
import jenkins from '../images/jenkins.png';
import postcss from '../images/postcss.png';
import react from '../images/react.png';
import redux from '../images/redux.png';
import sass from '../images/sass.png';
import splendex from '../images/splendex.png';
import ts from '../images/ts.png';
import webpack from '../images/webpack.png';

export const images = [
  {
    name: "angular",
    pic: angular,
    isFlipped: false
  },
  {
    name: "d3",
    pic: d3,
    isFlipped: false
  },
  {
    name: "jenkins",
    pic: jenkins,
    isFlipped: false
  },
  {
    name: "postcss",
    pic: postcss,
    isFlipped: false
  },
  {
    name: "react",
    pic: react,
    isFlipped: false
  },
  {
    name: "redux",
    pic: redux,
    isFlipped: false
  },
  {
    name: "sass",
    pic: sass,
    isFlipped: false
  },
  {
    name: "splendex",
    pic: splendex,
    isFlipped: false
  },
  {
    name: "ts",
    pic: ts,
    isFlipped: false
  },
  {
    name: "webpack",
    pic: webpack,
    isFlipped: false
  },
]

<file_sep>import React from "react";
import styled from "styled-components";
import { useSelector, useDispatch } from "react-redux";

const Display = () => {

  const dispatch = useDispatch();

  const tries = useSelector(state => state.displayReducer.tries);
  const best = useSelector(state => state.displayReducer.best);

  const restart = () => {
    return dispatch({type: 'RESTART'});
  }

  return(
    <Container>
      <CurrentTries>Current tries: {tries}</CurrentTries>
      <Best>Best: {best}</Best>
      <Restart onClick={restart}>RESTART</Restart>
    </Container>
  )
}

export default Display;

const Container = styled.div`
  margin-top: 10px;
  margin-bottom: 10px;
  width: 50%;
  display: flex;
  justify-content: space-between;
  align-items: center;
  font-size: 20px;
`

const CurrentTries = styled.p`
  
`

const Best = styled.p`
  
`

const Restart = styled.div`
  border: 2px solid black;
  border-radius: 4px;
  height: 40px;
  display: flex;
  justify-content: center;
  align-items: center;
  opacity: 0.85;
  text-transform: uppercase;
  cursor: pointer;
  padding: 2px 8px;
  font-weight: 600;
`
