Lex-tp · Lex-tp · Feb 21, 2021 · Feb 21, 2021 · Feb 22, 2021 · Feb 23, 2021
diff --git a/.gitignore b/.gitignore
@@ -102,3 +102,27 @@ dist
 
 # TernJS port file
 .tern-port
+# See https://help.github.com/articles/ignoring-files/ for more about ignoring files.
+
+# dependencies
+/node_modules
+/.pnp
+.pnp.js
+
+# testing
+/coverage
+
+# production
+/build
+
+# misc
+.DS_Store
+.env.local
+.env.development.local
+.env.test.local
+.env.production.local
+.idea
+
+npm-debug.log*
+yarn-debug.log*
+yarn-error.log*
diff --git a/README.md b/README.md
@@ -1,2 +1,17 @@
-# react-game
-react-game
+# Memory game (react-game)
+![Логотип](https://i.ibb.co/23CZLc7/1.png)
+
+### [Демо](https://lex-tp-react-game.netlify.app/#/)
+### [Cсылка на Pull Request](https://github.com/Lex-tp/react-game/pull/1)
+### Memory game запускается на macOS, Windows и Linux.
+Для запуска игры необходимо установить все зависимости:
+
+    npm install
+
+Перед запуском приложения, необходимо запустить сервер: 
+
+    npm run server
+
+После запуска сервера, запускается приложение:
+
+    npm run start
diff --git a/package-lock.json b/package-lock.json
diff --git a/package.json b/package.json
@@ -0,0 +1,65 @@
+{
+  "name": "memory",
+  "version": "0.1.0",
+  "description": "Memory game",
+  "private": true,
+  "keywords": [
+    "react-game",
+    "memory game"
+  ],
+  "homepage": "https://lex-tp-react-game.netlify.app",
+  "repository": {
+    "type": "git",
+    "url": "git+https://github.com/Lex-tp/react-game.git"
+  },
+  "type": "module",
+  "author": "Denis Korotkevich <volk.denis98@gmail.com>",
+  "license": "ISC",
+  "dependencies": {
+    "@testing-library/jest-dom": "^5.11.4",
+    "@testing-library/react": "^11.1.0",
+    "@testing-library/user-event": "^12.1.10",
+    "@types/jest": "^26.0.15",
+    "@types/node": "^12.0.0",
+    "@types/react": "^17.0.0",
+    "@types/react-dom": "^17.0.0",
+    "@types/react-router-dom": "^5.1.7",
+    "express": "^4.17.1",
+    "node-sass": "^5.0.0",
+    "react": "^17.0.1",
+    "react-dom": "^17.0.1",
+    "react-router-dom": "^5.2.0",
+    "react-scripts": "^4.0.2",
+    "typescript": "^4.1.2",
+    "web-vitals": "^1.0.1"
+  },
+  "scripts": {
+    "start": "BROWSER='google-chrome-stable' react-scripts start",
+    "build": "react-scripts build",
+    "test": "react-scripts test",
+    "eject": "react-scripts eject",
+    "server": "node server/server.js"
+  },
+  "eslintConfig": {
+    "extends": [
+      "react-app",
+      "react-app/jest"
+    ]
+  },
+  "browserslist": {
+    "production": [
+      ">0.2%",
+      "not dead",
+      "not op_mini all"
+    ],
+    "development": [
+      "last 1 chrome version",
+      "last 1 firefox version",
+      "last 1 safari version"
+    ]
+  },
+  "proxy": "https://express-react-game.herokuapp.com/",
+  "devDependencies": {
+    "normalize.css": "^8.0.1"
+  }
+}
diff --git a/public/.htaccess b/public/.htaccess
@@ -0,0 +1,4 @@
+Options -MultiViews
+RewriteEngine On
+RewriteCond %{REQUEST_FILENAME} !-f
+RewriteRule ^ index.html [QSA,L]
diff --git a/public/index.html b/public/index.html
@@ -0,0 +1,13 @@
+<!Doctype html>
+<html lang="en">
+<head>
+    <meta charset="UTF-8">
+    <meta name="viewport"
+          content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
+    <meta http-equiv="X-UA-Compatible" content="ie=edge">
+    <title>Memory</title>
+</head>
+<body>
+<div id="root"></div>
+</body>
+</html>
diff --git a/public/manifest.json b/public/manifest.json
@@ -0,0 +1,3 @@
+{
+  "start_url" : "."
+}
diff --git a/server/level-controller.js b/server/level-controller.js
@@ -0,0 +1,26 @@
+function fillWithCards(arrayOfCards, field) {
+    let indexCard = -1;
+    const arrayOfDuplicateCards = shuffleCards(arrayOfCards.concat(arrayOfCards));
+    field.forEach((obj) => {
+        obj.line.forEach((cardOfField) => {
+            indexCard++;
+            const card = arrayOfDuplicateCards.shift();
+            cardOfField.frontImage = card.src;
+            cardOfField.titleCard = card.title;
+            cardOfField.index = indexCard;
+            cardOfField.shortcut = card.shortcut;
+            cardOfField.isOpen = card.isOpen;
+        });
+    });
+    return field;
+}
+
+function shuffleCards(arrayOfCards) {
+    for (let i = arrayOfCards.length - 1; i > 0; i--) {
+        let j = Math.floor(Math.random() * (i + 1));
+        [arrayOfCards[i], arrayOfCards[j]] = [arrayOfCards[j], arrayOfCards[i]];
+    }
+    return arrayOfCards;
+}
+
+export {fillWithCards};
diff --git a/server/level/images/audio-cable.png b/server/level/images/audio-cable.png
diff --git a/server/level/images/cd.png b/server/level/images/cd.png
diff --git a/server/level/images/imac.png b/server/level/images/imac.png
diff --git a/server/level/images/keyboard.png b/server/level/images/keyboard.png
diff --git a/server/level/images/laptop.png b/server/level/images/laptop.png
diff --git a/server/level/images/motherboard.png b/server/level/images/motherboard.png
diff --git a/server/level/images/mouse.png b/server/level/images/mouse.png
diff --git a/server/level/images/processor.png b/server/level/images/processor.png
diff --git a/server/level/images/sd.png b/server/level/images/sd.png
diff --git a/server/level/images/ssd.png b/server/level/images/ssd.png
diff --git a/server/level/images/usb.png b/server/level/images/usb.png
diff --git a/server/level/images/video-card.png b/server/level/images/video-card.png
diff --git a/server/level/images/webcam.png b/server/level/images/webcam.png
diff --git a/server/level/index.js b/server/level/index.js
@@ -0,0 +1,62 @@
+import  {fillWithCards} from '../level-controller.js';
+
+const arrayOfCards = [
+    {shortcut: 'cd', title: 'CD', src: '../App/images/cd.png', isOpen: true},
+    {shortcut: 'key', title: 'Keyboard', src: './level/images/keyboard.png', isOpen: true},
+    {shortcut: 'mot', title: 'Motherboard', src: './level/images/motherboard.png', isOpen: true},
+    {shortcut: 'mou', title: 'Computer mouse', src: './level/images/mouse.png', isOpen: true},
+    {shortcut: 'sd', title: 'SD', src: './level/images/sd.png', isOpen: true},
+    {shortcut: 'ssd', title: 'SSD', src: './level/images/ssd.png', isOpen: true},
+    {shortcut: 'usb', title: 'USB', src: './level/images/usb.png', isOpen: true},
+    {shortcut: 'webcam', title: 'Webcam', src: './level/images/webcam.png', isOpen: true},
+    {shortcut: 'pr', title: 'Processor', src: './level/images/processor.png', isOpen: true},
+    {shortcut: 'au', title: 'Audio-cable', src: './level//images/audio-cable.png', isOpen: true},
+    {shortcut: 'im', title: 'Imac', src: './level/images/imac.png', isOpen: true},
+    {shortcut: 'la', title: 'Laptop', src: './level/images/laptop.png', isOpen: true},
+    {shortcut: 'vi', title: 'Video-card', src: './level/images/video-card.png', isOpen: true},
+];
+
+
+const field = [
+    {
+        line: [
+            {},
+            {},
+            {},
+            {},
+            {},
+            {},
+            {},
+            {}
+        ]
+    },
+    {
+        line: [
+            {},
+            {},
+            {},
+            {},
+            {},
+            {},
+            {},
+            {},
+            {},
+            {}
+        ]
+    },
+    {
+        line: [
+            {},
+            {},
+            {},
+            {},
+            {},
+            {},
+            {},
+            {}
+        ]
+    }
+];
+
+const newField =(req,res)=> { res.json(fillWithCards(arrayOfCards, field));}
+export default newField;
diff --git a/server/server.js b/server/server.js
@@ -0,0 +1,19 @@
+import level from './level/index.js';
+
+import express from "express";
+
+
+const app = express();
+
+app.get('/', (req, res) =>{
+    res.json([]);
+});
+
+app.get('/game',level);
+
+app.listen(3002, (error) => {
+    if (error) {
+        throw Error(error);
+    }
+    console.log('Server started');
+});
diff --git a/src/components/App/App.scss b/src/components/App/App.scss
@@ -0,0 +1,53 @@
+@import "../../styles/fonts";
+@import "../../styles/color";
+
+.app {
+  position: relative;
+  font-family: Roboto, sans-serif;
+  font-size: 10px;
+  width: 100vw;
+  height: 100vh;
+  background-color: $aquamarine-color;
+}
+
+.footer {
+  position: absolute;
+  bottom: 0;
+  left: 0;
+  display: flex;
+  flex-direction: row;
+  align-items: center;
+  justify-content: space-between;
+  height: 50px;
+  width: 100%;
+  padding: 0 20px;
+  box-sizing: border-box;
+
+  &__item {
+    display: flex;
+    flex-direction: row;
+    align-items: center;
+
+    a{
+      font-size: 1.4rem;
+      font-weight: 700;
+      text-decoration: none;
+      color: black;
+    }
+
+    &__img {
+      width: 40px;
+      height: 40px;
+    }
+  }
+
+  &__rs {
+    width: 100px;
+    height: 40px;
+  }
+
+  &__year {
+    font-size: 1.4rem;
+    font-weight: 700;
+  }
+}
diff --git a/src/components/App/App.tsx b/src/components/App/App.tsx
@@ -0,0 +1,50 @@
+import React, {Component} from 'react';
+import CardField from "../CardField/CardField";
+import {HashRouter, Route, Switch} from 'react-router-dom';
+
+import 'normalize.css'
+import './App.scss'
+import Menu from "../Menu/Menu";
+
+import github from './images/github.png';
+import rs from './images/rs_school.svg'
+
+export default class App extends Component<{}, {}> {
+
+    constructor(props: {}) {
+        super(props);
+        this.onClickButton = this.onClickButton.bind(this);
+    }
+
+    onClickButton() {
+        localStorage.removeItem('cards');
+        localStorage.removeItem('score');
+        localStorage.removeItem('success');
+        localStorage.removeItem('count');
+    }
+
+    render() {
+        return (
+            <HashRouter>
+                <div className='app'>
+                    <Switch>
+                        <Route path='/game' component={() => <CardField/>}/>
+                        <Route exact path='/' render={() => <Menu onClickButton={()=>{this.onClickButton()}}/>}/>
+                    </Switch>
+                    <div className='footer'>
+                        <div className='footer__item'>
+                            <img className='footer__item__img' src={github} alt='github'/>
+                            <a href='https://github.com/Lex-tp'>Lex-tp</a>
+                        </div>
+                        <div className='footer__item'>
+                            <span className='footer__year'>2021</span>
+                        </div>
+                        <div className='footer__item'>
+                            <a href='https://rs.school/react/'><img className='footer__rs' src={rs} alt='rsSchool'/></a>
+                        </div>
+                    </div>
+                </div>
+            </HashRouter>
+        );
+    }
+}
diff --git a/src/components/App/images/github.png b/src/components/App/images/github.png
diff --git a/src/components/App/images/rs_school.svg b/src/components/App/images/rs_school.svg