diff --git a/.gitignore b/.gitignore
index 15655b1..aed094d 100644
--- a/.gitignore
+++ b/.gitignore
@@ -3,5 +3,3 @@ dist/
.DS_Store
*.log
.vite/
-
-
diff --git a/.husky/pre-commit b/.husky/pre-commit
new file mode 100755
index 0000000..cad663b
--- /dev/null
+++ b/.husky/pre-commit
@@ -0,0 +1,7 @@
+# Skip in CI environments
+if [ -n "$CI" ] || [ -n "$FORGEJO_ACTIONS" ] || [ -n "$GITHUB_ACTIONS" ]; then
+ echo "Skipping pre-commit hooks in CI environment"
+ exit 0
+fi
+
+npx lint-staged
diff --git a/.lintstagedrc.json b/.lintstagedrc.json
new file mode 100644
index 0000000..a2ca1b7
--- /dev/null
+++ b/.lintstagedrc.json
@@ -0,0 +1,4 @@
+{
+ "*.{ts,tsx,js,jsx}": ["eslint --fix", "prettier --write"],
+ "*.{json,css,md}": ["prettier --write"]
+}
diff --git a/.prettierignore b/.prettierignore
new file mode 100644
index 0000000..3f2322c
--- /dev/null
+++ b/.prettierignore
@@ -0,0 +1,5 @@
+node_modules
+dist
+*.min.js
+package-lock.json
+
diff --git a/.prettierrc.json b/.prettierrc.json
new file mode 100644
index 0000000..59eb508
--- /dev/null
+++ b/.prettierrc.json
@@ -0,0 +1,9 @@
+{
+ "semi": true,
+ "trailingComma": "es5",
+ "singleQuote": true,
+ "printWidth": 100,
+ "tabWidth": 2,
+ "useTabs": false,
+ "arrowParens": "always"
+}
diff --git a/README.md b/README.md
index 2eff69f..f6283c4 100644
--- a/README.md
+++ b/README.md
@@ -1,21 +1,54 @@
# Slime Genesis - ECS RPG PoC
-A complete proof of concept for **Slime Genesis: The Awakening of the Entity** built with vanilla JavaScript using an Entity Component System (ECS) architecture.
+A complete proof of concept for **Slime Genesis: The Awakening of the Entity** built with TypeScript using an Entity Component System (ECS) architecture.
## Quick Start
1. **Install dependencies:**
+
```bash
npm install
```
2. **Run the development server:**
+
```bash
npm run dev
```
3. **Open your browser** to the URL shown (usually `http://localhost:5173`)
+## Development
+
+- **Format code:**
+
+ ```bash
+ npm run format
+ ```
+
+- **Check formatting:**
+
+ ```bash
+ npm run format:check
+ ```
+
+- **Lint code:**
+
+ ```bash
+ npm run lint
+ ```
+
+- **Fix linting issues:**
+
+ ```bash
+ npm run lint:fix
+ ```
+
+- **Build for production:**
+ ```bash
+ npm run build
+ ```
+
## Controls
- **WASD** or **Arrow Keys**: Move your slime
@@ -27,6 +60,7 @@ A complete proof of concept for **Slime Genesis: The Awakening of the Entity** b
## Features
### Core Systems
+
- ✅ **ECS Architecture**: Entity Component System for flexible game design
- ✅ **Real-time Combat**: Fast-paced action combat with form-specific styles
- ✅ **Evolution System**: Three paths (Human, Beast, Slime) that change based on absorption
@@ -35,15 +69,19 @@ A complete proof of concept for **Slime Genesis: The Awakening of the Entity** b
- ✅ **RPG Systems**: Stats, leveling, XP, inventory, equipment
- ✅ **AI System**: Intelligent creature behaviors (wander, chase, combat, flee)
- ✅ **Projectile System**: Skills can create projectiles (Water Gun, etc.)
+- ✅ **Mutation System**: Gain mutations like Hardened Shell, Electric Skin, Bioluminescence
### Graphics & Polish
+
- ✅ **Animated Slime**: Smooth morphing blob with jiggle physics
- ✅ **Combat Effects**: Damage numbers, attack indicators, particle effects
- ✅ **Absorption Visuals**: Swirling particles and color transitions
- ✅ **Stealth Indicators**: Visibility meters and detection warnings
+- ✅ **Glow Effects**: Bioluminescence mutation creates a pulsing glow effect
- ✅ **Polished UI**: Health bars, XP bars, skill hotbar, stat displays
### Skills
+
- **Water Gun**: Shoot a jet of water at enemies
- **Fire Breath**: Breathe fire in a cone
- **Pounce**: Leap forward and damage enemies
@@ -58,6 +96,7 @@ This game uses a pure ECS (Entity Component System) architecture:
- **Systems**: Logic processors (RenderSystem, CombatSystem, AbsorptionSystem, etc.)
This architecture makes it easy to:
+
- Add new skills and abilities
- Create mutations and combinations
- Extend creature behaviors
@@ -67,32 +106,65 @@ This architecture makes it easy to:
```
src/
-├── core/ # ECS framework
-│ ├── Engine.js # Main game loop
-│ ├── Entity.js # Entity manager
-│ ├── Component.js # Base component
-│ └── System.js # Base system
-├── components/ # All game components
-│ ├── Position.js
-│ ├── Health.js
-│ ├── Stats.js
-│ ├── Evolution.js
-│ └── ...
-├── systems/ # All game systems
-│ ├── RenderSystem.js
-│ ├── CombatSystem.js
-│ ├── AbsorptionSystem.js
-│ └── ...
-├── skills/ # Skill system
-│ ├── Skill.js
-│ ├── SkillRegistry.js
-│ └── skills/ # Individual skills
-├── items/ # Item system
-│ ├── Item.js
-│ └── ItemRegistry.js
-├── world/ # World management
-│ └── World.js
-└── main.js # Entry point
+├── core/ # ECS framework and utilities
+│ ├── Engine.ts # Main game loop
+│ ├── Entity.ts # Entity manager
+│ ├── Component.ts # Base component
+│ ├── System.ts # Base system
+│ ├── Constants.ts # Enums and constants
+│ ├── EventBus.ts # Event system
+│ ├── LevelLoader.ts # Level loading
+│ ├── Palette.ts # Color palette
+│ ├── PixelFont.ts # Pixel font rendering
+│ ├── SpriteLibrary.ts # Sprite definitions
+│ └── TileMap.ts # Tile map system
+├── components/ # All game components
+│ ├── Position.ts # Position and rotation
+│ ├── Velocity.ts # Movement velocity
+│ ├── Health.ts # Health and regeneration
+│ ├── Sprite.ts # Visual representation
+│ ├── Stats.ts # Attributes and leveling
+│ ├── Combat.ts # Combat stats and attacks
+│ ├── Evolution.ts # Evolution paths and mutations
+│ ├── Skills.ts # Skill management
+│ ├── SkillProgress.ts # Skill learning progress
+│ ├── Absorbable.ts # Absorption mechanics
+│ ├── Stealth.ts # Stealth state
+│ ├── Intent.ts # Action intent
+│ ├── Inventory.ts # Items and equipment
+│ └── AI.ts # AI behavior data
+├── systems/ # All game systems
+│ ├── RenderSystem.ts # Rendering
+│ ├── InputSystem.ts # Input handling
+│ ├── PlayerControllerSystem.ts # Player control
+│ ├── MovementSystem.ts # Movement physics
+│ ├── CombatSystem.ts # Combat logic
+│ ├── AISystem.ts # AI behavior
+│ ├── AbsorptionSystem.ts # Absorption mechanics
+│ ├── StealthSystem.ts # Stealth mechanics
+│ ├── SkillSystem.ts # Skill activation
+│ ├── SkillEffectSystem.ts # Skill visual effects
+│ ├── ProjectileSystem.ts # Projectile physics
+│ ├── DeathSystem.ts # Death handling
+│ ├── HealthRegenerationSystem.ts # Health regen
+│ ├── VFXSystem.ts # Visual effects
+│ ├── UISystem.ts # UI rendering
+│ └── MenuSystem.ts # Menu management
+├── skills/ # Skill system
+│ ├── Skill.ts # Base skill class
+│ ├── SkillRegistry.ts # Skill registry
+│ └── skills/ # Individual skills
+│ ├── FireBreath.ts
+│ ├── Pounce.ts
+│ ├── StealthMode.ts
+│ └── WaterGun.ts
+├── items/ # Item system
+│ ├── Item.ts # Base item class
+│ └── ItemRegistry.ts # Item registry
+├── world/ # World management
+│ └── World.ts # World setup
+├── GameConfig.ts # Game configuration
+└── main.ts # Entry point
```
## Gameplay Loop
@@ -103,6 +175,7 @@ src/
4. **Evolve**: Your form changes based on what you absorb
5. **Level Up**: Gain XP, increase stats, unlock new possibilities
6. **Stealth**: Use form-specific stealth to avoid or ambush enemies
+7. **Mutate**: Gain powerful mutations like Hardened Shell, Electric Skin, or Bioluminescence
## Evolution Paths
@@ -110,13 +183,30 @@ src/
- **Beast Path**: Absorb beasts to become a predator, gain physical power
- **Slime Path**: Maintain your original form, gain unique abilities
+## Mutations
+
+- **Hardened Shell**: Increased defense (requires high Constitution)
+- **Electric Skin**: Damage reflection (requires high Intelligence)
+- **Bioluminescence**: Glowing light source (requires high Human evolution)
+
## Technical Details
-- **No External Dependencies**: Pure vanilla JavaScript (except Vite for dev server)
+- **TypeScript**: Full type safety and modern JavaScript features
+- **Vite**: Fast development server and build tool
- **Canvas 2D**: High-performance rendering with Canvas API
+- **ESLint**: Code linting with TypeScript support
+- **Prettier**: Code formatting
+- **Husky**: Pre-commit hooks (skips in CI environments)
- **Modular Design**: Easy to extend and modify
- **ECS Pattern**: Scalable architecture for complex game mechanics
+## Code Quality
+
+- **TypeScript**: Full type coverage, no `any` types
+- **ESLint**: Zero warnings policy
+- **Prettier**: Consistent code formatting
+- **Pre-commit Hooks**: Automatic formatting and linting before commits
+
## Future Enhancements
- More skills and mutations
diff --git a/eslint.config.js b/eslint.config.js
index 1462103..87f9419 100644
--- a/eslint.config.js
+++ b/eslint.config.js
@@ -1,26 +1,38 @@
-import js from "@eslint/js";
-import globals from "globals";
+import js from '@eslint/js';
+import globals from 'globals';
+import tseslint from 'typescript-eslint';
export default [
- js.configs.recommended,
- {
- languageOptions: {
- ecmaVersion: 2022,
- sourceType: "module",
- globals: {
- ...globals.browser,
- ...globals.node,
- performance: "readonly",
- requestAnimationFrame: "readonly",
- },
- },
- rules: {
- "no-unused-vars": ["error", {
- "argsIgnorePattern": "^_",
- "varsIgnorePattern": "^_"
- }],
- "no-console": "off",
- "indent": ["error", 2],
- },
+ js.configs.recommended,
+ ...tseslint.configs.recommended,
+ {
+ languageOptions: {
+ ecmaVersion: 2022,
+ sourceType: 'module',
+ globals: {
+ ...globals.browser,
+ ...globals.node,
+ performance: 'readonly',
+ requestAnimationFrame: 'readonly',
+ },
},
+ files: ['**/*.ts', '**/*.tsx'],
+ rules: {
+ '@typescript-eslint/no-unused-vars': [
+ 'error',
+ {
+ argsIgnorePattern: '^_',
+ varsIgnorePattern: '^_',
+ },
+ ],
+ '@typescript-eslint/no-explicit-any': 'warn',
+ 'no-console': 'off',
+ indent: ['error', 2],
+ '@typescript-eslint/explicit-module-boundary-types': 'off',
+ '@typescript-eslint/no-non-null-assertion': 'warn',
+ },
+ },
+ {
+ ignores: ['dist/**', 'node_modules/**', '*.config.js'],
+ },
];
diff --git a/index.html b/index.html
index 366bda6..3fbeb35 100644
--- a/index.html
+++ b/index.html
@@ -51,7 +51,7 @@
-
+