react-game

.eslintrc.js

@@ -0,0 +1,25 @@
+module.exports = {
+  env: {
+    browser: true,
+    es6: true,
+  },
+  extends: ["eslint:recommended", "plugin:react/recommended"],
+  parser: "babel-eslint",
+  globals: {
+    Atomics: "readonly",
+    SharedArrayBuffer: "readonly",
+  },
+  parserOptions: {
+    ecmaVersion: 2018,
+    sourceType: "module",
+    ecmaFeatures: {
+      jsx: true,
+    },
+  },
+  rules: {
+    "react/prop-types": "off",
+    "react/jsx-uses-react": "error",
+    "react/jsx-uses-vars": "error",
+    "no-console": "off",
+  },
+};

package.json

@@ -0,0 +1,66 @@
+{
+  "name": "react-game",
+  "version": "1.0.0",
+  "description": "react-game",
+  "private": true,
+  "scripts": {
+    "dev": "webpack --mode development",
+    "prod": "webpack --mode production",
+    "start": "webpack serve --open"
+  },
+  "repository": {
+    "type": "git",
+    "url": "git+https://github.com/kli2m/react-game.git"
+  },
+  "author": "kli2m",
+  "license": "ISC",
+  "bugs": {
+    "url": "https://github.com/kli2m/react-game/issues"
+  },
+  "plugins": [
+    "react"
+  ],
+  "babel": {
+    "presets": [
+      "@babel/env",
+      "@babel/react"
+    ]
+  },
+  "homepage": "https://github.com/kli2m/react-game#readme",
+  "devDependencies": {
+    "@babel/core": "^7.12.17",
+    "@babel/preset-env": "^7.12.17",
+    "@babel/preset-react": "^7.12.13",
+    "babel-eslint": "^8.2.6",
+    "babel-loader": "^8.2.2",
+    "clean-webpack-plugin": "^3.0.0",
+    "copy-webpack-plugin": "^7.0.0",
+    "cross-env": "^7.0.3",
+    "css-loader": "^5.0.2",
+    "eslint": "^4.19.1",
+    "eslint-config-airbnb-base": "^14.2.1",
+    "eslint-loader": "^4.0.2",
+    "eslint-plugin-import": "^2.22.1",
+    "eslint-plugin-react": "^7.22.0",
+    "file-loader": "^6.2.0",
+    "html-loader": "^2.0.0",
+    "html-webpack-plugin": "^5.1.0",
+    "less-loader": "^8.0.0",
+    "mini-css-extract-plugin": "^1.3.8",
+    "sass": "^1.32.7",
+    "sass-loader": "^11.0.1",
+    "style-loader": "^2.0.0",
+    "webpack": "^5.23.0",
+    "webpack-cli": "^4.5.0",
+    "webpack-dev-server": "^3.11.2"
+  },
+  "dependencies": {
+    "antd": "^4.12.3",
+    "react": "^17.0.1",
+    "react-beautiful-dnd": "^13.0.0",
+    "react-dom": "^17.0.1",
+    "react-router-dom": "^5.2.0",
+    "react-webpack": "^0.4.1",
+    "redux": "^4.0.5"
+  }
+}

src/App.js

@@ -0,0 +1,151 @@
+import React, { useState } from "react";
+import {
+  Tooltip,
+  Switch,
+  Button,
+  Typography,
+  Form,
+  Progress,
+  Modal,
+  Collapse,
+  Space
+} from "antd";
+import "./App.scss";
+import WelcomForm from "./Components/WelcomeForm/WelcomForm";
+import ModalInstruction from "./Components/ModalNext/ModalInstruction"
+import Ru from "./language/Ru.json";
+import En from "./language/En.json";
+import imgGit from "./assets/img/github.png";
+
+const {info}=Modal
+
+const App = () => {
+  localStorage.getItem("statistics")
+    ? {}
+    : localStorage.setItem("statistics", JSON.stringify({}));
+
+  const [isStart, setIsStart] = useState(false);
+  const [language, setLanguage] = useState(Ru);
+
+  const { Text, Title } = Typography;
+  const { Panel } = Collapse;
+  const startGame = () => {
+    setIsStart(true);
+  };
+
+  const fullScreen = () => {
+    const elem = elem || document.documentElement;
+
+    if (
+      !document.fullscreenElement &&
+      !document.mozFullScreenElement &&
+      !document.webkitFullscreenElement &&
+      !document.msFullscreenElement
+    ) {
+      if (elem.requestFullscreen) {
+        elem.requestFullscreen();
+      } else if (elem.msRequestFullscreen) {
+        elem.msRequestFullscreen();
+      } else if (elem.mozRequestFullScreen) {
+        elem.mozRequestFullScreen();
+      } else if (elem.webkitRequestFullscreen) {
+        elem.webkitRequestFullscreen(Element.ALLOW_KEYBOARD_INPUT);
+      }
+    } else {
+      if (document.exitFullscreen) {
+        document.exitFullscreen();
+      } else if (document.msExitFullscreen) {
+        document.msExitFullscreen();
+      } else if (document.mozCancelFullScreen) {
+        document.mozCancelFullScreen();
+      } else if (document.webkitExitFullscreen) {
+        document.webkitExitFullscreen();
+      }
+    }
+  };
+  return (
+    <div className="letterSolver__wrapper">
+      <div className="letterSolver__wrapper-header">
+        <Tooltip
+          placement="bottom"
+          title={language.main_page_tooltip_title}
+          color="magenta"
+        >
+          <Switch
+            onChange={(isVal) => (isVal ? setLanguage(En) : setLanguage(Ru))}
+            checkedChildren="En"
+            unCheckedChildren="Ru"
+          />
+        </Tooltip>
+        <div
+          className="letterSolver__wrapper-header-btn_full_screen"
+          onClick={fullScreen}
+        >
+          F11
+        </div>
+      </div>
+
+      {isStart ? (
+        <WelcomForm language={language} />
+      ) : (
+        <div className="letterSolver__wrapper-start_game">
+          <Title level={1} className="letterSolver__start_game-title">
+            <Text strong>{language.main_page_title}</Text>
+          </Title>
+          <Title level={4} className="letterSolver__start_game-description">
+            <Text strong>{language.main_page_phrase}</Text>
+          </Title>
+
+          <Button
+            className="letterSolver__start_game-btn_instruction"
+            onClick={()=> ModalInstruction(language)}            
+          >
+           {language.main_page_collapse_panel_header}
+          </Button>
+
+          {/* <Collapse accordion bordered={false} ghost="true" forceRender="true">
+            <Modal.info header={language.main_page_collapse_panel_header}>
+              <p>{language.main_page_collapse_panel_text}</p>
+              <div>{language.main_page_collapse_panel_text_context}</div>
+            </Modal.info>
+          </Collapse> */}
+
+          <Button
+            className="letterSolver__start_game-btn"
+            onClick={startGame}
+            autoFocus
+          >
+            {language.main_page_btn_start}
+          </Button>
+        </div>
+      )}
+      <div className="letterSolver__wrapper-footer">
+        <div className="letterSolver__wrapper-footer-copyright footer_item">
+          <Title level={5} className="letterSolver__start_game-description">
+            <Text strong>&copy; kli2m 2021</Text>
+          </Title>
+        </div>
+        <div className="footer_item">
+          <a href="https://github.com/kli2m">
+            {" "}
+            <img
+              className="letterSolver__wrapper-footer-img_github"
+              src={imgGit}
+            ></img>
+          </a>
+        </div>
+        <div className="footer_item">
+          <a href="https://rs.school/js/">
+            {" "}
+            <img
+              className="letterSolver__wrapper-footer-img_rsschool"
+              src="https://rs.school/images/rs_school_js.svg"
+            ></img>
+          </a>
+        </div>
+      </div>
+    </div>
+  );
+};
+
+export default App;

src/App.scss

@@ -0,0 +1,83 @@
+*{
+    margin: 0;
+    padding: 0;   
+}
+
+@media screen and (max-width: 768px)  {
+    .letterSolver__wrapper-header-btn_full_screen{
+        display: none;
+    }
+    .letterSolver__start_game-description{
+        width: 80%;
+        font-size: 1em;
+    }
+}
+
+
+.letterSolver__wrapper {
+    height: 100vh;
+    width: 100%;
+    display: flex;
+    flex-direction: column;
+    justify-content: space-between;
+    align-items: center;
+    background-color: #a7eabd;
+}
+
+.letterSolver__wrapper-header {
+    width: 100%;
+    display: flex;
+    flex-direction: row;
+    justify-content: space-between;
+    align-items: center;
+    padding: 30px 50px 10px 100px;
+}
+
+.letterSolver__main {
+    width: inherit;
+    display: flex;
+    flex-direction: column;
+    justify-content: space-around;
+    align-items: center;
+}
+.letterSolver__start_game {
+    border: 4px solid blueviolet;
+    border-radius: 5px;
+    padding: 20px;
+}
+
+.letterSolver__wrapper-start_game {
+    display: flex;
+    flex-direction: column;
+    justify-content: space-between;
+    align-items: center;
+    height: 300px;
+}
+.letterSolver__wrapper-footer {
+    width: 100%;
+    display: flex;
+    flex-direction: row;
+    justify-content: space-evenly;
+    padding-bottom: 10px;
+}
+
+.letterSolver__wrapper-header-btn_full_screen {
+    position: absolute;
+    text-align: center;
+    left: 50%;
+    border: 1px solid darkgreen;
+    border-radius: 5px;
+    cursor: pointer;
+    user-select: none;
+    width: 45px;
+    height: 25px;
+    background-color: rgba(77, 255, 60, 0.75);
+    &:hover {
+        background-color: springgreen;
+    }
+}
+
+.footer_item {
+    width: 100px;
+    height: 50px;
+}

src/Components/AnswerBox/AnswerBox.js

@@ -0,0 +1,33 @@
+import React, { useState, useEffect, useRef } from "react";
+import {
+  Typography,
+} from "antd";
+import "./AnswerBox.scss";
+
+const AnswerBox = ({ currentWord, isCheck }) => {
+  const { Text, Title } = Typography;
+  return (
+    <div className="context_answer">
+      {isCheck ? (
+        <Title level={4} className="text_loading">
+          <Text type="secondary">
+            {" "}
+            <div className="context_answer-translate">
+              {currentWord.wordTranslate}
+            </div>{" "}
+          </Text>
+          <Text type="warning">
+            {" "}
+            <div className="context_answer-transcription">
+              {currentWord.transcription}
+            </div>{" "}
+          </Text>
+        </Title>
+      ) : (
+        <></>
+      )}
+    </div>
+  );
+};
+
+export default AnswerBox;

src/Components/AnswerBox/AnswerBox.scss

@@ -0,0 +1,13 @@
+.context_answer {
+    height: 50px;
+    user-select: none;
+    margin: 50px 0;
+}
+
+@media screen and (max-width: 768px) {  
+    .context_answer {
+
+        margin: 10px 0;
+    }
+
+}

src/Components/Cell/Cell.js

@@ -0,0 +1,18 @@
+import React from "react";
+
+import "./Cell.scss";
+
+const Cell = ({ valueCell, provided }) => {
+  return (
+    <div
+      className="cell"
+      ref={provided.innerRef}
+      {...provided.draggableProps}
+      {...provided.dragHandleProps}
+    >
+      {valueCell}
+    </div>
+  );
+};
+
+export default Cell;