Skip to content

CuriQusEth/Warp-Racer

BranchesTags

Repository files navigation

🌀 Warp Racer

A high-speed endless racing game set inside a digital warp tunnel — powered by Farcaster and Base Builder Codes.

🎮 Game Overview

Warp Racer turns the Farcaster feed into a blazing digital tunnel. Race through neon warp zones, dodge obstacles, collect power-ups, and compete for the top spot on weekly leaderboards.

Core Features

  • 🚀 Endless Runner - High-speed tunnel racing with increasing difficulty
  • 💜 Vaporwave Aesthetics - Neon purple/pink Farcaster-themed visuals
  • 🎯 Collectibles - Likes (❤️) and Recasts (🔁) for points and speed boosts
  • ⚡ Power-ups - Shields, boosts, time slow, and magnets
  • 🏆 Leaderboards - Weekly competitions with score sharing
  • 📱 Mobile Optimized - Touch controls for on-the-go racing
  • 🎨 Desktop Controls - Keyboard controls with visual hints

🏗️ Base Builder Integration

Warp Racer is fully integrated with Base Builder Codes (ERC-8021) for onchain attribution and reward qualification.

Attribution

{
  builderCode: "warpracer",
  codes: ["warpracer", "farcaster", "basebuilder"],
  payoutAddress: "0x29536D0bc1004ab274c4F0F59734Ad74D4559b7B"
}

Documentation

🚀 Tech Stack

Frontend

  • Next.js 15.3.6 - React framework (with security patches)
  • React 19.1.0 - UI library
  • TypeScript 5.8.3 - Type safety
  • Tailwind CSS - Styling
  • Shadcn/ui - UI components

Blockchain & Attribution

  • Ox 0.2.2 - Base Builder Codes utilities
  • Wagmi 2.19.5 - Wallet integration
  • Viem 2.41.2 - Ethereum utilities
  • ERC-8021 - Transaction attribution standard

Farcaster

  • @farcaster/miniapp-sdk 0.2.1 - Mini app integration
  • @farcaster/quick-auth 0.0.8 - Authentication

🎯 Game Mechanics

Controls

Desktop:

  • Arrow Keys / A,D - Move left/right
  • Space - Pause game
  • ESC - Toggle controls hint

Mobile:

  • Touch buttons - Left/Right movement
  • Auto-pause on tab switch

Collectibles

Item Points Effect
❤️ Like +100 Score boost
🔁 Recast +200 Speed burst + score

Power-ups

Power-up Duration Effect
🛡️ Shield 5s One-hit protection
🌀 Warp Boost 5s Double speed + invincibility
⚡ Time Slow 5s Slow-motion mode
💫 Magnet 5s Auto-collect nearby items

Obstacles

  • 🔴 Data Blocks - Static red barriers
  • 🟠 Spam Bots - Moving orange threats
  • 🟣 Firewall Barriers - Purple walls

Scoring

Final Score = (Distance × Combo Multiplier) + Collectibles + Power-ups

🛠️ Development

Prerequisites

  • Node.js 18+
  • pnpm (recommended) or npm

Installation

# Clone the repository
git clone <your-repo-url>
cd warp-racer

# Install dependencies
pnpm install

# Create environment file
cp .env.local.example .env.local

# Edit .env.local with your values:
# NEXT_PUBLIC_BASE_BUILDER_CODE=warpracer
# NEXT_PUBLIC_PAYOUT_ADDRESS=0x29536D0bc1004ab274c4F0F59734Ad74D4559b7B

Running Locally

# Development mode
pnpm dev

# Production build
pnpm build
pnpm start

# Linting
pnpm lint

Environment Variables

# Required
NEXT_PUBLIC_BASE_BUILDER_CODE=warpracer
NEXT_PUBLIC_PAYOUT_ADDRESS=0x29536D0bc1004ab274c4F0F59734Ad74D4559b7B

# Optional (auto-injected by Farcaster)
NEXT_PUBLIC_FARCASTER_FRAME_ID=...

📁 Project Structure

warp-racer/
├── src/
│   ├── app/                  # Next.js app router
│   │   ├── page.tsx         # Main game page
│   │   ├── layout.tsx       # Root layout with Farcaster SDK
│   │   └── api/             # API routes
│   │       └── submit-score/  # Score submission endpoint
│   ├── components/          # React components
│   │   ├── WarpRacer.tsx   # Main game component
│   │   ├── GameCanvas.tsx  # Canvas rendering
│   │   ├── GameOver.tsx    # Game over screen
│   │   ├── Leaderboard.tsx # Score display
│   │   └── ui/             # Shadcn UI components
│   ├── hooks/              # React hooks
│   │   ├── useBaseBuilderAttribution.ts  # Base Builder integration
│   │   ├── useTransactionAttribution.ts  # ERC-8021 utilities
│   │   └── ...             # Farcaster hooks
│   ├── lib/                # Utilities
│   │   ├── erc8021.ts     # ERC-8021 core implementation
│   │   ├── erc8021-tests.ts  # Test suite
│   │   ├── gameEngine.ts  # Game logic
│   │   ├── gameTypes.ts   # Type definitions
│   │   └── codeRegistry.ts   # Attribution registry
│   └── utils/             # Helper functions
├── public/
│   └── .well-known/
│       └── farcaster.json # Farcaster manifest
├── BASE-BUILDER-INTEGRATION.md  # Builder codes guide
├── ERC8021-README.md      # ERC-8021 documentation
└── package.json           # Dependencies

🔐 Security

CVE-2025-66478 (PATCHED)

  • Status: ✅ FIXED
  • Version: Next.js 15.3.6
  • CVSS: 10.0 (Critical RCE)
  • Action: All dependencies updated

ERC-8021 Security

  • ✅ Input validation
  • ✅ Length checks (prevent buffer overflow)
  • ✅ Format verification
  • ✅ Graceful error handling
  • ✅ No PII in attribution codes

🎨 Design Philosophy

Visual Style

  • Neon Cyberpunk - Glowing tunnels and particle effects
  • Vaporwave Palette - Purple (#7c3aed) and pink (#ec4899)
  • Farcaster Branding - Purple identity throughout
  • Synthwave Aesthetic - Light trails and holographic UI

UX Principles

  • 30-90 second sessions - Quick, replayable runs
  • One-tap sharing - Instant Farcaster casts
  • Progressive difficulty - Smooth learning curve
  • Mobile-first - Touch-optimized controls

🚀 Deployment

Vercel (Recommended)

# Install Vercel CLI
npm i -g vercel

# Deploy
vercel

# Environment variables will be prompted
# Or set via Vercel dashboard

Manual Deployment

# Build production bundle
pnpm build

# Start production server
pnpm start

Post-Deployment

  1. ✅ Register on https://base.dev/
  2. ✅ Get your official builder code
  3. ✅ Update NEXT_PUBLIC_BASE_BUILDER_CODE
  4. ✅ Redeploy with new code
  5. ✅ Monitor analytics on Base.dev dashboard

📊 Testing

Browser Console Tests

// Run all ERC-8021 tests
window.erc8021Tests()

// Run attribution examples
window.erc8021Examples.all()

// Check current attribution
const { codes } = useWarpRacerAttribution()
console.log('Attribution codes:', codes)

Manual Testing Checklist

  • Game starts without errors
  • Mobile controls work
  • Desktop keyboard controls work
  • Collectibles spawn and can be collected
  • Power-ups activate correctly
  • Collision detection works
  • Score calculates properly
  • Game over screen displays
  • Share to Farcaster works
  • Attribution suffix formats correctly

🤝 Contributing

Contributions are welcome! Please follow these guidelines:

  1. Fork the repository
  2. Create a feature branch: git checkout -b feature/amazing-feature
  3. Commit changes: git commit -m 'Add amazing feature'
  4. Push to branch: git push origin feature/amazing-feature
  5. Open a Pull Request

Code Style

  • TypeScript strict mode
  • ESLint + Prettier
  • Conventional commits
  • Test coverage for new features

📚 Resources

Official Documentation

Community

📄 License

MIT License - see LICENSE file for details

🎯 Roadmap

v1.0 (Current)

  • ✅ Core endless runner mechanics
  • ✅ Base Builder Codes integration
  • ✅ Farcaster mini-app support
  • ✅ Leaderboard system
  • ✅ Mobile controls

v1.1 (Next)

  • 🔄 Real-time multiplayer races
  • 🔄 NFT reward badges for top players
  • 🔄 Custom ship skins
  • 🔄 Seasonal events and themes
  • 🔄 Music sync gameplay

v2.0 (Future)

  • 🔮 Tournament mode
  • 🔮 Clan competitions
  • 🔮 Ship upgrades and progression
  • 🔮 Dynamic tunnels based on Farcaster trends
  • 🔮 Replay GIF exports

💬 Support

Questions or issues?

  • Open a [GitHub Issue]
  • Join [Base Discord]
  • Cast on [Farcaster]

Built with 💜 for the Farcaster and Base communities

Warp Racer - Race through the digital feed! 🚀

About

BASEAPP

Resources

Readme
Activity

Stars

0 stars

Watchers

0 watching

Forks

0 forks
Report repository

Releases

No releases published

Packages

 
 
 

Contributors

Languages