The New Snap Game

A modern implementation of the classic card game "Snap" built with React, TypeScript, and Vite. This project demonstrates clean architecture, modular game logic, and a responsive UI for an engaging browser-based card game experience.

Features

• Classic Snap game rules
• Responsive and interactive game board
• Modular game logic (TypeScript)
• Fast development with Vite
• ESLint and TypeScript for code quality

Getting Started

Prerequisites

• Node.js (v16+ recommended)
• npm (v8+ recommended)

Installation

npm install

Running the App

npm run dev

Open your browser to the local address shown in the terminal (usually http://localhost:5173).

Building for Production

npm run build

Project Structure

/ (root)
├── public/           # Static assets
├── src/
│   ├── App.tsx       # Main React component
│   ├── game/         # Game logic, types, and sample data
│   ├── components/   # UI components
│   ├── pages/        # Page-level components (e.g., GameBoard)
│   └── hooks/        # Custom React hooks
├── package.json      # Project metadata and scripts
├── vite.config.ts    # Vite configuration
└── README.md         # Project documentation

Development

• Code style is enforced with ESLint and TypeScript.
• Hot Module Replacement (HMR) is enabled for fast feedback.
• Game logic is separated in src/game/ for easy testing and extension.

Contributing

Pull requests are welcome! For major changes, please open an issue first to discuss what you would like to change.

License

MIT (or specify your license here)

---

Below is the original template information for Vite + React + TypeScript:

React + TypeScript + Vite

This template provides a minimal setup to get React working in Vite with HMR and some ESLint rules.

Currently, two official plugins are available:

• @vitejs/plugin-react uses Babel for Fast Refresh
• @vitejs/plugin-react-swc uses SWC for Fast Refresh

Expanding the ESLint configuration

If you are developing a production application, we recommend updating the configuration to enable type-aware lint rules:

export default tseslint.config([
  globalIgnores(['dist']),
  {
    files: ['**/*.{ts,tsx}'],
    extends: [
      // Other configs...

      // Remove tseslint.configs.recommended and replace with this
      ...tseslint.configs.recommendedTypeChecked,
      // Alternatively, use this for stricter rules
      ...tseslint.configs.strictTypeChecked,
      // Optionally, add this for stylistic rules
      ...tseslint.configs.stylisticTypeChecked,

      // Other configs...
    ],
    languageOptions: {
      parserOptions: {
        project: ['./tsconfig.node.json', './tsconfig.app.json'],
        tsconfigRootDir: import.meta.dirname,
      },
      // other options...
    },
  },
])

You can also install eslint-plugin-react-x and eslint-plugin-react-dom for React-specific lint rules:

// eslint.config.js
import reactX from 'eslint-plugin-react-x'
import reactDom from 'eslint-plugin-react-dom'

export default tseslint.config([
  globalIgnores(['dist']),
  {
    files: ['**/*.{ts,tsx}'],
    extends: [
      // Other configs...
      // Enable lint rules for React
      reactX.configs['recommended-typescript'],
      // Enable lint rules for React DOM
      reactDom.configs.recommended,
    ],
    languageOptions: {
      parserOptions: {
        project: ['./tsconfig.node.json', './tsconfig.app.json'],
        tsconfigRootDir: import.meta.dirname,
      },
      // other options...
    },
  },
])