### Define Responsive Breakpoints with Media Queries (TypeScript)

Source: https://context7.com/gibbok/blocchi-puzzle/llms.txt

Defines viewport sizes and media queries for responsive layout using styled-components. Provides breakpoint values and example usage in styled components for dynamic styling based on screen size and orientation. Dependencies: TypeScript, styled-components, ./game/settings.

```typescript
import { mq, mq_o, DEVICE, SIZE } from './game/settings';
import styled from 'styled-components';

// Breakpoint values
console.log(SIZE.sm);  // 600px
console.log(SIZE.md);  // 960px
console.log(SIZE.lg);  // 1280px
console.log(SIZE.xl);  // 1930px

// Use in styled-components
const ResponsiveDiv = styled.div`
  width: 100%;

  ${mq.sm} {
    width: 90%;  // 0-600px
  }

  ${mq.md} {
    width: 80%;  // 600-960px
  }

  ${mq_o.l} {
    height: 90vmin;  // Landscape orientation
  }

  ${mq_o.p} {
    height: 80vmax;  // Portrait orientation
  }
`;

```

--------------------------------

### Create Empty Game Board with TypeScript

Source: https://context7.com/gibbok/blocchi-puzzle/llms.txt

Generates a new, empty game board with specified dimensions (rows and columns). This function is used to initialize the playfield at the start of a new game or after a reset.

```typescript
import { mkEmptyBoard } from './game/board';
import { BOARD_ROWS, BOARD_CELLS } from './game/settings';

// Create standard 20x10 board
const board = mkEmptyBoard(BOARD_ROWS, BOARD_CELLS);

// Result: 20 rows x 10 columns filled with NoTetro (0)
// [[0,0,0,0,0,0,0,0,0,0], [0,0,0,0,0,0,0,0,0,0], ...]
```

--------------------------------

### Rotate Tetromino Clockwise (TypeScript)

Source: https://context7.com/gibbok/blocchi-puzzle/llms.txt

Gets the next direction when rotating a tetromino clockwise. This function cycles through the possible directions (N, E, S, W) in a loop.

```typescript
import { rotateTetroDirectionCW } from './game/tetromino';
import { DirectionEnum } from './game/types';

let direction = DirectionEnum.N;

// Rotate clockwise: N → E → S → W → N
direction = rotateTetroDirectionCW(direction); // DirectionEnum.E
direction = rotateTetroDirectionCW(direction); // DirectionEnum.S
direction = rotateTetroDirectionCW(direction); // DirectionEnum.W
direction = rotateTetroDirectionCW(direction); // DirectionEnum.N (cycles back)
```

--------------------------------

### Get Tetromino Shape Data (TypeScript)

Source: https://context7.com/gibbok/blocchi-puzzle/llms.txt

Retrieves the 2D array representing the shape of a specific tetromino type in a given rotation direction. It requires the tetromino type and direction enums as input and returns the shape matrix.

```typescript
import { getTetroFromPieces } from './game/tetromino';
import { TetroEnum, DirectionEnum } from './game/types';

// Get T-piece facing North
const tetro = getTetroFromPieces(TetroEnum.T, DirectionEnum.N);

// Returns 2D array:
// [
//   [T, T, T],
//   [0, T, 0]
// ]

// Get T-piece facing East (rotated 90° clockwise)
const tetroEast = getTetroFromPieces(TetroEnum.T, DirectionEnum.E);
// [
//   [0, T],
//   [T, T],
//   [0, T]
// ]
```

--------------------------------

### Configure Redux Store with TypeScript

Source: https://context7.com/gibbok/blocchi-puzzle/llms.txt

Sets up the Redux store using Redux Toolkit, integrating game slice reducers for state management. It demonstrates dispatching actions and subscribing to state changes to monitor game progress.

```typescript
import { configureStore } from '@reduxjs/toolkit';
import { gameSlice } from './store';

// Create store with game reducer
const store = configureStore({
  reducer: gameSlice.reducer
});

// Dispatch actions
store.dispatch(gameSlice.actions.moveLeft());
store.dispatch(gameSlice.actions.moveRight());
store.dispatch(gameSlice.actions.moveDown());
store.dispatch(gameSlice.actions.moveUp());
store.dispatch(gameSlice.actions.checkBoard());
store.dispatch(gameSlice.actions.resetGame());

// Subscribe to state changes
store.subscribe(() => {
  const state = store.getState();
  console.log('Score:', state.score, 'Level:', state.level, 'Lines:', state.lines);
});
```

--------------------------------

### Configure Board Dimensions and Colors (TypeScript)

Source: https://context7.com/gibbok/blocchi-puzzle/llms.txt

Configures board dimensions and styling constants, including tile colors for different tetromino pieces. Provides access to board row and cell counts, and color definitions. Dependencies: TypeScript, ./game/settings.

```typescript
import {
  BOARD_ROWS,
  BOARD_CELLS,
  TILE_COLOR_NOTETRO,
  TITLE_COLOR_ENUM
} from './game/settings';

// Board size
console.log(BOARD_ROWS);  // 20 rows
console.log(BOARD_CELLS); // 10 columns

// Tile colors
const emptyTileColor = TILE_COLOR_NOTETRO;    // '#32180c' (dark brown)
const zPieceColor = TITLE_COLOR_ENUM.Z;       // '#926eff' (purple)
const iPieceColor = TITLE_COLOR_ENUM.I;       // '#e22b24' (red)
const oPieceColor = TITLE_COLOR_ENUM.O;       // '#39a6ff' (blue)

```

--------------------------------

### Initialize Game State with TypeScript

Source: https://context7.com/gibbok/blocchi-puzzle/llms.txt

Creates the initial game state for a new game, including the board, scoring, and the current and next tetromino pieces. This function is crucial for setting up the game before gameplay begins.

```typescript
import { mkInitialState } from './store/reducer';
import { TetroEnum, DirectionEnum } from './game/types';

// Create initial state with T and L pieces
const initialState = mkInitialState(TetroEnum.T, TetroEnum.L);

// Result structure:
// {
//   board: Board (20x10 grid of empty tiles),
//   score: 0,
//   level: 1,
//   lines: 0,
//   currentTetro: { type: TetroEnum.T, direction: DirectionEnum.N, x: 3, y: 0 },
//   nextTetro: { type: TetroEnum.L, direction: DirectionEnum.N, x: 3, y: 0 },
//   isPlay: true,
//   isGameOver: false,
//   screen: ScreenEnum.Intro
// }
```

--------------------------------

### Capture Keyboard Input for Game Actions (React)

Source: https://context7.com/gibbok/blocchi-puzzle/llms.txt

Captures keyboard input and dispatches game actions using a Keyboard component. Features include input throttling, key repeat detection, and Redux action dispatching. Dependencies: React, ./components/Keyboard, Redux.

```tsx
import { Keyboard } from './components/Keyboard';

function Game() {
  return (
    <>
      <Keyboard />
      {/* Other game components */}
    </>
  );
}

// Keyboard mappings:
// - Arrow Left / A: Move left
// - Arrow Right / D: Move right
// - Arrow Up / W / Space: Rotate clockwise
// - Arrow Down / S: Move down (soft drop)
//
// Features:
// - 70ms throttle to prevent input spam
// - Key repeat detection for game loop coordination
// - Dispatches Redux actions for each movement

```

--------------------------------

### Board React Component

Source: https://context7.com/gibbok/blocchi-puzzle/llms.txt

The Board component is responsible for rendering the game grid. It takes the board state as a prop and displays a 20x10 grid of tiles, enclosed within a styled wooden frame with shadows. It is optimized for responsive sizing and uses React.useMemo for efficient tile rendering.

```tsx
import { Board } from './components/Board';
import { PublicState } from './game/types';

function Game() {
  const publicState: PublicState = mkPublicState(store.getState());

  return (
    <div>
      <Board board={publicState.board} />
    </div>
  );
}

// Board component:
// - Renders 20×10 grid of Tile components
// - Applies wooden frame styling with shadows
// - Responsive sizing using vmin/vmax units
// - Uses React.useMemo for tile rendering optimization
```

--------------------------------

### Blocchi Puzzle Base CSS

Source: https://github.com/gibbok/blocchi-puzzle/blob/master/src/index.html

Basic CSS for the Blocchi Puzzle application, setting the background color and centering the main app container using flexbox. This provides the foundational layout for the project.

```css
body { background-color: #d7bc97; }
.app { width: 100vw; height: 100vh; display: flex; justify-content: center; align-items: center; overflow: hidden; }
```

--------------------------------

### Access Tetromino Piece Shape Data (TypeScript)

Source: https://context7.com/gibbok/blocchi-puzzle/llms.txt

Retrieves specific tetromino shapes and their rotation states from a pieces module. Supports all 7 standard tetromino types. Dependencies: TypeScript, ./game/pieces, ./game/types.

```typescript
import { pieces } from './game/pieces';
import { TetroEnum, DirectionEnum } from './game/types';

// Get all rotations of T-piece
const tPiece = pieces[TetroEnum.T];

// North rotation
const tNorth = tPiece[DirectionEnum.N];
// [[T, T, T],
//  [0, T, 0]]

// East rotation
const tEast = tPiece[DirectionEnum.E];
// [[0, T],
//  [T, T],
//  [0, T]]

// All 7 tetromino types available:
// pieces.Z, pieces.S, pieces.J, pieces.T, pieces.I, pieces.L, pieces.O

```

--------------------------------

### Add Tetromino to Board Immutably with TypeScript

Source: https://context7.com/gibbok/blocchi-puzzle/llms.txt

Places a specified tetromino onto the game board at a given position and orientation, returning a new board instance without modifying the original. This ensures immutability, a core principle of the game's architecture.

```typescript
import { addTetroToBoard } from './game/board';
import { TetroEnum, DirectionEnum } from './game/types';

const board = mkEmptyBoard(20, 10);

// Add T-piece at position (3, 5) facing North
const newBoard = addTetroToBoard(
  TetroEnum.T,      // Tetromino type
  DirectionEnum.N,  // Direction (N, E, S, W)
  3,                // X position
  5,                // Y position
  board             // Target board
);

// newBoard contains the T-piece merged at the specified position
// Original board remains unchanged (immutable operation)
```

--------------------------------

### GameLoop React Component for Automatic Falling

Source: https://context7.com/gibbok/blocchi-puzzle/llms.txt

The GameLoop component manages the automatic falling of the active tetromino. It uses requestAnimationFrame for smooth timing and adjusts the falling speed based on the current game level. It dispatches the `moveDown` action at regular intervals, with faster intervals for higher levels.

```tsx
import { GameLoop } from './components/GameLoop';
import { gameSlice } from './store';

function Game() {
  const level = useSelector((state) => state.level);

  return (
    <GameLoop
      level={level}
      cb={gameSlice.actions.moveDown()}
    />
  );
}

// GameLoop component:
// - Uses requestAnimationFrame for smooth timing
// - Calculates tick rate: 1000ms - (level × 10ms)
// - Higher levels = faster falling speed
// - Pauses when key is held down (repeat flag)
// - Automatically dispatches moveDown action each tick
```

--------------------------------

### Center Tetromino Horizontally on Board (TypeScript)

Source: https://context7.com/gibbok/blocchi-puzzle/llms.txt

Calculates the appropriate X-coordinate to horizontally center a given tetromino on the game board. It takes the board width, tetromino type, and its current direction as input.

```typescript
import { setTetroPositionXCenterBoard } from './game/tetromino';
import { BOARD_CELLS } from './game/settings';
import { TetroEnum, DirectionEnum } from './game/types';

// Center I-piece on 10-column board
const xPos = setTetroPositionXCenterBoard(
  BOARD_CELLS,      // 10 columns
  TetroEnum.I,      // I-piece (width 1 or 4 depending on rotation)
  DirectionEnum.N   // Vertical orientation
);

// Returns 4 or 3, depending on tetromino width to center it
```

--------------------------------

### Blocchi Puzzle CSS Loading Animation

Source: https://github.com/gibbok/blocchi-puzzle/blob/master/src/index.html

CSS code for a circular loading animation used in the Blocchi Puzzle project. It defines the loader's dimensions, appearance, and a keyframe animation for rotation. This animation is implemented using standard CSS properties and vendor prefixes.

```css
.loader, .loader:after { border-radius: 50%; width: 10em; height: 10em; }
.loader { margin: 60px auto; font-size: 10px; position: relative; text-indent: -9999em; border-top: 1.1em solid rgba(255, 255, 255, 0.2); border-right: 1.1em solid rgba(255, 255, 255, 0.2); border-bottom: 1.1em solid rgba(255, 255, 255, 0.2); border-left: 1.1em solid #ffffff; -webkit-transform: translateZ(0); -ms-transform: translateZ(0); transform: translateZ(0); -webkit-animation: load8 1.1s infinite linear; animation: load8 1.1s infinite linear; }
@-webkit-keyframes load8 {
    0% { -webkit-transform: rotate(0deg); transform: rotate(0deg); }
    100% { -webkit-transform: rotate(360deg); transform: rotate(360deg); }
}
@keyframes load8 {
    0% { -webkit-transform: rotate(0deg); transform: rotate(0deg); }
    100% { -webkit-transform: rotate(360deg); transform: rotate(360deg); }
}
```

--------------------------------

### Find Available Position Recursively (TypeScript)

Source: https://context7.com/gibbok/blocchi-puzzle/llms.txt

Recursively finds the first available Y-position for a tetromino to fall to or the first available X-position when moving left/right. It takes the tetromino details, current position, board state, and step direction as input.

```typescript
import { recFindAvailablePosY, recFindAvailablePosX } from './game/board';
import { TetroEnum, DirectionEnum } from './game/types';

// Find lowest Y position tetromino can fall to
const dropY = recFindAvailablePosY(
  TetroEnum.T,
  DirectionEnum.N,
  3,      // Current X
  5,      // Current Y
  board,
  1       // Step down by 1
);

// Returns the Y position just before collision (e.g., 17 if it stops at row 17)

// Find available X position when moving left
const leftX = recFindAvailablePosX(
  TetroEnum.T,
  DirectionEnum.N,
  5,      // Current X
  10,     // Current Y
  board,
  -1      // Step left by -1
);
```

--------------------------------

### Convert Internal to Public Game State with TypeScript

Source: https://context7.com/gibbok/blocchi-puzzle/llms.txt

Transforms the internal game state into a public representation suitable for rendering. This involves merging the currently active tetromino onto the game board, abstracting internal-only properties.

```typescript
import { mkPublicState } from './store/reducer';
import { InternalState, PublicState } from './game/types';

const internalState: InternalState = store.getState();

// Convert to public state - adds current tetromino to board
const publicState: PublicState = mkPublicState(internalState);

// Public state structure:
// {
//   board: Board (with current tetromino rendered),
//   score: number,
//   level: number,
//   lines: number,
//   nextTetro: TetroDef,
//   screen: ScreenEnum
// }
// Note: currentTetro, isPlay, isGameOver are internal only
```

--------------------------------

### Rotate Tetromino Clockwise with Wall Kick

Source: https://context7.com/gibbok/blocchi-puzzle/llms.txt

Rotates the active tetromino clockwise. It first calculates the next rotation state and checks if the rotated piece fits at the current position. If a collision occurs, it attempts 'wall kicks' by adjusting the horizontal position to find a valid placement. The state is returned immutably.

```typescript
import { moveUp } from './store/board/actions/moveUp';

// Rotate tetromino clockwise
const stateAfterRotation = moveUp(currentState);

// Logic performed:
// 1. Calculate next rotation direction (N→E→S→W→N)
// 2. Check if rotated piece fits at current position
// 3. If collision, attempt wall kicks (adjust X position)
// 4. Find available position or keep current rotation
// 5. Return new state with updated direction and position
```

--------------------------------

### Move Tetromino Down with Collision Detection

Source: https://context7.com/gibbok/blocchi-puzzle/llms.txt

Moves the active tetromino down one row, checking for collisions. If a collision occurs, it merges the tetromino into the board, spawns the next piece, and checks for game over conditions. It also handles generating a new random piece and centering it horizontally.

```typescript
import { moveDown } from './store/board/actions/moveDown';
import { InternalState } from './game/types';

const currentState: InternalState = store.getState();

// Move tetromino down one row
const newState = moveDown(currentState);

// Logic performed:
// 1. Check collision at Y+1
// 2. If collision: merge tetromino into board, spawn next piece
// 3. If Y=1 and collision: set game over flag
// 4. Generate new random next piece
// 5. Center new current piece horizontally
// Returns new state with updated board and tetromino positions
```

--------------------------------

### Detect and Remove Completed Rows (TypeScript)

Source: https://context7.com/gibbok/blocchi-puzzle/llms.txt

Performs a combined operation to automatically detect completed rows on the board, remove them, and add new empty rows to the top. This function streamlines the process of clearing lines in the game.

```typescript
import { detectAndRemoveCompletedRows } from './game/board';

// Automatically detect, remove, and add empty rows at top
const updatedBoard = detectAndRemoveCompletedRows(board);

// This combines getCompleteRowIdxs, removeCompleteRowFromBoard,
// and appendEmptyRowsToBoard into one functional pipeline
```

--------------------------------

### Reset Game State

Source: https://context7.com/gibbok/blocchi-puzzle/llms.txt

Resets the game to its initial state, typically called after a game over condition is met. If the game is not over, this function returns the current state unchanged, preventing accidental resets.

```typescript
import { resetGame } from './store/board/actions/resetGame';

// Reset game if game over
const newGameState = resetGame(currentState);

// Logic:
// If isGameOver=true: returns fresh initial state with random pieces
// If isGameOver=false: returns current state unchanged

// Only resets when game is actually over (prevents accidental resets)
```

--------------------------------

### Generate Random Tetromino Type (TypeScript)

Source: https://context7.com/gibbok/blocchi-puzzle/llms.txt

Generates a random tetromino type using an IO monad to handle potential side effects. The function returns an IO action that, when executed, yields a TetroEnum value.

```typescript
import { getRandomTetroEnum } from './game/tetromino';
import { TetroEnum } from './game/types';

// Get random tetromino type (IO monad)
const randomTetroIO = getRandomTetroEnum();
const tetroType: TetroEnum = randomTetroIO(); // Execute IO to get value

// Possible values: TetroEnum.Z, TetroEnum.S, TetroEnum.J,
//                  TetroEnum.T, TetroEnum.I, TetroEnum.L, TetroEnum.O
```

--------------------------------

### Detect Completed Rows on Board with TypeScript

Source: https://context7.com/gibbok/blocchi-puzzle/llms.txt

Identifies and returns the indices of all rows on the game board that are completely filled with tetromino tiles. This is essential for scoring and clearing lines in the game.

```typescript
import { getCompleteRowIdxs } from './game/board';

// Find all completed rows
const completedRowIndices = getCompleteRowIdxs(board);

// Returns array of row indices, e.g., [18, 19] if bottom two rows are full
// Returns empty array [] if no rows are completed
```

--------------------------------

### Check Tetromino Collision Detection (TypeScript)

Source: https://context7.com/gibbok/blocchi-puzzle/llms.txt

Determines if a tetromino, at a specific position and orientation, would collide with the board boundaries or existing pieces. It also checks if a tetromino fits within the board boundaries regardless of other pieces.

```typescript
import { isOccupied, canTetroFitBoard } from './game/tetromino';
import { TetroEnum, DirectionEnum } from './game/types';

// Check if position is occupied (collision with board edges or other pieces)
const hasCollision = isOccupied(
  TetroEnum.T,
  DirectionEnum.N,
  3,    // X position
  10,   // Y position
  board
);

if (!hasCollision) {
  // Safe to place tetromino at this position
  const newBoard = addTetroToBoard(TetroEnum.T, DirectionEnum.N, 3, 10, board);
}

// Check if tetromino fits within board boundaries only
const fitsBoard = canTetroFitBoard(TetroEnum.T, DirectionEnum.N, 3, 10, board);
// Returns false if out of bounds, true if within boundaries (ignores other pieces)
```

--------------------------------

### Calculate Game Level

Source: https://context7.com/gibbok/blocchi-puzzle/llms.txt

Determines the current game level based on the player's total accumulated score. The level increases every 500 points, with the formula ceil((score + 1) / 500) defining the progression. Higher levels generally correspond to faster gameplay.

```typescript
import { calcLevel } from './game/game';

const level1 = calcLevel(0);    // Level 1
const level2 = calcLevel(500);  // Level 2
const level3 = calcLevel(1000); // Level 3
const level10 = calcLevel(4500); // Level 10

// Formula: ceil((score + 1) / 500)
// Every 500 points increases level by 1
```

--------------------------------

### Check Board for Completed Rows and Update Score/Level

Source: https://context7.com/gibbok/blocchi-puzzle/llms.txt

Scans the game board to identify and remove any completed rows. It calculates the score based on the number of rows cleared and updates the game level accordingly. The function returns a new state object with the updated board, score, level, and line count.

```typescript
import { checkBoard } from './store/board/actions/checkBoard';

// Check and process completed rows
const stateAfterCheck = checkBoard(currentState);

// Logic performed:
// 1. Find all completed rows (getCompleteRowIdxs)
// 2. Remove completed rows from board
// 3. Calculate score: rows × 100
// 4. Update total score
// 5. Calculate new level: ceil((score + 1) / 500)
// 6. Update lines count
// 7. Return new state with updated board, score, level, lines
```

--------------------------------

### Move Tetromino Horizontally with Collision Detection

Source: https://context7.com/gibbok/blocchi-puzzle/llms.txt

Moves the active tetromino left or right, ensuring it does not collide with the board boundaries or other placed pieces. If a collision is detected, the tetromino remains in its current position. The state is updated immutably.

```typescript
import { moveLeft } from './store/board/actions/moveLeft';
import { moveRight } from './store/board/actions/moveRight';

// Move left with collision check
const stateAfterLeft = moveLeft(currentState);

// Move right with collision check
const stateAfterRight = moveRight(currentState);

// Both functions:
// 1. Check collision at new X position
// 2. Update X coordinate only if no collision
// 3. Keep current X if collision detected
// 4. Return new state (immutable)
```

--------------------------------

### Calculate Game Score

Source: https://context7.com/gibbok/blocchi-puzzle/llms.txt

Calculates the player's score based on the number of completed rows in a single action. The scoring formula awards 100 points per completed row, with special bonuses for clearing multiple rows simultaneously (e.g., 400 points for a 'Tetris').

```typescript
import { calcScore } from './game/game';

// Calculate score for completed rows
const score = calcScore(1); // 100 points for 1 row
const score2 = calcScore(2); // 200 points for 2 rows
const score4 = calcScore(4); // 400 points for 4 rows (Tetris)

// Formula: rowsCompleted × 100
```

--------------------------------

### Remove Completed Rows from Board (TypeScript)

Source: https://context7.com/gibbok/blocchi-puzzle/llms.txt

Removes specified completed rows from the game board and appends new empty rows to the top to maintain the board's height. It takes the current board and an array of completed row indices as input, returning the modified board and the count of removed rows.

```typescript
import { removeCompleteRowFromBoard, appendEmptyRowsToBoard } from './game/board';

const completedIndices = [18, 19]; // Bottom two rows

// Remove completed rows
const result = removeCompleteRowFromBoard(board, completedIndices);
console.log(result.totRemoved); // 2
console.log(result.board.length); // 18 (20 - 2)

// Add empty rows back at top to maintain board height
const restoredBoard = appendEmptyRowsToBoard(result.board, result.totRemoved);
console.log(restoredBoard.length); // 20
```

=== COMPLETE CONTENT === This response contains all available snippets from this library. No additional content exists. Do not make further requests.