Implement Complex Tetris & Visualizer with canvas-based rendering and complex number rotations

[Copilot]

Implements a React + Canvas web app combining playable Tetris using complex numbers for piece rotations (z → i·z) with a panel visualizing complex functions f(z) = z², eᶻ, and 1/z.

Core Implementation

Complex Number Library (src/utils/complex.js)

• Arithmetic operations (add, multiply, divide)
• Rotation via i multiplication: rotateByI(z) = complex(-z.im, z.re)
• Functions: square, exponential, reciprocal
• Polar/Cartesian conversions

Tetris Engine (src/utils/tetris.js)

• Pieces defined as complex number arrays
• Rotation: rotatePiece = piece.map(pos => Complex.rotateByI(pos))
• Collision detection on 10×20 board
• Line clearing and scoring

Visualizer (src/components/ComplexVisualizer.jsx)

• Renders transformed complex plane on 400×400 canvas
• Color encoding: hue = phase, brightness = magnitude
• 2-second animated interpolation between identity and f(z)
• Unit circle tracking (green), rotation arrows (yellow)

// Rotation transformation in Tetris
export const rotatePiece = (piece) => piece.map((pos) => Complex.rotateByI(pos));

// Complex function application in visualizer
export const applyFunction = (functionType, z) => {
  switch (functionType) {
    case 'square': return multiply(z, z);
    case 'exp': return exp(z);
    case 'reciprocal': return divide(complex(1, 0), z);
    default: return z;
  }
};

Development Infrastructure

• Build: Vite with React 19
• Testing: Jest with 46 unit tests covering complex arithmetic and game logic
• Linting: ESLint v9 flat config, Prettier
• CI: GitHub Actions workflow with minimal permissions
• Responsive: CSS Grid/Flexbox with mobile breakpoints

UI

Controls: Arrow keys for movement/rotation, Space for rotation, Enter for hard drop, P for pause

Production build: 204.55 kB (64.46 kB gzipped)

Original prompt

Build a React + Canvas web app Complex Tetris & Visualizer combining a playable Tetris (using complex numbers for rotations) and a panel visualizing functions f(z)=z², eᶻ, 1/z. Animate transformations, show magnitude/phase overlays, and highlight z→i·z rotations. Modular JS, Vite, Jest, ESLint, Prettier, CI, responsive UI, README, and MIT license.

---

💡 You can make Copilot smarter by setting up custom instructions, customizing its development environment and configuring Model Context Protocol (MCP) servers. Learn more Copilot coding agent tips in the docs.