Build and develop a Tetris game using React, TypeScript, and Vite. Handles game logic, rendering, controls, and state management following the project's architecture patterns.
This skill helps you build and develop a Tetris game using React + TypeScript + Vite, following the architecture patterns established in the with-claude learning project.
The Tetris game is located in the `tetris-game/` directory with the following key files:
When working with the Tetris game:
1. **Navigate to the project directory:**
```bash
cd tetris-game
```
2. **Install dependencies (if not already installed):**
```bash
npm install
```
3. **Start the development server:**
```bash
npm run dev
```
The game will typically run on http://localhost:5173 or 5174
4. **Build for production:**
```bash
npm run build
```
5. **Preview production build:**
```bash
npm run preview
```
Follow these architectural patterns when modifying or extending the game:
1. **Separation of Concerns:**
- Keep game logic in `src/utils/tetris.ts` as pure functions
- Manage state in `src/hooks/useTetris.ts` using React hooks
- Handle input separately in `src/hooks/useKeyboard.ts`
- Keep components purely presentational
2. **Type Safety:**
- Define all game types in `src/types/tetris.ts`
- Use TypeScript strictly throughout the codebase
- Ensure type definitions for GameState, Tetromino, Board, and other game entities
3. **Testability:**
- Extract game logic into utility functions that can be tested independently
- Avoid mixing UI logic with game logic
The game supports the following keyboard controls:
When adding features or fixing bugs:
1. **Read existing code first** - Use Read tool to understand current implementation before making changes
2. **Follow the hooks pattern** - All game state should flow through `useTetris`
3. **Keep utilities pure** - Functions in `src/utils/tetris.ts` should be side-effect free
4. **Maintain type safety** - Update type definitions when adding new game features
5. **Test game logic** - Ensure core mechanics work correctly before UI implementation
1. Define types in `src/types/tetris.ts` if needed
2. Implement logic in `src/utils/tetris.ts`
3. Update state management in `src/hooks/useTetris.ts`
4. Update UI components as needed
1. Update `src/hooks/useKeyboard.ts` for new key mappings
2. Ensure the hook properly communicates with `useTetris`
1. Modify `src/components/Board.tsx` for board display changes
2. Update `src/components/GameInfo.tsx` for score/info changes
3. Keep components focused on presentation only
Leave a review
No reviews yet. Be the first to review this skill!
# Download SKILL.md from killerskills.ai/api/skills/tetris-game-development/raw