├── .babelrc ├── .gitignor.txt ├── dist ├── bundle.js ├── css │ └── styles.css └── index.html ├── package-lock.json ├── package.json ├── src ├── .eslintrc ├── eslintignore.txt ├── findTypeFigure.js ├── getRandomColor.js ├── getRandomNumber.js └── index.js └── webpack.config.js /.babelrc: -------------------------------------------------------------------------------- 1 | { 2 | "presets": [ 3 | "@babel/preset-env", 4 | "@babel/preset-react" 5 | ] 6 | } -------------------------------------------------------------------------------- /.gitignor.txt: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/Slamdunkjs/Lesson18/2944a10556aedf02b79e400bf273196e88277631/.gitignor.txt -------------------------------------------------------------------------------- /dist/bundle.js: -------------------------------------------------------------------------------- 1 | /******/ (function(modules) { // webpackBootstrap 2 | /******/ // The module cache 3 | /******/ var installedModules = {}; 4 | /******/ 5 | /******/ // The require function 6 | /******/ function __webpack_require__(moduleId) { 7 | /******/ 8 | /******/ // Check if module is in cache 9 | /******/ if(installedModules[moduleId]) { 10 | /******/ return installedModules[moduleId].exports; 11 | /******/ } 12 | /******/ // Create a new module (and put it into the cache) 13 | /******/ var module = installedModules[moduleId] = { 14 | /******/ i: moduleId, 15 | /******/ l: false, 16 | /******/ exports: {} 17 | /******/ }; 18 | /******/ 19 | /******/ // Execute the module function 20 | /******/ modules[moduleId].call(module.exports, module, module.exports, __webpack_require__); 21 | /******/ 22 | /******/ // Flag the module as loaded 23 | /******/ module.l = true; 24 | /******/ 25 | /******/ // Return the exports of the module 26 | /******/ return module.exports; 27 | /******/ } 28 | /******/ 29 | /******/ 30 | /******/ // expose the modules object (__webpack_modules__) 31 | /******/ __webpack_require__.m = modules; 32 | /******/ 33 | /******/ // expose the module cache 34 | /******/ __webpack_require__.c = installedModules; 35 | /******/ 36 | /******/ // define getter function for harmony exports 37 | /******/ __webpack_require__.d = function(exports, name, getter) { 38 | /******/ if(!__webpack_require__.o(exports, name)) { 39 | /******/ Object.defineProperty(exports, name, { enumerable: true, get: getter }); 40 | /******/ } 41 | /******/ }; 42 | /******/ 43 | /******/ // define __esModule on exports 44 | /******/ __webpack_require__.r = function(exports) { 45 | /******/ if(typeof Symbol !== 'undefined' && Symbol.toStringTag) { 46 | /******/ Object.defineProperty(exports, Symbol.toStringTag, { value: 'Module' }); 47 | /******/ } 48 | /******/ Object.defineProperty(exports, '__esModule', { value: true }); 49 | /******/ }; 50 | /******/ 51 | /******/ // create a fake namespace object 52 | /******/ // mode & 1: value is a module id, require it 53 | /******/ // mode & 2: merge all properties of value into the ns 54 | /******/ // mode & 4: return value when already ns object 55 | /******/ // mode & 8|1: behave like require 56 | /******/ __webpack_require__.t = function(value, mode) { 57 | /******/ if(mode & 1) value = __webpack_require__(value); 58 | /******/ if(mode & 8) return value; 59 | /******/ if((mode & 4) && typeof value === 'object' && value && value.__esModule) return value; 60 | /******/ var ns = Object.create(null); 61 | /******/ __webpack_require__.r(ns); 62 | /******/ Object.defineProperty(ns, 'default', { enumerable: true, value: value }); 63 | /******/ if(mode & 2 && typeof value != 'string') for(var key in value) __webpack_require__.d(ns, key, function(key) { return value[key]; }.bind(null, key)); 64 | /******/ return ns; 65 | /******/ }; 66 | /******/ 67 | /******/ // getDefaultExport function for compatibility with non-harmony modules 68 | /******/ __webpack_require__.n = function(module) { 69 | /******/ var getter = module && module.__esModule ? 70 | /******/ function getDefault() { return module['default']; } : 71 | /******/ function getModuleExports() { return module; }; 72 | /******/ __webpack_require__.d(getter, 'a', getter); 73 | /******/ return getter; 74 | /******/ }; 75 | /******/ 76 | /******/ // Object.prototype.hasOwnProperty.call 77 | /******/ __webpack_require__.o = function(object, property) { return Object.prototype.hasOwnProperty.call(object, property); }; 78 | /******/ 79 | /******/ // __webpack_public_path__ 80 | /******/ __webpack_require__.p = ""; 81 | /******/ 82 | /******/ 83 | /******/ // Load entry module and return exports 84 | /******/ return __webpack_require__(__webpack_require__.s = "./src/index.js"); 85 | /******/ }) 86 | /************************************************************************/ 87 | /******/ ({ 88 | 89 | /***/ "./src/index.js": 90 | /*!**********************!*\ 91 | !*** ./src/index.js ***! 92 | \**********************/ 93 | /*! no static exports found */ 94 | /***/ (function(module, exports) { 95 | 96 | eval("console.log(10238091238);\n\n//# sourceURL=webpack:///./src/index.js?"); 97 | 98 | /***/ }) 99 | 100 | /******/ }); -------------------------------------------------------------------------------- /dist/css/styles.css: -------------------------------------------------------------------------------- 1 | .square { 2 | width: 0; 3 | height: 0; 4 | /* border: 30px solid #000; */ 5 | border-width: 30px; 6 | border-style: solid; 7 | border-color: red; 8 | position: absolute; 9 | } 10 | 11 | .circle{ 12 | width: 0; 13 | height: 0; 14 | /* border: 30px solid #000; */ 15 | border-width: 30px; 16 | border-style: solid; 17 | border-radius: 50%; 18 | border-color: red; 19 | position: absolute; 20 | } 21 | 22 | .rhombus{ 23 | width: 0; 24 | height: 0; 25 | /* border: 30px solid #000; */ 26 | border-width: 30px; 27 | border-style: solid; 28 | border-color: red; 29 | transform: rotate(45deg); 30 | position: absolute; 31 | } 32 | 33 | .rhombusText{ 34 | transform: rotate(-45deg); 35 | } 36 | 37 | .parallelogram{ 38 | width: 0; 39 | height: 0; 40 | /* border: 30px solid #000; */ 41 | border-width: 30px; 42 | border-style: solid; 43 | border-color: red; 44 | transform: skew(-30deg); 45 | position: absolute; 46 | } 47 | 48 | .parallelogramText{ 49 | transform: skew(30deg); 50 | } 51 | 52 | 53 | -------------------------------------------------------------------------------- /dist/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | HW18 8 | 9 | 10 | 11 |
12 | 13 | 14 |
15 |
16 | 24 | 25 | 26 | -------------------------------------------------------------------------------- /package.json: -------------------------------------------------------------------------------- 1 | { 2 | "name": "lesson13", 3 | "version": "1.0.0", 4 | "description": "", 5 | "main": "test.js", 6 | "scripts": { 7 | "start": "webpack-dev-server --debug --watch --config webpack.config.js", 8 | "eslint": "eslint \"**/*.js\"" 9 | }, 10 | "keywords": [], 11 | "author": "", 12 | "license": "ISC", 13 | "dependencies": { 14 | "@babel/core": "^7.5.5", 15 | "@babel/preset-env": "^7.5.5", 16 | "@babel/preset-react": "^7.0.0", 17 | "axios": "^0.19.0", 18 | "babel-loader": "^8.0.6", 19 | "eslint": "^6.1.0", 20 | "eslint-config-airbnb": "^18.0.1", 21 | "eslint-plugin-import": "^2.18.2", 22 | "eslint-plugin-jsx-a11y": "^6.2.3", 23 | "eslint-plugin-react": "^7.14.3", 24 | "eslint-plugin-react-hooks": "^1.7.0", 25 | "moment": "^2.24.0", 26 | "react": "^16.8.6", 27 | "react-dom": "^16.8.6", 28 | "webpack": "^4.37.0", 29 | "webpack-cli": "^3.3.6", 30 | "webpack-dev-server": "^3.7.2" 31 | } 32 | } 33 | -------------------------------------------------------------------------------- /src/.eslintrc: -------------------------------------------------------------------------------- 1 | { 2 | "env": { 3 | "browser": true, 4 | "node": true 5 | }, 6 | "extends": "airbnb", 7 | "rules": { 8 | "func-names": [ 9 | "error", 10 | "never" 11 | ], 12 | "comma-dangle": [ 13 | "error", 14 | "never" 15 | ], 16 | "no-trailing-spaces": [ 17 | "error", 18 | { 19 | "skipBlankLines": true 20 | } 21 | ], 22 | "no-use-before-define": [ 23 | "error", 24 | { 25 | "functions": false, 26 | "classes": true 27 | } 28 | ], 29 | "arrow-parens": [ 30 | "error", 31 | "as-needed" 32 | ] 33 | } 34 | } -------------------------------------------------------------------------------- /src/eslintignore.txt: -------------------------------------------------------------------------------- 1 | /build/** 2 | /dist/** 3 | /node_modules/** -------------------------------------------------------------------------------- /src/findTypeFigure.js: -------------------------------------------------------------------------------- 1 | const widtt = window.innerWidth; 2 | const height = window.innerHeight; 3 | 4 | export default function findTypeFigure(pageX,pageY){ 5 | if(pageY <= height/2 && pageX <= widtt/2){ 6 | return 'square' 7 | } else if (pageY <= height/2 && pageX > widtt/2){ 8 | return 'circle' 9 | } else if (pageY > height/2 && pageX <= widtt/2){ 10 | return 'rhombus' 11 | } return 'parallelogram' 12 | } -------------------------------------------------------------------------------- /src/getRandomColor.js: -------------------------------------------------------------------------------- 1 | import getRandomNumber from './getRandomNumber' 2 | 3 | export default function getRandomColor (min,max) { 4 | var numbers = []; 5 | for (var i = 0; i < 3; i++){ 6 | var a = (getRandomNumber(0,256)) 7 | numbers.push(a) 8 | } 9 | return `rgb(${numbers[0]},${numbers[1]},${numbers[2]})` 10 | } 11 | 12 | 13 | -------------------------------------------------------------------------------- /src/getRandomNumber.js: -------------------------------------------------------------------------------- 1 | export default function getRandomNumber(min,max){ 2 | return Math.round(Math.random()*(max-min)) 3 | } -------------------------------------------------------------------------------- /src/index.js: -------------------------------------------------------------------------------- 1 | var board = document.getElementById('board'); 2 | var button = document.getElementById('button') 3 | var buttonSecond = document.getElementById('buttonSecond') 4 | var figuresArr = []; 5 | 6 | import getRandomColor from './getRandomColor'; 7 | import getRandomNumber from './getRandomNumber'; 8 | import findTypeFigure from './findTypeFigure'; 9 | 10 | const widtt = window.innerWidth; 11 | const height = window.innerHeight; 12 | 13 | if(localStorage.getItem('figures')){ 14 | figuresArr = JSON.parse(localStorage.getItem('figures')) 15 | } 16 | 17 | function Figure(x,y,figure){ 18 | this.x = x; 19 | this.y = y; 20 | this.color = getRandomColor(0,256); 21 | this.type = figure; 22 | this.colorClub = false; 23 | } 24 | 25 | var deltaX; 26 | var deltaY; 27 | var dragFigure; 28 | var dragObj; 29 | 30 | window.onclick = function (e){ 31 | figuresArr.push(new Figure(e.pageX,e.pageY,findTypeFigure(e.pageX,e.pageY))) 32 | localStorage.setItem('figures',JSON.stringify(figuresArr)); 33 | render() 34 | } 35 | 36 | function render(){ 37 | board.innerHTML = ''; 38 | figuresArr.map(function(figure,index){ 39 | var newFigure = createOneFigure(figure,index); 40 | 41 | newFigure.onclick = function(e){ 42 | e.stopPropagation() 43 | } 44 | 45 | newFigure.onmousedown = function(){ 46 | window.addEventListener('mousemove', stickToMouse); 47 | deltaX = e.pageX - newFigure.offsetLeft; 48 | deltaY = e.pageY - newFigure.offsetTop; 49 | dragFigure = newFigure; 50 | dragObj = figure; 51 | } 52 | 53 | newFigure.onmouseup = function(){ 54 | window.removeEventListener('mousemove', stickToMouse); 55 | localStorage.setItem('figures',JSON.stringify(figuresArr)); 56 | } 57 | 58 | 59 | // браузер зависает при двойном щелчке по фигуре 60 | if (figure.colorClub === true){ 61 | setInterval(colorClub,1000,figure); 62 | } 63 | // 64 | newFigure.ondblclick = function(){ 65 | figure.colorClub = !figure.colorClub; 66 | } 67 | 68 | board.appendChild(newFigure) 69 | }) 70 | } 71 | // 72 | function colorClub(figure){ 73 | figure.color = getRandomColor(0,256); 74 | localStorage.setItem('figures',JSON.stringify(figuresArr)); 75 | render() 76 | } 77 | 78 | function createOneFigure(figure,index){ 79 | let tagDiv = document.createElement('div'); 80 | tagDiv.classList.add(figure.type); 81 | tagDiv.style.borderColor = figure.color; 82 | tagDiv.style.left = figure.x + 'px'; 83 | tagDiv.style.top = figure.y + 'px'; 84 | var tagDivText = document.createElement('div'); 85 | tagDivText.textContent = 1 + index; 86 | if (figure.type === 'rhombus'){ 87 | tagDivText.classList.add('rhombusText') 88 | } else if(figure.type === 'parallelogram') { 89 | tagDivText.classList.add('parallelogramText') 90 | }; 91 | tagDiv.appendChild(tagDivText) 92 | return tagDiv; 93 | } 94 | ; 95 | function stickToMouse(e){ 96 | dragFigure.style.left = (e.pageX - deltaX) + 'px'; 97 | dragFigure.style.top = (e.pageY - deltaY) + 'px'; 98 | 99 | dragObj.y = e.pageY - deltaY; 100 | dragObj.x = e.pageX - deltaX; 101 | } 102 | 103 | button.onclick = function(e){ 104 | e.stopPropagation() 105 | figuresArr=[]; 106 | render() 107 | } 108 | 109 | let timerId; 110 | var autoShootDefault = false; 111 | 112 | buttonSecond.onclick = function(e){ 113 | e.stopPropagation() 114 | autoShootDefault = !autoShootDefault; 115 | if (autoShootDefault === true){ 116 | timerId = setInterval(autoShoot,100); 117 | 118 | } else { 119 | clearInterval(timerId) 120 | } 121 | 122 | localStorage.setItem('figures',JSON.stringify(figuresArr)); 123 | render(); 124 | } 125 | 126 | function autoShoot(){ 127 | var randomX = getRandomNumber(0,widtt); 128 | var randomY = getRandomNumber(0,height); 129 | figuresArr.push(new Figure(randomX,randomY,findTypeFigure(randomX,randomY))); // не получается сделать 130 | // новый модуль, так как конструктор new Figure находится здесь 131 | render(); 132 | } 133 | 134 | render() -------------------------------------------------------------------------------- /webpack.config.js: -------------------------------------------------------------------------------- 1 | var path = require('path'); 2 | 3 | module.exports = { 4 | mode: 'development', 5 | entry: "./src/index.js", 6 | output: { 7 | // dist/ - by default 8 | filename: "./bundle.js" 9 | }, 10 | module: { 11 | rules: [ 12 | { 13 | test: /.\js$/, 14 | exclude: /node_modules/, 15 | use: [ 16 | { loader: "babel-loader" } 17 | ] 18 | } 19 | ] 20 | }, 21 | devServer: { 22 | contentBase: path.join(__dirname, "dist"), 23 | port: 3000, 24 | open: true, 25 | historyApiFallback: true 26 | }, 27 | watch: true 28 | } --------------------------------------------------------------------------------