memorygame

Author: Zeynab

src/Memorygame.tsx

@@ -0,0 +1,75 @@
+import { useEffect, useState } from 'react';
+import './App.css';
+
+const TILE_COLORS = ['red', 'green', 'blue', 'yellow', 'Red', 'Green', 'Blue', 'Yellow'];
+
+export default function MemoryGame() {
+	const [myColors, setMyColors] = useState<any>([]);
+	const [tiles, setTiles] = useState<any>([]);
+	const [counter, setCounter] = useState<number>(1);
+	const [selected, setSelected] = useState<any>([]);
+
+	useEffect(() => {
+		setMyColors(TILE_COLORS);
+		shuffle(TILE_COLORS);
+	}, []);
+	// Write your code here.
+	function handleColor(item: any) {
+		setTiles([...tiles, item]);
+		setCounter((counter) => counter + 1);
+		if (counter === 1) {
+			if (tiles[0]?.toLowerCase() === item?.toLowerCase()) {
+				setSelected([...selected, tiles[0], item]);
+			}
+			setTimeout(() => {
+				setTiles([]);
+				setCounter(0);
+			}, 500);
+		}
+	}
+	return (
+		<>
+			<h1>Memory</h1>
+			<div className="board">
+				{myColors &&
+					myColors.map((item: string, index: number) => (
+						<div
+							key={index}
+							style={{
+								background: tiles.includes(item) ? item : selected.includes(item) ? item : 'white',
+							}}
+							className={`tile ${tiles.includes(item) ? item : selected.includes(item) ? item : ''}`}
+							onClick={() => handleColor(item)}
+						></div>
+					))}
+			</div>
+			{selected.length === TILE_COLORS.length && (
+				<>
+					<h1>You are the Winner</h1>
+					<button
+						onClick={() => {
+							setSelected([]);
+							shuffle(myColors);
+							setMyColors(TILE_COLORS);
+						}}
+					>
+						Restart
+					</button>
+				</>
+			)}
+		</>
+	);
+}
+
+/**
+ * Returns the array shuffled into a random order.
+ * Do not edit this function.
+ */
+function shuffle(array: string[]) {
+	for (let i = array.length - 1; i > 0; i--) {
+		const randomIndex = Math.floor(Math.random() * (i + 1));
+
+		[array[i], array[randomIndex]] = [array[randomIndex], array[i]];
+	}
+	return array;
+}

src/index.css

@@ -1,13 +1,52 @@
-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;
+#root {
+	text-align: center;
 }
 
-code {
-  font-family: source-code-pro, Menlo, Monaco, Consolas, 'Courier New',
-    monospace;
+h1 {
+	margin-bottom: 0;
 }
+
+button,
+input[type='button'] {
+	display: block;
+	margin: 0 10px 10px auto;
+	cursor: pointer;
+	padding: 12px;
+	font-size: 16px;
+	border-radius: 8px;
+	background-color: #02203c;
+	color: white;
+}
+
+.board {
+	display: flex;
+	flex-wrap: wrap;
+	justify-content: center;
+	gap: 10px;
+	padding: 10px;
+}
+
+.tile {
+	flex-basis: 40%;
+	border: 1px solid black;
+	width: 20px;
+	height: 20px;
+	background-color: white;
+	cursor: pointer;
+}
+
+.blue {
+	background-color: blue;
+}
+
+.yellow {
+	background-color: yellow;
+}
+
+.red {
+	background-color: red;
+}
+
+.green {
+	background-color: green;
+}

src/index.tsx

@@ -3,13 +3,14 @@ import ReactDOM from 'react-dom/client';
 import './index.css';
 import App from './App';
 import reportWebVitals from './reportWebVitals';
+import MemoryGame from './Memorygame';
 
 const root = ReactDOM.createRoot(
   document.getElementById('root') as HTMLElement
 );
 root.render(
   <React.StrictMode>
-    <App />
+    <MemoryGame/>
   </React.StrictMode>
 );