🔍 NFT Explorer#

• Character Browser: Explore all character NFTs with detailed stats and attributes
• Weapon Browser: Browse weapon collections with performance metrics
• Search Functionality: Find specific NFTs by identifier
• Collection Filtering: Filter by rarity, level, and other attributes

📊 Game Data Analytics#

• Character Skills: Ultimate abilities, charging mechanics, and stat progressions
• Weapon Statistics: Damage values, ranges, and upgrade paths
• Reward Pools: Lootbox contents and drop rates
• Battle Pass Data: Season rewards and progression systems

🎨 Modern UI/UX#

• Responsive Design: Optimized for desktop and mobile devices
• Dark Mode Support: Toggle between light and dark themes
• Smooth Animations: Powered by Framer Motion
• Interactive Charts: Data visualizations with Chart.js

Frontend#

• Next.js 14 - React framework with App Router
• TypeScript - Type-safe JavaScript
• Tailwind CSS - Utility-first CSS framework
• HeroUI - Modern React UI library

Animations & Visualization#

• Framer Motion - Animation library
• Chart.js - Data visualization
• React Chart.js 2 - React wrapper for Chart.js

Development Tools#

• ESLint - Code linting
• PostCSS - CSS processing
• Git - Version control

Prerequisites#

• Node.js (version 18 or higher)
• npm, yarn, pnpm, or bun package manager

Installation#

1. Clone the repository

   git clone https://github.com/VincenzoImp/cantinaroyale.tools.git
   cd cantinaroyale.tools

2. Install dependencies

   npm install
   # or
   yarn install
   # or
   pnpm install
   # or
   bun install

3. Run the development server

   npm run dev
   # or
   yarn dev
   # or
   pnpm dev
   # or
   bun dev

4. Open in browser Navigate to http://localhost:3000 to see the application.

Build for Production#

npm run build
npm start

NFT Collections Support#

• Genesis Space Apes (GSPACEAPE-08bc2b) - The original Cantina Royale character collection
• Cantina Royale Heroes (CRHEROES-9edff2) - Second generation characters with unique abilities
• Cantina Weapons (CRWEAPONS-e5ab49) - Weapon NFTs with gameplay bonuses
• Mythical Weapons (CRMYTH-546419) - Rare legendary weapons with unique play modes

Game Data Integration#

• Character Ultimate Skills: Detailed breakdown of each character’s special abilities
• Weapon Statistics: Damage values, ranges, and special effects
• Upgrade Paths: Progression systems for characters and weapons
• Reward Systems: Lootbox contents and probability distributions

Dynamic Search & Filtering#

• Search NFTs by exact identifier
• Filter collections by multiple criteria
• Sort by rarity, level, stats, and other attributes
• Real-time results with responsive UI

Environment Variables#

Create a .env.local file for environment-specific settings:

# Example environment variables
NEXT_PUBLIC_APP_URL=http://localhost:3000
NEXT_PUBLIC_API_URL=https://api.multiversx.com

Data Sources#

• NFT metadata is stored in public/data/ directory
• Game statistics are in private/game_data/ directory
• Configuration is managed through public/data/info.json

Development Guidelines#

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

Code Style#

• Follow TypeScript best practices
• Use ESLint configuration provided
• Maintain consistent formatting with Prettier
• Write descriptive commit messages

NFT Collections#

Each collection follows a standardized structure:

{
  "collection": "COLLECTION-ID",
  "name": "Collection Name",
  "ticker": "TICKER",
  "holderCount": 142,
  "nftCount": 3028,
  "assets": {
    "website": "https://cantinaroyale.io",
    "description": "Collection description"
  }
}

Character Skills#

Character abilities are defined with level-based progression:

Character,Skill,Level1,Level2,...,Level10,Scaling
FreeCharacter3,ultimateskill_charging_duration,90,90,...,90,1.0
FreeCharacter3,ultimateskill_9lives_healthPercentage,25,30,...,80,1.0

Vercel (Recommended)#

This project is optimized for deployment on Vercel:

1. Connect your GitHub repository to Vercel
2. Configure build settings (auto-detected for Next.js)
3. Deploy with automatic CI/CD

Alternative Platforms#

• Netlify: Compatible with static export
• Railway: Node.js hosting
• Digital Ocean: VPS deployment

Social Media#

• Twitter: @CantinaRoyale
• Discord: discord.gg/cantinaroyale
• Telegram: t.me/CantinaRoyale
• Blog: blog.cantinaroyale.io