A polished, Tetris-inspired browser game built with React, TypeScript, Vite, and Tailwind CSS. It delivers responsive controls, rich scoring mechanics, and replayable surprises like daily challenges, achievements, and unlockable themes. Optimized for desktop and mobile (including iframe embeds).

• Full Tetris toolkit: 10×20 board, 7-bag randomizer, SRS wall kicks, hold queue, next previews
• Advanced scoring: combos, T-Spins, back-to-back bonuses, soft/hard drop points, level-up pacing
• Perks enabled: Daily Challenge with fixed seed, Zen mode, ghost + shadow toggles, achievements & theme unlocks
• Responsive UX: canvas rendering at 60 FPS, keyboard + mobile touch controls, reduced-motion support, focus guard for iframe embeds
• Persistent progress: high scores, settings, achievements, and last seeds stored in localStorage
• Delightful polish: neon HUD, soundscape with volume toggle, tutorial overlay, focus/blur pausing

npm install
npm run dev

Open http://localhost:5173. The dev server rebuilds instantly thanks to Vite.

• npm run dev – Vite dev server with HMR
• npm run build – Type-check + production bundle (dist/)
• npm run preview – Preview built bundle locally
• npm run test – Vitest unit tests for logic helpers
• npm run lint – ESLint with TypeScript + React rules
• npm run format – Prettier formatting

1. Push to main; a GitHub Actions workflow in .github/workflows/gh-pages.yml builds and deploys to gh-pages
2. In repo settings → Pages, choose the gh-pages branch (root)
3. Access the live game at https://<username>.github.io/block-game/

<iframe
  src="https://<username>.github.io/block-game/"
  width="420"
  height="720"
  style="border:0; max-width:100%; aspect-ratio: 7 / 12;"
  allow="gamepad *"
  loading="lazy">
</iframe>

If an embed blocks focus, the game surfaces a “Click to focus” overlay so players can activate keyboard controls.

• Rendering: GameCanvas draws the board on a <canvas> (neon theme, ghost/clearing overlays)
• State: useGameEngine hook encapsulates bag generation, gravity, scoring, achievements, persistence
• Input: useInput wraps keyboard repeat, touch gestures & mobile buttons with DAS/ARR timings
• Logic modules: pure helpers for pieces, rotation, board mutation, scoring, bag RNG, theme metadata, storage
• Audio: lightweight WebAudio soundscape with adjustable gain

Vitest covers the critical core logic:

• board.test.ts – board creation, locking, line clearing, drop offsets
• rotate.test.ts – SRS wall kicks & collision rejection
• score.test.ts – scoring multipliers, combos, level progression
• bag.test.ts – 7-bag integrity + deterministic seeding

Run the suite with npm run test.

• Honors prefers-reduced-motion
• Focus-visible rings on interactive elements
• Pauses automatically when the browser/tab loses focus
• 60 FPS canvas draws, memoized state syncing, minimal re-renders

• Control remapping UI stored in localStorage
• Internationalization scaffold (en default)
• Share button to export the results card as PNG

Released under the MIT License.