memory game

.dockerignore

@@ -0,0 +1,10 @@
+node_modules
+npm-debug.log
+Dockerfile
+.dockerignore
+.git
+.github
+.gitignore
+README.md
+.DS_Store
+dist 

.gitattributes

@@ -1,38 +1,3 @@
-*.7z filter=lfs diff=lfs merge=lfs -text
-*.arrow filter=lfs diff=lfs merge=lfs -text
-*.bin filter=lfs diff=lfs merge=lfs -text
-*.bz2 filter=lfs diff=lfs merge=lfs -text
-*.ckpt filter=lfs diff=lfs merge=lfs -text
-*.ftz filter=lfs diff=lfs merge=lfs -text
-*.gz filter=lfs diff=lfs merge=lfs -text
-*.h5 filter=lfs diff=lfs merge=lfs -text
-*.joblib filter=lfs diff=lfs merge=lfs -text
-*.lfs.* filter=lfs diff=lfs merge=lfs -text
-*.mlmodel filter=lfs diff=lfs merge=lfs -text
-*.model filter=lfs diff=lfs merge=lfs -text
-*.msgpack filter=lfs diff=lfs merge=lfs -text
-*.npy filter=lfs diff=lfs merge=lfs -text
-*.npz filter=lfs diff=lfs merge=lfs -text
-*.onnx filter=lfs diff=lfs merge=lfs -text
-*.ot filter=lfs diff=lfs merge=lfs -text
-*.parquet filter=lfs diff=lfs merge=lfs -text
-*.pb filter=lfs diff=lfs merge=lfs -text
-*.pickle filter=lfs diff=lfs merge=lfs -text
-*.pkl filter=lfs diff=lfs merge=lfs -text
-*.pt filter=lfs diff=lfs merge=lfs -text
-*.pth filter=lfs diff=lfs merge=lfs -text
-*.rar filter=lfs diff=lfs merge=lfs -text
-*.safetensors filter=lfs diff=lfs merge=lfs -text
-saved_model/**/* filter=lfs diff=lfs merge=lfs -text
-*.tar.* filter=lfs diff=lfs merge=lfs -text
-*.tar filter=lfs diff=lfs merge=lfs -text
-*.tflite filter=lfs diff=lfs merge=lfs -text
-*.tgz filter=lfs diff=lfs merge=lfs -text
-*.wasm filter=lfs diff=lfs merge=lfs -text
-*.xz filter=lfs diff=lfs merge=lfs -text
-*.zip filter=lfs diff=lfs merge=lfs -text
-*.zst filter=lfs diff=lfs merge=lfs -text
-*tfevents* filter=lfs diff=lfs merge=lfs -text
 public/media/*.png filter=lfs diff=lfs merge=lfs -text
 public/media/*.jpg filter=lfs diff=lfs merge=lfs -text
 public/media/*.mp4 filter=lfs diff=lfs merge=lfs -text

.gitignore

@@ -0,0 +1,24 @@
+# Logs
+logs
+*.log
+npm-debug.log*
+yarn-debug.log*
+yarn-error.log*
+pnpm-debug.log*
+lerna-debug.log*
+
+node_modules
+dist
+dist-ssr
+*.local
+
+# Editor directories and files
+.vscode/*
+!.vscode/extensions.json
+.idea
+.DS_Store
+*.suo
+*.ntvs*
+*.njsproj
+*.sln
+*.sw?

Dockerfile

@@ -1,50 +1,27 @@
-# Read the doc: https://huggingface.co/docs/hub/spaces-sdks-docker
-# you will also find guides on how best to write your Dockerfile
+# Build stage
+FROM node:20-alpine as build
 
-############################
-# Stage 1 – Build frontend #
-############################
-
-FROM node:20 AS frontend-builder
-
-WORKDIR /frontend
-
-# Copy and install deps
-COPY ./frontend/package.json ./frontend/tsconfig.json ./frontend/vite.config.ts ./frontend/index.html ./
-COPY ./frontend/src ./src
-RUN npm install --legacy-peer-deps && npm run build
+WORKDIR /app
 
-###########################
-# Stage 2 – Backend image  #
-###########################
+# Copy package files and install dependencies
+COPY package.json package-lock.json ./
+RUN npm ci
 
-FROM python:3.9
+# Copy all files and build the project
+COPY . .
+RUN npm run build
 
-RUN useradd -m -u 1000 user
-USER user
-ENV PATH="/home/user/.local/bin:$PATH"
+# Serve stage
+FROM node:20-alpine as serve
 
 WORKDIR /app
 
-COPY --chown=user ./requirements.txt requirements.txt
-RUN pip install --no-cache-dir --upgrade -r requirements.txt
-
-COPY --chown=user . /app
-
-# Copy built static files from frontend stage
-COPY --from=frontend-builder /frontend/dist ./static
-
-# ------------------------------------------------------------------------------
-# NOTE: Hugging Face Spaces run inside a headless container.  The Snake game
-# itself requires an X11 display and therefore cannot run on the Space.  The
-# FastAPI app in `app.py` just serves a landing page and a health-check.
-# ------------------------------------------------------------------------------
+# Install serve globally
+RUN npm install -g serve
 
-# Install lightweight additional libraries to satisfy pygame at import time.
-# These X11/SDL libs are small and safe even for headless use.
-RUN apt-get update && apt-get install -y --no-install-recommends \
-    libsdl2-2.0-0 libsdl2-image-2.0-0 libsdl2-ttf-2.0-0 \
-    && rm -rf /var/lib/apt/lists/*
+# Copy built files from previous stage
+COPY --from=build /app/dist ./dist
 
-# Default command that Hugging Face will execute
-CMD ["uvicorn", "app:app", "--host", "0.0.0.0", "--port", "7860"]
+# Expose port and start server
+EXPOSE 3000
+CMD ["serve", "-s", "dist", "-l", "3000"] 

README.md

@@ -1,10 +1,70 @@
----
-title: Verbs Past
-emoji: 📊
-colorFrom: red
-colorTo: red
-sdk: docker
-pinned: false
----
-
-Check out the configuration reference at https://huggingface.co/docs/hub/spaces-config-reference
+# Memory Card Game
+
+A simple memory card game built with React and Vite.
+
+## Features
+
+- Match pairs of cards with emoji symbols
+- Track number of moves
+- Responsive design for desktop and mobile
+
+## Quick Start
+
+### Local Development
+
+```bash
+# Install dependencies
+npm install
+
+# Start development server
+npm run dev
+```
+
+### Building for Production
+
+```bash
+# Build for production
+npm run build
+
+# Preview production build
+npm run preview
+```
+
+## Docker Deployment
+
+Build and run the Docker container:
+
+```bash
+# Build the Docker image
+docker build -t memory-game .
+
+# Run the container
+docker run -p 3000:3000 memory-game
+```
+
+## Deployment to Hugging Face Spaces
+
+1. Create a new Space on Hugging Face: https://huggingface.co/spaces
+2. Choose Docker as the SDK
+3. Clone your Space repository
+4. Copy your project files to the repository
+5. Push to Hugging Face:
+
+```bash
+git add .
+git commit -m "Initial commit"
+git push
+```
+
+6. Hugging Face will automatically build and deploy your Docker container
+
+## How to Play
+
+1. Click on cards to flip them over
+2. Try to find matching pairs of emojis
+3. The game is complete when all pairs have been matched
+4. Click "New Game" to reset and play again
+
+## License
+
+MIT

app.py

@@ -1,15 +0,0 @@
-from fastapi import FastAPI
-from fastapi.responses import RedirectResponse
-from fastapi.staticfiles import StaticFiles
-
-# FastAPI application
-app = FastAPI(title="Snake Game React Space")
-
-# Serve compiled React app (generated by Vite) as static files
-app.mount("/", StaticFiles(directory="static", html=True), name="static")
-
-
-# Health-check endpoint for the Space
-@app.get("/ping")
-def ping():
-    return {"status": "ok"}

eslint.config.js

@@ -0,0 +1,28 @@
+import js from '@eslint/js'
+import globals from 'globals'
+import reactHooks from 'eslint-plugin-react-hooks'
+import reactRefresh from 'eslint-plugin-react-refresh'
+import tseslint from 'typescript-eslint'
+
+export default tseslint.config(
+  { ignores: ['dist'] },
+  {
+    extends: [js.configs.recommended, ...tseslint.configs.recommended],
+    files: ['**/*.{ts,tsx}'],
+    languageOptions: {
+      ecmaVersion: 2020,
+      globals: globals.browser,
+    },
+    plugins: {
+      'react-hooks': reactHooks,
+      'react-refresh': reactRefresh,
+    },
+    rules: {
+      ...reactHooks.configs.recommended.rules,
+      'react-refresh/only-export-components': [
+        'warn',
+        { allowConstantExport: true },
+      ],
+    },
+  },
+)

frontend/package.json

@@ -1,22 +0,0 @@
-{
-  "name": "snake-react",
-  "version": "0.0.1",
-  "private": true,
-  "type": "module",
-  "scripts": {
-    "dev": "vite",
-    "build": "vite build",
-    "preview": "vite preview"
-  },
-  "dependencies": {
-    "react": "^18.2.0",
-    "react-dom": "^18.2.0"
-  },
-  "devDependencies": {
-    "@types/react": "^18.2.0",
-    "@types/react-dom": "^18.2.0",
-    "@vitejs/plugin-react": "^4.1.0",
-    "typescript": "^5.4.4",
-    "vite": "^5.2.0"
-  }
-}

frontend/src/App.css

@@ -1,3 +0,0 @@
-canvas {
-  border: 1px solid #333;
-} 

frontend/src/App.tsx

@@ -1,100 +0,0 @@
-import React, { useEffect, useRef, useState } from 'react';
-import './App.css';
-
-type Point = { x: number; y: number };
-
-const CELL = 20;
-const COLS = 30;
-const ROWS = 20;
-const WIDTH = COLS * CELL;
-const HEIGHT = ROWS * CELL;
-
-const DIRECTIONS: Record<string, Point> = {
-  ArrowUp: { x: 0, y: -1 },
-  ArrowDown: { x: 0, y: 1 },
-  ArrowLeft: { x: -1, y: 0 },
-  ArrowRight: { x: 1, y: 0 },
-};
-
-function App() {
-  const canvasRef = useRef<HTMLCanvasElement>(null);
-  const [snake, setSnake] = useState<Point[]>([
-    { x: 5, y: 5 },
-  ]);
-  const [food, setFood] = useState<Point>({ x: 10, y: 10 });
-  const [dir, setDir] = useState<Point>({ x: 1, y: 0 });
-  const [gameOver, setGameOver] = useState(false);
-
-  const randomFood = () => {
-    return {
-      x: Math.floor(Math.random() * COLS),
-      y: Math.floor(Math.random() * ROWS),
-    };
-  };
-
-  useEffect(() => {
-    const handleKey = (e: KeyboardEvent) => {
-      if (DIRECTIONS[e.key]) {
-        setDir(DIRECTIONS[e.key]);
-      }
-    };
-    window.addEventListener('keydown', handleKey);
-    return () => window.removeEventListener('keydown', handleKey);
-  }, []);
-
-  useEffect(() => {
-    const ctx = canvasRef.current?.getContext('2d');
-    if (!ctx) return;
-
-    const interval = setInterval(() => {
-      setSnake((prev: Point[]) => {
-        const head = { x: prev[0].x + dir.x, y: prev[0].y + dir.y };
-        // check wall
-        if (head.x < 0 || head.x >= COLS || head.y < 0 || head.y >= ROWS) {
-          setGameOver(true);
-          clearInterval(interval);
-          return prev;
-        }
-        // check self
-        if (prev.some((p: Point) => p.x === head.x && p.y === head.y)) {
-          setGameOver(true);
-          clearInterval(interval);
-          return prev;
-        }
-        const newSnake = [head, ...prev];
-        if (head.x === food.x && head.y === food.y) {
-          setFood(randomFood());
-        } else {
-          newSnake.pop();
-        }
-        return newSnake;
-      });
-    }, 100);
-    return () => clearInterval(interval);
-  }, [dir, food]);
-
-  useEffect(() => {
-    const ctx = canvasRef.current?.getContext('2d');
-    if (!ctx) return;
-    ctx.clearRect(0, 0, WIDTH, HEIGHT);
-
-    // draw food
-    ctx.fillStyle = 'red';
-    ctx.fillRect(food.x * CELL, food.y * CELL, CELL, CELL);
-
-    // draw snake
-    ctx.fillStyle = 'green';
-    snake.forEach((s: Point) => {
-      ctx.fillRect(s.x * CELL, s.y * CELL, CELL, CELL);
-    });
-  }, [snake, food]);
-
-  return (
-    <div className="wrapper">
-      {gameOver && <h2>Game Over</h2>}
-      <canvas ref={canvasRef} width={WIDTH} height={HEIGHT} />
-    </div>
-  );
-}
-
-export default App; 

frontend/src/global.d.ts

@@ -1 +0,0 @@
-declare module '*.css'; 

frontend/src/index.css

@@ -1,13 +0,0 @@
-body {
-  margin: 0;
-  font-family: system-ui, sans-serif;
-  display: flex;
-  justify-content: center;
-  align-items: center;
-  height: 100vh;
-  background-color: #f5f5f5;
-}
-
-.wrapper {
-  text-align: center;
-} 

frontend/src/main.tsx

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

frontend/tsconfig.json

@@ -1,16 +0,0 @@
-{
-  "compilerOptions": {
-    "target": "ES2020",
-    "module": "ESNext",
-    "jsx": "react-jsx",
-    "strict": true,
-    "esModuleInterop": true,
-    "forceConsistentCasingInFileNames": true,
-    "skipLibCheck": true,
-    "moduleResolution": "bundler",
-    "allowJs": false,
-    "resolveJsonModule": true
-  },
-  "types": ["vite/client"],
-  "include": ["src", "src/**/*.css", "src/global.d.ts"]
-} 

frontend/vite.config.ts

@@ -1,12 +0,0 @@
-import { defineConfig } from 'vite';
-import react from '@vitejs/plugin-react';
-
-export default defineConfig({
-  plugins: [react()],
-  server: {
-    port: 5173,
-  },
-  build: {
-    outDir: 'dist',
-  },
-}); 

huggingface-space.md

@@ -0,0 +1,20 @@
+---
+title: Memory Card Game
+emoji: 🎮
+colorFrom: blue
+colorTo: purple
+sdk: docker
+pinned: false
+app_port: 3000
+---
+
+# Memory Card Game
+
+A fun memory matching game built with React and Vite.
+
+Play by clicking on cards to reveal them and find matching pairs. The game tracks your moves and lets you know when you've won!
+
+## Technology Stack
+- React + TypeScript
+- Vite
+- Docker 

frontend/index.html → index.html

@@ -2,11 +2,12 @@
 <html lang="en">
   <head>
     <meta charset="UTF-8" />
+    <link rel="icon" type="image/svg+xml" href="/vite.svg" />
     <meta name="viewport" content="width=device-width, initial-scale=1.0" />
-    <title>Snake Game</title>
+    <title>Memory Card Game</title>
   </head>
   <body>
     <div id="root"></div>
     <script type="module" src="/src/main.tsx"></script>
   </body>
-</html> 
+</html>

package.json

@@ -0,0 +1,29 @@
+{
+  "name": "memory-card-game",
+  "private": true,
+  "version": "0.0.0",
+  "type": "module",
+  "scripts": {
+    "dev": "vite",
+    "build": "vite build",
+    "lint": "eslint .",
+    "preview": "vite preview"
+  },
+  "dependencies": {
+    "react": "^19.0.0",
+    "react-dom": "^19.0.0"
+  },
+  "devDependencies": {
+    "@eslint/js": "^9.22.0",
+    "@types/react": "^19.0.10",
+    "@types/react-dom": "^19.0.4",
+    "@vitejs/plugin-react": "^4.3.4",
+    "eslint": "^9.22.0",
+    "eslint-plugin-react-hooks": "^5.2.0",
+    "eslint-plugin-react-refresh": "^0.4.19",
+    "globals": "^16.0.0",
+    "typescript": "~5.7.2",
+    "typescript-eslint": "^8.26.1",
+    "vite": "^6.3.1"
+  }
+}

requirements.txt

@@ -1,3 +0,0 @@
-fastapi
-uvicorn[standard]
-pygame

snake_game.py

@@ -1,155 +0,0 @@
-import pygame
-import random
-import sys
-
-# Initialize pygame
-pygame.init()
-
-# Screen dimensions
-WIDTH, HEIGHT = 600, 400
-CELL_SIZE = 20  # Size of a grid cell
-GRID_WIDTH = WIDTH // CELL_SIZE
-GRID_HEIGHT = HEIGHT // CELL_SIZE
-
-# Colors (R, G, B)
-WHITE = (255, 255, 255)
-BLACK = (0, 0, 0)
-RED = (200, 0, 0)
-GREEN = (0, 200, 0)
-DARK_GREEN = (0, 155, 0)
-
-# Frames per second
-FPS = 10
-
-# Directions
-UP = (0, -1)
-DOWN = (0, 1)
-LEFT = (-1, 0)
-RIGHT = (1, 0)
-
-# Create the screen
-screen = pygame.display.set_mode((WIDTH, HEIGHT))
-pygame.display.set_caption("Snake Game")
-clock = pygame.time.Clock()
-font = pygame.font.SysFont("arial", 24)
-
-
-def draw_grid():
-    """Draw grid lines (optional)."""
-    for x in range(0, WIDTH, CELL_SIZE):
-        pygame.draw.line(screen, BLACK, (x, 0), (x, HEIGHT))
-    for y in range(0, HEIGHT, CELL_SIZE):
-        pygame.draw.line(screen, BLACK, (0, y), (WIDTH, y))
-
-
-def random_food_position(snake_body):
-    """Return a random position not occupied by the snake."""
-    while True:
-        pos = (random.randint(0, GRID_WIDTH - 1), random.randint(0, GRID_HEIGHT - 1))
-        if pos not in snake_body:
-            return pos
-
-
-def draw_snake(snake_body):
-    for segment in snake_body:
-        rect = pygame.Rect(segment[0] * CELL_SIZE, segment[1] * CELL_SIZE, CELL_SIZE, CELL_SIZE)
-        pygame.draw.rect(screen, DARK_GREEN, rect)
-        pygame.draw.rect(screen, GREEN, rect.inflate(-4, -4))
-
-
-def draw_food(food_pos):
-    rect = pygame.Rect(food_pos[0] * CELL_SIZE, food_pos[1] * CELL_SIZE, CELL_SIZE, CELL_SIZE)
-    pygame.draw.rect(screen, RED, rect)
-
-
-def show_text(text, center):
-    surface = font.render(text, True, BLACK)
-    rect = surface.get_rect(center=center)
-    screen.blit(surface, rect)
-
-
-def game_over_screen(score):
-    screen.fill(WHITE)
-    show_text(f"Game Over! Score: {score}", (WIDTH // 2, HEIGHT // 2 - 20))
-    show_text("Press Enter to play again or Esc to quit", (WIDTH // 2, HEIGHT // 2 + 20))
-    pygame.display.flip()
-
-    waiting = True
-    while waiting:
-        for event in pygame.event.get():
-            if event.type == pygame.QUIT:
-                pygame.quit()
-                sys.exit()
-            elif event.type == pygame.KEYDOWN:
-                if event.key == pygame.K_RETURN:
-                    waiting = False
-                elif event.key == pygame.K_ESCAPE:
-                    pygame.quit()
-                    sys.exit()
-        clock.tick(60)
-
-
-def main():
-    # Initial snake setup
-    snake_body = [(GRID_WIDTH // 2, GRID_HEIGHT // 2)]
-    direction = RIGHT
-    food_pos = random_food_position(snake_body)
-    score = 0
-
-    running = True
-    while running:
-        clock.tick(FPS)
-        for event in pygame.event.get():
-            if event.type == pygame.QUIT:
-                pygame.quit()
-                sys.exit()
-            elif event.type == pygame.KEYDOWN:
-                if event.key == pygame.K_UP and direction != DOWN:
-                    direction = UP
-                elif event.key == pygame.K_DOWN and direction != UP:
-                    direction = DOWN
-                elif event.key == pygame.K_LEFT and direction != RIGHT:
-                    direction = LEFT
-                elif event.key == pygame.K_RIGHT and direction != LEFT:
-                    direction = RIGHT
-
-        # Calculate new head position
-        new_head = (snake_body[0][0] + direction[0], snake_body[0][1] + direction[1])
-
-        # Check collisions with walls
-        if (
-            new_head[0] < 0
-            or new_head[0] >= GRID_WIDTH
-            or new_head[1] < 0
-            or new_head[1] >= GRID_HEIGHT
-        ):
-            game_over_screen(score)
-            return  # Restart whole game
-
-        # Check collision with self
-        if new_head in snake_body:
-            game_over_screen(score)
-            return
-
-        # Move snake
-        snake_body.insert(0, new_head)
-
-        # Check if food eaten
-        if new_head == food_pos:
-            score += 1
-            food_pos = random_food_position(snake_body)
-        else:
-            snake_body.pop()  # Remove tail segment if no food eaten
-
-        # Draw everything
-        screen.fill(WHITE)
-        draw_grid()
-        draw_snake(snake_body)
-        draw_food(food_pos)
-        show_text(f"Score: {score}", (60, 20))
-        pygame.display.flip()
-
-
-if __name__ == "__main__":
-    while True:
-        main()  # Restartable game loop 

src/App.css

@@ -0,0 +1,128 @@
+.app {
+  max-width: 800px;
+  margin: 0 auto;
+  padding: 2rem;
+  text-align: center;
+}
+
+h1 {
+  font-size: 2.5rem;
+  margin-bottom: 1.5rem;
+  color: #333;
+}
+
+.game-info {
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+  margin-bottom: 2rem;
+  font-size: 1.2rem;
+}
+
+button {
+  background-color: #646cff;
+  color: white;
+  border: none;
+  padding: 0.5rem 1rem;
+  border-radius: 4px;
+  cursor: pointer;
+  font-size: 1rem;
+  transition: background-color 0.3s;
+}
+
+button:hover {
+  background-color: #535bf2;
+}
+
+.game-board {
+  display: grid;
+  grid-template-columns: repeat(4, 1fr);
+  grid-gap: 1rem;
+  max-width: 600px;
+  margin: 0 auto;
+}
+
+.card {
+  position: relative;
+  height: 120px;
+  border-radius: 8px;
+  perspective: 1000px;
+  cursor: pointer;
+  transition: transform 0.15s;
+}
+
+.card:hover {
+  transform: scale(1.03);
+}
+
+.card-front,
+.card-back {
+  position: absolute;
+  width: 100%;
+  height: 100%;
+  backface-visibility: hidden;
+  border-radius: 8px;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  transition: transform 0.6s;
+  box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
+}
+
+.card-front {
+  background-color: white;
+  transform: rotateY(180deg);
+  font-size: 3rem;
+}
+
+.card-back {
+  background-color: #646cff;
+  color: white;
+  font-size: 2rem;
+}
+
+.card.flipped .card-front {
+  transform: rotateY(0);
+}
+
+.card.flipped .card-back {
+  transform: rotateY(180deg);
+}
+
+.card.matched {
+  opacity: 0.7;
+}
+
+.game-over {
+  position: fixed;
+  top: 0;
+  left: 0;
+  right: 0;
+  bottom: 0;
+  background-color: rgba(0, 0, 0, 0.7);
+  display: flex;
+  flex-direction: column;
+  justify-content: center;
+  align-items: center;
+  color: white;
+  z-index: 10;
+}
+
+.game-over h2 {
+  font-size: 3rem;
+  margin-bottom: 1rem;
+}
+
+.game-over p {
+  font-size: 1.5rem;
+}
+
+@media (max-width: 600px) {
+  .game-board {
+    grid-template-columns: repeat(3, 1fr);
+  }
+  
+  .card {
+    height: 100px;
+  }
+}

src/App.tsx

@@ -0,0 +1,140 @@
+import { useState, useEffect } from 'react'
+import './App.css'
+
+// Card interface
+interface Card {
+  id: number;
+  content: string;
+  flipped: boolean;
+  matched: boolean;
+}
+
+function App() {
+  const emojis = ['🐱', '🐶', '🐭', '🐹', '🐰', '🦊', '🐻', '🐼'];
+  const [cards, setCards] = useState<Card[]>([]);
+  const [flippedCards, setFlippedCards] = useState<number[]>([]);
+  const [moves, setMoves] = useState(0);
+  const [gameOver, setGameOver] = useState(false);
+  
+  // Initialize game
+  useEffect(() => {
+    initGame();
+  }, []);
+  
+  // Check for matches when two cards are flipped
+  useEffect(() => {
+    if (flippedCards.length === 2) {
+      const timer = setTimeout(() => {
+        checkForMatch();
+      }, 700);
+      return () => clearTimeout(timer);
+    }
+  }, [flippedCards]);
+  
+  // Init game
+  const initGame = () => {
+    // Create pairs of cards with emojis
+    const cardPairs = [...emojis, ...emojis]
+      .map((emoji, index) => ({
+        id: index,
+        content: emoji,
+        flipped: false,
+        matched: false
+      }))
+      .sort(() => Math.random() - 0.5);
+    
+    setCards(cardPairs);
+    setFlippedCards([]);
+    setMoves(0);
+    setGameOver(false);
+  };
+  
+  // Handle card click
+  const handleCardClick = (id: number) => {
+    // Ignore if card is already flipped or if 2 cards are already flipped
+    if (
+      flippedCards.length === 2 || 
+      flippedCards.includes(id) || 
+      cards[id].matched
+    ) {
+      return;
+    }
+    
+    // Flip card
+    setCards(prevCards => 
+      prevCards.map(card => 
+        card.id === id ? { ...card, flipped: true } : card
+      )
+    );
+    
+    // Add card to flipped cards
+    setFlippedCards(prev => [...prev, id]);
+  };
+  
+  // Check for match
+  const checkForMatch = () => {
+    const [first, second] = flippedCards;
+    
+    if (cards[first].content === cards[second].content) {
+      // If match, keep cards flipped and mark as matched
+      setCards(prevCards => 
+        prevCards.map(card => 
+          card.id === first || card.id === second
+            ? { ...card, matched: true }
+            : card
+        )
+      );
+    } else {
+      // If no match, flip cards back
+      setCards(prevCards => 
+        prevCards.map(card => 
+          card.id === first || card.id === second
+            ? { ...card, flipped: false }
+            : card
+        )
+      );
+    }
+    
+    // Increment moves and reset flipped cards
+    setMoves(prevMoves => prevMoves + 1);
+    setFlippedCards([]);
+    
+    // Check if all cards are matched
+    const allMatched = cards.every(card => card.matched || flippedCards.includes(card.id));
+    if (allMatched) {
+      setGameOver(true);
+    }
+  };
+  
+  return (
+    <div className="app">
+      <h1>Memory Game</h1>
+      <div className="game-info">
+        <div>Moves: {moves}</div>
+        <button onClick={initGame}>New Game</button>
+      </div>
+      
+      <div className="game-board">
+        {cards.map(card => (
+          <div
+            key={card.id}
+            className={`card ${card.flipped || card.matched ? 'flipped' : ''} ${card.matched ? 'matched' : ''}`}
+            onClick={() => handleCardClick(card.id)}
+          >
+            <div className="card-back">?</div>
+            <div className="card-front">{card.content}</div>
+          </div>
+        ))}
+      </div>
+      
+      {gameOver && (
+        <div className="game-over">
+          <h2>Game Over!</h2>
+          <p>You won in {moves} moves!</p>
+        </div>
+      )}
+    </div>
+  )
+}
+
+export default App

src/index.css

@@ -0,0 +1,68 @@
+:root {
+  font-family: system-ui, Avenir, Helvetica, Arial, sans-serif;
+  line-height: 1.5;
+  font-weight: 400;
+
+  color-scheme: light dark;
+  color: rgba(255, 255, 255, 0.87);
+  background-color: #242424;
+
+  font-synthesis: none;
+  text-rendering: optimizeLegibility;
+  -webkit-font-smoothing: antialiased;
+  -moz-osx-font-smoothing: grayscale;
+}
+
+a {
+  font-weight: 500;
+  color: #646cff;
+  text-decoration: inherit;
+}
+a:hover {
+  color: #535bf2;
+}
+
+body {
+  margin: 0;
+  display: flex;
+  place-items: center;
+  min-width: 320px;
+  min-height: 100vh;
+}
+
+h1 {
+  font-size: 3.2em;
+  line-height: 1.1;
+}
+
+button {
+  border-radius: 8px;
+  border: 1px solid transparent;
+  padding: 0.6em 1.2em;
+  font-size: 1em;
+  font-weight: 500;
+  font-family: inherit;
+  background-color: #1a1a1a;
+  cursor: pointer;
+  transition: border-color 0.25s;
+}
+button:hover {
+  border-color: #646cff;
+}
+button:focus,
+button:focus-visible {
+  outline: 4px auto -webkit-focus-ring-color;
+}
+
+@media (prefers-color-scheme: light) {
+  :root {
+    color: #213547;
+    background-color: #ffffff;
+  }
+  a:hover {
+    color: #747bff;
+  }
+  button {
+    background-color: #f9f9f9;
+  }
+}

src/main.tsx

@@ -0,0 +1,10 @@
+import { StrictMode } from 'react'
+import { createRoot } from 'react-dom/client'
+import './index.css'
+import App from './App.tsx'
+
+createRoot(document.getElementById('root')!).render(
+  <StrictMode>
+    <App />
+  </StrictMode>,
+)

src/vite-env.d.ts

@@ -0,0 +1 @@
+/// <reference types="vite/client" />

tsconfig.app.json

@@ -0,0 +1,26 @@
+{
+  "compilerOptions": {
+    "tsBuildInfoFile": "./node_modules/.tmp/tsconfig.app.tsbuildinfo",
+    "target": "ES2020",
+    "useDefineForClassFields": true,
+    "lib": ["ES2020", "DOM", "DOM.Iterable"],
+    "module": "ESNext",
+    "skipLibCheck": true,
+
+    /* Bundler mode */
+    "moduleResolution": "bundler",
+    "allowImportingTsExtensions": true,
+    "isolatedModules": true,
+    "moduleDetection": "force",
+    "noEmit": true,
+    "jsx": "react-jsx",
+
+    /* Linting */
+    "strict": true,
+    "noUnusedLocals": true,
+    "noUnusedParameters": true,
+    "noFallthroughCasesInSwitch": true,
+    "noUncheckedSideEffectImports": true
+  },
+  "include": ["src"]
+}

tsconfig.json

@@ -0,0 +1,7 @@
+{
+  "files": [],
+  "references": [
+    { "path": "./tsconfig.app.json" },
+    { "path": "./tsconfig.node.json" }
+  ]
+}

tsconfig.node.json

@@ -0,0 +1,24 @@
+{
+  "compilerOptions": {
+    "tsBuildInfoFile": "./node_modules/.tmp/tsconfig.node.tsbuildinfo",
+    "target": "ES2022",
+    "lib": ["ES2023"],
+    "module": "ESNext",
+    "skipLibCheck": true,
+
+    /* Bundler mode */
+    "moduleResolution": "bundler",
+    "allowImportingTsExtensions": true,
+    "isolatedModules": true,
+    "moduleDetection": "force",
+    "noEmit": true,
+
+    /* Linting */
+    "strict": true,
+    "noUnusedLocals": true,
+    "noUnusedParameters": true,
+    "noFallthroughCasesInSwitch": true,
+    "noUncheckedSideEffectImports": true
+  },
+  "include": ["vite.config.ts"]
+}

vite.config.ts

@@ -0,0 +1,7 @@
+import { defineConfig } from 'vite'
+import react from '@vitejs/plugin-react'
+
+// https://vite.dev/config/
+export default defineConfig({
+  plugins: [react()],
+})