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

.github/workflows/ci.yml

@@ -0,0 +1,42 @@
+name: CI
+
+on:
+  push:
+    branches: [ main, copilot/* ]
+  pull_request:
+    branches: [ main ]
+
+jobs:
+  test:
+    runs-on: ubuntu-latest
+
+    permissions:
+      contents: read
+
+    strategy:
+      matrix:
+        node-version: [18.x, 20.x]
+
+    steps:
+    - uses: actions/checkout@v3
+
+    - name: Use Node.js ${{ matrix.node-version }}
+      uses: actions/setup-node@v3
+      with:
+        node-version: ${{ matrix.node-version }}
+        cache: 'npm'
+
+    - name: Install dependencies
+      run: npm ci
+
+    - name: Run linter
+      run: npm run lint
+
+    - name: Check formatting
+      run: npm run format:check
+
+    - name: Run tests
+      run: npm test
+
+    - name: Build
+      run: npm run build

.gitignore

@@ -0,0 +1,35 @@
+# Dependencies
+node_modules/
+
+# Build output
+dist/
+build/
+
+# Environment variables
+.env
+.env.local
+.env.*.local
+
+# Editor directories and files
+.vscode/
+.idea/
+*.suo
+*.ntvs*
+*.njsproj
+*.sln
+*.sw?
+
+# OS files
+.DS_Store
+Thumbs.db
+
+# Logs
+*.log
+npm-debug.log*
+
+# Test coverage
+coverage/
+
+# Temporary files
+tmp/
+*.tmp

.prettierrc.json

@@ -0,0 +1,8 @@
+{
+  "semi": true,
+  "trailingComma": "es5",
+  "singleQuote": true,
+  "printWidth": 100,
+  "tabWidth": 2,
+  "useTabs": false
+}

LICENSE

@@ -0,0 +1,21 @@
+MIT License
+
+Copyright (c) 2025 Complex Tetris & Visualizer
+
+Permission is hereby granted, free of charge, to any person obtaining a copy
+of this software and associated documentation files (the "Software"), to deal
+in the Software without restriction, including without limitation the rights
+to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
+copies of the Software, and to permit persons to whom the Software is
+furnished to do so, subject to the following conditions:
+
+The above copyright notice and this permission notice shall be included in all
+copies or substantial portions of the Software.
+
+THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
+IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
+FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
+AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
+LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
+OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
+SOFTWARE.

README.md

@@ -1,2 +1,186 @@
-# Tetris
-Tetris piece transformations using complex numbers
+# Complex Tetris & Visualizer
+
+A modern web application combining a playable Tetris game with complex number visualizations. Built with React, Canvas API, and mathematical elegance.
+
+## Features
+
+### 🎮 Complex Tetris Game
+- **Complex Number Rotations**: Tetris pieces rotate using complex number mathematics (z → i·z for 90° rotation)
+- **Classic Gameplay**: Traditional Tetris mechanics with modern UI
+- **Score Tracking**: Keep track of your score, level, and cleared lines
+- **Responsive Controls**: Keyboard controls with visual feedback
+- **Game States**: Pause, resume, and restart functionality
+
+### 📊 Complex Function Visualizer
+- **Three Complex Functions**:
+  - f(z) = z² (square function)
+  - f(z) = eᶻ (exponential function)
+  - f(z) = 1/z (reciprocal function)
+- **Animated Transformations**: Watch the complex plane transform in real-time
+- **Magnitude & Phase Overlays**: Toggle visual representation of magnitude (brightness) and phase (color hue)
+- **Unit Circle Tracking**: See how the unit circle transforms under each function
+- **Rotation Visualization**: Highlighted z → i·z rotations showing 90° counterclockwise rotation
+
+### 🎨 User Interface
+- **Modern Design**: Gradient backgrounds and smooth animations
+- **Responsive Layout**: Works on desktop, tablet, and mobile devices
+- **Side-by-side Panels**: Tetris game and visualizer displayed together
+- **Interactive Controls**: Easy-to-use buttons and toggles
+
+## Mathematical Background
+
+This project uses **complex numbers** to elegantly handle Tetris piece rotations. In the complex plane:
+- Each block position is represented as a complex number z = x + yi
+- Rotation by 90° counterclockwise is achieved by multiplying by i: z → i·z
+- This is mathematically equivalent to: (x, y) → (-y, x)
+
+The visualizer demonstrates three fundamental complex functions:
+- **z²**: Doubles the angle and squares the magnitude
+- **eᶻ**: The complex exponential, fundamental to Fourier analysis
+- **1/z**: Inverts and reflects across the real axis
+
+## Installation
+
+### Prerequisites
+- Node.js (v14 or higher)
+- npm or yarn
+
+### Setup
+```bash
+# Clone the repository
+git clone https://github.com/DevalPrime/Tetris.git
+cd Tetris
+
+# Install dependencies
+npm install
+
+# Start development server
+npm run dev
+```
+
+The application will open in your browser at `http://localhost:3000`
+
+## Available Scripts
+
+- `npm run dev` - Start development server
+- `npm run build` - Build for production
+- `npm run preview` - Preview production build
+- `npm test` - Run unit tests
+- `npm run test:watch` - Run tests in watch mode
+- `npm run lint` - Lint source code
+- `npm run lint:fix` - Lint and fix issues
+- `npm run format` - Format code with Prettier
+- `npm run format:check` - Check code formatting
+
+## Game Controls
+
+### Tetris
+- **←/→ Arrow Keys**: Move piece left/right
+- **↑ Arrow or Space**: Rotate piece (z → i·z)
+- **↓ Arrow**: Soft drop (move down faster)
+- **Enter**: Hard drop (instant drop)
+- **P**: Pause/Resume game
+- **R**: Restart game (when game over)
+
+### Visualizer
+- **Function Buttons**: Select z², eᶻ, or 1/z
+- **Magnitude Checkbox**: Toggle magnitude overlay
+- **Phase Checkbox**: Toggle phase overlay
+- **Animate Button**: Replay transformation animation
+
+## Project Structure
+
+```
+Tetris/
+├── src/
+│   ├── components/
+│   │   ├── TetrisGame.jsx        # Tetris game component
+│   │   ├── TetrisGame.css        # Tetris styles
+│   │   ├── ComplexVisualizer.jsx # Function visualizer
+│   │   └── ComplexVisualizer.css # Visualizer styles
+│   ├── utils/
+│   │   ├── complex.js            # Complex number library
+│   │   └── tetris.js             # Tetris game logic
+│   ├── tests/
+│   │   ├── complex.test.js       # Complex number tests
+│   │   └── tetris.test.js        # Tetris logic tests
+│   ├── App.jsx                   # Main application
+│   ├── App.css                   # App styles
+│   └── main.jsx                  # Entry point
+├── public/                       # Static assets
+├── index.html                    # HTML template
+├── vite.config.js               # Vite configuration
+├── jest.config.js               # Jest configuration
+├── .eslintrc.json               # ESLint configuration
+├── .prettierrc.json             # Prettier configuration
+├── package.json                 # Dependencies and scripts
+└── LICENSE                      # MIT License
+
+## Technologies Used
+
+- **React 19**: Modern UI framework
+- **Vite**: Fast build tool and dev server
+- **Canvas API**: For rendering game and visualizations
+- **Jest**: Unit testing framework
+- **ESLint**: Code linting
+- **Prettier**: Code formatting
+- **Complex Number Math**: Custom implementation for rotations
+
+## Testing
+
+The project includes comprehensive unit tests for:
+- Complex number arithmetic operations
+- Rotation and transformation functions
+- Tetris game logic (piece movement, collision detection, line clearing)
+- Score calculation
+
+Run tests with:
+```bash
+npm test
+```
+
+## Code Quality
+
+The project follows best practices with:
+- **ESLint**: Enforces code style and catches errors
+- **Prettier**: Ensures consistent code formatting
+- **Modular Architecture**: Separated concerns (UI, logic, utilities)
+- **Comprehensive Tests**: Unit tests for core functionality
+- **JSDoc Comments**: Documented functions with type information
+
+## Browser Support
+
+Works on all modern browsers supporting:
+- ES2021 features
+- Canvas API
+- CSS Grid and Flexbox
+
+## Contributing
+
+Contributions are welcome! Please feel free to submit a Pull Request.
+
+## License
+
+This project is licensed under the MIT License - see the [LICENSE](LICENSE) file for details.
+
+## Acknowledgments
+
+- Inspired by classic Tetris and complex analysis
+- Uses complex number mathematics for elegant rotation implementation
+- Built with modern web technologies
+
+## Future Enhancements
+
+Potential improvements:
+- Additional complex functions (sin, cos, log)
+- 3D visualization of complex surfaces
+- Multiplayer mode
+- Custom color themes
+- Sound effects and music
+- High score persistence
+- More piece types
+
+---
+
+**Enjoy playing Complex Tetris while exploring the beauty of complex mathematics!** 🎮📊✨
+

eslint.config.js

@@ -0,0 +1,39 @@
+import js from '@eslint/js';
+import react from 'eslint-plugin-react';
+import reactHooks from 'eslint-plugin-react-hooks';
+import globals from 'globals';
+
+export default [
+  js.configs.recommended,
+  {
+    files: ['**/*.{js,jsx}'],
+    languageOptions: {
+      ecmaVersion: 'latest',
+      sourceType: 'module',
+      globals: {
+        ...globals.browser,
+        ...globals.node,
+        ...globals.jest,
+      },
+      parserOptions: {
+        ecmaFeatures: {
+          jsx: true,
+        },
+      },
+    },
+    plugins: {
+      react,
+      'react-hooks': reactHooks,
+    },
+    rules: {
+      'react/react-in-jsx-scope': 'off',
+      'react/prop-types': 'warn',
+      ...reactHooks.configs.recommended.rules,
+    },
+    settings: {
+      react: {
+        version: 'detect',
+      },
+    },
+  },
+];

index.html

@@ -0,0 +1,13 @@
+<!DOCTYPE html>
+<html lang="en">
+  <head>
+    <meta charset="UTF-8" />
+    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+    <meta name="description" content="Complex Tetris & Visualizer - Tetris game with complex number rotations and function visualization" />
+    <title>Complex Tetris & Visualizer</title>
+  </head>
+  <body>
+    <div id="root"></div>
+    <script type="module" src="/src/main.jsx"></script>
+  </body>
+</html>

jest.config.js

@@ -0,0 +1,11 @@
+export default {
+  testEnvironment: 'jsdom',
+  transform: {
+    '^.+\\.(js|jsx)$': ['babel-jest', { presets: ['@babel/preset-env', '@babel/preset-react'] }],
+  },
+  moduleNameMapper: {
+    '\\.(css|less|scss|sass)$': 'identity-obj-proxy',
+  },
+  setupFilesAfterEnv: ['<rootDir>/jest.setup.js'],
+  collectCoverageFrom: ['src/**/*.{js,jsx}', '!src/**/*.test.{js,jsx}'],
+};

jest.setup.js

@@ -0,0 +1 @@
+import '@testing-library/jest-dom';