Memory game refactor

apps/react/src/challenges/memory-game/components/game-controls.jsx

@@ -0,0 +1,25 @@
+import styles from '../styles.module.css';
+
+export function GameControls({ level, isGameInProgress, isGameOver, onNext, onRestart }) {
+  if (isGameInProgress) {
+    return null;
+  }
+
+  if (isGameOver) {
+    return (
+      <div>
+        <button className={styles.button} onClick={onRestart}>
+          Restart
+        </button>
+      </div>
+    );
+  }
+
+  return (
+    <div>
+      <button className={styles.button} onClick={onNext}>
+        {level === 0 ? 'Start' : 'Next'}
+      </button>
+    </div>
+  );
+}

apps/react/src/challenges/memory-game/components/game.jsx

@@ -0,0 +1,23 @@
+import GridDisplay from './grid-display';
+
+export default function Game({ level, size, onComplete, onError, life }) {
+  if (level === 0) {
+    return null;
+  }
+
+  return (
+    <section>
+      <h3>Level: {level}</h3>
+
+      <GridDisplay
+        rows={size.rows}
+        cols={size.cols}
+        onComplete={onComplete}
+        onError={onError}
+        disabled={life === 0}
+      />
+
+      <p style={{ fontSize: '2rem' }}>Life Left: {life}</p>
+    </section>
+  );
+}

apps/react/src/challenges/memory-game/components/grid-display.jsx

@@ -0,0 +1,68 @@
+import { useEffect, useRef, useState } from 'react';
+import { getMemoryGrid } from '../utils/utils';
+import { Grid } from './grid';
+import { config } from '../config';
+
+export default function GridDisplay({ rows, cols, onError, onComplete, disabled }) {
+  const [userGrid, setUserGrid] = useState([]);
+  const activeCells = useRef(0);
+  const gridRef = useRef();
+  const gameInProgress = useRef(false);
+
+  useEffect(() => {
+    const { grid, activeCount } = getMemoryGrid(rows, cols);
+    setUserGrid(grid);
+    gridRef.current = grid;
+    activeCells.current = activeCount;
+
+    const timeoutId = setTimeout(() => {
+      setUserGrid((prevGrid) => prevGrid.map((rows) => rows.map(() => false)));
+      gameInProgress.current = true;
+    }, config.timer);
+
+    return () => clearTimeout(timeoutId);
+  }, [rows, cols]);
+
+  function onCellClick(rowIndex, colIndex) {
+    // If the cell is already clicked or the game is not in progress
+    if (userGrid[rowIndex][colIndex] || !gameInProgress.current) {
+      return;
+    }
+
+    // If the cell is active
+    if (gridRef.current[rowIndex][colIndex]) {
+      setUserGrid((prevGrid) =>
+        prevGrid.map((rows, rIndex) =>
+          rows.map((cell, cIndex) => (rIndex === rowIndex && cIndex === colIndex ? true : cell))
+        )
+      );
+
+      gridRef.current[rowIndex][colIndex] = false;
+      activeCells.current = activeCells.current - 1;
+    } else {
+      // If the cell is not active
+      onError();
+    }
+
+    // If all the active cells are clicked
+    if (activeCells.current === 0) {
+      onComplete();
+      gameInProgress.current = false;
+    }
+  }
+
+  return (
+    <Grid rows={userGrid.length} cols={userGrid[0]?.length} width={0.9 * window.innerWidth}>
+      {userGrid.map((rows, rowIndex) =>
+        rows.map((cell, colIndex) => (
+          <button
+            disabled={disabled}
+            key={`${rowIndex}-${colIndex}`}
+            onClick={() => onCellClick(rowIndex, colIndex)}
+            style={{ backgroundColor: cell ? 'yellow' : 'white' }}
+          />
+        ))
+      )}
+    </Grid>
+  );
+}

apps/react/src/challenges/memory-game/components/grid.tsx

@@ -0,0 +1,18 @@
+import styles from '../styles.module.css';
+
+export function Grid({ rows, cols, width, children }) {
+  const gridStyle = {
+    gridTemplateRows: `repeat(${rows}, 1fr)`,
+    gridTemplateColumns: `repeat(${cols}, 1fr)`,
+    width: `${width - 20}px`,
+    height: `${((width - 20) / cols) * rows}px`,
+    maxHeight: `${rows * 100}px`,
+    maxWidth: `${cols * 100}px`,
+  };
+
+  return (
+    <div className={styles.grid} style={gridStyle}>
+      {children}
+    </div>
+  );
+}

apps/react/src/challenges/memory-game/config.js

@@ -0,0 +1,6 @@
+export const config = {
+  rows: 3,
+  cols: 3,
+  life: 5,
+  timer: 3000,
+};