Interactive Fighting Game-Style Animal Statistics Webapp
A web application that presents animal statistics in an engaging fighting game-style interface. Compare stats, view animals in a character select screen, and pit them against each other in VS battles!
- Character Select Screen: Stats view with centered character display and flanking stat panels
- VS Battle Mode: Compare two fighters head-to-head with dramatic VS badge
- Transparent PNG Images: All animals feature clean, background-free images
- Responsive Design: Optimized for desktop, tablet, and mobile devices
- 225 Animals: From Megalodon to Red-Eyed Tree Frog
- Combat Stats: Attack, Defense, Agility, Stamina, Intelligence, Special Attack
- Detailed Substats: Raw Power, Armor, Speed, Tactics, and more
- Scientific Data: Weight, speed, lifespan, bite force, and more
- Account Creation: Sign up with email and password
- User Authentication: Secure JWT-based login
- Future Features: Voting on stats, comments, fight predictions
- MongoDB Database: Persistent storage with MongoDB Atlas
- RESTful API: Vercel serverless functions
- Search & Filter: Advanced querying capabilities
Visit animalbattlestats.com directly.
# Clone the repository
git clone https://github.com/RamiNoodle733/animal-battle-stats.git
cd animal-battle-stats
# Install dependencies
npm install
# Configure environment
cp .env.example .env.local
# Edit .env.local with your MongoDB URI and JWT secret
# Seed database (optional - if starting fresh)
npm run seed
# Start development server
npm run devanimal-battle-stats/
โโโ index.html # Main HTML (single-page app)
โโโ manifest.json # PWA manifest
โโโ vercel.json # Vercel deployment config
โ
โโโ css/ # Stylesheets (modular architecture)
โ โโโ main.css # Import manifest
โ โโโ legacy.css # Original styles (being migrated)
โ โโโ variables.css # Design tokens
โ โโโ base.css # Reset & utilities
โ โโโ components/ # Reusable UI components
โ โ โโโ buttons.css
โ โ โโโ cards.css
โ โ โโโ modals.css
โ โ โโโ stat-bars.css
โ โโโ layout/ # Layout components
โ โ โโโ header.css
โ โ โโโ grid.css
โ โโโ pages/ # Page-specific styles
โ โโโ compare.css
โ โโโ community.css
โ โโโ rankings.css
โ โโโ stats.css
โ โโโ tournament.css
โ
โโโ js/ # Client-side JavaScript
โ โโโ core.js # Shared utilities & config
โ โโโ main.js # Core app + Stats page (~2,500 lines)
โ โโโ rankings.js # Rankings page (~1,850 lines)
โ โโโ tournament.js # Tournament system (~1,900 lines)
โ โโโ community-manager.js # Community page (~1,300 lines)
โ โโโ router.js # Client-side routing
โ โโโ auth.js # Authentication UI
โ โโโ compare.js # Compare page enhancements
โ โโโ community.js # Community page enhancements
โ
โโโ api/ # Serverless API functions (Vercel)
โ โโโ animals.js # Animals CRUD
โ โโโ animals/[id].js # Single animal operations
โ โโโ auth.js # Authentication
โ โโโ battles.js # Battle results
โ โโโ chat.js # Community chat
โ โโโ comments.js # Animal comments
โ โโโ community.js # Community features
โ โโโ rankings.js # Power rankings
โ โโโ search.js # Search API
โ โโโ stats.js # Site statistics
โ โโโ votes.js # Voting system
โ
โโโ lib/ # Shared backend utilities
โ โโโ mongodb.js # Database connection
โ โโโ auth.js # JWT utilities
โ โโโ discord.js # Discord integration
โ โโโ xpSystem.js # XP/leveling system
โ โโโ models/ # Mongoose models
โ โโโ Animal.js
โ โโโ BattleStats.js
โ โโโ ChatMessage.js
โ โโโ Comment.js
โ โโโ RankHistory.js
โ โโโ SiteStats.js
โ โโโ User.js
โ โโโ Vote.js
โ โโโ XpClaim.js
โ
โโโ scripts/ # Admin/development scripts
โ โโโ migrations/ # Database migrations
โ โโโ data-tools/ # Data manipulation tools
โ โโโ image-tools/ # Image processing tools
โ
โโโ images/ # Static images
โโโ animal_stats.json # Backup animal data
| Endpoint | Method | Description |
|---|---|---|
/api/animals |
GET | Get all animals |
/api/animals |
POST | Create new animal |
/api/animals/[id] |
GET/PUT/DELETE | Single animal operations |
/api/search |
GET/POST | Search animals |
/api/random |
GET | Random animal(s) |
/api/stats |
GET | Database statistics |
/api/health |
GET | Health check |
/api/auth/signup |
POST | Create account |
/api/auth/login |
POST | Login |
/api/auth/me |
GET | Get current user |
Frontend: HTML5, CSS3, JavaScript, Chart.js, Font Awesome
Backend: Vercel Serverless Functions, MongoDB Atlas, Mongoose
Auth: JWT, bcryptjs
- ARCHITECTURE.md - Detailed codebase structure & development guidelines
- DEPLOYMENT.md - Deployment instructions
- IMAGE_UPDATER_README.md - Image processing tools
MIT License - see LICENSE for details.