Skip to content

Nexlayer/ai-code-arena

Folders and files

NameName
Last commit message
Last commit date

Latest commit

ย 

History

7 Commits
ย 
ย 
ย 
ย 
ย 
ย 
ย 
ย 
ย 
ย 
ย 
ย 
ย 
ย 
ย 
ย 
ย 
ย 
ย 
ย 

Repository files navigation

AI Code Arena - Battle of the AI Tools ๐Ÿš€โš”๏ธ

A blazing fast, cyberpunk-themed browser game where AI coding tools battle it out for supremacy! Vote for your favorite AI coding assistants and watch them climb the leaderboard.

๐ŸŽฎ Game Features

Core Mechanics

  • No Login Required - Jump right into voting without any authentication
  • Head-to-Head Battles - Two AI tools face off in each matchup
  • Live Voting - Real-time vote counting with animated progress bars
  • Win Streaks - Tools get "on fire" after 3 consecutive wins
  • Auto-Matchmaking - New battles start automatically every 5 minutes

Viral Features

  • Shareable Stats - Generate and share your voting statistics
  • Trending Tools - See which tools are gaining popularity
  • Recent Battles - View the latest matchups and results
  • Leaderboard - Complete ranking of all AI tools
  • Tournament Mode - March Madness style bracket competition

Cyberpunk Design

  • Neon Animations - Glowing effects and smooth transitions
  • Grid Background - Futuristic cyber-grid pattern
  • Fire Effects - Special animations for tools on win streaks
  • Responsive Design - Works perfectly on all devices

๐Ÿ› ๏ธ AI Tools Included

Established Players

  • Cursor - The AI-first code editor
  • GitHub Copilot - Your AI pair programmer
  • Claude Code - Anthropic's coding assistant
  • Replit - The collaborative browser-based IDE
  • Warp - The terminal reimagined

New Challengers

  • Windsurf - AI-powered code review
  • Devin - The first AI software engineer
  • Lovable - AI-powered code review with human-like feedback
  • Bolt - AI-powered development platform
  • v0.dev - AI-powered UI generation
  • Base44 - AI-powered development tools

CLI Tools

  • Gemini CLI - Google's AI coding assistant
  • OpenAI Codex - OpenAI's code generation model

๐Ÿš€ Getting Started

Quick Start

  1. Clone or download this repository
  2. Open index.html in your web browser
  3. Start voting immediately!

Local Development

# No build process required - it's pure HTML/CSS/JS!
# Just open index.html in your browser

# Or serve with a simple HTTP server
python -m http.server 8000
# Then visit http://localhost:8000

๐ŸŽฏ How to Play

  1. Vote in Current Battle - Click on your preferred AI tool in the main matchup
  2. Watch Live Results - See votes update in real-time with animated progress bars
  3. Check Trending Tools - See which tools are gaining popularity
  4. View Recent Battles - Browse the latest matchups and results
  5. Share Your Stats - Generate shareable badges with your voting history
  6. Explore Leaderboard - See the complete ranking of all tools
  7. Join Tournament - Participate in bracket-style competitions

๐Ÿ’พ Data Persistence

All game data is stored locally in your browser using localStorage:

  • Tool statistics (votes, wins, losses, win streaks)
  • User voting history and preferences
  • Recent battle results
  • Tournament brackets

๐ŸŽจ Technical Stack

  • HTML5 - Semantic markup with modern features
  • CSS3 - Advanced animations and cyberpunk styling
  • JavaScript ES6+ - Modern game logic and interactivity
  • TailwindCSS - Utility-first CSS framework
  • localStorage - Client-side data persistence
  • No Dependencies - Pure frontend, no build process required

๐Ÿ”ฅ Key Features

Real-Time Updates

  • Live vote counting with smooth animations
  • Automatic match transitions
  • Dynamic progress bars
  • Real-time leaderboard updates

Viral Mechanics

  • Shareable voting statistics
  • Social media friendly design
  • One-click sharing functionality
  • Trending indicators

Performance Optimized

  • Blazing fast load times
  • Smooth 60fps animations
  • Efficient localStorage usage
  • No external dependencies

๐ŸŽฎ Game Mechanics

Voting System

  • Each vote immediately updates the matchup
  • Tools gain popularity based on votes and wins
  • Win streaks create "on fire" status
  • Matches end after 50 votes or 5 minutes

Matchmaking

  • Weighted random selection based on popularity
  • Tools on fire have reduced selection chance
  • Ensures variety in matchups
  • Prevents the same tools from appearing repeatedly

Statistics Tracking

  • Total votes per tool
  • Win/loss records
  • Win streaks
  • User voting history
  • Recent battle results

๐Ÿš€ Deployment

This game is designed to be deployed anywhere:

Static Hosting

  • GitHub Pages
  • Netlify
  • Vercel
  • Any static file server

Local Testing

  • Open index.html directly in browser
  • Use any local HTTP server
  • No build process required

๐ŸŽฏ Future Enhancements

  • User-submitted tool nominations
  • Advanced tournament brackets
  • Achievement system
  • Social sharing with custom badges
  • Real-time multiplayer features
  • Mobile app version
  • API for external integrations

๐Ÿค Contributing

This is a fun project! Feel free to:

  • Add new AI tools to the roster
  • Improve the cyberpunk styling
  • Add new game mechanics
  • Optimize performance
  • Fix bugs or issues

๐Ÿ“„ License

MIT License - Feel free to use this project for your own purposes!

๐ŸŽ‰ Credits

Inspired by:

  • LMArena.ai for the voting concept
  • March Madness for tournament brackets
  • Cyberpunk 2077 for the aesthetic
  • The developer community's love for AI tools

Ready to battle? Open index.html and start voting for your favorite AI coding tools! โš”๏ธ๐Ÿš€

About

No description, website, or topics provided.

Resources

Stars

Watchers

Forks

Releases

No releases published

Packages

 
 
 

Contributors