app.bundle.js.map

{"version":3,"sources":["webpack:///webpack/bootstrap","webpack:///./src/js/index.js"],"names":["installedModules","__webpack_require__","moduleId","exports","module","i","l","modules","call","m","c","d","name","getter","o","Object","defineProperty","enumerable","get","r","Symbol","toStringTag","value","t","mode","__esModule","ns","create","key","bind","n","object","property","prototype","hasOwnProperty","p","s","window","addEventListener","body","document","querySelector","isModalActive","isGameActive","menuContainer","gameContainer","hasFlippedCard","lockBoard","firstCard","secondCard","showMenu","remove","classList","style","display","flipCard","this","dataset","id","forEach","node","removeEventListener","unraveled","resetBoard","querySelectorAll","length","modalWrapper","createElement","modal","add","textContent","appendChild","showModal","setTimeout","toggle","e","size","target","type","firstChild","removeChild","hideMenu","cards","count","card","push","frontFace","backFace","append","ramdomPos","Math","floor","random","order","showGame"],"mappings":"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","file":"app.bundle.js","sourcesContent":[" \t// The module cache\n \tvar installedModules = {};\n\n \t// The require function\n \tfunction __webpack_require__(moduleId) {\n\n \t\t// Check if module is in cache\n \t\tif(installedModules[moduleId]) {\n \t\t\treturn installedModules[moduleId].exports;\n \t\t}\n \t\t// Create a new module (and put it into the cache)\n \t\tvar module = installedModules[moduleId] = {\n \t\t\ti: moduleId,\n \t\t\tl: false,\n \t\t\texports: {}\n \t\t};\n\n \t\t// Execute the module function\n \t\tmodules[moduleId].call(module.exports, module, module.exports, __webpack_require__);\n\n \t\t// Flag the module as loaded\n \t\tmodule.l = true;\n\n \t\t// Return the exports of the module\n \t\treturn module.exports;\n \t}\n\n\n \t// expose the modules object (__webpack_modules__)\n \t__webpack_require__.m = modules;\n\n \t// expose the module cache\n \t__webpack_require__.c = installedModules;\n\n \t// define getter function for harmony exports\n \t__webpack_require__.d = function(exports, name, getter) {\n \t\tif(!__webpack_require__.o(exports, name)) {\n \t\t\tObject.defineProperty(exports, name, { enumerable: true, get: getter });\n \t\t}\n \t};\n\n \t// define __esModule on exports\n \t__webpack_require__.r = function(exports) {\n \t\tif(typeof Symbol !== 'undefined' && Symbol.toStringTag) {\n \t\t\tObject.defineProperty(exports, Symbol.toStringTag, { value: 'Module' });\n \t\t}\n \t\tObject.defineProperty(exports, '__esModule', { value: true });\n \t};\n\n \t// create a fake namespace object\n \t// mode & 1: value is a module id, require it\n \t// mode & 2: merge all properties of value into the ns\n \t// mode & 4: return value when already ns object\n \t// mode & 8|1: behave like require\n \t__webpack_require__.t = function(value, mode) {\n \t\tif(mode & 1) value = __webpack_require__(value);\n \t\tif(mode & 8) return value;\n \t\tif((mode & 4) && typeof value === 'object' && value && value.__esModule) return value;\n \t\tvar ns = Object.create(null);\n \t\t__webpack_require__.r(ns);\n \t\tObject.defineProperty(ns, 'default', { enumerable: true, value: value });\n \t\tif(mode & 2 && typeof value != 'string') for(var key in value) __webpack_require__.d(ns, key, function(key) { return value[key]; }.bind(null, key));\n \t\treturn ns;\n \t};\n\n \t// getDefaultExport function for compatibility with non-harmony modules\n \t__webpack_require__.n = function(module) {\n \t\tvar getter = module && module.__esModule ?\n \t\t\tfunction getDefault() { return module['default']; } :\n \t\t\tfunction getModuleExports() { return module; };\n \t\t__webpack_require__.d(getter, 'a', getter);\n \t\treturn getter;\n \t};\n\n \t// Object.prototype.hasOwnProperty.call\n \t__webpack_require__.o = function(object, property) { return Object.prototype.hasOwnProperty.call(object, property); };\n\n \t// __webpack_public_path__\n \t__webpack_require__.p = \"\";\n\n\n \t// Load entry module and return exports\n \treturn __webpack_require__(__webpack_require__.s = 0);\n","import '../css/main.scss';\r\n\r\nfunction main() {\r\n\r\n  let body = document.querySelector('.page');\r\n  let isModalActive = false;\r\n  let isGameActive = false;\r\n  const menuContainer = document.querySelector('.game__menu');\r\n  const gameContainer = document.querySelector('.game__container');\r\n  let hasFlippedCard = false;\r\n  let lockBoard = false;\r\n  let firstCard, secondCard;\r\n\r\n  menuContainer.addEventListener('click', menuEvent);\r\n\r\n  function menuEvent(e) {\r\n    const size = e.target.dataset.type;\r\n    if (size === '3x4' || size === '4x5') showGame(+size[0] * +size[2]);\r\n  }\r\n\r\n  function showMenu() {\r\n    if (isModalActive) hideModal();\r\n    if (isGameActive) hideGame();\r\n    menuContainer.style.display = 'block';\r\n  }\r\n\r\n  function hideMenu() {\r\n    menuContainer.style.display = 'none';\r\n\r\n    // Removing all children from an element\r\n    while (gameContainer.firstChild) {\r\n      gameContainer.removeChild(gameContainer.firstChild);\r\n    }\r\n  }\r\n\r\n  function showGame(size) {\r\n    hideMenu();\r\n    gameContainer.style.display = 'flex';\r\n    document.querySelector('.header__h1').classList.add('in-game');\r\n    isGameActive = true;\r\n\r\n    const cards = [];\r\n    let count = 0;\r\n\r\n    while(size--) {\r\n      const card = document.createElement('div');\r\n      cards.push(card);\r\n      card.classList.add('game__card');\r\n      card.classList.add(`game__card--${size}`);\r\n      card.dataset.unraveled = false;\r\n      card.addEventListener('click', flipCard);\r\n\r\n      if (size % 2) count++;\r\n      card.dataset.id = `${count}`;\r\n\r\n      const frontFace = document.createElement('div');\r\n      const backFace = document.createElement('div');\r\n\r\n      frontFace.classList.add('front-face');\r\n      backFace.classList.add('back-face');\r\n\r\n      card.append(frontFace, backFace);\r\n\r\n      gameContainer.appendChild(card);\r\n    }\r\n    (function shuffle() {\r\n      cards.forEach(card => {\r\n        let ramdomPos = Math.floor(Math.random() * 12);\r\n        card.style.order = ramdomPos;\r\n      });\r\n    })();\r\n  }\r\n\r\n  function flipCard() {\r\n    if (this === firstCard) return;\r\n    if (lockBoard) return;\r\n\r\n    if (hasFlippedCard) {\r\n      secondCard = this;\r\n\r\n      checkForMatch();\r\n    } else {\r\n      firstCard = this;\r\n      hasFlippedCard = true;\r\n    }\r\n    this.classList.toggle('flip');\r\n  }\r\n\r\n  function unflipCards() {\r\n    lockBoard = true;\r\n    setTimeout(function() {\r\n      [firstCard, secondCard].forEach(node => {\r\n        node.classList.remove('flip');\r\n      });\r\n      resetBoard();\r\n    }, 500);\r\n  }\r\n\r\n  function checkForMatch() {\r\n    if (firstCard.dataset.id === secondCard.dataset.id) match();\r\n    else unflipCards();\r\n  }\r\n\r\n  function match() {\r\n    [firstCard, secondCard].forEach(node => {\r\n      node.removeEventListener('click', flipCard);\r\n      node.dataset.unraveled = true;\r\n    });\r\n    resetBoard();\r\n    checkForWin();\r\n  }\r\n\r\n  function resetBoard() {\r\n    hasFlippedCard = false;\r\n    lockBoard = false;\r\n    firstCard = null;\r\n    secondCard = null;\r\n  }\r\n\r\n  function checkForWin() {\r\n    if (document.querySelectorAll('.game__card[data-unraveled=\"false\"]').length === 0) win();\r\n  }\r\n\r\n  function win() {\r\n    showModal();\r\n  }\r\n\r\n  function showModal() {\r\n    const modalWrapper = document.createElement('div');\r\n    const modal = document.createElement('div');\r\n    modal.classList.add('modal__content');\r\n    modalWrapper.classList.add('modal');\r\n    modal.textContent = 'Congratulation!!!';\r\n    modal.addEventListener('click', showMenu);\r\n\r\n    modalWrapper.appendChild(modal);\r\n    document.body.appendChild(modalWrapper);\r\n    body.classList.add('freeze');\r\n    isModalActive = true;\r\n  }\r\n\r\n  function hideModal() {\r\n    document.querySelector('.modal').remove();\r\n    isModalActive = false;\r\n    body.classList.remove('freeze');\r\n  }\r\n\r\n  function hideGame() {\r\n    gameContainer.style.display = 'none';\r\n    document.querySelector('.header__h1').classList.remove('in-game');\r\n  }\r\n\r\n  document.querySelector('.header__h1').addEventListener('click', showMenu);\r\n  showMenu();\r\n}\r\n\r\nwindow.addEventListener('load', main);\r\n\r\nif (module.hot) {\r\n  module.hot.accept();\r\n}\r\n"],"sourceRoot":""}