A modern implementation of the classic 2048 puzzle game built with React, TypeScript, and Vite. Join the numbers and get to the 2048 tile!
- Smooth animations and transitions
- Responsive design that works on desktop and mobile devices
- Keyboard controls for desktop (arrow keys)
- Touch/swipe controls for mobile devices
- Social media sharing when game is over
Before you begin, ensure you have the following installed:
- Node.js (v18.17.1 or higher required for Cloudflare Pages compatibility)
- pnpm (v8.7.1 or higher required)
-
Clone the repository:
git clone https://github.com/yourusername/puzzle-2024.git cd puzzle-2024 -
Verify your pnpm setup (optional):
./verify-pnpm.sh
or after cloning:
pnpm verify
This script checks if you have pnpm installed and if it meets the version requirements.
-
Install dependencies using pnpm:
pnpm install
To run the application in development mode with hot-reload:
pnpm devThis will start the development server at http://localhost:5173 (or another port if 5173 is already in use).
To run the tests:
pnpm testTo run the tests in watch mode:
pnpm test:watchTo run the tests with coverage:
pnpm test:coverageTo create a production build:
pnpm buildThe built files will be in the dist directory.
To preview the production build locally:
pnpm preview- Desktop: Use your arrow keys (↑, →, ↓, ←) to move the tiles.
- Mobile: Swipe up, right, down, or left to move the tiles.
When two tiles with the same number touch, they merge into one! Try to reach the 2048 tile.
- React 19.1.0
- TypeScript
- Vite
- CSS3 with animations
This project uses GitHub Actions for continuous integration and deployment:
- CI Workflow: On every push, GitHub Actions runs linting, tests, and builds the project to ensure everything is working correctly.
- Deployment Workflow: When changes are pushed to the main branch and all tests pass, the application is automatically deployed to Cloudflare Pages.
This project is configured to deploy to Cloudflare Pages with the following configuration:
- Node.js version: 18.17.1
- pnpm version: 8.7.1
- Build command:
pnpm build - Publish directory:
dist
The repository includes the following Cloudflare Pages configuration files:
.cloudflare/pages.toml: Configuration for Cloudflare Pages build settingspublic/_headers: Security headers for the deployed applicationpublic/_redirects: Routing configuration for the SPApublic/_worker.js: Cloudflare Worker for additional functionality
To set up the Cloudflare Pages deployment, you need to add the following secrets to your GitHub repository:
CLOUDFLARE_API_TOKEN: Your Cloudflare API token with Pages permissionsCLOUDFLARE_ACCOUNT_ID: Your Cloudflare account ID
This project is licensed under the MIT License—see the LICENSE file for details.
- Original 2048 game by Gabriele Cirulli
- Inspired by 1024 by Veewo Studio
This project was created by JetBrains Junie.