Tsx Poke card matching game

src/main.tsx

@@ -18,6 +18,7 @@ import DragQuiz from "./pages/Nico/quizGame";
 import ColorCodeExercise from "./pages/uly/ColorCode/App";
 import TRUEorFALSE from "./pages/trisha/API";
 import QuizComponent from "./pages/marcos/quizcomponents";
+import MemoryGame from "./pages/Maui-flipper/App"
 
 const router = createBrowserRouter([
   {
@@ -88,6 +89,10 @@ const router = createBrowserRouter([
     path: "/games/quizcomponent",
     element: <QuizComponent />,
   },
+  {
+    path: "/games/PokeMemory",
+    element: <MemoryGame />,
+  }
 ]);
 
 ReactDOM.createRoot(document.getElementById("root") as HTMLElement).render(

src/pages/Maui-flipper/App.css

@@ -0,0 +1,61 @@
+.App {
+  text-align: center;
+  max-width: 860px;
+  margin: 40px auto;
+  color: white;
+}
+
+body {
+  background-color: rgb(221, 100, 44);
+  background-size: cover;
+  background-position: center;
+  text-align: center;
+  margin: 40px auto;
+}
+
+button {
+  background: rgb(66, 41, 158);
+  color: rgb(255, 178, 90);
+  border: 2px solid rgb(255, 178, 90);
+  padding: 6px 12px;
+  border-radius: 4px;
+  font-weight: bold;
+  cursor: pointer;
+  font-size: 1em;
+}
+
+button:hover{
+  background-color: darkblue;
+  color: orangered;
+}
+
+.Logo {
+  height: 100px;
+  width: 100px;
+  position: absolute;
+  top: 20px;
+  left: 20px;
+  width: 100px;
+  height: 100px;
+  border-radius: 50%;
+}
+
+.balls-grid{
+  justify-content: center;
+  margin-top: 40px;
+  display: grid;
+  grid-template-columns: 150px 150px 150px 150px;
+  grid-gap: 20px;
+  margin-left: auto;
+  margin-right: auto;
+}
+
+.front{
+  height: 100px;
+  width: 100px;
+}
+
+.back{
+  height: 100px;
+  width: 100px;
+}

src/pages/Maui-flipper/App.tsx

@@ -0,0 +1,102 @@
+import { useEffect, useState } from 'react';
+import './App.css';
+import SingleCard from './components/SingleCard';
+
+interface Ball {
+  src: string;
+  matched: boolean;
+  id: number;
+}
+
+const Pokemon: Ball[] = [
+  { src: "/assets/bulbasaur.jpg", matched: false, id: Math.random() },
+  { src: "/assets/Charmander.jpg", matched: false, id: Math.random() },
+  { src: "/assets/mewtwo.jpg", matched: false, id: Math.random() },
+  { src: "/assets/pidgeot.jpg", matched: false, id: Math.random() },
+  { src: "/assets/Pikachu.jpg", matched: false, id: Math.random() },
+  { src: "/assets/Squirtle.png", matched: false, id: Math.random() },
+];
+
+function App() {
+  const [ball, setBall] = useState<Ball[]>([]);
+  const [turns, setTurns] = useState(0);
+  const [pokeOne, setPokeOne] = useState<Ball | null>(null);
+  const [pokeTwo, setPokeTwo] = useState<Ball | null>(null);
+  const [disabled, setDisabled] = useState(false);
+
+  // Code for shuffling cards
+  const shufflePoke = () => {
+    const shufflePoke: Ball[] = [...Pokemon, ...Pokemon]
+      .sort(() => Math.random() - 0.5)
+      .map((balls) => ({ ...balls, id: Math.random() }));
+
+    setPokeOne(null);
+    setPokeTwo(null);
+    setBall(shufflePoke);
+    setTurns(0);
+  };
+
+  //Handle choice
+  const handleChoice = (balls: Ball) => {
+    pokeOne ? setPokeTwo(balls) : setPokeOne(balls);
+  };
+
+  //compare two pokemons
+  useEffect(() => {
+    if (pokeOne && pokeTwo) {
+      setDisabled(true);
+
+      if (pokeOne.src === pokeTwo.src) {
+        setBall((prevBall) => {
+          return prevBall.map((balls) => {
+            if (balls.src === pokeOne.src) {
+              return { ...balls, matched: true };
+            } else {
+              return balls;
+            }
+          });
+        });
+        resetTurn();
+      } else {
+        setTimeout(() => resetTurn(), 500);
+      }
+    }
+  }, [pokeOne, pokeTwo]);
+
+  // Handle choices and increase turns
+  const resetTurn = () => {
+    setPokeOne(null);
+    setPokeTwo(null);
+    setTurns((prevTurn) => prevTurn + 1);
+    setDisabled(false);
+  };
+
+  // Start new game automatically
+  useEffect(() => {
+    shufflePoke();
+  }, []);
+
+  return (
+    <div className="App">
+      <img className="Logo" src="/assets/Stack.jpg" alt="StackTrek Logo" />
+      <div className="bg">
+        <h1>StackTrek Match</h1>
+        <button onClick={shufflePoke}>Play</button>
+        <div className="balls-grid">
+          {ball.map((balls) => (
+            <SingleCard
+              key={balls.id}
+              balls={balls}
+              handleChoice={handleChoice}
+              flipped={balls === pokeOne || balls === pokeTwo || balls.matched}
+              disabled={disabled}
+            />
+          ))}
+        </div>
+        <p>Turns: {turns}</p>
+      </div>
+    </div>
+  );
+}
+
+export default App;

src/pages/Maui-flipper/components/SingleCard.css

@@ -0,0 +1,29 @@
+.balls{
+    position: relative;
+}
+
+.balls img{
+    display: block;
+
+}
+
+/* front img - the pokemon */
+.balls .front{
+    transform: rotateY(90deg);
+    position: absolute;
+    transition: all ease-in 0.2s;
+}
+.flipped .front {
+    transform: rotateY(0deg);
+    transition-delay: 0.2s;
+}
+
+.balls .back{
+    transition: all ease-in 0.2s;
+    transition-delay: 0.2s;
+}
+
+.flipped .back{
+    transition-delay: 0s;
+    transform: rotateY(90deg);
+}

src/pages/Maui-flipper/components/SingleCard.tsx

@@ -0,0 +1,39 @@
+import './SingleCard.css';
+
+interface SingleCardProps {
+  balls: {
+    src: string;
+    matched: boolean;
+    id: number;
+  };
+  handleChoice: (balls: any) => void;
+  flipped: boolean;
+  disabled: boolean;
+}
+
+export default function SingleCard({
+  balls,
+  handleChoice,
+  flipped,
+  disabled,
+}: SingleCardProps) {
+  const handleClick = () => {
+    if (!disabled) {
+      handleChoice(balls);
+    }
+  };
+
+  return (
+    <div className="balls">
+      <div className={flipped ? 'flipped' : ''}>
+        <img className="front" src={balls.src} alt="balls front" />
+        <img
+          className="back"
+          src="/assets/Pokeball.png"
+          onClick={handleClick}
+          alt="balls back"
+        />
+      </div>
+    </div>
+  );
+}

src/pages/Maui-flipper/index.css

@@ -0,0 +1,12 @@
+body {
+  margin: 0;
+  font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', 'Roboto', 'Oxygen',
+    'Ubuntu', 'Cantarell', 'Fira Sans', 'Droid Sans', 'Helvetica Neue',
+    sans-serif;
+  -webkit-font-smoothing: antialiased;
+  -moz-osx-font-smoothing: grayscale;
+  font-size: 1.5em;
+  text-align: center;
+  background: #fff;
+}
+

src/pages/Maui-flipper/index.tsx

@@ -0,0 +1,11 @@
+import React from 'react';
+import ReactDOM from 'react-dom';
+import './index.css';
+import App from './App';
+
+ReactDOM.render(
+  <React.StrictMode>
+    <App />
+  </React.StrictMode>,
+  document.getElementById('root')
+);