add task react-clase-2

src/components/memotest/board/Board.css

@@ -0,0 +1,10 @@
+.board {
+    position: relative;
+    width: 100%;
+    height: 100%;
+    display: grid;
+    grid-template-columns: repeat(4, 1fr);
+    grid-template-rows: repeat(4, 1fr);
+    grid-gap: 10px;
+    perspective: 1000px;
+}

src/components/memotest/board/Board.js

@@ -0,0 +1,31 @@
+import React from 'react';
+import Card from './Card';
+import background from '../assets/shenlong.jpg';
+import './Board.css';
+
+const Board = ({cards, handleCard, flipped, animating }) => {
+    const boardStyle = {
+        backgroundImage: 'url(' + background + ')',
+        backgroundSize: '100% 100%'
+      };
+
+    return(
+        <section className='board' style={boardStyle}  >
+            {
+                cards.map((card, i) => (
+                    <Card
+                        onClick={handleCard}
+                        flipped={flipped[i]}
+                        animating={animating}
+                        key={`${card.name}-${i}`}
+                        alt={card.name}
+                        src={card.img}
+                        id={i}
+                    />
+                ))
+            }
+        </section>
+    )
+}
+
+export default Board;

src/components/memotest/board/Card.css

@@ -0,0 +1,40 @@
+.cards {
+    position: relative;
+    background-color: ghostwhite;
+    border-radius: 5px;
+    aspect-ratio: 1 / 1;
+    transform: scale(1);
+    transform-style: preserve-3d;
+    transition: transform .5s;
+    cursor: pointer;
+    z-index: 0;
+    object-fit: contain;
+}
+
+.cards:active {
+    transform: scale(.97);
+    transition: transform .2s;
+}
+
+.cards.flip {
+    transform: rotateY(180deg);
+}
+
+.cards.find {
+    opacity: 0;
+}
+
+#front,
+#back{
+    display: block;
+    position: absolute;
+    width: 100%;
+    height: 100%;
+    background-clip: content-box;
+    border-radius: 5px;
+    backface-visibility: hidden;
+}
+
+#back {
+    transform: rotateY(180deg);
+}

src/components/memotest/board/Card.js

@@ -0,0 +1,18 @@
+import React from 'react';
+import front from '../assets/fondo.jpg';
+import './Card.css';
+
+const Card = ({src, alt, id, flipped, onClick, animating}) => {
+    return(
+        <div
+            className={'cards ' + (flipped ? 'flip' : '')}
+            key={id}
+            id={id}
+        >
+        <img src={front} alt={alt} id="front" onClick={() => (!animating && onClick(id, alt))}/>
+        <img src={src} alt={alt} id="back" />
+        </div>
+    )
+}
+
+export default Card;

src/components/memotest/constants/initial-cards.js

@@ -0,0 +1,45 @@
+import cell from '../assets/cell.png';
+import gohan from '../assets/gohan.png';
+import goku from '../assets/goku.png';
+import gotenks from '../assets/gotenks.png';
+import majinboo from '../assets/majinboo.png';
+import piccolo from '../assets/piccolo.png';
+import saibaman from '../assets/saibaman.png';
+import vegeta from '../assets/vegeta.png';
+
+const cardArray = [
+        {
+          name: 'cell',
+          img: cell,
+        },
+        {
+          name: 'gohan',
+          img: gohan,
+        },
+        {
+          name: 'goku',
+          img: goku,
+        },
+        {
+          name: 'gotenks',
+          img: gotenks,
+        },
+        {
+          name: 'majinboo',
+          img: majinboo,
+        },
+        {
+          name: 'piccolo',
+          img: piccolo,
+        },
+        {
+          name: 'saibaman',
+          img: saibaman,
+        },
+        {
+          name: 'vegeta',
+          img: vegeta,
+        }
+];
+
+export default cardArray;

src/components/memotest/customHooks/useMemotestGame.js

@@ -0,0 +1,63 @@
+import React, { useState } from 'react';
+import cardArray from '../constants/initial-cards';
+
+const createInitialCards = () => {
+    let allCards = cardArray.concat(cardArray);
+    let newCards = allCards.sort(() => 0.5 - Math.random());
+    return newCards;
+}
+
+const useMemotestGame = () => {
+    const [cards, setCards] = useState(createInitialCards);
+    const [isFlipped, setIsFlipped] = useState([false, false, false, false, false, false, false, false, false, false, false, false, false, false, false, false]);
+    const [currentPairs, setCurrentPairs] = useState([]);
+    const [previousID, setPreviousID] = useState(null);
+    const [animating, setAnimating] = useState(false);
+    const [wonPairs, setWonPairs] = useState(0);
+    const gameEnded = wonPairs > 7;
+
+    const handleCard = (id, alt) => {
+        let newIsPair = [...currentPairs, alt];
+        setCurrentPairs(newIsPair);
+
+        let newIsFlipped = [...isFlipped];
+        newIsFlipped.splice(id, 1, true);
+        setIsFlipped(newIsFlipped);
+
+        if(previousID === null) {
+            setPreviousID(id);
+       }
+
+        if(newIsPair.length === 2) {
+            if(newIsPair[0] === newIsPair[1]) {
+                setWonPairs(wonPairs + 1);
+                setCurrentPairs([]);
+                setPreviousID(null);
+            } else {
+                setAnimating(true);
+                setTimeout(() => {
+                    setCurrentPairs([]);
+                    newIsFlipped.splice(id, 1, false);
+                    newIsFlipped.splice(previousID, 1, false);
+                    setIsFlipped(newIsFlipped);
+                    setPreviousID(null);
+                    setAnimating(false);
+                }, 750);
+            }
+        }
+    }
+
+    const restart = () => {
+        console.log('restart')
+        setCards(createInitialCards);
+        setCurrentPairs([]);
+        setIsFlipped([false, false, false, false, false, false, false, false, false, false, false, false, false, false, false, false]);
+        setWonPairs(0);
+        setPreviousID(null);
+        setAnimating(false);
+    }
+
+    return { cards, handleCard, isFlipped, gameEnded, animating, restart};
+  }
+
+export default useMemotestGame;

src/components/memotest/customHooks/useTimer.js

@@ -0,0 +1,38 @@
+import React, { useState, useEffect, useRef } from 'react';
+
+const useTimer = gameEnded => {
+    const [minutes, setMinutes] = useState(0);
+    const [seconds, setSeconds] = useState(0);
+
+    useInterval(() => {
+      setSeconds(seconds + 1);
+
+      if(seconds === 59) {
+          setSeconds(0);
+          setMinutes(minutes + 1);
+      }
+    }, !gameEnded ? 1000 : null);
+
+    return { minutes, seconds };
+  }
+
+  function useInterval(callback, delay) {
+    const savedCallback = useRef();
+
+    useEffect(() => {
+      savedCallback.current = callback;
+    }, [callback]);
+
+    useEffect(() => {
+      function tick() {
+        savedCallback.current();
+      }
+
+      if (delay !== null) {
+        let id = setInterval(tick, delay);
+        return () => clearInterval(id);
+      }
+    }, [delay]);
+  }
+
+  export default useTimer;

src/components/memotest/score/Timer.js

@@ -0,0 +1,15 @@
+import React from 'react';
+
+const Timer = ({ minutes, seconds, gameEnded }) => {
+    return(
+        <section className={gameEnded ? 'hidden' : ''}>
+            <p id="timer">
+                Tiempo de juego: <span className="game-score">
+                   {' '}{minutes < 10 ? `0${minutes}` : minutes}:{seconds < 10 ? `0${seconds}` : seconds}
+                </span>
+            </p>
+        </section>
+    )
+}
+
+export default Timer;

src/components/memotest/score/WinnerScore.css

@@ -0,0 +1,19 @@
+.winner-score {
+    position: relative;
+    opacity: 0;
+    display: flex;
+    justify-content: center;
+    align-items: center;
+    font-size: 40px;
+    flex-direction: column;
+    margin-borttom: 250px;
+}
+
+.winner-score:not(.winner-score--hidden) {
+    transition: opacity ease-in-out 0.7s;
+}
+
+.winner-score--hidden {
+    opacity: 1;
+    pointer-events: none;
+}

src/components/memotest/score/WinnerScore.js

@@ -0,0 +1,16 @@
+import React from 'react';
+import FancyButton from '../../small/FancyButton';
+import './WinnerScore.css';
+
+const WinnerScore = ({ show, result, restart = () => {} }) => {
+    return (
+      <div className={'winner-score ' + (show ? 'winner-score--hidden': '')}>
+        <span className="winner-score-text">
+          Has completado el juego en {result}
+        </span>
+        <FancyButton onClick={restart}>¿Jugar de nuevo?</FancyButton>
+      </div>
+    );
+  };
+
+export default WinnerScore;

src/components/pages/App.js

@@ -8,6 +8,7 @@ import FocusableInput from './FocusableInput';
 import UglyClass from './UglyClass';
 import FancyButton from '../small/FancyButton';
 import TicTacToe from './TicTacToe';
+import Memotest from './Memotest';
 
 const pages = {
   home: {
@@ -38,6 +39,10 @@ const pages = {
     name: 'Tic Tac Toe',
     component: TicTacToe,
   },
+  memotest: {
+    name: 'Memotest',
+    component: Memotest,
+  }
 };
 
 function App() {

src/components/pages/Memotest.css

@@ -0,0 +1,22 @@
+.memotest-app {
+  position: relative;
+  text-align: center;
+  width: 90%;
+}
+
+.memotest {
+  position: relative;
+  width: 350px;
+  height: 350px;
+  border: 4px solid ghostwhite;
+  margin: auto;
+  display: flex;
+}
+
+#timer {
+  font-size: 24px;
+}
+
+.hidden {
+  display: none;
+}