[
  {
    "path": ".github/FUNDING.yml",
    "content": "github: [JuandaGarcia, WeeebSoftware]\n"
  },
  {
    "path": "README.md",
    "content": "# Rick and Morty Memory Game\n\nDispoible en: https://juandagarcia.github.io/MemoryGame/\n\n![Imagen del proyecto](https://juandagarcia.github.io/MemoryGame/img/readme.png)\n![Imagen del proyecto](https://juandagarcia.github.io/MemoryGame/img/readme2.png)\n"
  },
  {
    "path": "css/game.css",
    "content": "body {\n  background-image: url(../img/fondo.jpg);\n  background-size: 105%;\n  background-position-y: 90%;\n  background-repeat: no-repeat;\n  background-size: cover;\n}"
  },
  {
    "path": "css/styles.css",
    "content": "* {\n\tpadding: 0;\n\tmargin: 0;\n\tfont-family: 'Bangers', cursive;\n}\n\nbody {\n\tdisplay: flex;\n\talign-items: center;\n\tjustify-content: center;\n\theight: 100vh;\n\twidth: 100%;\n\tbackground-color: black;\n}\n\n.hiden {\n\tdisplay: none;\n}\n\n#cargando {\n\tdisplay: flex;\n\talign-items: center;\n\tjustify-content: space-around;\n\twidth: 150px;\n\theight: 50px;\n\tbackground-color: rgba(0, 0, 0, 0.5);\n\tborder-radius: 5px;\n\tcolor: white;\n\tposition: relative;\n}\n\n#cargando img {\n\theight: 70%;\n}\n\n#game {\n\tdisplay: none;\n\theight: 500px;\n\twidth: 500px;\n\tflex-wrap: wrap;\n\tperspective: 600px;\n\tjustify-content: space-around;\n}\n\n.info-game {\n\twidth: 500px;\n\theight: 40px;\n\tbackground-color: rgba(255, 255, 255, 0.5);\n\tposition: absolute;\n\tbottom: 40px;\n\tborder-radius: 5px;\n\tdisplay: flex;\n\tjustify-content: space-around;\n\talign-items: center;\n}\n\n.info-game button {\n\theight: 70%;\n\twidth: 20%;\n\tbackground-color: #ffff00;\n\toutline: none;\n\tborder: none;\n\tborder-radius: 5px;\n\ttransition: 0.2s;\n\tcursor: pointer;\n}\n\n.info-game button:hover {\n\tfont-size: 1em;\n\tbackground-color: #ffff34;\n}\n\n.tarjeta {\n\tdisplay: flex;\n\theight: 90px;\n\twidth: 90px;\n\tjustify-content: center;\n\talign-items: center;\n\tmargin: 5px 5px;\n\tborder-radius: 25px;\n\tposition: relative;\n\tcursor: pointer;\n\ttransform-style: preserve-3d;\n\ttransform-origin: center right;\n\ttransition: transform 1s;\n\t-webkit-touch-callout: none;\n\t-webkit-user-select: none;\n\t-khtml-user-select: none;\n\t-moz-user-select: none;\n\t-ms-user-select: none;\n\tuser-select: none;\n\t-webkit-tap-highlight-color: transparent;\n}\n\n.rotar {\n\ttransform: translateX(-100%) rotateY(-180deg);\n}\n\n.front,\n.back {\n\tposition: absolute;\n\twidth: 100%;\n\theight: 100%;\n\tcolor: white;\n\ttext-align: center;\n\tfont-weight: bold;\n\tfont-size: 35px;\n\tbackface-visibility: hidden;\n}\n\n.vueltaFront {\n\tbackground-image: url(../img/background.jpg);\n\tbackground-size: cover;\n\tborder-radius: 15px;\n}\n\n.vueltaBack {\n\ttransform: rotateY(180deg);\n\tbackground-size: cover;\n\tborder-radius: 15px;\n}\n\n.video-container {\n\twidth: 100%;\n\theight: 100vh;\n\toverflow: hidden;\n\tdisplay: flex;\n\tjustify-content: center;\n\talign-items: center;\n}\n\n.video-container video {\n\tposition: absolute;\n\ttop: 0;\n\tleft: 0;\n\tobject-fit: cover;\n\twidth: 100%;\n\theight: 100%;\n\tpointer-events: none;\n\topacity: 50%;\n}\n\n.video-container .contenido {\n\tposition: relative;\n\tz-index: 1;\n\tmargin: 0 auto;\n\ttext-align: center;\n\twidth: 50vw;\n}\n\n.contenido img {\n\twidth: 100%;\n\tmargin-bottom: 100px;\n}\n\n.noSelect {\n\t-webkit-touch-callout: none;\n\t-webkit-user-select: none;\n\t-khtml-user-select: none;\n\t-moz-user-select: none;\n\t-ms-user-select: none;\n\tuser-select: none;\n\t-webkit-tap-highlight-color: transparent;\n}\n\n.button {\n\tcursor: pointer;\n\toverflow: hidden;\n\tpadding: 20px;\n\tborder: solid 2px #ffff00;\n\tbackground-color: #ffff00;\n\tborder-radius: 35px;\n\tposition: relative;\n\ttop: 80%;\n\tleft: 50%;\n\ttransform: translate(-50%, -50%);\n\twidth: 200px;\n\ttext-align: center;\n\tfont-family: sans-serif;\n\tfont-weight: 600;\n\tletter-spacing: 5px;\n\ttransition: all 0.8s cubic-bezier(0.4, 0, 0.2, 1);\n\t-webkit-text-stroke: 0px white;\n}\n\n.contenido a {\n\tcolor: rgb(56, 56, 56);\n\ttext-decoration: none;\n}\n\n.button::after {\n\ttransition: all 0.6s cubic-bezier(0.4, 0, 0.2, 1);\n\tcontent: '';\n\twidth: 10px;\n\theight: 2px;\n\tbackground: white;\n\tposition: absolute;\n\ttop: 0px;\n\tright: 0px;\n\tbox-shadow: 0px 5px 0px white, 0px 10px 0px white, 0px 15px 0px white,\n\t\t0px 20px 0px white, 0px 25px 0px white, 0px 30px 0px white,\n\t\t0px 35px 0px white, 0px 40px 0px white, 0px 45px 0px white,\n\t\t0px 50px 0px white, 0px 55px 0px white;\n}\n.button:hover::after {\n\twidth: 160px;\n\tz-index: -1;\n\t-webkit-text-stroke: 4px white;\n\tbox-shadow: -10px 5px 0px white, -20px 10px 0px white, -30px 15px 0px white,\n\t\t-40px 20px 0px white, -50px 25px 0px white, -60px 30px 0px white,\n\t\t-70px 35px 0px white, -80px 40px 0px white, -90px 45px 0px white,\n\t\t-100px 50px 0px white, -110px 55px 0px white;\n}\n.button:hover {\n\tcolor: #fff;\n}\n\n@media screen and (max-width: 1024px) {\n}\n@media screen and (max-width: 768px) {\n\t.video-container .contenido {\n\t\twidth: 80vw;\n\t}\n\t.button {\n\t\twidth: 150px;\n\t}\n\t#game {\n\t\theight: 400px;\n\t\twidth: 300px;\n\t}\n\t.info-game {\n\t\twidth: 300px;\n\t}\n\n\t.tarjeta {\n\t\theight: 60px;\n\t\twidth: 60px;\n\t}\n\t.info-game button {\n\t\twidth: 35%;\n\t}\n}\n@media screen and (max-width: 480px) {\n}\n@media screen and (max-width: 320px) {\n\t#game {\n\t\theight: 380px;\n\t\twidth: 280px;\n\t}\n\t.info-game {\n\t\twidth: 280px;\n\t}\n\n\t.tarjeta {\n\t\theight: 50px;\n\t\twidth: 50px;\n\t}\n}\n\n.rotate {\n\tanimation: rotation 4s infinite linear;\n}\n\n@keyframes rotation {\n\tfrom {\n\t\ttransform: rotate(0deg);\n\t}\n\tto {\n\t\ttransform: rotate(359deg);\n\t}\n}\n"
  },
  {
    "path": "index.html",
    "content": "<!DOCTYPE html>\n<html lang=\"es\">\n\t<head>\n\t\t<meta charset=\"UTF-8\" />\n\t\t<meta name=\"viewport\" content=\"width=device-width, initial-scale=1.0\" />\n\t\t<meta http-equiv=\"X-UA-Compatible\" content=\"ie=edge\" />\n\t\t<title>Rick and Morty memory game</title>\n\t\t<link rel=\"icon\" href=\"./img//portal.png\" />\n\t\t<link\n\t\t\thref=\"https://fonts.googleapis.com/css?family=Bangers&display=swap\"\n\t\t\trel=\"stylesheet\"\n\t\t/>\n\t\t<link rel=\"stylesheet\" href=\"css/styles.css\" />\n\t</head>\n\t<body>\n\t\t<header>\n\t\t\t<div class=\"video-container\">\n\t\t\t\t<video autoplay muted loop>\n\t\t\t\t\t<source src=\"video/video.mp4\" type=\"video/mp4\" />\n\t\t\t\t</video>\n\t\t\t\t<div class=\"contenido\">\n\t\t\t\t\t<img src=\"img/logo.png\" alt=\"Logo\" />\n\t\t\t\t\t<a class=\"noSelect\" href=\"./pages/game.html\">\n\t\t\t\t\t\t<div class=\"button two noSelect\">\n\t\t\t\t\t\t\tJugar\n\t\t\t\t\t\t</div>\n\t\t\t\t\t</a>\n\t\t\t\t</div>\n\t\t\t</div>\n\t\t</header>\n\t</body>\n</html>\n"
  },
  {
    "path": "js/index.js",
    "content": "class juego {\n\tconstructor() {\n\t\tthis.NumerosAPI = new Array()\n\t\tthis.tarjetas = new Array()\n\t\tthis.NivelActual\n\t\tthis.CuadrosNivel = [10]\n\t\tthis.SeleccionadaUNO\n\t\tthis.SeleccionadaDOS\n\t\tthis.NTarjetasSeleccionadas = 0\n\t\tthis.ContadorVictoria = 0\n\t\tthis.movimientos = 0\n\t\tthis.containerCargando = document.getElementById('cargando')\n\t\tthis.containerMovimientos = document.getElementById('movimientos')\n\t\tthis.container = document.getElementById('game')\n\t\tthis.time = true\n\t\tthis.dataAPI = {\n\t\t\tloading: true,\n\t\t\terror: null,\n\t\t\tdata: {\n\t\t\t\tinfo: {},\n\t\t\t\tresults: []\n\t\t\t}\n\t\t}\n\t\t//Cronometro\n\t\tthis.primermovimiento = false\n\t\tthis.hora = 0\n\t\tthis.minutos = 0\n\t\tthis.segundos = 0\n\t\tthis.decimales = 0\n\t\tthis.tiempo = ''\n\t\tthis.stop = true\n\t}\n\n\tfetchCharacters = async () => {\n\t\tthis.dataAPI = { loading: true, error: null }\n\n\t\ttry {\n\t\t\tconst response = await fetch(`https://rickandmortyapi.com/api/character/`)\n\t\t\tconst data = await response.json()\n\n\t\t\tthis.dataAPI = {\n\t\t\t\tloading: false,\n\t\t\t\tdata: {\n\t\t\t\t\tinfo: data.info,\n\t\t\t\t\tresults: data.results\n\t\t\t\t}\n\t\t\t}\n\t\t} catch (error) {\n\t\t\tthis.dataAPI = { loading: false, error: error }\n\t\t}\n\t}\n\n\tasync iniciarJuego() {\n\t\tthis.NivelActual = 0\n\t\tthis.elegirtarjeta = this.elegirtarjeta.bind(this)\n\t\tawait this.fetchCharacters()\n\n\t\tfor (let i = 0; i < this.dataAPI.data.info.count; i++) {\n\t\t\tthis.NumerosAPI.push(i + 1)\n\t\t}\n\n\t\tthis.NumerosAPI = this.NumerosAPI.sort(function() {\n\t\t\treturn Math.random() - 0.5\n\t\t})\n\n\t\tthis.NumerosAPI.length = 10\n\n\t\tconst LengthStatic = this.NumerosAPI.length\n\n\t\tfor (let i = 0; i < LengthStatic; i++) {\n\t\t\tthis.NumerosAPI.push(this.NumerosAPI[i])\n\t\t}\n\n\t\tthis.tarjetas.length = this.NumerosAPI.length\n\n\t\tthis.NumerosAPI = this.NumerosAPI.sort(function() {\n\t\t\treturn Math.random() - 0.5\n\t\t})\n\t\tfor (let i = 0; i < this.tarjetas.length; i++) {\n\t\t\tthis.PersonajeTemporal = {}\n\n\t\t\ttry {\n\t\t\t\tconst response = await fetch(\n\t\t\t\t\t`https://rickandmortyapi.com/api/character/${this.NumerosAPI[i]}`\n\t\t\t\t)\n\t\t\t\tconst data = await response.json()\n\n\t\t\t\tthis.PersonajeTemporal = data\n\t\t\t} catch (error) {\n\t\t\t\tthis.PersonajeTemporal = { error: error }\n\t\t\t}\n\n\t\t\tthis.tarjetas[i] = document.createElement('div')\n\t\t\tthis.tarjetas[i].classList.add('tarjeta')\n\t\t\tthis.tarjetas[i].innerText = this.NumerosAPI[i]\n\t\t\tthis.tarjetas[i].setAttribute('data-position', i)\n\t\t\tthis.tarjetas[i].addEventListener('click', this.elegirtarjeta)\n\t\t\tthis.tarjetas[i].innerHTML =\n\t\t\t\t'<div class=\"front vueltaFront\" data-position=\"' +\n\t\t\t\ti +\n\t\t\t\t'\"></div><div class=\"back vueltaBack\" data-position=\"' +\n\t\t\t\ti +\n\t\t\t\t'\" style=\"background-image: url(' +\n\t\t\t\tthis.PersonajeTemporal.image +\n\t\t\t\t');\">' +\n\t\t\t\t'' +\n\t\t\t\t'</div>'\n\t\t\tthis.container.appendChild(this.tarjetas[i])\n\t\t}\n\t\tthis.containerCargando.style.display = 'none'\n\t\tthis.container.style.display = 'flex'\n\t}\n\n\tagregarEventos(n) {\n\t\tthis.tarjetas[n].addEventListener('click', this.elegirtarjeta)\n\t}\n\n\teliminarEventos(n) {\n\t\tthis.tarjetas[n].removeEventListener('click', this.elegirtarjeta)\n\t}\n\n\telegirtarjeta(e) {\n\t\tif (this.time === true) {\n\t\t\tswitch (this.NTarjetasSeleccionadas) {\n\t\t\t\tcase 0:\n\t\t\t\t\tif (!this.primermovimiento) {\n\t\t\t\t\t\tthis.IniciarCronometro()\n\t\t\t\t\t}\n\t\t\t\t\tthis.primermovimiento = true\n\t\t\t\t\tthis.SeleccionadaUNO = e.target.dataset.position\n\t\t\t\t\tthis.tarjetas[this.SeleccionadaUNO].classList.add('rotar')\n\t\t\t\t\tthis.eliminarEventos(this.SeleccionadaUNO)\n\t\t\t\t\tthis.NTarjetasSeleccionadas++\n\t\t\t\t\tthis.movimientos++\n\t\t\t\t\tthis.containerMovimientos.innerText = `Movimientos: ${this.movimientos}`\n\t\t\t\t\tbreak\n\t\t\t\tcase 1:\n\t\t\t\t\tthis.movimientos++\n\t\t\t\t\tthis.containerMovimientos.innerText = `Movimientos: ${this.movimientos}`\n\t\t\t\t\tthis.SeleccionadaDOS = e.target.dataset.position\n\t\t\t\t\tthis.tarjetas[this.SeleccionadaDOS].classList.add('rotar')\n\t\t\t\t\tif (\n\t\t\t\t\t\tthis.NumerosAPI[this.SeleccionadaUNO] ===\n\t\t\t\t\t\tthis.NumerosAPI[this.SeleccionadaDOS]\n\t\t\t\t\t) {\n\t\t\t\t\t\tconsole.log('correcto')\n\t\t\t\t\t\tthis.eliminarEventos(this.SeleccionadaDOS)\n\t\t\t\t\t\tthis.ContadorVictoria++\n\t\t\t\t\t\tif (this.ContadorVictoria === this.CuadrosNivel[this.NivelActual]) {\n\t\t\t\t\t\t\tsetTimeout(() => {\n\t\t\t\t\t\t\t\tthis.victoria()\n\t\t\t\t\t\t\t}, 1000)\n\t\t\t\t\t\t}\n\t\t\t\t\t} else {\n\t\t\t\t\t\tconsole.log('incorrecto')\n\t\t\t\t\t\tthis.time = false\n\t\t\t\t\t\tsetTimeout(() => {\n\t\t\t\t\t\t\tthis.tarjetas[this.SeleccionadaUNO].classList.remove('rotar')\n\t\t\t\t\t\t\tthis.tarjetas[this.SeleccionadaDOS].classList.remove('rotar')\n\t\t\t\t\t\t\tthis.time = true\n\t\t\t\t\t\t}, 1000)\n\t\t\t\t\t\tthis.agregarEventos(this.SeleccionadaUNO)\n\t\t\t\t\t}\n\t\t\t\t\tthis.NTarjetasSeleccionadas = 0\n\t\t\t\t\tbreak\n\t\t\t}\n\t\t}\n\t}\n\n\tvictoria() {\n\t\tthis.PausarTiempo()\n\t\tswal(\n\t\t\t'Ganaste!',\n\t\t\t`Movimientos: ${this.movimientos} \\n\\n Tiempo: ${this.tiempo}`,\n\t\t\t'success'\n\t\t).then(() => {\n\t\t\tconsole.log('hola')\n\t\t})\n\t}\n\n\tjuegoNuevo() {\n\t\tlocation.reload()\n\t}\n\n\tgetRndInteger(min, max) {\n\t\treturn Math.floor(Math.random() * (max - min + 1)) + min\n\t}\n\n\t//Cronometro\n\tIniciarCronometro() {\n\t\tif (this.stop == true) {\n\t\t\tthis.stop = false\n\t\t\tthis.cronometro()\n\t\t}\n\t}\n\n\tcronometro() {\n\t\tif (this.stop == false) {\n\t\t\tthis.decimales++\n\t\t\tif (this.decimales > 9) {\n\t\t\t\tthis.decimales = 0\n\t\t\t\tthis.segundos++\n\t\t\t}\n\t\t\tif (this.segundos > 59) {\n\t\t\t\tthis.segundos = 0\n\t\t\t\tthis.minutos++\n\t\t\t}\n\t\t\tif (this.minutos > 59) {\n\t\t\t\tthis.minutos = 0\n\t\t\t\tthis.hora++\n\t\t\t}\n\t\t\tthis.verCronometro()\n\t\t\tsetTimeout('iniciar.cronometro()', 100)\n\t\t}\n\t}\n\tverCronometro() {\n\t\tif (this.hora < 10) this.tiempo = ''\n\t\telse this.tiempo = this.hora\n\t\tif (this.minutos < 10) this.tiempo = this.tiempo + '0'\n\t\tthis.tiempo = this.tiempo + this.minutos + ':'\n\t\tif (this.segundos < 10) this.tiempo = this.tiempo + '0'\n\t\tthis.tiempo = this.tiempo + this.segundos\n\t\tdocument.getElementById('tiempo').innerHTML = this.tiempo\n\t}\n\tPausarTiempo() {\n\t\tthis.stop = true\n\t}\n\tReiniciarTiempo() {\n\t\tif (this.stop == false) {\n\t\t\tthis.stop = true\n\t\t}\n\t\tthis.hora = this.minutos = this.segundos = this.decimales = 0\n\t\tthis.tiempo = ''\n\t\tthis.verCronometro()\n\t}\n}\n\nconst iniciar = new juego()\niniciar.iniciarJuego()\n"
  },
  {
    "path": "pages/game.html",
    "content": "<!DOCTYPE html>\n<html lang=\"es\">\n\t<head>\n\t\t<meta charset=\"UTF-8\" />\n\t\t<meta name=\"viewport\" content=\"width=device-width, initial-scale=1.0\" />\n\t\t<meta http-equiv=\"X-UA-Compatible\" content=\"ie=edge\" />\n\t\t<title>Game</title>\n\t\t<link rel=\"icon\" href=\"../img//portal.png\" />\n\t\t<link\n\t\t\thref=\"https://fonts.googleapis.com/css?family=Bangers&display=swap\"\n\t\t\trel=\"stylesheet\"\n\t\t/>\n\t\t<link rel=\"stylesheet\" href=\"../css/styles.css\" />\n\t\t<link rel=\"stylesheet\" href=\"../css/game.css\" />\n\t</head>\n\t<body>\n\t\t<div id=\"cargando\">\n\t\t\t<img class=\"rotate\" src=\"../img/portal.png\" alt=\"\" />\n\t\t\t<p>Loading...</p>\n\t\t</div>\n\t\t<div id=\"game\"></div>\n\t\t<div class=\"info-game\">\n\t\t\t<div id=\"movimientos\">Movimientos: 0</div>\n\t\t\t<div id=\"tiempo\">00:00</div>\n\t\t\t<button class=\"noSelect\" onclick=\"iniciar.juegoNuevo()\">\n\t\t\t\tJuego nuevo\n\t\t\t</button>\n\t\t</div>\n\t\t<script src=\"https://cdnjs.cloudflare.com/ajax/libs/sweetalert/2.1.2/sweetalert.min.js\"></script>\n\t\t<script src=\"../js/index.js\"></script>\n\t</body>\n</html>\n"
  }
]