Agrega memotest

src/components/images/index.js

@@ -0,0 +1,13 @@
+const src = {
+  beatles: require("./beatles.jpeg"),
+  blink182: require("./blink182.jpeg"),
+  card: require("./card.jpeg"),
+  fkatwigs: require("./fkatwigs.jpeg"),
+  joydivision: require("./joy-division.jpeg"),
+  ledzep: require("./ledzep.jpeg"),
+  metallica: require("./metallica.jpeg"),
+  pinkfloyd: require("./pinkfloyd.jpeg"),
+  fleetwood: require("./fleetwood.jpeg"),
+};
+
+export default src;

src/components/pages/App.css

@@ -3,13 +3,12 @@
   flex-direction: column;
   align-items: stretch;
   height: 100vh;
-  text-align: center;
+  /* text-align: center; */
   background-color: #333;
   color: white;
 }
 
 .app-content {
-  flex-grow: 1;
   display: flex;
   justify-content: center;
   align-items: center;

src/components/pages/App.js

@@ -1,47 +1,52 @@
-import React, { useState } from 'react';
-import Home from './Home';
-import TitleChanger from './TitleChanger';
-import './App.css';
-import WindowTracker from './WindowTracker';
-import CustomHook from './CustomHook';
-import FocusableInput from './FocusableInput';
-import UglyClass from './UglyClass';
-import FancyButton from '../small/FancyButton';
-import TicTacToe from './TicTacToe';
+import React, { useState } from "react";
+import Home from "./Home";
+import TitleChanger from "./TitleChanger";
+import "./App.css";
+import WindowTracker from "./WindowTracker";
+import CustomHook from "./CustomHook";
+import FocusableInput from "./FocusableInput";
+import UglyClass from "./UglyClass";
+import FancyButton from "../small/FancyButton";
+import TicTacToe from "./TicTacToe";
+import Memotest from "./Memotest";
 
 const pages = {
   home: {
-    name: 'Home',
+    name: "Home",
     component: Home,
   },
   titleChanger: {
-    name: 'Title Changer',
+    name: "Title Changer",
     component: TitleChanger,
   },
   windowTracker: {
-    name: 'Window Tracker',
+    name: "Window Tracker",
     component: WindowTracker,
   },
   customHook: {
-    name: 'Custom Hook',
+    name: "Custom Hook",
     component: CustomHook,
   },
   focusableInput: {
-    name: 'Focusable Input',
+    name: "Focusable Input",
     component: FocusableInput,
   },
   uglyClass: {
-    name: 'Ugly Class',
+    name: "Ugly Class",
     component: UglyClass,
   },
   ticTacToe: {
-    name: 'Tic Tac Toe',
+    name: "Tic Tac Toe",
     component: TicTacToe,
   },
+  memotest: {
+    name: "Memotest",
+    component: Memotest,
+  },
 };
 
 function App() {
-  const [currentPage, setCurrentPage] = useState('home');
+  const [currentPage, setCurrentPage] = useState("home");
   const CurrentComponent = pages[currentPage].component;
   return (
     <div className="app">

src/components/pages/Memotest.css

@@ -0,0 +1,32 @@
+section {
+  display: grid;
+  grid-template-columns: repeat(4, 8rem);
+  grid-template-rows: repeat(4, 8rem);
+  grid-gap: 0rem;
+  perspective: 800px;
+}
+
+.carta {
+  position: relative;
+  transform-style: preserve-3d;
+  transition: transform 1s;
+  box-shadow: rgba(0, 0, 0, 0.2) 0px 5px 15px;
+  z-index: 4;
+}
+
+.cara,
+.reves {
+  width: 94%;
+  height: 94%;
+  position: absolute;
+  pointer-events: none;
+}
+
+.reves {
+  background: white;
+  backface-visibility: hidden;
+}
+
+.girarCarta {
+  transform: rotateY(180deg);
+}

src/components/pages/Memotest.js

@@ -0,0 +1,146 @@
+import React from "react";
+import "./Memotest.css";
+import src from "../images/index.js";
+
+let vidasDelJugador = 10;
+
+const portadas = [
+  { imgSrc: src.beatles, name: "beatles" },
+  { imgSrc: src.blink182, name: "blink182" },
+  { imgSrc: src.fkatwigs, name: "fka twigs" },
+  { imgSrc: src.fleetwood, name: "fleetwood" },
+  { imgSrc: src.joydivision, name: "joy division" },
+  { imgSrc: src.ledzep, name: "led zeppelin" },
+  { imgSrc: src.metallica, name: "metallica" },
+  { imgSrc: src.pinkfloyd, name: "pink floyd" },
+  { imgSrc: src.beatles, name: "beatles" },
+  { imgSrc: src.blink182, name: "blink182" },
+  { imgSrc: src.fkatwigs, name: "fka twigs" },
+  { imgSrc: src.fleetwood, name: "fleetwood" },
+  { imgSrc: src.joydivision, name: "joy division" },
+  { imgSrc: src.ledzep, name: "led zeppelin" },
+  { imgSrc: src.metallica, name: "metallica" },
+  { imgSrc: src.pinkfloyd, name: "pink floyd" },
+];
+
+const Vidas = () => {
+  return <span>Vidas:{vidasDelJugador}</span>;
+};
+
+const Carta = (props) => {
+  return (
+    <div className={props.carta} onClick={props.onClick} name={props.name}>
+      {props.children}
+    </div>
+  );
+};
+
+const Cara = (props) => {
+  return (
+    <img
+      className={props.cara}
+      src={props.src}
+      name={props.name}
+      alt="portada"
+    />
+  );
+};
+
+const Reves = (props) => {
+  return <div className={props.reves}></div>;
+};
+
+const GenerarCartas = () => {
+  const datos = aleatorizar();
+  return (
+    <React.Fragment>
+      <Vidas />
+      <section>
+        {datos.map((portada, i) => (
+          <Carta
+            key={i}
+            name={portada.name}
+            carta={"carta"}
+            onClick={(e) => ChequearCarta(e.target)}
+          >
+            <Cara cara={"cara"} src={portada.imgSrc} />
+            <Reves reves={"reves"} />
+          </Carta>
+        ))}
+      </section>
+    </React.Fragment>
+  );
+};
+
+const aleatorizar = () => {
+  const datos = portadas;
+  datos.sort(() => Math.random() - 0.5);
+  return datos;
+};
+
+const ChequearCarta = (carta) => {
+  carta.classList.add("girarCarta");
+  carta.classList.add("girado");
+
+  const cartasGiradas = document.querySelectorAll(".girado");
+  console.log(cartasGiradas);
+  const girarCarta = document.querySelectorAll(".girarCarta");
+  if (cartasGiradas.length === 2) {
+    if (
+      cartasGiradas[0].getAttribute("name") ===
+      cartasGiradas[1].getAttribute("name")
+    ) {
+      cartasGiradas.forEach((carta) => {
+        carta.classList.remove("girado");
+        carta.style.pointerEvents = "none";
+      });
+    } else {
+      cartasGiradas.forEach((carta) => {
+        carta.classList.remove("girado");
+        setTimeout(() => carta.classList.remove("girarCarta"), 1000);
+      });
+      vidasDelJugador--;
+      document.querySelector("span").textContent = `Vidas: ${vidasDelJugador}`;
+      if (vidasDelJugador === 0) {
+        perder();
+        resetear();
+      }
+    }
+  }
+  if (girarCarta.length === 16) {
+    ganar();
+    resetear();
+  }
+};
+
+function perder() {
+  alert("Perdiste");
+}
+
+function ganar() {
+  alert("Ganaste");
+}
+
+const resetear = () => {
+  let datos = aleatorizar();
+  let caras = document.querySelectorAll(".cara");
+  let cartas = document.querySelectorAll(".carta");
+  document.querySelector("section").style.pointerEvents = "none";
+  datos.forEach((item, index) => {
+    cartas[index].classList.remove("girarCarta");
+    setTimeout(() => {
+      cartas[index].style.pointerEvents = "all";
+      cartas[index].setAttribute("name", item.name);
+      caras[index].src = item.imgSrc;
+      document.querySelector("section").style.pointerEvents = "all";
+    }, 1000);
+  });
+  vidasDelJugador = 10;
+  document.querySelector("span").textContent = `Vidas: ${vidasDelJugador}`;
+};
+
+const Memotest = () => {
+  return GenerarCartas();
+};
+
+export default Memotest;