Summoners War Gacha Game

Một game thu thập và chiến đấu quái thú theo phong cách Summoners War, được xây dựng hoàn toàn bằng tiếng Việt với dữ liệu quái thú chính thức từ SWARFarm API.

🎮 Tính năng chính

🌟 Hệ thống triệu hồi

4 loại cuộn triệu hồi với tỷ lệ và pool quái thú riêng biệt
Mystical Scroll: 75% ⭐⭐⭐, 20% ⭐⭐⭐⭐, 5% ⭐⭐⭐⭐⭐ (5 nguyên tố)
Legendary Scroll: 100% ⭐⭐⭐⭐⭐ (5 nguyên tố)
Light & Dark Scroll: Chỉ quái thú Ánh sáng & Bóng tối
Supreme Scroll: 100,000 crystals, đảm bảo ⭐⭐⭐⭐⭐ từ 5 nguyên tố thường
Hiệu ứng "MỚI": Badge hiển thị 5 phút sau khi triệu hồi

🗃️ Hệ thống lưu trữ nâng cao

Kho quái thú: Grid 7 cột phong cách Summoners War
Kho runes: Hệ thống trang bị 6 slot với filter nâng cao
Lọc và sắp xếp: Theo nguyên tố, sao, level, rune set
Scrollbar đồng bộ: Màu sắc phù hợp với theme game

⚡ Hệ thống nâng cấp quái thú

Level Up: Tăng level với exp và mana
Star Evolution: Nâng sao với quái thú hy sinh và mana
Awakening: Thức tỉnh với nguyên liệu essence
Giới hạn level theo sao: ⭐⭐⭐=25, ⭐⭐⭐⭐=30, ⭐⭐⭐⭐⭐=35, ⭐⭐⭐⭐⭐⭐=40

🏪 Hệ thống cửa hàng

Glory Shop: Đổi glory points lấy scrolls và essences
Magic Shop: Premium items với legendary scrolls, 6-star runes
Dungeon System: Cairos dungeons với energy cost và rewards

👨‍💼 Admin Panel

4 tab quản lý: Users, Monsters, Stats, System
Thống kê real-time: User count, monster distribution
Validation tools: Data integrity checks, SWARFarm sync
Cache management: Database health monitoring

🛠️ Tech Stack

Frontend

React 18 với TypeScript
Vite cho development và build
Tailwind CSS với custom Summoners War theme
Framer Motion cho animations mượt mà
TanStack Query cho state management
Wouter cho routing nhẹ

Backend

Express.js với TypeScript
Drizzle ORM với PostgreSQL
WebSocket cho real-time updates
Session-based authentication
SWARFarm API integration (2770+ monsters)

Database

PostgreSQL với Neon serverless
Drizzle migrations cho schema management
Comprehensive relations: Users, Monsters, UserMonsters, Runes, etc.

Cài Đặt Nhanh

# Clone repository
git clone <repository-url>
cd summoners-war-gacha-game

# Cài đặt dependencies
npm install

# Thiết lập environment variables
cp .env.example .env
# Chỉnh sửa .env với database connection và secrets

# Chạy database migrations
npm run db:push

# Khởi động development server
npm run dev

Ứng dụng sẽ chạy tại http://localhost:5000

Cấu Trúc Dự Án

summoners-war-gacha-game/
├── client/                 # React Frontend
│   ├── src/
│   │   ├── components/     # UI Components (game-layout, navigation, etc.)
│   │   ├── pages/          # Page Components (summon, storage, arena)
│   │   ├── hooks/          # Custom React Hooks (useAuth, useSummonAnimation)
│   │   ├── lib/            # Utilities (queryClient, API helpers)
│   │   └── utils/          # Helper Functions (monster-display, calculations)
├── server/                 # Express Backend
│   ├── db.ts              # Database connection (Neon PostgreSQL)
│   ├── routes.ts          # API Routes (summoning, monsters, arena)
│   ├── storage.ts         # Data Access Layer với Drizzle ORM
│   ├── auth.ts            # Replit Authentication logic
│   └── websocket.ts       # Real-time WebSocket handler
├── shared/                 # Shared Types & Schemas
│   └── schema.ts          # Drizzle database schemas với Zod validation
└── docs/                  # Documentation
    └── SETUP_LOCAL.md     # Hướng dẫn setup chi tiết

Tài Liệu Hướng Dẫn

SETUP_LOCAL.md - Hướng dẫn thiết lập đầy đủ cho local development
DEVELOPMENT_GUIDE.md - Quy trình phát triển và coding standards


### Bước 2: Cài đặt Dependencies
```bash
npm install

Bước 3: Thiết lập Database

Option A: PostgreSQL Local

Cài đặt PostgreSQL local
Tạo database mới:

CREATE DATABASE summoners_war_gacha;

Option B: Neon Database (Khuyến nghị)

Tạo tài khoản tại Neon
Tạo project mới và lấy connection string

Bước 4: Cấu hình Environment Variables

Tạo file .env trong thư mục root:

# Database
DATABASE_URL="postgresql://username:password@localhost:5432/summoners_war_gacha"

# Session Secret
SESSION_SECRET="your-super-secret-key-here"

# Development
NODE_ENV="development"
PORT=5000

# Optional: SWARFarm API (for monster data sync)
SWARFARM_API_URL="https://swarfarm.com/api/v2/"

Bước 5: Database Migration

# Push schema to database
npm run db:push

# Generate database client
npm run db:generate

Bước 6: Seed Database (Optional)

# Sync monster data from SWARFarm
npm run seed

Bước 7: Chạy Development Server

npm run dev

Server sẽ chạy tại: http://localhost:5000

📝 Scripts Commands

# Development
npm run dev          # Chạy development server
npm run build        # Build cho production
npm run preview      # Preview production build

# Database
npm run db:push      # Push schema changes
npm run db:generate  # Generate Drizzle client
npm run db:studio    # Mở Drizzle Studio GUI
npm run db:reset     # Reset database (cẩn thận!)

# Utilities
npm run lint         # Check code formatting
npm run type-check   # TypeScript validation
npm run seed         # Sync SWARFarm data

🎯 Cấu trúc Project

summoners-war-gacha/
├── client/                 # Frontend React app
│   ├── src/
│   │   ├── components/    # Reusable UI components
│   │   ├── pages/         # Route pages
│   │   ├── hooks/         # Custom React hooks
│   │   ├── lib/           # Utilities & configurations
│   │   └── utils/         # Helper functions
├── server/                # Backend Express app
│   ├── routes.ts          # API endpoints
│   ├── storage.ts         # Database operations
│   └── index.ts           # Server entry point
├── shared/                # Shared types & schemas
│   └── schema.ts          # Drizzle database schema
├── package.json
├── vite.config.ts
├── drizzle.config.ts
└── tailwind.config.ts

🔧 VS Code Configuration

Khuyến nghị Extensions

{
  "recommendations": [
    "bradlc.vscode-tailwindcss",
    "ms-vscode.vscode-typescript-next",
    "ms-vscode.vscode-json",
    "ms-vscode-remote.remote-containers",
    "formulahendry.auto-rename-tag",
    "esbenp.prettier-vscode"
  ]
}

Settings.json

{
  "typescript.preferences.importModuleSpecifier": "relative",
  "editor.formatOnSave": true,
  "editor.defaultFormatter": "esbenp.prettier-vscode",
  "tailwindCSS.experimental.classRegex": [
    ["clsx\\(([^)]*)\\)", "(?:'|\"|`)([^']*)(?:'|\"|`)"],
    ["className\\s*=\\s*[\"']([^\"']*)[\"']", "([a-zA-Z0-9\\-:]+)"]
  ]
}

Debug Configuration

Tạo .vscode/launch.json:

{
  "version": "0.2.0",
  "configurations": [
    {
      "name": "Debug Server",
      "type": "node",
      "request": "launch",
      "program": "${workspaceFolder}/server/index.ts",
      "runtimeArgs": ["-r", "tsx/cjs"],
      "env": {
        "NODE_ENV": "development"
      },
      "console": "integratedTerminal"
    }
  ]
}

🗄️ Database Schema

Core Tables

users: User accounts với currency tracking
monsters: Master monster data từ SWARFarm
userMonsters: Individual monster instances
runes: Equipment system với 6 slots
summons: Historical summoning records
dungeons: Cairos dungeons configuration
shopItems: Glory & Magic shop items

Key Relations

User ↔ UserMonsters (1:many)
Monster ↔ UserMonsters (1:many)
UserMonster ↔ Runes (1:many via equippedRunes)
Monster ↔ Monster (awakening relations)

🎨 Theme & Styling

Summoners War Color Palette

:root {
  --sw-fire: hsl(15, 85%, 55%);      /* 🔥 Fire */
  --sw-water: hsl(220, 85%, 55%);    /* 💧 Water */
  --sw-wind: hsl(90, 85%, 55%);      /* 🌪️ Wind */
  --sw-light: hsl(50, 95%, 75%);     /* ✨ Light */
  --sw-dark: hsl(280, 55%, 35%);     /* 🌑 Dark */
  --sw-mana: hsl(200, 80%, 45%);     /* 💎 Mana */
  --sw-crystal: hsl(270, 80%, 65%);  /* 💎 Crystal */
  --sw-glory: hsl(40, 90%, 60%);     /* ⭐ Glory */
}

Custom Scrollbar Styles

Main scrollbar: Purple-blue gradient với glow effect
Monster storage: Amber-orange phù hợp với theme
Dialog/Modal: Minimal purple cho popups
Navigation: Transparent cho mobile menu

🚨 Troubleshooting

Database Connection Issues

# Check PostgreSQL service
sudo systemctl status postgresql

# Reset database connection
npm run db:reset
npm run db:push

Build Errors

# Clear node_modules và reinstall
rm -rf node_modules package-lock.json
npm install

# Clear Vite cache
rm -rf .vite dist
npm run build

TypeScript Errors

# Regenerate types
npm run db:generate
npm run type-check

SWARFarm API Issues

API có thể bị rate limit, thử lại sau vài phút
Check network connection và firewall settings
Kiểm tra SWARFARM_API_URL trong .env

📊 Performance Tips

Development

Sử dụng React.StrictMode để detect side effects
Enable React DevTools Profiler
Monitor bundle size với npm run build --analyze

Production

Enable gzip compression
Configure proper caching headers
Use CDN cho static assets
Database indexing cho frequent queries

🔒 Security Considerations

Environment variables: Không commit .env files
Database credentials: Sử dụng connection pooling
Session security: Strong session secrets
Input validation: Zod schemas cho all API endpoints
SQL injection: Drizzle ORM prevents by default

🤝 Contributing

Fork repository
Tạo feature branch: git checkout -b feature/amazing-feature
Commit changes: git commit -m 'Add amazing feature'
Push branch: git push origin feature/amazing-feature
Open Pull Request

Code Style

TypeScript strict mode
Prettier formatting
ESLint rules
Conventional commits

📈 Roadmap

PvP Arena System: Ranked battles
Guild System: Team collaboration
World Boss: Weekly challenges
Rune Crafting: Advanced equipment system
Achievement System: Progress tracking
Push Notifications: Real-time alerts
Mobile App: React Native version

📄 License

MIT License - xem file LICENSE cho chi tiết.

🙏 Credits

SWARFarm API: Monster data và images
Summoners War: Game inspiration
Replit Community: Development platform
Open Source Libraries: All the amazing tools

Happy Gaming! 🎮

Nếu gặp vấn đề gì, tạo issue trên GitHub hoặc liên hệ team development.

Name		Name	Last commit message	Last commit date
Latest commit History 146 Commits
attached_assets		attached_assets
client		client
server		server
shared		shared
.gitignore		.gitignore
.replit		.replit
DEVELOPMENT_GUIDE.md		DEVELOPMENT_GUIDE.md
README.md		README.md
SETUP_LOCAL.md		SETUP_LOCAL.md
components.json		components.json
drizzle.config.ts		drizzle.config.ts
package-lock.json		package-lock.json
package.json		package.json
postcss.config.js		postcss.config.js
replit.md		replit.md
tailwind.config.ts		tailwind.config.ts
tsconfig.json		tsconfig.json
vite.config.ts		vite.config.ts

Folders and files

Latest commit

History

Repository files navigation

Summoners War Gacha Game

🎮 Tính năng chính

🌟 Hệ thống triệu hồi

🗃️ Hệ thống lưu trữ nâng cao

⚡ Hệ thống nâng cấp quái thú

🏪 Hệ thống cửa hàng

👨‍💼 Admin Panel

🛠️ Tech Stack

Frontend

Backend

Database

Cài Đặt Nhanh

Cấu Trúc Dự Án

Tài Liệu Hướng Dẫn

Bước 3: Thiết lập Database

Option A: PostgreSQL Local

Option B: Neon Database (Khuyến nghị)

Bước 4: Cấu hình Environment Variables

Bước 5: Database Migration

Bước 6: Seed Database (Optional)

Bước 7: Chạy Development Server

📝 Scripts Commands

🎯 Cấu trúc Project

🔧 VS Code Configuration

Khuyến nghị Extensions

Settings.json

Debug Configuration

🗄️ Database Schema

Core Tables

Key Relations

🎨 Theme & Styling

Summoners War Color Palette

Custom Scrollbar Styles

🚨 Troubleshooting

Database Connection Issues

Build Errors

TypeScript Errors

SWARFarm API Issues

📊 Performance Tips

Development

Production

🔒 Security Considerations

🤝 Contributing

Code Style

📈 Roadmap

📄 License

🙏 Credits

About

Resources

Uh oh!

Stars

Watchers

Forks

Releases

Packages 0

Uh oh!

Contributors

Uh oh!

Languages

Packages