From 94e224c043a96c25ee145fcf3c327c4cfeac1c0a Mon Sep 17 00:00:00 2001
From: kimcascante <kiimcm9@gmail.com>
Date: Wed, 29 Jan 2025 19:06:51 -0600
Subject: [PATCH 1/3] feat: minigame memory challenge

---
 .../src/components/MemoryChallenge/index.tsx  | 75 +++++++++++++++++++
 .../src/components/MemoryChallenge/main.css   | 56 ++++++++++++++
 client/src/main.tsx                           |  2 +
 3 files changed, 133 insertions(+)
 create mode 100644 client/src/components/MemoryChallenge/index.tsx
 create mode 100644 client/src/components/MemoryChallenge/main.css

diff --git a/client/src/components/MemoryChallenge/index.tsx b/client/src/components/MemoryChallenge/index.tsx
new file mode 100644
index 0000000..103a23e
--- /dev/null
+++ b/client/src/components/MemoryChallenge/index.tsx
@@ -0,0 +1,75 @@
+import React, { useState, useEffect } from 'react';
+import './main.css';
+
+function MemoryChallenge() {
+  const colors = ['#f5c242', '#e4a101'];
+  const [cards, setCards] = useState<number[]>(Array(16).fill(0));
+  const [sequence, setSequence] = useState<number[]>([]);
+  const [userSequence, setUserSequence] = useState<number[]>([]);
+  const [isShowing, setIsShowing] = useState<boolean>(true);
+  const [message, setMessage] = useState<string>('');
+
+  useEffect(() => {
+    startNewGame();
+  }, []);
+
+  const startNewGame = () => {
+    const newSequence = Array.from({ length: 5 }, () => Math.floor(Math.random() * 16));
+    setSequence(newSequence);
+    setUserSequence([]);
+    setMessage('');
+    showSequence(newSequence);
+  };
+
+  const showSequence = (sequence: number[]) => {
+    setIsShowing(true);
+    sequence.forEach((index, i) => {
+      setTimeout(() => {
+        setCards(prev => prev.map((card, idx) => (idx === index ? 1 : card)));
+        setTimeout(() => {
+          setCards(prev => prev.map((card, idx) => (idx === index ? 0 : card)));
+          if (i === sequence.length - 1) setIsShowing(false);
+        }, 500);
+      }, i * 1000);
+    });
+  };
+
+  const handleCardClick = (index: number) => {
+    if (isShowing || userSequence.length >= sequence.length) return;
+
+    setUserSequence([...userSequence, index]);
+
+    if (sequence[userSequence.length] !== index) {
+      setMessage('Incorrect! Try again.');
+      setUserSequence([]);
+    } else if (userSequence.length + 1 === sequence.length) {
+      setUserSequence([]);
+      setMessage('Correct! You remembered the sequence.');
+    }
+  };
+
+  return (
+    <div className="container" style={{ display: 'flex', flexDirection: 'column', justifyContent: 'center', height: '100vh' }}>
+      <h1>Memory Challenge</h1>
+      {message && <div className="message">{message}</div>}
+      <div className="card-grid">
+        {cards.map((card, index) => (
+          <div
+            key={index}
+            className={`card ${card ? 'active' : ''}`}
+            style={{
+              backgroundColor: card ? colors[index % colors.length] : undefined,
+              backgroundImage: card ? undefined : 'url(src/assets/img/logo.jpeg)',
+              backgroundSize: 'cover',
+              backgroundPosition: 'center'
+            }}
+            onClick={() => handleCardClick(index)}
+          />
+        ))}
+      </div>
+      <button onClick={startNewGame} className="restart-button">Restart Game</button>
+    </div>
+  );
+}
+
+export default MemoryChallenge;
diff --git a/client/src/components/MemoryChallenge/main.css b/client/src/components/MemoryChallenge/main.css
new file mode 100644
index 0000000..2f5daf4
--- /dev/null
+++ b/client/src/components/MemoryChallenge/main.css
@@ -0,0 +1,56 @@
+body {
+  color: #fff;
+}
+
+.container {
+    display: flex;
+    flex-direction: column;
+    justify-content: center;
+    align-items: center;
+    height: 100%;
+    width: 100%;
+    text-align: center;
+}
+
+h1 {
+  font-size: 3rem;
+  margin: 20px 0
+}
+
+.card-grid {
+  display: grid;
+  grid-template-columns: repeat(4, 100px);
+  gap: 10px;
+}
+
+.card {
+  height: 100px;
+  cursor: pointer;
+  transition: transform 0.3s;
+  border-image: url('src/assets/img/logo.jpeg');
+}
+
+.message {
+  margin: 10px 0;
+  padding: 10px;
+  background-color: 2c0001;
+  color: #e4a101;
+  border-radius: 5px;
+  text-align: center;
+}
+
+.restart-button {
+  margin-top: 20px;
+  padding: 10px 20px;
+  background-color: #e4a101;
+  color: #2c0001;
+  border: none;
+  border-radius: 5px;
+  cursor: pointer;
+  transition: background-color 0.3s;
+}
+
+.restart-button:hover {
+  background-color: #2c0001;
+  color: #e4a101;
+}
diff --git a/client/src/main.tsx b/client/src/main.tsx
index 6ff01d6..91e4147 100644
--- a/client/src/main.tsx
+++ b/client/src/main.tsx
@@ -14,6 +14,7 @@ import Tamagotchi from "./components/Tamagotchi/index.tsx";
 import Header from "./components/Header/index.tsx";
 import Chat from "./components/Chat/index.tsx";
 import "./index.css";
+import MemoryChallenge from "./components/MemoryChallenge/index.tsx";
 
 function provider() {
   return new RpcProvider({
@@ -62,6 +63,7 @@ async function main() {
                 <Route path='/' element={<Cover />}/>
                 <Route path='/play' element={<Tamagotchi sdk={sdk} />} />
                 <Route path='/chat' element={<Chat />} />
+                <Route path='/memoryChallenge' element={<MemoryChallenge />} />
               </Routes>
             </Router>
           </StarknetConfig>

From dc52044675d426373d7021bff456376ec51350a8 Mon Sep 17 00:00:00 2001
From: kimcascante <kiimcm9@gmail.com>
Date: Fri, 31 Jan 2025 20:03:40 -0600
Subject: [PATCH 2/3] feat: updating to Increasing difficulty through longer
 sequences

---
 .../src/components/MemoryChallenge/index.tsx  | 52 +++++++++++++++----
 .../src/components/MemoryChallenge/main.css   | 25 +++++----
 2 files changed, 55 insertions(+), 22 deletions(-)

diff --git a/client/src/components/MemoryChallenge/index.tsx b/client/src/components/MemoryChallenge/index.tsx
index 103a23e..54bdba1 100644
--- a/client/src/components/MemoryChallenge/index.tsx
+++ b/client/src/components/MemoryChallenge/index.tsx
@@ -1,36 +1,57 @@
-import React, { useState, useEffect } from 'react';
+import React, { useState, useEffect, useRef } from 'react';
 import './main.css';
 
 function MemoryChallenge() {
-  const colors = ['#f5c242', '#e4a101'];
-  const [cards, setCards] = useState<number[]>(Array(16).fill(0));
+  const initialGridSize = 2;
+  const maxGridSize = 6;
+  const [gridSize, setGridSize] = useState<number>(initialGridSize);
+  const [cards, setCards] = useState<number[]>(Array(initialGridSize * initialGridSize).fill(0));
   const [sequence, setSequence] = useState<number[]>([]);
   const [userSequence, setUserSequence] = useState<number[]>([]);
   const [isShowing, setIsShowing] = useState<boolean>(true);
   const [message, setMessage] = useState<string>('');
+  const [sequenceLength, setSequenceLength] = useState<number>(2);
+  const timeoutsRef = useRef<NodeJS.Timeout[]>([]);
+
+  const colors = ['#f5c242', '#e4a101'];
 
   useEffect(() => {
     startNewGame();
-  }, []);
+    return () => {
+      timeoutsRef.current.forEach(timeout => clearTimeout(timeout));
+    };
+  }, [gridSize]);
 
   const startNewGame = () => {
-    const newSequence = Array.from({ length: 5 }, () => Math.floor(Math.random() * 16));
+    timeoutsRef.current.forEach(timeout => clearTimeout(timeout));
+    timeoutsRef.current = [];
+
+    const newSequence = Array.from({ length: sequenceLength }, () => Math.floor(Math.random() * (gridSize * gridSize)));
     setSequence(newSequence);
     setUserSequence([]);
     setMessage('');
+    setCards(Array(gridSize * gridSize).fill(0));
     showSequence(newSequence);
   };
 
   const showSequence = (sequence: number[]) => {
     setIsShowing(true);
+    let delay = 0;
+
     sequence.forEach((index, i) => {
-      setTimeout(() => {
+      const showTimeout = setTimeout(() => {
         setCards(prev => prev.map((card, idx) => (idx === index ? 1 : card)));
-        setTimeout(() => {
+        
+        const hideTimeout = setTimeout(() => {
           setCards(prev => prev.map((card, idx) => (idx === index ? 0 : card)));
           if (i === sequence.length - 1) setIsShowing(false);
         }, 500);
-      }, i * 1000);
+        
+        timeoutsRef.current.push(hideTimeout);
+      }, delay);
+      
+      timeoutsRef.current.push(showTimeout);
+      delay += 1000;
     });
   };
 
@@ -44,7 +65,12 @@ function MemoryChallenge() {
       setUserSequence([]);
     } else if (userSequence.length + 1 === sequence.length) {
       setUserSequence([]);
-      setMessage('Correct! You remembered the sequence.');
+      setMessage('Next level');
+      setSequenceLength(prev => prev + 1);
+      if (gridSize < maxGridSize) {
+        setGridSize(prev => prev + 1);
+      }
+      startNewGame();
     }
   };
 
@@ -52,12 +78,14 @@ function MemoryChallenge() {
     <div className="container" style={{ display: 'flex', flexDirection: 'column', justifyContent: 'center', height: '100vh' }}>
       <h1>Memory Challenge</h1>
       {message && <div className="message">{message}</div>}
-      <div className="card-grid">
+      <div className="card-grid" style={{ gridTemplateColumns: `repeat(${gridSize}, 1fr)`, gap: '10px' }}>
         {cards.map((card, index) => (
           <div
             key={index}
             className={`card ${card ? 'active' : ''}`}
             style={{
+              width: '60px',
+              height: '60px',
               backgroundColor: card ? colors[index % colors.length] : undefined,
               backgroundImage: card ? undefined : 'url(src/assets/img/logo.jpeg)',
               backgroundSize: 'cover',
@@ -67,7 +95,9 @@ function MemoryChallenge() {
           />
         ))}
       </div>
-      <button onClick={startNewGame} className="restart-button">Restart Game</button>
+      {message === 'Incorrect! Try again.' && (
+        <button onClick={startNewGame} className="restart-button">Restart Game</button>
+      )}
     </div>
   );
 }
diff --git a/client/src/components/MemoryChallenge/main.css b/client/src/components/MemoryChallenge/main.css
index 2f5daf4..a0d0538 100644
--- a/client/src/components/MemoryChallenge/main.css
+++ b/client/src/components/MemoryChallenge/main.css
@@ -3,13 +3,11 @@ body {
 }
 
 .container {
-    display: flex;
-    flex-direction: column;
-    justify-content: center;
-    align-items: center;
-    height: 100%;
-    width: 100%;
-    text-align: center;
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  justify-content: center;
+  height: 100vh;
 }
 
 h1 {
@@ -19,15 +17,20 @@ h1 {
 
 .card-grid {
   display: grid;
-  grid-template-columns: repeat(4, 100px);
   gap: 10px;
+  margin-top: 20px;
 }
 
 .card {
-  height: 100px;
+  width: 60px;
+  height: 60px;
+  border-radius: 8px;
   cursor: pointer;
-  transition: transform 0.3s;
-  border-image: url('src/assets/img/logo.jpeg');
+  transition: transform 0.2s;
+}
+
+.card.active {
+  transform: scale(1.1);
 }
 
 .message {

From 3aeaf0bb112e166c90317e6db86ac63d2d453da4 Mon Sep 17 00:00:00 2001
From: kimcascante <kiimcm9@gmail.com>
Date: Mon, 3 Feb 2025 15:43:11 -0600
Subject: [PATCH 3/3] feat: removing line 70

---
 client/src/main.tsx | 1 -
 1 file changed, 1 deletion(-)

diff --git a/client/src/main.tsx b/client/src/main.tsx
index 7acf85d..24dc896 100644
--- a/client/src/main.tsx
+++ b/client/src/main.tsx
@@ -64,7 +64,6 @@ async function main() {
                 <Route path='/bag' element={<Bag sdk={sdk} />} />
                 <Route path='/play' element={<Tamagotchi sdk={sdk} />} />
                 <Route path='/chat' element={<Chat />} />
-                <Route path='/memoryChallenge' element={<MemoryChallenge />} />
               </Routes>
             </Router>
           </StarknetConfig>