DimaDP · DimaDP · Sep 21, 2020 · Sep 21, 2020 · Aug 13, 2021
diff --git a/.parcel-cache/data.mdb b/.parcel-cache/data.mdb
diff --git a/.parcel-cache/lock.mdb b/.parcel-cache/lock.mdb
diff --git a/README.md b/README.md
@@ -1 +1,7 @@
-[DEMO](https://dimadp.github.io/fe-template/)
+# JS Developer Test
+   ### Example of Drag’n’Drop using mouse events.
+## Project setup
+  - ### npm i
+  - ###  npm start
+  - ### npm run build
+# [DEMO LINK](https://dimadp.github.io/JS-soccer/)
diff --git a/package-lock.json b/package-lock.json
diff --git a/package.json b/package.json
@@ -30,12 +30,7 @@
     "jest": "^26.0.1",
     "node-sass": "^4.14.1",
     "parcel": "^1.12.4",
+    "sass": "^1.26.10",
     "stylelint": "^13.6.1"
-  },
-  "husky": {
-    "hooks": {
-      "pre-commit": "npm run lint",
-      "pre-push": "npm run lint"
-    }
   }
 }
diff --git a/src/helpers.js b/src/helpers.js
@@ -0,0 +1,33 @@
+export const randomInteger = (min, max) => {
+  const rand = min + Math.random() * (max - min);
+
+  return Math.floor(rand);
+};
+
+export const getCoords = (elem) => {
+  const box = elem.getBoundingClientRect();
+
+  return {
+    // eslint-disable-next-line no-undef
+    top: box.top + pageYOffset,
+    // eslint-disable-next-line no-undef
+    left: box.left + pageXOffset,
+  };
+};
+
+export const disableSelection = (target) => {
+  if (typeof target.onselectstart !== 'undefined') {
+    target.onselectstart = function() {
+      return false;
+    };
+  } else {
+    if (typeof target.style.MozUserSelect !== 'undefined') {
+      target.style.MozUserSelect = 'none';
+    } else {
+      target.onmousedown = function() {
+        return false;
+      };
+      target.style.cursor = 'default';
+    }
+  }
+};
diff --git a/src/index.html b/src/index.html
@@ -1,13 +1,38 @@
 <!DOCTYPE html>
 <html lang="en">
-  <head>
-    <meta charset="UTF-8">
-    <meta name="viewport" content="width=device-width, initial-scale=1.0">
-    <title>FE Template</title>
-    <link rel="stylesheet" href="style.scss">
-    <script defer src="main.js"></script>
-  </head>
+    <head>
+        <meta charset="UTF-8" />
+        <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+        <title>JS Soccer</title>
+        <link rel="stylesheet" href="./styles/style.scss" />
+        
+    </head>
   <body>
-    <h1>FE Template</h1>
+      <div class="info">
+      <div class="info__goal info__goal--left">
+        <span>In the left goal</span>
+        <ul class="info__list">
+          <li class="info__item"></li>
+        </ul>
+      </div>
+      <div class="info__score score">
+        <span>SCORE</span>
+        <span class="score__value">0:0</span>
+      </div>
+      <div class="info__goal info__goal--right">
+        <span>In the right goal</span>
+        <ul class="info__list">
+          <li class="info__item"></li>
+        </ul>
+      </div>
+    </div>
+    <div class="field">
+      <div class="field__line"></div>
+      <div class="field__circle--small"></div>
+      <div class="field__circle--big"></div>
+      <div class="field__gate field__gate--left"></div>
+      <div class="field__gate field__gate--right"></div>
+    </div>
+    <script defer src="main.js"></script>
   </body>
-</html>
+</html>
diff --git a/src/main.js b/src/main.js
@@ -0,0 +1,147 @@
+import { randomInteger, getCoords, disableSelection } from './helpers';
+
+const field = document.body.querySelector('.field');
+const score = document.querySelector('.score__value');
+const leftGoalsList = document.querySelector('.info__goal--left .info__list');
+const rightGoalsList = document.querySelector('.info__goal--right .info__list');
+const fieldW = 1200;
+const fieldH = 640;
+const gateW = 150;
+const gateH = 382;
+const ballW = 42;
+
+const scoreValue = {
+  left: 0,
+  right: 0,
+};
+
+score.innerText = scoreValue.left + ' : ' + scoreValue.right;
+
+const balls = [['div', '#214BF2'],
+  ['p', '#E58F1F'],
+  ['b', '#EBFB10'],
+  ['a', '#E23FB7'],
+  ['i', '#75E23F'],
+  ['span', '#1CECBB']];
+
+const minX = gateW;
+const maxX = fieldW - gateW - ballW;
+const minY = 0;
+const maxY = fieldH - ballW;
+
+
+balls.forEach(el => {
+  const element = document.createElement(el[0]);
+
+  element.classList.add('ball', 'field__ball');
+  element.innerText = el[0].toUpperCase();
+  field.append(element);
+  element.style.position = 'absolute';
+  element.style.backgroundColor = el[1];
+
+  const newX = randomInteger(minX, maxX);
+  const newY = randomInteger(minY, maxY);
+
+  element.style.top = newY + 'px';
+  element.style.left = newX + 'px';
+});
+
+const ballList = document.querySelectorAll('.field__ball');
+
+ballList.forEach(ball => {
+  ball.onmousedown = function(event) {
+    if (event.target.classList.contains('ball--dropped')) {
+      return;
+    };
+
+    const { top, left } = getCoords(field);
+
+    const shiftX = event.clientX - ball.getBoundingClientRect().left;
+    const shiftY = event.clientY - ball.getBoundingClientRect().top;
+
+    function moveAt(pageX, pageY) {
+      ball.style.left = pageX - left - shiftX + 'px';
+      ball.style.top = pageY - top - shiftY + 'px';
+
+      if (ball.getBoundingClientRect().left < left) {
+        ball.style.left = 0 + 'px';
+      };
+
+      if (ball.getBoundingClientRect().top < top) {
+        ball.style.top = 0 + 'px';
+      };
+
+      if (ball.getBoundingClientRect()
+        .left > left + fieldW - ball.offsetWidth) {
+        ball.style.left = fieldW - ball.offsetWidth + 'px';
+      };
+
+      if (ball.getBoundingClientRect().top > top + fieldH - ball.offsetHeight) {
+        ball.style.top = fieldH - ball.offsetHeight + 'px';
+      };
+    };
+
+    moveAt(event.pageX, event.pageY);
+
+    function onMouseMove(e) {
+      moveAt(e.pageX, e.pageY);
+    };
+    document.addEventListener('mousemove', onMouseMove);
+
+    document.onmouseup = function() {
+      if (ball.getBoundingClientRect().left <= left + gateW - ball.offsetWidth
+        && ball.getBoundingClientRect().top >= top + gateW - ballW / 2
+        && ball.getBoundingClientRect()
+          .top <= top + gateW - ballW / 2 + gateH - ball.offsetHeight) {
+        ball.classList.add('ball--dropped');
+        goal('left');
+        addGoalToTheList('left');
+      }
+
+      if (ball.getBoundingClientRect().left >= left + fieldW - gateW
+      && ball.getBoundingClientRect().top >= top + gateW - ballW / 2
+      && ball.getBoundingClientRect()
+        .top <= top + gateW - ballW / 2 + gateH - ball.offsetHeight) {
+        ball.classList.add('ball--dropped');
+        goal('right');
+        addGoalToTheList('right');
+      }
+
+      document.removeEventListener('mousemove', onMouseMove);
+      document.onmouseup = null;
+    };
+  };
+
+  ball.ondragstart = function() {
+    return false;
+  };
+
+  function goal(side) {
+    scoreValue[side]++;
+    score.innerText = scoreValue.left + ' : ' + scoreValue.right;
+  }
+
+  function addGoalToTheList(side) {
+    const newElement = ball.cloneNode(true);
+
+    newElement.style.position = 'static';
+
+    const listItem = document.createElement('li');
+
+    listItem.classList.add('info__item');
+    listItem.append(newElement);
+
+    switch (side) {
+      case 'left':
+        leftGoalsList.append(listItem);
+        break;
+      case 'right':
+        rightGoalsList.append(listItem);
+        break;
+      default:
+        break;
+    }
+  }
+});
+
+disableSelection(document.body);
diff --git a/src/style.scss b/src/style.scss
diff --git a/src/styles/_ball.scss b/src/styles/_ball.scss
@@ -0,0 +1,17 @@
+.ball {
+  display: block;
+  margin: 0;
+  padding: 0;
+  font-style: normal;
+  font-weight: 600;
+  text-decoration: none;
+  width: 42px;
+  height: 42px;
+
+  border-radius: 50%;
+  line-height: 42px;
+  font-size: 13px;
+  color: #fff;
+  text-align: center;
+  font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, 'Open Sans', 'Helvetica Neue', sans-serif;
+}