{"_id":"@agallaoui/game-2048","name":"@agallaoui/game-2048","dist-tags":{"latest":"1.0.0"},"versions":{"1.0.0":{"name":"@agallaoui/game-2048","private":false,"version":"1.0.0","description":"A lightweight, zero-dependency 2048 game React component","main":"dist/index.js","module":"dist/index.mjs","types":"dist/index.d.ts","exports":{".":{"types":"./dist/index.d.ts","import":"./dist/index.mjs","require":"./dist/index.js"},"./styles.css":"./dist/styles.css"},"scripts":{"build":"tsup","dev":"tsup --watch","prepublishOnly":"npm run build"},"keywords":["react","2048","game","puzzle","lightweight","zero-dependency"],"author":{"name":"gal1aoui"},"license":"MIT","peerDependencies":{"react":">=16.8.0"},"devDependencies":{"@types/react":"^18.2.0","tsup":"^8.0.0","typescript":"^5.0.0"},"repository":{"type":"git","url":"git+https://github.com/gal1aoui/2048-Package.git"},"bugs":{"url":"https://github.com/gal1aoui/2048-Package/issues"},"homepage":"https://github.com/gal1aoui/2048-Package#readme","_id":"@agallaoui/game-2048@1.0.0","gitHead":"1fcfb6df2e43c494be54f80c88d25d6e61ed93de","_nodeVersion":"22.18.0","_npmVersion":"10.9.3","dist":{"integrity":"sha512-rYC/Z+aKFt5kfWFekVivSacbve97OpWuZ0gY7UDZDN+WotCN7EsXvAsILVHJGNanj/aYQEX4xB8ssd8p31bnmw==","shasum":"c9bfb86a3c0777c7bd1bb987223dd02ccdbb830c","tarball":"https://registry.npmjs.org/@agallaoui/game-2048/-/game-2048-1.0.0.tgz","fileCount":10,"unpackedSize":137370,"signatures":[{"keyid":"SHA256:DhQ8wR5APBvFHLF/+Tc+AYvPOdTpcIDqOhxsBHRwC7U","sig":"MEUCIQCHPc4sGgESklgoOmnAIDf1YchImdd0Kxp0/58sLsEvDgIgFNw639rWhhsJvAcNfZK9KRlwvxfOeWtMdgDtICZfYzo="}]},"_npmUser":{"name":"agallaoui","email":"achref.gallaoui.dev@gmail.com"},"directories":{},"maintainers":[{"name":"agallaoui","email":"achref.gallaoui.dev@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages-npm-production","tmp":"tmp/game-2048_1.0.0_1769706621854_0.08073271318473862"},"_hasShrinkwrap":false}},"time":{"created":"2026-01-29T17:10:21.322Z","1.0.0":"2026-01-29T17:10:22.010Z","modified":"2026-01-29T17:10:22.233Z"},"maintainers":[{"name":"agallaoui","email":"achref.gallaoui.dev@gmail.com"}],"description":"A lightweight, zero-dependency 2048 game React component","homepage":"https://github.com/gal1aoui/2048-Package#readme","keywords":["react","2048","game","puzzle","lightweight","zero-dependency"],"repository":{"type":"git","url":"git+https://github.com/gal1aoui/2048-Package.git"},"author":{"name":"gal1aoui"},"bugs":{"url":"https://github.com/gal1aoui/2048-Package/issues"},"license":"MIT","readme":"# @agallaoui/game-2048\n\nA lightweight, zero-dependency 2048 game React component.\n\n## Features\n\n- Zero runtime dependencies (only React as peer dependency)\n- Player name entry with localStorage persistence\n- High scores leaderboard\n- Responsive design (desktop & mobile)\n- Keyboard controls (arrow keys)\n- Touch/swipe controls for mobile\n- Win popup at 2048 with continue option\n- Dark mode support\n- CSS animations\n\n## Installation\n\n```bash\nnpm install @agallaoui/game-2048\n```\n\n## Usage\n\n```jsx\nimport { Game2048 } from '@agallaoui/game-2048';\nimport '@agallaoui/game-2048/styles.css';\n\nfunction App() {\n  return (\n    <Game2048\n      buttonText=\"Play 2048\"\n      buttonPosition={{ bottom: 20, right: 20 }}\n      gamePosition={{ bottom: 80, right: 20 }}\n      showCloseButton={true}\n    />\n  );\n}\n\nexport default App;\n```\n\n## Props\n\n| Prop | Type | Default | Description |\n|------|------|---------|-------------|\n| `buttonText` | `string` | `\"Play 2048\"` | Text displayed on the trigger button |\n| `buttonPosition` | `Position` | `{ bottom: 20, right: 20 }` | Position of the trigger button |\n| `gamePosition` | `Position` | `{ bottom: 80, right: 20 }` | Position of the game panel when open |\n| `buttonClassName` | `string` | - | Custom class for the trigger button |\n| `showCloseButton` | `boolean` | `true` | Whether to show close button on game panel |\n| `defaultOpen` | `boolean` | `false` | Start with game already open |\n| `onOpen` | `() => void` | - | Callback when game is opened |\n| `onClose` | `() => void` | - | Callback when game is closed |\n\n### Position Type\n\n```ts\ninterface Position {\n  top?: string | number;\n  right?: string | number;\n  bottom?: string | number;\n  left?: string | number;\n}\n```\n\n### Example Positions\n\n```jsx\n// Bottom right (default)\n<Game2048 buttonPosition={{ bottom: 20, right: 20 }} />\n\n// Top left\n<Game2048 buttonPosition={{ top: 20, left: 20 }} gamePosition={{ top: 80, left: 20 }} />\n\n// Center bottom\n<Game2048 buttonPosition={{ bottom: 20, left: '50%' }} />\n```\n\n## How to Play\n\n1. Enter your name to start the game\n2. Use **arrow keys** (desktop) or **swipe** (mobile) to move tiles\n3. Tiles with the same number merge when they touch\n4. Reach **2048** to win!\n5. Continue playing after winning to achieve the highest score\n\n## Controls\n\n| Platform | Control |\n|----------|---------|\n| Desktop  | Arrow keys (↑ ↓ ← →) |\n| Mobile   | Swipe gestures |\n\n## Features\n\n### Score Persistence\n- Scores are automatically saved to localStorage\n- Top 10 high scores are displayed on the start screen\n- Personal best score is tracked\n\n### Responsive Design\n- Works on all screen sizes\n- Optimized for both desktop and mobile devices\n- Touch-friendly controls\n\n### Win & Continue\n- Win popup appears when you reach 2048\n- Option to continue playing for a higher score\n- Game over detection when no moves are available\n\n## Styling\n\nThe game comes with a default theme that supports both light and dark modes. All styles use the `game2048-` prefix to avoid conflicts.\n\n### CSS Custom Properties\n\nYou can customize the appearance by overriding CSS custom properties:\n\n```css\n:root {\n  --game2048-bg: #faf8ef;\n  --game2048-board-bg: #bbada0;\n  --game2048-button-bg: #8f7a66;\n  /* ... and more */\n}\n```\n\n## TypeScript Support\n\nThis package includes TypeScript type definitions.\n\n```typescript\nimport { Game2048 } from '@agallaoui/game-2048';\nimport type { GameState, ScoreEntry } from '@agallaoui/game-2048';\n```\n\n## Browser Support\n\n- Chrome (latest)\n- Firefox (latest)\n- Safari (latest)\n- Edge (latest)\n- Mobile browsers (iOS Safari, Chrome for Android)\n\n## Demo\n\nA demo app is included in the `demo/` folder. To run it:\n\n```bash\n# From the root directory\ncd demo\nnpm install\nnpm run dev\n```\n\nThen open http://localhost:5173 in your browser.\n\n## Development\n\n```bash\n# Install dependencies\nnpm install\n\n# Build the package\nnpm run build\n\n# Watch mode\nnpm run dev\n```\n\n## License\n\nMIT\n\n## Author\n\n[gal1aoui](https://github.com/gal1aoui)\n","readmeFilename":"README.md","_rev":"1-56ee430f3410af650785b87c3aea277a"}