Implement web-based brawler engine framework with React and TypeScript

.gitignore

@@ -4,136 +4,21 @@ logs
 npm-debug.log*
 yarn-debug.log*
 yarn-error.log*
+pnpm-debug.log*
 lerna-debug.log*
 
-# Diagnostic reports (https://nodejs.org/api/report.html)
-report.[0-9]*.[0-9]*.[0-9]*.[0-9]*.json
-
-# Runtime data
-pids
-*.pid
-*.seed
-*.pid.lock
-
-# Directory for instrumented libs generated by jscoverage/JSCover
-lib-cov
-
-# Coverage directory used by tools like istanbul
-coverage
-*.lcov
-
-# nyc test coverage
-.nyc_output
-
-# Grunt intermediate storage (https://gruntjs.com/creating-plugins#storing-task-files)
-.grunt
-
-# Bower dependency directory (https://bower.io/)
-bower_components
-
-# node-waf configuration
-.lock-wscript
-
-# Compiled binary addons (https://nodejs.org/api/addons.html)
-build/Release
-
-# Dependency directories
-node_modules/
-jspm_packages/
-
-# Snowpack dependency directory (https://snowpack.dev/)
-web_modules/
-
-# TypeScript cache
-*.tsbuildinfo
-
-# Optional npm cache directory
-.npm
-
-# Optional eslint cache
-.eslintcache
-
-# Optional stylelint cache
-.stylelintcache
-
-# Optional REPL history
-.node_repl_history
-
-# Output of 'npm pack'
-*.tgz
-
-# Yarn Integrity file
-.yarn-integrity
-
-# dotenv environment variable files
-.env
-.env.*
-!.env.example
-
-# parcel-bundler cache (https://parceljs.org/)
-.cache
-.parcel-cache
-
-# Next.js build output
-.next
-out
-
-# Nuxt.js build / generate output
-.nuxt
+node_modules
 dist
-
-# Gatsby files
-.cache/
-# Comment in the public line in if your project uses Gatsby and not Next.js
-# https://nextjs.org/blog/next-9-1#public-directory-support
-# public
-
-# vuepress build output
-.vuepress/dist
-
-# vuepress v2.x temp and cache directory
-.temp
-.cache
-
-# Sveltekit cache directory
-.svelte-kit/
-
-# vitepress build output
-**/.vitepress/dist
-
-# vitepress cache directory
-**/.vitepress/cache
-
-# Docusaurus cache and generated files
-.docusaurus
-
-# Serverless directories
-.serverless/
-
-# FuseBox cache
-.fusebox/
-
-# DynamoDB Local files
-.dynamodb/
-
-# Firebase cache directory
-.firebase/
-
-# TernJS port file
-.tern-port
-
-# Stores VSCode versions used for testing VSCode extensions
-.vscode-test
-
-# yarn v3
-.pnp.*
-.yarn/*
-!.yarn/patches
-!.yarn/plugins
-!.yarn/releases
-!.yarn/sdks
-!.yarn/versions
-
-# Vite logs files
-vite.config.js.timestamp-*
-vite.config.ts.timestamp-*
+dist-ssr
+*.local
+
+# Editor directories and files
+.vscode/*
+!.vscode/extensions.json
+.idea
+.DS_Store
+*.suo
+*.ntvs*
+*.njsproj
+*.sln
+*.sw?

README.md

@@ -1 +1,177 @@
-# fight-forge
+# Fight Forge
+
+A web-based, brawler engine and framework built on React and TypeScript. Fight Forge provides a complete game engine for creating 2D fighting games in the browser with physics, collision detection, and a flexible character system.
+
+![Fight Forge Screenshot](https://github.com/user-attachments/assets/a0b84f2a-a2d2-432d-8098-b631836f836b)
+
+## Features
+
+- **Complete Game Engine**: Built-in game loop, physics system, and collision detection
+- **Fighter System**: Customizable character states including idle, walking, jumping, attacking, blocking, and hit states
+- **Physics Engine**: Gravity, friction, knockback, and ground collision
+- **Input Handling**: Keyboard controls with customizable key bindings for multiple players
+- **Health System**: Health bars, damage calculation, and win conditions
+- **React Components**: Modular component architecture for easy customization
+- **TypeScript**: Full type safety and IntelliSense support
+
+## Getting Started
+
+### Prerequisites
+
+- Node.js (v18 or higher recommended)
+- npm or yarn
+
+### Installation
+
+```bash
+# Clone the repository
+git clone https://github.com/hynding/fight-forge.git
+cd fight-forge
+
+# Install dependencies
+npm install
+```
+
+### Development
+
+```bash
+# Start the development server
+npm run dev
+```
+
+The application will be available at `http://localhost:5173/`
+
+### Build
+
+```bash
+# Build for production
+npm run build
+```
+
+The built files will be in the `dist/` directory.
+
+### Linting
+
+```bash
+# Run ESLint
+npm run lint
+```
+
+## Game Controls
+
+### Player 1
+- **A / D**: Move Left/Right
+- **W**: Jump
+- **Space**: Attack
+- **Shift**: Block
+
+### Player 2
+- **← / →**: Move Left/Right
+- **↑**: Jump
+- **Enter**: Attack
+- **Right Shift**: Block
+
+## Architecture
+
+### Core Engine (`/src/engine`)
+
+- **GameEngine.ts**: Main game loop and state management
+- **Physics.ts**: Physics calculations including gravity, friction, and collision detection
+
+### Type System (`/src/types`)
+
+- Comprehensive TypeScript definitions for fighters, game state, physics, and input
+
+### Components (`/src/components`)
+
+- **Fighter**: Visual representation of characters with health bars and state indicators
+- **Stage**: Game arena with ground and visual styling
+- **Controls**: UI component displaying control instructions
+
+### Hooks (`/src/hooks`)
+
+- **useGameEngine**: React hook for managing game state and engine lifecycle
+- **useKeyboardInput**: React hook for handling keyboard input with customizable bindings
+
+### Utilities (`/src/utils`)
+
+- **gameFactory**: Helper functions for creating fighters and initial game state
+
+## Customization
+
+### Creating Custom Fighters
+
+```typescript
+import { createFighter } from './utils/gameFactory';
+
+const myFighter = createFighter(
+  'fighter1',     // ID
+  100,            // X position
+  300,            // Y position
+  1               // Direction (1 = right, -1 = left)
+);
+
+// Customize stats
+myFighter.stats.maxHealth = 150;
+myFighter.stats.attackPower = 15;
+myFighter.stats.speed = 5;
+myFighter.stats.jumpForce = 15;
+```
+
+### Modifying Game Settings
+
+Edit `/src/utils/gameFactory.ts` to change default fighter stats, stage dimensions, or initial positions.
+
+### Adjusting Physics
+
+Modify constants in `/src/engine/Physics.ts`:
+- `GRAVITY`: Affects fall speed
+- `FRICTION`: Affects ground sliding
+
+## Project Structure
+
+```
+fight-forge/
+├── src/
+│   ├── engine/          # Game engine and physics
+│   ├── components/      # React components
+│   ├── hooks/          # Custom React hooks
+│   ├── types/          # TypeScript type definitions
+│   ├── utils/          # Utility functions
+│   ├── App.tsx         # Main application component
+│   └── main.tsx        # Application entry point
+├── public/             # Static assets
+├── index.html          # HTML template
+└── package.json        # Project dependencies
+```
+
+## Technology Stack
+
+- **React 19**: UI library
+- **TypeScript**: Type-safe JavaScript
+- **Vite**: Build tool and dev server
+- **ESLint**: Code linting
+
+## Future Enhancements
+
+Potential features for future development:
+- Sprite animations and visual assets
+- Sound effects and music
+- Combo system and special moves
+- Multiple character types with unique abilities
+- AI opponents
+- Network multiplayer support
+- Stage hazards and interactive environments
+- Power-ups and items
+
+## License
+
+MIT License - see [LICENSE](LICENSE) file for details
+
+## Contributing
+
+Contributions are welcome! Please feel free to submit a Pull Request.
+
+## Credits
+
+Built with ❤️ using React and TypeScript

eslint.config.js

@@ -0,0 +1,23 @@
+import js from '@eslint/js'
+import globals from 'globals'
+import reactHooks from 'eslint-plugin-react-hooks'
+import reactRefresh from 'eslint-plugin-react-refresh'
+import tseslint from 'typescript-eslint'
+import { defineConfig, globalIgnores } from 'eslint/config'
+
+export default defineConfig([
+  globalIgnores(['dist']),
+  {
+    files: ['**/*.{ts,tsx}'],
+    extends: [
+      js.configs.recommended,
+      tseslint.configs.recommended,
+      reactHooks.configs.flat.recommended,
+      reactRefresh.configs.vite,
+    ],
+    languageOptions: {
+      ecmaVersion: 2020,
+      globals: globals.browser,
+    },
+  },
+])

index.html

@@ -0,0 +1,13 @@
+<!doctype html>
+<html lang="en">
+  <head>
+    <meta charset="UTF-8" />
+    <link rel="icon" type="image/svg+xml" href="/vite.svg" />
+    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+    <title>Fight Forge - Web-Based Brawler Engine</title>
+  </head>
+  <body>
+    <div id="root"></div>
+    <script type="module" src="/src/main.tsx"></script>
+  </body>
+</html>