ff14710987
- Completely rewrote team builder with unified template system - Fixed center alignment issues with proper CSS layout (max-width: 1200px, margin: 0 auto) - Implemented working drag-and-drop between storage and numbered team slots (1-6) - Added double-click backup method for moving pets - Fixed JavaScript initialization and DOM loading issues - Added proper visual feedback during drag operations - Fixed CSS syntax errors that were breaking f-string templates - Added missing send_json_response method for AJAX requests - Integrated IRC PIN delivery system for secure team changes - Updated PetBotWebServer constructor to accept bot instance for IRC messaging 🤖 Generated with [Claude Code](https://claude.ai/code) Co-Authored-By: Claude <noreply@anthropic.com>
4839 lines
178 KiB
Python
4839 lines
178 KiB
Python
#!/usr/bin/env python3
|
|
"""
|
|
PetBot Web Server
|
|
Provides web interface for bot data including help, player stats, and pet collections
|
|
"""
|
|
|
|
import os
|
|
import sys
|
|
import asyncio
|
|
from http.server import HTTPServer, BaseHTTPRequestHandler
|
|
from urllib.parse import urlparse, parse_qs
|
|
from threading import Thread
|
|
import time
|
|
|
|
# Add the project directory to the path
|
|
sys.path.append(os.path.dirname(os.path.abspath(__file__)))
|
|
|
|
from src.database import Database
|
|
|
|
class PetBotRequestHandler(BaseHTTPRequestHandler):
|
|
"""HTTP request handler for PetBot web server"""
|
|
|
|
@property
|
|
def database(self):
|
|
"""Get database instance from server"""
|
|
return self.server.database
|
|
|
|
@property
|
|
def bot(self):
|
|
"""Get bot instance from server"""
|
|
return getattr(self.server, 'bot', None)
|
|
|
|
def send_json_response(self, data, status_code=200):
|
|
"""Send a JSON response"""
|
|
import json
|
|
self.send_response(status_code)
|
|
self.send_header('Content-type', 'application/json')
|
|
self.end_headers()
|
|
self.wfile.write(json.dumps(data).encode())
|
|
|
|
def get_unified_css(self):
|
|
"""Return unified CSS theme for all pages"""
|
|
return """
|
|
:root {
|
|
--bg-primary: #0f0f23;
|
|
--bg-secondary: #1e1e3f;
|
|
--bg-tertiary: #2a2a4a;
|
|
--text-primary: #cccccc;
|
|
--text-secondary: #aaaaaa;
|
|
--text-accent: #66ff66;
|
|
--accent-blue: #4dabf7;
|
|
--accent-purple: #845ec2;
|
|
--gradient-primary: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
|
|
--gradient-secondary: linear-gradient(135deg, #ffecd2 0%, #fcb69f 100%);
|
|
--border-color: #444466;
|
|
--hover-color: #3a3a5a;
|
|
--shadow-color: rgba(0, 0, 0, 0.3);
|
|
--success-color: #51cf66;
|
|
--warning-color: #ffd43b;
|
|
--error-color: #ff6b6b;
|
|
}
|
|
|
|
* {
|
|
box-sizing: border-box;
|
|
}
|
|
|
|
body {
|
|
font-family: 'Segoe UI', 'Roboto', 'Arial', sans-serif;
|
|
max-width: 1200px;
|
|
margin: 0 auto;
|
|
padding: 0;
|
|
background: var(--bg-primary);
|
|
color: var(--text-primary);
|
|
line-height: 1.6;
|
|
min-height: 100vh;
|
|
}
|
|
|
|
.main-container {
|
|
padding: 20px;
|
|
min-height: calc(100vh - 80px);
|
|
}
|
|
|
|
/* Navigation Bar */
|
|
.navbar {
|
|
background: var(--gradient-primary);
|
|
padding: 15px 20px;
|
|
box-shadow: 0 2px 10px var(--shadow-color);
|
|
margin-bottom: 0;
|
|
}
|
|
|
|
.nav-content {
|
|
display: flex;
|
|
justify-content: space-between;
|
|
align-items: center;
|
|
max-width: 1200px;
|
|
margin: 0 auto;
|
|
}
|
|
|
|
.nav-brand {
|
|
font-size: 1.5em;
|
|
font-weight: bold;
|
|
color: white;
|
|
text-decoration: none;
|
|
display: flex;
|
|
align-items: center;
|
|
gap: 10px;
|
|
}
|
|
|
|
.nav-links {
|
|
display: flex;
|
|
gap: 20px;
|
|
align-items: center;
|
|
}
|
|
|
|
.nav-link {
|
|
color: white;
|
|
text-decoration: none;
|
|
padding: 8px 16px;
|
|
border-radius: 20px;
|
|
transition: all 0.3s ease;
|
|
font-weight: 500;
|
|
}
|
|
|
|
.nav-link:hover {
|
|
background: rgba(255, 255, 255, 0.2);
|
|
transform: translateY(-1px);
|
|
}
|
|
|
|
.nav-link.active {
|
|
background: rgba(255, 255, 255, 0.3);
|
|
}
|
|
|
|
/* Dropdown Navigation */
|
|
.nav-dropdown {
|
|
position: relative;
|
|
display: inline-block;
|
|
}
|
|
|
|
.dropdown-arrow {
|
|
font-size: 0.8em;
|
|
margin-left: 5px;
|
|
transition: transform 0.3s ease;
|
|
}
|
|
|
|
.nav-dropdown:hover .dropdown-arrow {
|
|
transform: rotate(180deg);
|
|
}
|
|
|
|
.dropdown-content {
|
|
display: none;
|
|
position: absolute;
|
|
top: 100%;
|
|
left: 0;
|
|
background: var(--bg-secondary);
|
|
min-width: 180px;
|
|
box-shadow: 0 8px 16px var(--shadow-color);
|
|
border-radius: 8px;
|
|
z-index: 1000;
|
|
border: 1px solid var(--border-color);
|
|
overflow: hidden;
|
|
margin-top: 5px;
|
|
}
|
|
|
|
.nav-dropdown:hover .dropdown-content {
|
|
display: block;
|
|
animation: fadeIn 0.3s ease;
|
|
}
|
|
|
|
@keyframes fadeIn {
|
|
from { opacity: 0; transform: translateY(-10px); }
|
|
to { opacity: 1; transform: translateY(0); }
|
|
}
|
|
|
|
.dropdown-item {
|
|
color: var(--text-primary);
|
|
padding: 12px 16px;
|
|
text-decoration: none;
|
|
display: block;
|
|
transition: background-color 0.3s ease;
|
|
border-bottom: 1px solid var(--border-color);
|
|
}
|
|
|
|
.dropdown-item:last-child {
|
|
border-bottom: none;
|
|
}
|
|
|
|
.dropdown-item:hover {
|
|
background: var(--bg-tertiary);
|
|
color: var(--text-accent);
|
|
}
|
|
|
|
@media (max-width: 768px) {
|
|
.nav-content {
|
|
flex-direction: column;
|
|
gap: 15px;
|
|
}
|
|
|
|
.nav-links {
|
|
flex-wrap: wrap;
|
|
justify-content: center;
|
|
gap: 10px;
|
|
}
|
|
|
|
.dropdown-content {
|
|
position: static;
|
|
display: none;
|
|
width: 100%;
|
|
box-shadow: none;
|
|
border: none;
|
|
border-radius: 0;
|
|
background: var(--bg-tertiary);
|
|
margin-top: 0;
|
|
}
|
|
|
|
.nav-dropdown:hover .dropdown-content {
|
|
display: block;
|
|
}
|
|
}
|
|
|
|
/* Header styling */
|
|
.header {
|
|
text-align: center;
|
|
background: var(--gradient-primary);
|
|
color: white;
|
|
padding: 40px 20px;
|
|
border-radius: 15px;
|
|
margin-bottom: 30px;
|
|
box-shadow: 0 5px 20px var(--shadow-color);
|
|
}
|
|
|
|
.header h1 {
|
|
margin: 0 0 10px 0;
|
|
font-size: 2.5em;
|
|
font-weight: bold;
|
|
}
|
|
|
|
.header p {
|
|
margin: 0;
|
|
font-size: 1.1em;
|
|
opacity: 0.9;
|
|
}
|
|
|
|
/* Card styling */
|
|
.card {
|
|
background: var(--bg-secondary);
|
|
border-radius: 15px;
|
|
padding: 20px;
|
|
margin-bottom: 20px;
|
|
box-shadow: 0 4px 15px var(--shadow-color);
|
|
border: 1px solid var(--border-color);
|
|
transition: transform 0.3s ease, box-shadow 0.3s ease;
|
|
}
|
|
|
|
.card:hover {
|
|
transform: translateY(-2px);
|
|
box-shadow: 0 6px 25px var(--shadow-color);
|
|
}
|
|
|
|
.card h2 {
|
|
margin-top: 0;
|
|
color: var(--text-accent);
|
|
border-bottom: 2px solid var(--text-accent);
|
|
padding-bottom: 10px;
|
|
}
|
|
|
|
.card h3 {
|
|
color: var(--accent-blue);
|
|
margin-top: 25px;
|
|
}
|
|
|
|
/* Grid layouts */
|
|
.grid {
|
|
display: grid;
|
|
gap: 20px;
|
|
margin-bottom: 30px;
|
|
}
|
|
|
|
.grid-2 { grid-template-columns: repeat(auto-fit, minmax(350px, 1fr)); }
|
|
.grid-3 { grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)); }
|
|
.grid-4 { grid-template-columns: repeat(auto-fit, minmax(250px, 1fr)); }
|
|
|
|
/* Buttons */
|
|
.btn {
|
|
display: inline-block;
|
|
padding: 10px 20px;
|
|
border: none;
|
|
border-radius: 25px;
|
|
text-decoration: none;
|
|
font-weight: 500;
|
|
text-align: center;
|
|
cursor: pointer;
|
|
transition: all 0.3s ease;
|
|
margin: 5px;
|
|
}
|
|
|
|
.btn-primary {
|
|
background: var(--gradient-primary);
|
|
color: white;
|
|
}
|
|
|
|
.btn-secondary {
|
|
background: var(--bg-tertiary);
|
|
color: var(--text-primary);
|
|
border: 1px solid var(--border-color);
|
|
}
|
|
|
|
.btn:hover {
|
|
transform: translateY(-2px);
|
|
box-shadow: 0 4px 15px var(--shadow-color);
|
|
}
|
|
|
|
/* Badges and tags */
|
|
.badge {
|
|
display: inline-block;
|
|
padding: 4px 12px;
|
|
border-radius: 15px;
|
|
font-size: 0.85em;
|
|
font-weight: 500;
|
|
margin: 2px;
|
|
}
|
|
|
|
.badge-primary { background: var(--accent-blue); color: white; }
|
|
.badge-secondary { background: var(--bg-tertiary); color: var(--text-primary); }
|
|
.badge-success { background: var(--success-color); color: white; }
|
|
.badge-warning { background: var(--warning-color); color: #333; }
|
|
.badge-error { background: var(--error-color); color: white; }
|
|
|
|
/* Tables */
|
|
.table {
|
|
width: 100%;
|
|
border-collapse: collapse;
|
|
margin: 20px 0;
|
|
background: var(--bg-secondary);
|
|
border-radius: 10px;
|
|
overflow: hidden;
|
|
}
|
|
|
|
.table th, .table td {
|
|
padding: 12px 15px;
|
|
text-align: left;
|
|
border-bottom: 1px solid var(--border-color);
|
|
}
|
|
|
|
.table th {
|
|
background: var(--bg-tertiary);
|
|
font-weight: bold;
|
|
color: var(--text-accent);
|
|
}
|
|
|
|
.table tr:hover {
|
|
background: var(--bg-tertiary);
|
|
}
|
|
|
|
/* Loading and status messages */
|
|
.loading {
|
|
text-align: center;
|
|
padding: 40px;
|
|
color: var(--text-secondary);
|
|
}
|
|
|
|
.error-message {
|
|
background: var(--error-color);
|
|
color: white;
|
|
padding: 15px;
|
|
border-radius: 10px;
|
|
margin: 20px 0;
|
|
}
|
|
|
|
.success-message {
|
|
background: var(--success-color);
|
|
color: white;
|
|
padding: 15px;
|
|
border-radius: 10px;
|
|
margin: 20px 0;
|
|
}
|
|
|
|
/* Pet-specific styles for petdex */
|
|
.pets-grid {
|
|
display: grid;
|
|
grid-template-columns: repeat(auto-fit, minmax(320px, 1fr));
|
|
gap: 20px;
|
|
margin-top: 20px;
|
|
}
|
|
|
|
.pet-card {
|
|
background: var(--bg-secondary);
|
|
border-radius: 12px;
|
|
overflow: hidden;
|
|
box-shadow: 0 4px 15px var(--shadow-color);
|
|
border: 1px solid var(--border-color);
|
|
transition: transform 0.3s ease;
|
|
}
|
|
|
|
.pet-card:hover {
|
|
transform: translateY(-3px);
|
|
}
|
|
|
|
.pet-header {
|
|
background: var(--bg-tertiary);
|
|
padding: 15px 20px;
|
|
display: flex;
|
|
justify-content: space-between;
|
|
align-items: center;
|
|
}
|
|
|
|
.pet-header h3 {
|
|
margin: 0;
|
|
font-size: 1.3em;
|
|
}
|
|
|
|
.type-badge {
|
|
background: var(--gradient-primary);
|
|
color: white;
|
|
padding: 4px 12px;
|
|
border-radius: 15px;
|
|
font-size: 0.85em;
|
|
font-weight: 500;
|
|
}
|
|
|
|
.pet-stats {
|
|
padding: 15px 20px;
|
|
background: var(--bg-secondary);
|
|
}
|
|
|
|
.stat-row {
|
|
display: flex;
|
|
justify-content: space-between;
|
|
margin-bottom: 8px;
|
|
font-size: 0.9em;
|
|
}
|
|
|
|
.total-stats {
|
|
text-align: center;
|
|
margin-top: 12px;
|
|
padding-top: 12px;
|
|
border-top: 1px solid var(--border-color);
|
|
font-weight: 600;
|
|
color: var(--text-accent);
|
|
}
|
|
|
|
.pet-info {
|
|
padding: 15px 20px;
|
|
background: var(--bg-tertiary);
|
|
font-size: 0.9em;
|
|
line-height: 1.5;
|
|
}
|
|
|
|
.rarity-section {
|
|
margin-bottom: 40px;
|
|
}
|
|
|
|
/* Responsive design */
|
|
@media (max-width: 768px) {
|
|
.main-container {
|
|
padding: 10px;
|
|
}
|
|
|
|
.header h1 {
|
|
font-size: 2em;
|
|
}
|
|
|
|
.card {
|
|
padding: 15px;
|
|
}
|
|
|
|
.grid-2, .grid-3, .grid-4 {
|
|
grid-template-columns: 1fr;
|
|
}
|
|
}
|
|
"""
|
|
|
|
def get_navigation_bar(self, current_page=""):
|
|
"""Return unified navigation bar HTML with dropdown menus"""
|
|
|
|
# Define navigation structure with dropdowns
|
|
nav_structure = [
|
|
("", "🏠 Home", []),
|
|
("players", "👥 Players", [
|
|
("leaderboard", "🏆 Leaderboard"),
|
|
("players", "📊 Statistics")
|
|
]),
|
|
("locations", "🗺️ Locations", [
|
|
("locations", "🌤️ Weather"),
|
|
("locations", "🎯 Spawns"),
|
|
("locations", "🏛️ Gyms")
|
|
]),
|
|
("petdex", "📚 Petdex", [
|
|
("petdex", "🔷 by Type"),
|
|
("petdex", "⭐ by Rarity"),
|
|
("petdex", "🔍 Search")
|
|
]),
|
|
("help", "📖 Help", [
|
|
("help", "⚡ Commands"),
|
|
("help", "📖 Web Guide"),
|
|
("help", "❓ FAQ")
|
|
])
|
|
]
|
|
|
|
nav_links = ""
|
|
for page_path, page_name, subpages in nav_structure:
|
|
active_class = " active" if current_page == page_path else ""
|
|
href = f"/{page_path}" if page_path else "/"
|
|
|
|
if subpages:
|
|
# Create dropdown menu
|
|
dropdown_items = ""
|
|
for sub_path, sub_name in subpages:
|
|
sub_href = f"/{sub_path}" if sub_path else "/"
|
|
dropdown_items += f'<a href="{sub_href}" class="dropdown-item">{sub_name}</a>'
|
|
|
|
nav_links += f'''
|
|
<div class="nav-dropdown">
|
|
<a href="{href}" class="nav-link{active_class}">{page_name} <span class="dropdown-arrow">▼</span></a>
|
|
<div class="dropdown-content">
|
|
{dropdown_items}
|
|
</div>
|
|
</div>'''
|
|
else:
|
|
# Regular nav link
|
|
nav_links += f'<a href="{href}" class="nav-link{active_class}">{page_name}</a>'
|
|
|
|
return f"""
|
|
<nav class="navbar">
|
|
<div class="nav-content">
|
|
<a href="/" class="nav-brand">🐾 PetBot</a>
|
|
<div class="nav-links">
|
|
{nav_links}
|
|
</div>
|
|
</div>
|
|
</nav>
|
|
"""
|
|
|
|
def get_page_template(self, title, content, current_page=""):
|
|
"""Return complete page HTML with unified theme"""
|
|
return f"""<!DOCTYPE html>
|
|
<html lang="en">
|
|
<head>
|
|
<meta charset="UTF-8">
|
|
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
|
<title>{title} - PetBot</title>
|
|
<style>{self.get_unified_css()}</style>
|
|
</head>
|
|
<body>
|
|
{self.get_navigation_bar(current_page)}
|
|
<div class="main-container">
|
|
{content}
|
|
</div>
|
|
</body>
|
|
</html>"""
|
|
|
|
def do_GET(self):
|
|
"""Handle GET requests"""
|
|
parsed_path = urlparse(self.path)
|
|
path = parsed_path.path
|
|
|
|
# Route handling
|
|
if path == '/':
|
|
self.serve_index()
|
|
elif path == '/help':
|
|
self.serve_help()
|
|
elif path == '/players':
|
|
self.serve_players()
|
|
elif path.startswith('/player/'):
|
|
nickname = path[8:] # Remove '/player/' prefix
|
|
self.serve_player_profile(nickname)
|
|
elif path == '/leaderboard':
|
|
self.serve_leaderboard()
|
|
elif path == '/locations':
|
|
self.serve_locations()
|
|
elif path == '/petdex':
|
|
self.serve_petdex()
|
|
elif path.startswith('/teambuilder/'):
|
|
nickname = path[13:] # Remove '/teambuilder/' prefix
|
|
self.serve_teambuilder(nickname)
|
|
else:
|
|
self.send_error(404, "Page not found")
|
|
|
|
def do_POST(self):
|
|
"""Handle POST requests"""
|
|
parsed_path = urlparse(self.path)
|
|
path = parsed_path.path
|
|
|
|
if path.startswith('/teambuilder/') and path.endswith('/save'):
|
|
nickname = path[13:-5] # Remove '/teambuilder/' prefix and '/save' suffix
|
|
self.handle_team_save(nickname)
|
|
elif path.startswith('/teambuilder/') and path.endswith('/verify'):
|
|
nickname = path[13:-7] # Remove '/teambuilder/' prefix and '/verify' suffix
|
|
self.handle_team_verify(nickname)
|
|
else:
|
|
self.send_error(404, "Page not found")
|
|
|
|
def serve_index(self):
|
|
"""Serve the main index page"""
|
|
content = """
|
|
<div class="header">
|
|
<h1>🐾 PetBot Game Hub</h1>
|
|
<p>Welcome to the PetBot web interface!</p>
|
|
<p><em>Connect to irc.libera.chat #petz to play</em></p>
|
|
</div>
|
|
|
|
<div class="grid grid-3">
|
|
<div class="card">
|
|
<h3>📚 Command Help</h3>
|
|
<p>Complete reference for all bot commands, battle mechanics, and game features</p>
|
|
<a href="/help" class="btn btn-primary">View Help</a>
|
|
</div>
|
|
|
|
<div class="card">
|
|
<h3>👥 Player List</h3>
|
|
<p>View all registered players and their basic stats</p>
|
|
<a href="/players" class="btn btn-primary">Browse Players</a>
|
|
</div>
|
|
|
|
<div class="card">
|
|
<h3>🏆 Leaderboard</h3>
|
|
<p>Top players by level, pets caught, and achievements earned</p>
|
|
<a href="/leaderboard" class="btn btn-primary">View Rankings</a>
|
|
</div>
|
|
|
|
<div class="card">
|
|
<h3>🗺️ Locations</h3>
|
|
<p>Explore all game locations and see what pets can be found where</p>
|
|
<a href="/locations" class="btn btn-primary">Explore World</a>
|
|
</div>
|
|
|
|
<div class="card">
|
|
<h3>📖 Petdex</h3>
|
|
<p>Complete encyclopedia of all available pets with stats, types, and evolution info</p>
|
|
<a href="/petdex" class="btn btn-primary">Browse Petdex</a>
|
|
</div>
|
|
|
|
<div class="card">
|
|
<h3>🤖 Bot Status</h3>
|
|
<p><span class="badge badge-success">Online</span> and ready for commands!</p>
|
|
<p>Use <code>!help</code> in #petz for quick command reference</p>
|
|
</div>
|
|
</div>
|
|
"""
|
|
|
|
html = self.get_page_template("PetBot Game Hub", content, "")
|
|
self.send_response(200)
|
|
self.send_header('Content-type', 'text/html')
|
|
self.end_headers()
|
|
self.wfile.write(html.encode())
|
|
|
|
def serve_help(self):
|
|
"""Serve the help page using unified template"""
|
|
content = """
|
|
<div class="header">
|
|
<h1>📚 PetBot Commands</h1>
|
|
<p>Complete guide to Pokemon-style pet collecting in IRC</p>
|
|
</div>
|
|
|
|
<div class="section">
|
|
<div class="section-header">🚀 Getting Started</div>
|
|
<div class="section-content">
|
|
<div class="command-grid">
|
|
<div class="command">
|
|
<div class="command-name">!start</div>
|
|
<div class="command-desc">Begin your pet collecting journey! Creates your trainer account and gives you your first starter pet.</div>
|
|
<div class="command-example">Example: !start</div>
|
|
</div>
|
|
<div class="command">
|
|
<div class="command-name">!help</div>
|
|
<div class="command-desc">Get a link to this comprehensive command reference page.</div>
|
|
<div class="command-example">Example: !help</div>
|
|
</div>
|
|
<div class="command">
|
|
<div class="command-name">!stats</div>
|
|
<div class="command-desc">View your basic trainer information including level, experience, and money.</div>
|
|
<div class="command-example">Example: !stats</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="section">
|
|
<div class="section-header">🌍 Exploration & Travel</div>
|
|
<div class="section-content">
|
|
<div class="command-grid">
|
|
<div class="command">
|
|
<div class="command-name">!explore</div>
|
|
<div class="command-desc">Search your current location for wild pets or items. You might find pets to battle/catch or discover useful items!</div>
|
|
<div class="command-example">Example: !explore</div>
|
|
</div>
|
|
<div class="command">
|
|
<div class="command-name">!travel <location></div>
|
|
<div class="command-desc">Move to a different location. Each area has unique pets and gyms. Some locations require achievements to unlock.</div>
|
|
<div class="command-example">Example: !travel whispering woods</div>
|
|
</div>
|
|
<div class="command">
|
|
<div class="command-name">!weather</div>
|
|
<div class="command-desc">Check the current weather effects in your location. Weather affects which pet types spawn more frequently.</div>
|
|
<div class="command-example">Example: !weather</div>
|
|
</div>
|
|
<div class="command">
|
|
<div class="command-name">!where / !location</div>
|
|
<div class="command-desc">See which location you're currently in and get information about the area.</div>
|
|
<div class="command-example">Example: !where</div>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="info-box">
|
|
<h4>🗺️ Available Locations</h4>
|
|
<ul>
|
|
<li><strong>Starter Town</strong> - Peaceful starting area (Fire/Water/Grass pets)</li>
|
|
<li><strong>Whispering Woods</strong> - Ancient forest (Grass pets + new species: Vinewrap, Bloomtail)</li>
|
|
<li><strong>Electric Canyon</strong> - Charged valley (Electric/Rock pets)</li>
|
|
<li><strong>Crystal Caves</strong> - Underground caverns (Rock/Crystal pets)</li>
|
|
<li><strong>Frozen Tundra</strong> - Icy wasteland (Ice/Water pets)</li>
|
|
<li><strong>Dragon's Peak</strong> - Ultimate challenge (Fire/Rock/Ice pets)</li>
|
|
</ul>
|
|
</div>
|
|
|
|
<div class="info-box">
|
|
<h4>🌤️ Weather Effects</h4>
|
|
<ul>
|
|
<li><strong>Sunny</strong> - 1.5x Fire/Grass spawns (1-2 hours)</li>
|
|
<li><strong>Rainy</strong> - 2.0x Water spawns (45-90 minutes)</li>
|
|
<li><strong>Thunderstorm</strong> - 2.0x Electric spawns (30-60 minutes)</li>
|
|
<li><strong>Blizzard</strong> - 1.7x Ice/Water spawns (1-2 hours)</li>
|
|
<li><strong>Earthquake</strong> - 1.8x Rock spawns (30-90 minutes)</li>
|
|
<li><strong>Calm</strong> - Normal spawns (1.5-3 hours)</li>
|
|
</ul>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="section">
|
|
<div class="section-header">⚔️ Battle System</div>
|
|
<div class="section-content">
|
|
<div class="command-grid">
|
|
<div class="command">
|
|
<div class="command-name">!catch / !capture</div>
|
|
<div class="command-desc">Attempt to catch a wild pet that appeared during exploration. Success depends on the pet's level and rarity.</div>
|
|
<div class="command-example">Example: !catch</div>
|
|
</div>
|
|
<div class="command">
|
|
<div class="command-name">!battle</div>
|
|
<div class="command-desc">Start a turn-based battle with a wild pet. Defeat it to gain experience and money for your active pet.</div>
|
|
<div class="command-example">Example: !battle</div>
|
|
</div>
|
|
<div class="command">
|
|
<div class="command-name">!attack <move></div>
|
|
<div class="command-desc">Use a specific move during battle. Each move has different power, type, and effects.</div>
|
|
<div class="command-example">Example: !attack flamethrower</div>
|
|
</div>
|
|
<div class="command">
|
|
<div class="command-name">!moves</div>
|
|
<div class="command-desc">View all available moves for your active pet, including their types and power levels.</div>
|
|
<div class="command-example">Example: !moves</div>
|
|
</div>
|
|
<div class="command">
|
|
<div class="command-name">!flee</div>
|
|
<div class="command-desc">Attempt to escape from the current battle. Not always successful!</div>
|
|
<div class="command-example">Example: !flee</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="section">
|
|
<div class="section-header">🏛️ Gym Battles <span class="badge">NEW!</span></div>
|
|
<div class="section-content">
|
|
<div class="command-grid">
|
|
<div class="command">
|
|
<div class="command-name">!gym</div>
|
|
<div class="command-desc">List all gyms in your current location with your progress. Shows victories and next difficulty level.</div>
|
|
<div class="command-example">Example: !gym</div>
|
|
</div>
|
|
<div class="command">
|
|
<div class="command-name">!gym list</div>
|
|
<div class="command-desc">Show all gyms across all locations with your badge collection progress.</div>
|
|
<div class="command-example">Example: !gym list</div>
|
|
</div>
|
|
<div class="command">
|
|
<div class="command-name">!gym challenge "<name>"</div>
|
|
<div class="command-desc">Challenge a gym leader! You must be in the same location as the gym. Difficulty increases with each victory.</div>
|
|
<div class="command-example">Example: !gym challenge "Forest Guardian"</div>
|
|
</div>
|
|
<div class="command">
|
|
<div class="command-name">!gym info "<name>"</div>
|
|
<div class="command-desc">Get detailed information about a gym including leader, theme, team, and badge details.</div>
|
|
<div class="command-example">Example: !gym info "Storm Master"</div>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="tip">
|
|
💡 <strong>Gym Strategy:</strong> Each gym specializes in a specific type. Bring pets with type advantages! The more you beat a gym, the harder it gets, but the better the rewards!
|
|
</div>
|
|
|
|
<div class="info-box">
|
|
<h4>🏆 Gym Leaders & Badges</h4>
|
|
<div class="gym-list">
|
|
<div class="gym-card">
|
|
<strong>🍃 Forest Guardian</strong><br>
|
|
Location: Starter Town<br>
|
|
Leader: Trainer Verde<br>
|
|
Theme: Grass-type
|
|
</div>
|
|
<div class="gym-card">
|
|
<strong>🌳 Nature's Haven</strong><br>
|
|
Location: Whispering Woods<br>
|
|
Leader: Elder Sage<br>
|
|
Theme: Grass-type
|
|
</div>
|
|
<div class="gym-card">
|
|
<strong>⚡ Storm Master</strong><br>
|
|
Location: Electric Canyon<br>
|
|
Leader: Captain Volt<br>
|
|
Theme: Electric-type
|
|
</div>
|
|
<div class="gym-card">
|
|
<strong>💎 Stone Crusher</strong><br>
|
|
Location: Crystal Caves<br>
|
|
Leader: Miner Magnus<br>
|
|
Theme: Rock-type
|
|
</div>
|
|
<div class="gym-card">
|
|
<strong>❄️ Ice Breaker</strong><br>
|
|
Location: Frozen Tundra<br>
|
|
Leader: Arctic Queen<br>
|
|
Theme: Ice/Water-type
|
|
</div>
|
|
<div class="gym-card">
|
|
<strong>🐉 Dragon Slayer</strong><br>
|
|
Location: Dragon's Peak<br>
|
|
Leader: Champion Drake<br>
|
|
Theme: Fire-type
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="section">
|
|
<div class="section-header">🐾 Pet Management</div>
|
|
<div class="section-content">
|
|
<div class="command-grid">
|
|
<div class="command">
|
|
<div class="command-name">!team</div>
|
|
<div class="command-desc">View your active team of pets with their levels, HP, and status.</div>
|
|
<div class="command-example">Example: !team</div>
|
|
</div>
|
|
<div class="command">
|
|
<div class="command-name">!pets</div>
|
|
<div class="command-desc">View your complete pet collection with detailed stats and information via web interface.</div>
|
|
<div class="command-example">Example: !pets</div>
|
|
</div>
|
|
<div class="command">
|
|
<div class="command-name">!activate <pet></div>
|
|
<div class="command-desc">Add a pet to your active battle team. You can have multiple active pets for different situations.</div>
|
|
<div class="command-example">Example: !activate flamey</div>
|
|
</div>
|
|
<div class="command">
|
|
<div class="command-name">!deactivate <pet></div>
|
|
<div class="command-desc">Remove a pet from your active team and put it in storage.</div>
|
|
<div class="command-example">Example: !deactivate aqua</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="section">
|
|
<div class="section-header">🎒 Inventory System <span class="badge">NEW!</span></div>
|
|
<div class="section-content">
|
|
<div class="command-grid">
|
|
<div class="command">
|
|
<div class="command-name">!inventory / !inv / !items</div>
|
|
<div class="command-desc">View all items in your inventory organized by category. Shows quantities and item descriptions.</div>
|
|
<div class="command-example">Example: !inventory</div>
|
|
</div>
|
|
<div class="command">
|
|
<div class="command-name">!use <item name></div>
|
|
<div class="command-desc">Use a consumable item from your inventory. Items can heal pets, boost stats, or provide other benefits.</div>
|
|
<div class="command-example">Example: !use Small Potion</div>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="info-box">
|
|
<h4>🎯 Item Categories & Rarities</h4>
|
|
<ul>
|
|
<li><strong>○ Common (15%)</strong> - Small Potions, basic healing items</li>
|
|
<li><strong>◇ Uncommon (8-12%)</strong> - Large Potions, battle boosters, special berries</li>
|
|
<li><strong>◆ Rare (3-6%)</strong> - Super Potions, speed elixirs, location treasures</li>
|
|
<li><strong>★ Epic (2-3%)</strong> - Evolution stones, rare crystals, ancient artifacts</li>
|
|
<li><strong>✦ Legendary (1%)</strong> - Lucky charms, ancient fossils, ultimate items</li>
|
|
</ul>
|
|
</div>
|
|
|
|
<div class="tip">
|
|
💡 <strong>Item Discovery:</strong> Find items while exploring! Each location has unique treasures. Items stack in your inventory and can be used anytime.
|
|
</div>
|
|
</div>
|
|
|
|
<div class="section">
|
|
<div class="section-header">🏆 Achievements & Progress</div>
|
|
<div class="section-content">
|
|
<div class="command-grid">
|
|
<div class="command">
|
|
<div class="command-name">!achievements</div>
|
|
<div class="command-desc">View your achievement progress and see which new locations you've unlocked.</div>
|
|
<div class="command-example">Example: !achievements</div>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="info-box">
|
|
<h4>🎯 Location Unlock Requirements</h4>
|
|
<ul>
|
|
<li><strong>Pet Collector</strong> (5 pets) → Unlocks Whispering Woods</li>
|
|
<li><strong>Spark Collector</strong> (2 Electric species) → Unlocks Electric Canyon</li>
|
|
<li><strong>Rock Hound</strong> (3 Rock species) → Unlocks Crystal Caves</li>
|
|
<li><strong>Ice Breaker</strong> (5 Water/Ice species) → Unlocks Frozen Tundra</li>
|
|
<li><strong>Dragon Tamer</strong> (15 pets + 3 Fire species) → Unlocks Dragon's Peak</li>
|
|
</ul>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="section">
|
|
<div class="section-header">🌐 Web Interface</div>
|
|
<div class="section-content">
|
|
<div class="tip">
|
|
Access detailed information through the web dashboard at <strong>http://petz.rdx4.com/</strong>
|
|
<ul style="margin-top: 10px;">
|
|
<li><strong>Player Profiles</strong> - Complete stats, pet collections, and inventories</li>
|
|
<li><strong>Leaderboard</strong> - Top players by level and achievements</li>
|
|
<li><strong>Locations Guide</strong> - All areas with spawn information</li>
|
|
<li><strong>Gym Badges</strong> - Display your earned badges and progress</li>
|
|
</ul>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="footer">
|
|
<p><strong>🎮 PetBot v0.2.0</strong> - Pokemon-style pet collecting for IRC</p>
|
|
<p>Catch pets • Battle gyms • Collect items • Earn badges • Explore locations</p>
|
|
<p style="margin-top: 15px; opacity: 0.7;">
|
|
Need help? Ask in the channel or visit the web dashboard for detailed information!
|
|
</p>
|
|
</div>
|
|
"""
|
|
|
|
# Add command-specific CSS to the unified styles
|
|
additional_css = """
|
|
.section {
|
|
background: var(--bg-secondary);
|
|
border-radius: 15px;
|
|
margin-bottom: 30px;
|
|
box-shadow: 0 4px 20px rgba(0,0,0,0.3);
|
|
border: 1px solid var(--border-color);
|
|
overflow: hidden;
|
|
}
|
|
|
|
.section-header {
|
|
background: var(--gradient-primary);
|
|
color: white;
|
|
padding: 20px 25px;
|
|
font-size: 1.3em;
|
|
font-weight: 700;
|
|
}
|
|
|
|
.section-content {
|
|
padding: 25px;
|
|
}
|
|
|
|
.command-grid {
|
|
display: grid;
|
|
gap: 20px;
|
|
}
|
|
|
|
.command {
|
|
border: 1px solid var(--border-color);
|
|
border-radius: 12px;
|
|
overflow: hidden;
|
|
transition: all 0.3s ease;
|
|
background: var(--bg-tertiary);
|
|
}
|
|
|
|
.command:hover {
|
|
transform: translateY(-3px);
|
|
box-shadow: 0 8px 25px rgba(102, 255, 102, 0.15);
|
|
border-color: var(--text-accent);
|
|
}
|
|
|
|
.command-name {
|
|
background: var(--bg-primary);
|
|
padding: 15px 20px;
|
|
font-family: 'Fira Code', 'Courier New', monospace;
|
|
font-weight: bold;
|
|
color: var(--text-accent);
|
|
border-bottom: 1px solid var(--border-color);
|
|
font-size: 1.2em;
|
|
text-shadow: 0 0 10px rgba(102, 255, 102, 0.3);
|
|
}
|
|
|
|
.command-desc {
|
|
padding: 20px;
|
|
line-height: 1.7;
|
|
color: var(--text-primary);
|
|
}
|
|
|
|
.command-example {
|
|
background: var(--bg-primary);
|
|
padding: 12px 20px;
|
|
font-family: 'Fira Code', 'Courier New', monospace;
|
|
color: var(--text-secondary);
|
|
border-top: 1px solid var(--border-color);
|
|
font-size: 0.95em;
|
|
}
|
|
|
|
.info-box {
|
|
background: var(--bg-tertiary);
|
|
padding: 20px;
|
|
border-radius: 12px;
|
|
margin: 20px 0;
|
|
border: 1px solid var(--border-color);
|
|
}
|
|
|
|
.info-box h4 {
|
|
margin: 0 0 15px 0;
|
|
color: var(--text-accent);
|
|
font-size: 1.1em;
|
|
font-weight: 600;
|
|
}
|
|
|
|
.info-box ul {
|
|
margin: 0;
|
|
padding-left: 25px;
|
|
}
|
|
|
|
.info-box li {
|
|
margin: 8px 0;
|
|
color: var(--text-primary);
|
|
}
|
|
|
|
.info-box strong {
|
|
color: var(--text-accent);
|
|
}
|
|
|
|
.footer {
|
|
text-align: center;
|
|
margin-top: 50px;
|
|
padding: 30px;
|
|
background: var(--bg-secondary);
|
|
border-radius: 15px;
|
|
color: var(--text-secondary);
|
|
box-shadow: 0 4px 20px rgba(0,0,0,0.3);
|
|
border: 1px solid var(--border-color);
|
|
}
|
|
|
|
.tip {
|
|
background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
|
|
color: white;
|
|
padding: 20px;
|
|
border-radius: 12px;
|
|
margin: 20px 0;
|
|
font-weight: 500;
|
|
text-shadow: 0 2px 4px rgba(0,0,0,0.3);
|
|
}
|
|
|
|
.gym-list {
|
|
display: grid;
|
|
grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
|
|
gap: 15px;
|
|
margin: 15px 0;
|
|
}
|
|
|
|
.gym-card {
|
|
background: var(--bg-primary);
|
|
padding: 15px;
|
|
border-radius: 8px;
|
|
border: 1px solid var(--border-color);
|
|
}
|
|
|
|
.gym-card strong {
|
|
color: var(--text-accent);
|
|
}
|
|
"""
|
|
|
|
# Get the unified template with additional CSS
|
|
html_content = self.get_page_template("Command Help", content, "help")
|
|
# Insert additional CSS before closing </style> tag
|
|
html_content = html_content.replace("</style>", additional_css + "</style>")
|
|
|
|
self.send_response(200)
|
|
self.send_header('Content-type', 'text/html')
|
|
self.end_headers()
|
|
self.wfile.write(html_content.encode())
|
|
|
|
def serve_players(self):
|
|
"""Serve the players page with real data"""
|
|
# Get database instance from the server class
|
|
database = self.server.database if hasattr(self.server, 'database') else None
|
|
|
|
if not database:
|
|
self.serve_error_page("Players", "Database not available")
|
|
return
|
|
|
|
# Fetch players data
|
|
try:
|
|
import asyncio
|
|
loop = asyncio.new_event_loop()
|
|
asyncio.set_event_loop(loop)
|
|
|
|
players_data = loop.run_until_complete(self.fetch_players_data(database))
|
|
loop.close()
|
|
|
|
self.serve_players_data(players_data)
|
|
|
|
except Exception as e:
|
|
print(f"Error fetching players data: {e}")
|
|
self.serve_error_page("Players", f"Error loading players: {str(e)}")
|
|
|
|
async def fetch_players_data(self, database):
|
|
"""Fetch all players data from database"""
|
|
try:
|
|
import aiosqlite
|
|
async with aiosqlite.connect(database.db_path) as db:
|
|
# Get all players with basic stats
|
|
cursor = await db.execute("""
|
|
SELECT p.nickname, p.level, p.experience, p.money, p.created_at,
|
|
l.name as location_name,
|
|
(SELECT COUNT(*) FROM pets WHERE player_id = p.id) as pet_count,
|
|
(SELECT COUNT(*) FROM pets WHERE player_id = p.id AND is_active = 1) as active_pets,
|
|
(SELECT COUNT(*) FROM player_achievements WHERE player_id = p.id) as achievement_count
|
|
FROM players p
|
|
LEFT JOIN locations l ON p.current_location_id = l.id
|
|
ORDER BY p.level DESC, p.experience DESC
|
|
""")
|
|
|
|
rows = await cursor.fetchall()
|
|
# Convert SQLite rows to dictionaries properly
|
|
players = []
|
|
for row in rows:
|
|
player_dict = {
|
|
'nickname': row[0],
|
|
'level': row[1],
|
|
'experience': row[2],
|
|
'money': row[3],
|
|
'created_at': row[4],
|
|
'location_name': row[5],
|
|
'pet_count': row[6],
|
|
'active_pets': row[7],
|
|
'achievement_count': row[8]
|
|
}
|
|
players.append(player_dict)
|
|
return players
|
|
|
|
except Exception as e:
|
|
print(f"Database error fetching players: {e}")
|
|
return []
|
|
|
|
def serve_players_data(self, players_data):
|
|
"""Serve players page with real data"""
|
|
|
|
# Calculate statistics
|
|
total_players = len(players_data)
|
|
total_pets = sum(p['pet_count'] for p in players_data) if players_data else 0
|
|
total_achievements = sum(p['achievement_count'] for p in players_data) if players_data else 0
|
|
highest_level = max((p['level'] for p in players_data), default=0) if players_data else 0
|
|
|
|
# Build statistics cards
|
|
stats_content = f"""
|
|
<div class="grid grid-4">
|
|
<div class="card">
|
|
<h3 style="color: var(--accent-blue); margin-top: 0;">📊 Total Players</h3>
|
|
<div style="font-size: 2.5em; font-weight: bold; color: var(--text-accent);">{total_players}</div>
|
|
</div>
|
|
<div class="card">
|
|
<h3 style="color: var(--accent-blue); margin-top: 0;">🐾 Total Pets</h3>
|
|
<div style="font-size: 2.5em; font-weight: bold; color: var(--text-accent);">{total_pets}</div>
|
|
</div>
|
|
<div class="card">
|
|
<h3 style="color: var(--accent-blue); margin-top: 0;">🏆 Achievements</h3>
|
|
<div style="font-size: 2.5em; font-weight: bold; color: var(--text-accent);">{total_achievements}</div>
|
|
</div>
|
|
<div class="card">
|
|
<h3 style="color: var(--accent-blue); margin-top: 0;">⭐ Highest Level</h3>
|
|
<div style="font-size: 2.5em; font-weight: bold; color: var(--text-accent);">{highest_level}</div>
|
|
</div>
|
|
</div>
|
|
"""
|
|
|
|
# Build players table HTML
|
|
if players_data:
|
|
players_html = ""
|
|
for i, player in enumerate(players_data, 1):
|
|
rank_emoji = {"1": "🥇", "2": "🥈", "3": "🥉"}.get(str(i), f"{i}.")
|
|
|
|
players_html += f"""
|
|
<tr onclick="window.location.href='/player/{player['nickname']}'" style="cursor: pointer;">
|
|
<td><strong>{rank_emoji}</strong></td>
|
|
<td><a href="/player/{player['nickname']}" style="color: var(--text-accent); text-decoration: none;"><strong>{player['nickname']}</strong></a></td>
|
|
<td>{player['level']}</td>
|
|
<td>{player['experience']}</td>
|
|
<td>${player['money']}</td>
|
|
<td>{player['pet_count']}</td>
|
|
<td>{player['active_pets']}</td>
|
|
<td>{player['achievement_count']}</td>
|
|
<td>{player.get('location_name', 'Unknown')}</td>
|
|
</tr>"""
|
|
else:
|
|
players_html = """
|
|
<tr>
|
|
<td colspan="9" style="text-align: center; padding: 40px;">
|
|
No players found. Be the first to use !start in #petz!
|
|
</td>
|
|
</tr>"""
|
|
|
|
# Build table content
|
|
table_content = f"""
|
|
<div class="card">
|
|
<h2>🏆 Player Rankings</h2>
|
|
<table class="table">
|
|
<thead>
|
|
<tr>
|
|
<th>Rank</th>
|
|
<th>Player</th>
|
|
<th>Level</th>
|
|
<th>Experience</th>
|
|
<th>Money</th>
|
|
<th>Pets</th>
|
|
<th>Active</th>
|
|
<th>Achievements</th>
|
|
<th>Location</th>
|
|
</tr>
|
|
</thead>
|
|
<tbody>
|
|
{players_html}
|
|
</tbody>
|
|
</table>
|
|
<div style="text-align: center; margin-top: 20px; color: var(--text-secondary);">
|
|
<p>💡 Click on any player name to view their detailed profile</p>
|
|
</div>
|
|
</div>
|
|
"""
|
|
|
|
# Combine all content
|
|
content = f"""
|
|
<div class="header">
|
|
<h1>👥 Registered Players</h1>
|
|
<p>All trainers on their pet collection journey</p>
|
|
</div>
|
|
|
|
{stats_content}
|
|
{table_content}
|
|
"""
|
|
|
|
html = self.get_page_template("Players", content, "players")
|
|
|
|
self.send_response(200)
|
|
self.send_header('Content-type', 'text/html')
|
|
self.end_headers()
|
|
self.wfile.write(html.encode())
|
|
|
|
def serve_error_page(self, page_name, error_msg):
|
|
"""Serve a generic error page using unified template"""
|
|
content = f"""
|
|
<div class="header">
|
|
<h1>⚠️ Error Loading {page_name}</h1>
|
|
</div>
|
|
|
|
<div class="error-message">
|
|
<h2>Unable to load page</h2>
|
|
<p>{error_msg}</p>
|
|
<p>Please try again later or contact an administrator.</p>
|
|
</div>
|
|
"""
|
|
|
|
# Add error-specific CSS
|
|
additional_css = """
|
|
.main-container {
|
|
text-align: center;
|
|
max-width: 800px;
|
|
margin: 0 auto;
|
|
}
|
|
|
|
.error-message {
|
|
background: var(--bg-secondary);
|
|
padding: 40px;
|
|
border-radius: 15px;
|
|
border: 2px solid var(--error-color);
|
|
margin-top: 30px;
|
|
box-shadow: 0 4px 20px rgba(0,0,0,0.3);
|
|
}
|
|
|
|
.error-message h2 {
|
|
color: var(--error-color);
|
|
margin-top: 0;
|
|
}
|
|
"""
|
|
|
|
html_content = self.get_page_template("Error", content, "")
|
|
html_content = html_content.replace("</style>", additional_css + "</style>")
|
|
|
|
self.send_response(500)
|
|
self.send_header('Content-type', 'text/html')
|
|
self.end_headers()
|
|
self.wfile.write(html_content.encode())
|
|
|
|
def serve_leaderboard(self):
|
|
"""Serve the leaderboard page - redirect to players for now"""
|
|
# For now, leaderboard is the same as players page since they're ranked
|
|
# In the future, this could have different categories
|
|
self.send_response(302) # Temporary redirect
|
|
self.send_header('Location', '/players')
|
|
self.end_headers()
|
|
|
|
def serve_locations(self):
|
|
"""Serve the locations page with real data"""
|
|
# Get database instance from the server class
|
|
database = self.server.database if hasattr(self.server, 'database') else None
|
|
|
|
if not database:
|
|
self.serve_error_page("Locations", "Database not available")
|
|
return
|
|
|
|
# Fetch locations data
|
|
try:
|
|
import asyncio
|
|
loop = asyncio.new_event_loop()
|
|
asyncio.set_event_loop(loop)
|
|
|
|
locations_data = loop.run_until_complete(self.fetch_locations_data(database))
|
|
loop.close()
|
|
|
|
self.serve_locations_data(locations_data)
|
|
|
|
except Exception as e:
|
|
print(f"Error fetching locations data: {e}")
|
|
self.serve_error_page("Locations", f"Error loading locations: {str(e)}")
|
|
|
|
async def fetch_locations_data(self, database):
|
|
"""Fetch all locations and their spawn data from database"""
|
|
try:
|
|
import aiosqlite
|
|
async with aiosqlite.connect(database.db_path) as db:
|
|
# Get all locations
|
|
cursor = await db.execute("""
|
|
SELECT l.*,
|
|
GROUP_CONCAT(DISTINCT ps.name || ' (' || ps.type1 ||
|
|
CASE WHEN ps.type2 IS NOT NULL THEN '/' || ps.type2 ELSE '' END || ')') as spawns
|
|
FROM locations l
|
|
LEFT JOIN location_spawns ls ON l.id = ls.location_id
|
|
LEFT JOIN pet_species ps ON ls.species_id = ps.id
|
|
GROUP BY l.id
|
|
ORDER BY l.id
|
|
""")
|
|
|
|
rows = await cursor.fetchall()
|
|
# Convert SQLite rows to dictionaries properly
|
|
locations = []
|
|
for row in rows:
|
|
location_dict = {
|
|
'id': row[0],
|
|
'name': row[1],
|
|
'description': row[2],
|
|
'level_min': row[3],
|
|
'level_max': row[4],
|
|
'spawns': row[5] if len(row) > 5 else None
|
|
}
|
|
locations.append(location_dict)
|
|
return locations
|
|
|
|
except Exception as e:
|
|
print(f"Database error fetching locations: {e}")
|
|
return []
|
|
|
|
def serve_locations_data(self, locations_data):
|
|
"""Serve locations page with real data using unified template"""
|
|
|
|
# Build locations HTML
|
|
locations_html = ""
|
|
if locations_data:
|
|
for location in locations_data:
|
|
spawns = location.get('spawns', 'No pets found')
|
|
if not spawns or spawns == 'None':
|
|
spawns = "No pets spawn here yet"
|
|
|
|
# Split spawns into a readable list and remove duplicates
|
|
if spawns != "No pets spawn here yet":
|
|
spawn_list = list(set([spawn.strip() for spawn in spawns.split(',') if spawn.strip()]))
|
|
spawn_list.sort() # Sort alphabetically for consistency
|
|
else:
|
|
spawn_list = []
|
|
|
|
spawn_badges = ""
|
|
visible_spawns = spawn_list[:6] # Show first 6
|
|
hidden_spawns = spawn_list[6:] # Hide the rest
|
|
|
|
# Add visible spawn badges
|
|
for spawn in visible_spawns:
|
|
spawn_badges += f'<span class="spawn-badge">{spawn}</span>'
|
|
|
|
# Add hidden spawn badges (initially hidden)
|
|
if hidden_spawns:
|
|
location_id = location['id']
|
|
for spawn in hidden_spawns:
|
|
spawn_badges += f'<span class="spawn-badge hidden-spawn" id="hidden-{location_id}">{spawn}</span>'
|
|
# Add functional "show more" button
|
|
spawn_badges += f'<span class="spawn-badge more-button" onclick="toggleSpawns({location_id})">+{len(hidden_spawns)} more</span>'
|
|
|
|
if not spawn_badges:
|
|
spawn_badges = '<em style="color: var(--text-secondary);">No pets spawn here yet</em>'
|
|
|
|
locations_html += f"""
|
|
<div class="location-card">
|
|
<div class="location-header">
|
|
<h3>🗺️ {location['name']}</h3>
|
|
<div class="location-id">ID: {location['id']}</div>
|
|
</div>
|
|
<div class="location-description">
|
|
{location['description']}
|
|
</div>
|
|
<div class="location-levels">
|
|
<strong>Level Range:</strong> {location['level_min']}-{location['level_max']}
|
|
</div>
|
|
<div class="location-spawns">
|
|
<strong>Wild Pets:</strong><br>
|
|
{spawn_badges}
|
|
</div>
|
|
</div>"""
|
|
else:
|
|
locations_html = """
|
|
<div class="location-card">
|
|
<div class="location-header">
|
|
<h3>No Locations Found</h3>
|
|
</div>
|
|
<div class="location-description">
|
|
No game locations are configured yet.
|
|
</div>
|
|
</div>"""
|
|
|
|
content = f"""
|
|
<div class="header">
|
|
<h1>🗺️ Game Locations</h1>
|
|
<p>Explore all areas and discover what pets await you!</p>
|
|
</div>
|
|
|
|
<div class="info-section">
|
|
<h2>🎯 How Locations Work</h2>
|
|
<p><strong>Travel:</strong> Use <code>!travel <location></code> to move between areas</p>
|
|
<p><strong>Explore:</strong> Use <code>!explore</code> to find wild pets in your current location</p>
|
|
<p><strong>Unlock:</strong> Some locations require achievements - catch specific pet types to unlock new areas!</p>
|
|
<p><strong>Weather:</strong> Check <code>!weather</code> for conditions that boost certain pet spawn rates</p>
|
|
</div>
|
|
|
|
<div class="locations-grid">
|
|
{locations_html}
|
|
</div>
|
|
|
|
<div class="info-section">
|
|
<p style="text-align: center; color: var(--text-secondary); margin: 0;">
|
|
💡 Use <code>!wild <location></code> in #petz to see what pets spawn in a specific area
|
|
</p>
|
|
</div>
|
|
|
|
<script>
|
|
function toggleSpawns(locationId) {{
|
|
const hiddenSpawns = document.querySelectorAll(`#hidden-${{locationId}}`);
|
|
const moreButton = document.querySelector(`[onclick="toggleSpawns(${{locationId}})"]`);
|
|
|
|
if (!moreButton) return;
|
|
|
|
const isHidden = hiddenSpawns[0] && hiddenSpawns[0].style.display === 'none' || hiddenSpawns[0] && hiddenSpawns[0].classList.contains('hidden-spawn');
|
|
|
|
if (isHidden) {{
|
|
// Show hidden spawns
|
|
hiddenSpawns.forEach(spawn => {{
|
|
spawn.classList.remove('hidden-spawn');
|
|
spawn.style.display = 'inline-block';
|
|
}});
|
|
moreButton.textContent = 'Show less';
|
|
moreButton.className = 'spawn-badge less-button';
|
|
moreButton.setAttribute('onclick', `hideSpawns(${{locationId}})`);
|
|
}}
|
|
}}
|
|
|
|
function hideSpawns(locationId) {{
|
|
const hiddenSpawns = document.querySelectorAll(`#hidden-${{locationId}}`);
|
|
const lessButton = document.querySelector(`[onclick="hideSpawns(${{locationId}})"]`);
|
|
|
|
if (!lessButton) return;
|
|
|
|
// Hide spawns again
|
|
hiddenSpawns.forEach(spawn => {{
|
|
spawn.classList.add('hidden-spawn');
|
|
spawn.style.display = 'none';
|
|
}});
|
|
|
|
const hiddenCount = hiddenSpawns.length;
|
|
lessButton.textContent = `+${{hiddenCount}} more`;
|
|
lessButton.className = 'spawn-badge more-button';
|
|
lessButton.setAttribute('onclick', `toggleSpawns(${{locationId}})`);
|
|
}}
|
|
</script>
|
|
"""
|
|
|
|
# Add locations-specific CSS
|
|
additional_css = """
|
|
.locations-grid {
|
|
display: grid;
|
|
grid-template-columns: repeat(auto-fit, minmax(400px, 1fr));
|
|
gap: 25px;
|
|
margin-top: 30px;
|
|
}
|
|
|
|
.location-card {
|
|
background: var(--bg-secondary);
|
|
border-radius: 15px;
|
|
overflow: hidden;
|
|
box-shadow: 0 4px 20px rgba(0,0,0,0.3);
|
|
border: 1px solid var(--border-color);
|
|
transition: transform 0.3s ease;
|
|
}
|
|
|
|
.location-card:hover {
|
|
transform: translateY(-5px);
|
|
}
|
|
|
|
.location-header {
|
|
background: var(--gradient-primary);
|
|
color: white;
|
|
padding: 20px;
|
|
display: flex;
|
|
justify-content: space-between;
|
|
align-items: center;
|
|
}
|
|
|
|
.location-header h3 {
|
|
margin: 0;
|
|
font-size: 1.3em;
|
|
font-weight: 700;
|
|
}
|
|
|
|
.location-id {
|
|
background: rgba(255,255,255,0.2);
|
|
padding: 5px 10px;
|
|
border-radius: 20px;
|
|
font-size: 0.8em;
|
|
}
|
|
|
|
.location-description {
|
|
padding: 20px;
|
|
color: var(--text-primary);
|
|
font-style: italic;
|
|
border-bottom: 1px solid var(--border-color);
|
|
}
|
|
|
|
.location-levels {
|
|
padding: 20px;
|
|
padding-bottom: 10px;
|
|
border-bottom: 1px solid var(--border-color);
|
|
}
|
|
|
|
.location-spawns {
|
|
padding: 20px;
|
|
}
|
|
|
|
.spawn-badge {
|
|
background: var(--bg-tertiary);
|
|
color: var(--text-accent);
|
|
padding: 4px 10px;
|
|
border-radius: 12px;
|
|
font-size: 0.85em;
|
|
margin: 3px;
|
|
display: inline-block;
|
|
border: 1px solid var(--border-color);
|
|
}
|
|
|
|
.hidden-spawn {
|
|
display: none;
|
|
}
|
|
|
|
.more-button {
|
|
background: var(--gradient-primary) !important;
|
|
color: white !important;
|
|
cursor: pointer;
|
|
transition: transform 0.2s ease;
|
|
}
|
|
|
|
.more-button:hover {
|
|
transform: scale(1.05);
|
|
}
|
|
|
|
.less-button {
|
|
background: #ff6b6b !important;
|
|
color: white !important;
|
|
cursor: pointer;
|
|
transition: transform 0.2s ease;
|
|
}
|
|
|
|
.less-button:hover {
|
|
transform: scale(1.05);
|
|
}
|
|
|
|
.info-section {
|
|
background: var(--bg-secondary);
|
|
border-radius: 15px;
|
|
padding: 25px;
|
|
margin-bottom: 30px;
|
|
box-shadow: 0 4px 20px rgba(0,0,0,0.3);
|
|
border: 1px solid var(--border-color);
|
|
}
|
|
|
|
.info-section h2 {
|
|
color: var(--text-accent);
|
|
margin-top: 0;
|
|
}
|
|
"""
|
|
|
|
# Get the unified template with additional CSS
|
|
html_content = self.get_page_template("Game Locations", content, "locations")
|
|
# Insert additional CSS before closing </style> tag
|
|
html_content = html_content.replace("</style>", additional_css + "</style>")
|
|
|
|
self.send_response(200)
|
|
self.send_header('Content-type', 'text/html')
|
|
self.end_headers()
|
|
self.wfile.write(html_content.encode())
|
|
|
|
def serve_petdex(self):
|
|
"""Serve the petdex page with all pet species data"""
|
|
# Get database instance from the server class
|
|
database = self.server.database if hasattr(self.server, 'database') else None
|
|
|
|
if not database:
|
|
self.serve_error_page("Petdex", "Database not available")
|
|
return
|
|
|
|
# Fetch petdex data
|
|
try:
|
|
import asyncio
|
|
loop = asyncio.new_event_loop()
|
|
asyncio.set_event_loop(loop)
|
|
|
|
petdex_data = loop.run_until_complete(self.fetch_petdex_data(database))
|
|
loop.close()
|
|
|
|
self.serve_petdex_data(petdex_data)
|
|
|
|
except Exception as e:
|
|
print(f"Error fetching petdex data: {e}")
|
|
self.serve_error_page("Petdex", f"Error loading petdex: {str(e)}")
|
|
|
|
async def fetch_petdex_data(self, database):
|
|
"""Fetch all pet species data from database"""
|
|
try:
|
|
import aiosqlite
|
|
async with aiosqlite.connect(database.db_path) as db:
|
|
# Get all pet species with evolution information (no duplicates)
|
|
cursor = await db.execute("""
|
|
SELECT DISTINCT ps.*,
|
|
evolve_to.name as evolves_to_name,
|
|
(SELECT COUNT(*) FROM location_spawns ls WHERE ls.species_id = ps.id) as location_count
|
|
FROM pet_species ps
|
|
LEFT JOIN pet_species evolve_to ON ps.evolution_species_id = evolve_to.id
|
|
ORDER BY ps.rarity ASC, ps.name ASC
|
|
""")
|
|
|
|
rows = await cursor.fetchall()
|
|
pets = []
|
|
for row in rows:
|
|
pet_dict = {
|
|
'id': row[0], 'name': row[1], 'type1': row[2], 'type2': row[3],
|
|
'base_hp': row[4], 'base_attack': row[5], 'base_defense': row[6],
|
|
'base_speed': row[7], 'evolution_level': row[8],
|
|
'evolution_species_id': row[9], 'rarity': row[10],
|
|
'evolves_to_name': row[11], 'location_count': row[12]
|
|
}
|
|
pets.append(pet_dict)
|
|
|
|
# Get spawn locations for each pet
|
|
for pet in pets:
|
|
cursor = await db.execute("""
|
|
SELECT l.name, ls.min_level, ls.max_level, ls.spawn_rate
|
|
FROM location_spawns ls
|
|
JOIN locations l ON ls.location_id = l.id
|
|
WHERE ls.species_id = ?
|
|
ORDER BY l.name ASC
|
|
""", (pet['id'],))
|
|
spawn_rows = await cursor.fetchall()
|
|
pet['spawn_locations'] = []
|
|
for spawn_row in spawn_rows:
|
|
spawn_dict = {
|
|
'location_name': spawn_row[0], 'min_level': spawn_row[1],
|
|
'max_level': spawn_row[2], 'spawn_rate': spawn_row[3]
|
|
}
|
|
pet['spawn_locations'].append(spawn_dict)
|
|
|
|
return pets
|
|
|
|
except Exception as e:
|
|
print(f"Database error fetching petdex: {e}")
|
|
return []
|
|
|
|
def serve_petdex_data(self, petdex_data):
|
|
"""Serve petdex page with all pet species data"""
|
|
|
|
# Build pet cards HTML grouped by rarity
|
|
rarity_names = {1: "Common", 2: "Uncommon", 3: "Rare", 4: "Epic", 5: "Legendary"}
|
|
rarity_colors = {1: "#ffffff", 2: "#1eff00", 3: "#0070dd", 4: "#a335ee", 5: "#ff8000"}
|
|
|
|
# Calculate statistics
|
|
total_species = len(petdex_data)
|
|
type_counts = {}
|
|
for pet in petdex_data:
|
|
if pet['type1'] not in type_counts:
|
|
type_counts[pet['type1']] = 0
|
|
type_counts[pet['type1']] += 1
|
|
if pet['type2'] and pet['type2'] not in type_counts:
|
|
type_counts[pet['type2']] = 0
|
|
if pet['type2']:
|
|
type_counts[pet['type2']] += 1
|
|
|
|
# Build statistics section
|
|
stats_content = f"""
|
|
<div class="grid grid-4">
|
|
<div class="card">
|
|
<h3 style="color: var(--accent-blue); margin-top: 0;">📊 Total Species</h3>
|
|
<div style="font-size: 2.5em; font-weight: bold; color: var(--text-accent);">{total_species}</div>
|
|
</div>
|
|
<div class="card">
|
|
<h3 style="color: var(--accent-blue); margin-top: 0;">🎨 Types</h3>
|
|
<div style="font-size: 2.5em; font-weight: bold; color: var(--text-accent);">{len(type_counts)}</div>
|
|
</div>
|
|
<div class="card">
|
|
<h3 style="color: var(--accent-blue); margin-top: 0;">⭐ Rarities</h3>
|
|
<div style="font-size: 2.5em; font-weight: bold; color: var(--text-accent);">{len(set(pet['rarity'] for pet in petdex_data))}</div>
|
|
</div>
|
|
<div class="card">
|
|
<h3 style="color: var(--accent-blue); margin-top: 0;">🧬 Evolutions</h3>
|
|
<div style="font-size: 2.5em; font-weight: bold; color: var(--text-accent);">{len([p for p in petdex_data if p['evolution_level']])}</div>
|
|
</div>
|
|
</div>
|
|
"""
|
|
|
|
pets_by_rarity = {}
|
|
for pet in petdex_data:
|
|
rarity = pet['rarity']
|
|
if rarity not in pets_by_rarity:
|
|
pets_by_rarity[rarity] = []
|
|
pets_by_rarity[rarity].append(pet)
|
|
|
|
petdex_html = ""
|
|
total_species = len(petdex_data)
|
|
|
|
for rarity in sorted(pets_by_rarity.keys()):
|
|
pets_in_rarity = pets_by_rarity[rarity]
|
|
rarity_name = rarity_names.get(rarity, f"Rarity {rarity}")
|
|
rarity_color = rarity_colors.get(rarity, "#ffffff")
|
|
|
|
petdex_html += f"""
|
|
<div class="rarity-section">
|
|
<h2 style="color: {rarity_color}; border-bottom: 2px solid {rarity_color}; padding-bottom: 10px;">
|
|
{rarity_name} ({len(pets_in_rarity)} species)
|
|
</h2>
|
|
<div class="pets-grid">"""
|
|
|
|
for pet in pets_in_rarity:
|
|
# Build type display
|
|
type_str = pet['type1']
|
|
if pet['type2']:
|
|
type_str += f"/{pet['type2']}"
|
|
|
|
# Build evolution info
|
|
evolution_info = ""
|
|
if pet['evolution_level'] and pet['evolves_to_name']:
|
|
evolution_info = f"<br><strong>Evolves:</strong> Level {pet['evolution_level']} → {pet['evolves_to_name']}"
|
|
elif pet['evolution_level']:
|
|
evolution_info = f"<br><strong>Evolves:</strong> Level {pet['evolution_level']}"
|
|
|
|
# Build spawn locations
|
|
spawn_info = ""
|
|
if pet['spawn_locations']:
|
|
locations = [f"{loc['location_name']} (Lv.{loc['min_level']}-{loc['max_level']})"
|
|
for loc in pet['spawn_locations'][:3]]
|
|
if len(pet['spawn_locations']) > 3:
|
|
locations.append(f"+{len(pet['spawn_locations']) - 3} more")
|
|
spawn_info = f"<br><strong>Found in:</strong> {', '.join(locations)}"
|
|
else:
|
|
spawn_info = "<br><strong>Found in:</strong> Not yet available"
|
|
|
|
# Calculate total base stats
|
|
total_stats = pet['base_hp'] + pet['base_attack'] + pet['base_defense'] + pet['base_speed']
|
|
|
|
petdex_html += f"""
|
|
<div class="pet-card" style="border-left: 4px solid {rarity_color};">
|
|
<div class="pet-header">
|
|
<h3 style="color: {rarity_color};">{pet['name']}</h3>
|
|
<span class="type-badge">{type_str}</span>
|
|
</div>
|
|
<div class="pet-stats">
|
|
<div class="stat-row">
|
|
<span>HP: {pet['base_hp']}</span>
|
|
<span>ATK: {pet['base_attack']}</span>
|
|
</div>
|
|
<div class="stat-row">
|
|
<span>DEF: {pet['base_defense']}</span>
|
|
<span>SPD: {pet['base_speed']}</span>
|
|
</div>
|
|
<div class="total-stats">Total: {total_stats}</div>
|
|
</div>
|
|
<div class="pet-info">
|
|
<strong>Rarity:</strong> {rarity_name}{evolution_info}{spawn_info}
|
|
</div>
|
|
</div>"""
|
|
|
|
petdex_html += """
|
|
</div>
|
|
</div>"""
|
|
|
|
if not petdex_data:
|
|
petdex_html = """
|
|
<div style="text-align: center; padding: 60px; color: var(--text-secondary);">
|
|
<h2>No pet species found!</h2>
|
|
<p>The petdex appears to be empty. Contact an administrator.</p>
|
|
</div>"""
|
|
|
|
# Combine all content
|
|
content = f"""
|
|
<div class="header">
|
|
<h1>📖 Petdex</h1>
|
|
<p>Complete encyclopedia of all available pets</p>
|
|
</div>
|
|
|
|
{stats_content}
|
|
|
|
<div class="card">
|
|
<h2>📊 Pet Collection by Rarity</h2>
|
|
<p style="color: var(--text-secondary); margin-bottom: 20px;">🎯 Pets are organized by rarity. Use <code>!wild <location></code> in #petz to see what spawns where!</p>
|
|
|
|
{petdex_html}
|
|
</div>
|
|
"""
|
|
|
|
html = self.get_page_template("Petdex", content, "petdex")
|
|
self.send_response(200)
|
|
self.send_header('Content-type', 'text/html')
|
|
self.end_headers()
|
|
self.wfile.write(html.encode())
|
|
|
|
def serve_player_profile(self, nickname):
|
|
"""Serve individual player profile page"""
|
|
# URL decode the nickname in case it has special characters
|
|
from urllib.parse import unquote
|
|
nickname = unquote(nickname)
|
|
|
|
# Get database instance from the server class
|
|
database = self.server.database if hasattr(self.server, 'database') else None
|
|
|
|
if not database:
|
|
self.serve_player_error(nickname, "Database not available")
|
|
return
|
|
|
|
# Fetch player data
|
|
try:
|
|
import asyncio
|
|
loop = asyncio.new_event_loop()
|
|
asyncio.set_event_loop(loop)
|
|
|
|
player_data = loop.run_until_complete(self.fetch_player_data(database, nickname))
|
|
loop.close()
|
|
|
|
if player_data is None:
|
|
self.serve_player_not_found(nickname)
|
|
return
|
|
|
|
self.serve_player_data(nickname, player_data)
|
|
|
|
except Exception as e:
|
|
print(f"Error fetching player data for {nickname}: {e}")
|
|
self.serve_player_error(nickname, f"Error loading player data: {str(e)}")
|
|
return
|
|
|
|
async def fetch_player_data(self, database, nickname):
|
|
"""Fetch all player data from database"""
|
|
try:
|
|
# Get player info
|
|
import aiosqlite
|
|
async with aiosqlite.connect(database.db_path) as db:
|
|
# Get player basic info
|
|
cursor = await db.execute("""
|
|
SELECT p.*, l.name as location_name, l.description as location_desc
|
|
FROM players p
|
|
LEFT JOIN locations l ON p.current_location_id = l.id
|
|
WHERE p.nickname = ?
|
|
""", (nickname,))
|
|
player = await cursor.fetchone()
|
|
if not player:
|
|
return None
|
|
|
|
# Convert to dict manually
|
|
player_dict = {
|
|
'id': player[0],
|
|
'nickname': player[1],
|
|
'created_at': player[2],
|
|
'last_active': player[3],
|
|
'level': player[4],
|
|
'experience': player[5],
|
|
'money': player[6],
|
|
'current_location_id': player[7],
|
|
'location_name': player[8],
|
|
'location_desc': player[9]
|
|
}
|
|
|
|
# Get player pets
|
|
cursor = await db.execute("""
|
|
SELECT p.*, ps.name as species_name, ps.type1, ps.type2
|
|
FROM pets p
|
|
JOIN pet_species ps ON p.species_id = ps.id
|
|
WHERE p.player_id = ?
|
|
ORDER BY p.is_active DESC, p.level DESC, p.id ASC
|
|
""", (player_dict['id'],))
|
|
pets_rows = await cursor.fetchall()
|
|
pets = []
|
|
for row in pets_rows:
|
|
pet_dict = {
|
|
'id': row[0], 'player_id': row[1], 'species_id': row[2],
|
|
'nickname': row[3], 'level': row[4], 'experience': row[5],
|
|
'hp': row[6], 'max_hp': row[7], 'attack': row[8],
|
|
'defense': row[9], 'speed': row[10], 'happiness': row[11],
|
|
'caught_at': row[12], 'is_active': bool(row[13]), # Convert to proper boolean
|
|
'team_order': row[14], 'species_name': row[15], 'type1': row[16], 'type2': row[17]
|
|
}
|
|
pets.append(pet_dict)
|
|
|
|
# Get player achievements
|
|
cursor = await db.execute("""
|
|
SELECT pa.*, a.name as achievement_name, a.description as achievement_desc
|
|
FROM player_achievements pa
|
|
JOIN achievements a ON pa.achievement_id = a.id
|
|
WHERE pa.player_id = ?
|
|
ORDER BY pa.completed_at DESC
|
|
""", (player_dict['id'],))
|
|
achievements_rows = await cursor.fetchall()
|
|
achievements = []
|
|
for row in achievements_rows:
|
|
achievement_dict = {
|
|
'id': row[0], 'player_id': row[1], 'achievement_id': row[2],
|
|
'completed_at': row[3], 'achievement_name': row[4], 'achievement_desc': row[5]
|
|
}
|
|
achievements.append(achievement_dict)
|
|
|
|
# Get player inventory
|
|
cursor = await db.execute("""
|
|
SELECT i.name, i.description, i.category, i.rarity, pi.quantity
|
|
FROM player_inventory pi
|
|
JOIN items i ON pi.item_id = i.id
|
|
WHERE pi.player_id = ?
|
|
ORDER BY i.rarity DESC, i.name ASC
|
|
""", (player_dict['id'],))
|
|
inventory_rows = await cursor.fetchall()
|
|
inventory = []
|
|
for row in inventory_rows:
|
|
item_dict = {
|
|
'name': row[0], 'description': row[1], 'category': row[2],
|
|
'rarity': row[3], 'quantity': row[4]
|
|
}
|
|
inventory.append(item_dict)
|
|
|
|
# Get player gym badges
|
|
cursor = await db.execute("""
|
|
SELECT g.name, g.badge_name, g.badge_icon, l.name as location_name,
|
|
pgb.victories, pgb.first_victory_date, pgb.highest_difficulty
|
|
FROM player_gym_battles pgb
|
|
JOIN gyms g ON pgb.gym_id = g.id
|
|
JOIN locations l ON g.location_id = l.id
|
|
WHERE pgb.player_id = ? AND pgb.victories > 0
|
|
ORDER BY pgb.first_victory_date ASC
|
|
""", (player_dict['id'],))
|
|
gym_badges_rows = await cursor.fetchall()
|
|
gym_badges = []
|
|
for row in gym_badges_rows:
|
|
badge_dict = {
|
|
'gym_name': row[0], 'badge_name': row[1], 'badge_icon': row[2],
|
|
'location_name': row[3], 'victories': row[4],
|
|
'first_victory_date': row[5], 'highest_difficulty': row[6]
|
|
}
|
|
gym_badges.append(badge_dict)
|
|
|
|
# Get player encounters using database method
|
|
encounters = []
|
|
try:
|
|
# Use the existing database method which handles row factory properly
|
|
temp_encounters = await database.get_player_encounters(player_dict['id'])
|
|
for enc in temp_encounters:
|
|
encounter_dict = {
|
|
'species_name': enc['species_name'],
|
|
'type1': enc['type1'],
|
|
'type2': enc['type2'],
|
|
'rarity': enc['rarity'],
|
|
'total_encounters': enc['total_encounters'],
|
|
'caught_count': enc['caught_count'],
|
|
'first_encounter_date': enc['first_encounter_date']
|
|
}
|
|
encounters.append(encounter_dict)
|
|
except Exception as e:
|
|
print(f"Error fetching encounters: {e}")
|
|
encounters = []
|
|
|
|
# Get encounter stats
|
|
try:
|
|
encounter_stats = await database.get_encounter_stats(player_dict['id'])
|
|
except Exception as e:
|
|
print(f"Error fetching encounter stats: {e}")
|
|
encounter_stats = {
|
|
'species_encountered': 0,
|
|
'total_encounters': 0,
|
|
'total_species': 0,
|
|
'completion_percentage': 0.0
|
|
}
|
|
|
|
return {
|
|
'player': player_dict,
|
|
'pets': pets,
|
|
'achievements': achievements,
|
|
'inventory': inventory,
|
|
'gym_badges': gym_badges,
|
|
'encounters': encounters,
|
|
'encounter_stats': encounter_stats
|
|
}
|
|
|
|
except Exception as e:
|
|
print(f"Database error fetching player {nickname}: {e}")
|
|
return None
|
|
|
|
def serve_player_not_found(self, nickname):
|
|
"""Serve player not found page using unified template"""
|
|
content = f"""
|
|
<div class="header">
|
|
<h1>🚫 Player Not Found</h1>
|
|
</div>
|
|
|
|
<div class="error-message">
|
|
<h2>Player "{nickname}" not found</h2>
|
|
<p>This player hasn't started their journey yet or doesn't exist.</p>
|
|
<p>Players can use <code>!start</code> in #petz to begin their adventure!</p>
|
|
</div>
|
|
"""
|
|
|
|
# Add error-specific CSS
|
|
additional_css = """
|
|
.main-container {
|
|
text-align: center;
|
|
max-width: 800px;
|
|
margin: 0 auto;
|
|
}
|
|
|
|
.error-message {
|
|
background: var(--bg-secondary);
|
|
padding: 40px;
|
|
border-radius: 15px;
|
|
border: 2px solid var(--error-color);
|
|
margin-top: 30px;
|
|
box-shadow: 0 4px 20px rgba(0,0,0,0.3);
|
|
}
|
|
|
|
.error-message h2 {
|
|
color: var(--error-color);
|
|
margin-top: 0;
|
|
}
|
|
"""
|
|
|
|
html_content = self.get_page_template("Player Not Found", content, "players")
|
|
html_content = html_content.replace("</style>", additional_css + "</style>")
|
|
|
|
self.send_response(404)
|
|
self.send_header('Content-type', 'text/html')
|
|
self.end_headers()
|
|
self.wfile.write(html_content.encode())
|
|
|
|
def serve_player_error(self, nickname, error_msg):
|
|
"""Serve player error page using unified template"""
|
|
content = f"""
|
|
<div class="header">
|
|
<h1>⚠️ Error</h1>
|
|
</div>
|
|
|
|
<div class="error-message">
|
|
<h2>Unable to load player data</h2>
|
|
<p>{error_msg}</p>
|
|
<p>Please try again later or contact an administrator.</p>
|
|
</div>
|
|
"""
|
|
|
|
# Add error-specific CSS
|
|
additional_css = """
|
|
.main-container {
|
|
text-align: center;
|
|
max-width: 800px;
|
|
margin: 0 auto;
|
|
}
|
|
|
|
.error-message {
|
|
background: var(--bg-secondary);
|
|
padding: 40px;
|
|
border-radius: 15px;
|
|
border: 2px solid var(--error-color);
|
|
margin-top: 30px;
|
|
box-shadow: 0 4px 20px rgba(0,0,0,0.3);
|
|
}
|
|
|
|
.error-message h2 {
|
|
color: var(--error-color);
|
|
margin-top: 0;
|
|
}
|
|
"""
|
|
|
|
html_content = self.get_page_template("Player Error", content, "players")
|
|
html_content = html_content.replace("</style>", additional_css + "</style>")
|
|
|
|
self.send_response(500)
|
|
self.send_header('Content-type', 'text/html')
|
|
self.end_headers()
|
|
self.wfile.write(html_content.encode())
|
|
|
|
def serve_player_data(self, nickname, player_data):
|
|
"""Serve player profile page with real data"""
|
|
player = player_data['player']
|
|
pets = player_data['pets']
|
|
achievements = player_data['achievements']
|
|
inventory = player_data.get('inventory', [])
|
|
gym_badges = player_data.get('gym_badges', [])
|
|
encounters = player_data.get('encounters', [])
|
|
encounter_stats = player_data.get('encounter_stats', {})
|
|
|
|
# Calculate stats
|
|
active_pets = [pet for pet in pets if pet['is_active']]
|
|
total_pets = len(pets)
|
|
active_count = len(active_pets)
|
|
|
|
# Build pets table HTML
|
|
pets_html = ""
|
|
if pets:
|
|
for pet in pets:
|
|
status = "⭐ Active" if pet['is_active'] else "📦 Storage"
|
|
status_class = "pet-active" if pet['is_active'] else "pet-stored"
|
|
name = pet['nickname'] or pet['species_name']
|
|
|
|
type_str = pet['type1']
|
|
if pet['type2']:
|
|
type_str += f"/{pet['type2']}"
|
|
|
|
pets_html += f"""
|
|
<tr>
|
|
<td class="{status_class}">{status}</td>
|
|
<td><strong>{name}</strong></td>
|
|
<td>{pet['species_name']}</td>
|
|
<td><span class="type-badge">{type_str}</span></td>
|
|
<td>{pet['level']}</td>
|
|
<td>{pet['hp']}/{pet['max_hp']}</td>
|
|
<td>ATK: {pet['attack']} | DEF: {pet['defense']} | SPD: {pet['speed']}</td>
|
|
</tr>"""
|
|
else:
|
|
pets_html = """
|
|
<tr>
|
|
<td colspan="7" style="text-align: center; padding: 40px;">
|
|
No pets found. Use !explore and !catch to start your collection!
|
|
</td>
|
|
</tr>"""
|
|
|
|
# Build achievements HTML
|
|
achievements_html = ""
|
|
if achievements:
|
|
for achievement in achievements:
|
|
achievements_html += f"""
|
|
<div class="achievement-card">
|
|
<div class="achievement-icon">🏆</div>
|
|
<div class="achievement-content">
|
|
<h4>{achievement['achievement_name']}</h4>
|
|
<p>{achievement['achievement_desc']}</p>
|
|
<span class="achievement-date">Earned: {achievement['completed_at']}</span>
|
|
</div>
|
|
</div>"""
|
|
else:
|
|
achievements_html = """
|
|
<div class="empty-state">
|
|
<div class="empty-icon">🏆</div>
|
|
<h3>No achievements yet</h3>
|
|
<p>Keep exploring and catching pets to earn achievements!</p>
|
|
</div>"""
|
|
|
|
# Build inventory HTML
|
|
inventory_html = ""
|
|
if inventory:
|
|
rarity_symbols = {
|
|
"common": "○",
|
|
"uncommon": "◇",
|
|
"rare": "◆",
|
|
"epic": "★",
|
|
"legendary": "✦"
|
|
}
|
|
rarity_colors = {
|
|
"common": "#ffffff",
|
|
"uncommon": "#1eff00",
|
|
"rare": "#0070dd",
|
|
"epic": "#a335ee",
|
|
"legendary": "#ff8000"
|
|
}
|
|
|
|
for item in inventory:
|
|
symbol = rarity_symbols.get(item['rarity'], "○")
|
|
color = rarity_colors.get(item['rarity'], "#ffffff")
|
|
quantity_str = f" x{item['quantity']}" if item['quantity'] > 1 else ""
|
|
|
|
inventory_html += f"""
|
|
<div class="inventory-item" style="border-left-color: {color};">
|
|
<div class="item-header">
|
|
<strong style="color: {color};">{symbol} {item['name']}{quantity_str}</strong>
|
|
</div>
|
|
<div class="item-description">{item['description']}</div>
|
|
<div class="item-meta">Category: {item['category'].replace('_', ' ').title()} | Rarity: {item['rarity'].title()}</div>
|
|
</div>"""
|
|
else:
|
|
inventory_html = """
|
|
<div class="empty-state">
|
|
<div class="empty-icon">🎒</div>
|
|
<h3>No items yet</h3>
|
|
<p>Try exploring to find useful items!</p>
|
|
</div>"""
|
|
|
|
# Build gym badges HTML
|
|
badges_html = ""
|
|
if gym_badges:
|
|
for badge in gym_badges:
|
|
# Safely handle date formatting
|
|
try:
|
|
if badge['first_victory_date'] and isinstance(badge['first_victory_date'], str):
|
|
badge_date = badge['first_victory_date'].split()[0]
|
|
else:
|
|
badge_date = 'Unknown'
|
|
except (AttributeError, IndexError):
|
|
badge_date = 'Unknown'
|
|
badges_html += f"""
|
|
<div class="badge-card">
|
|
<div class="badge-icon">{badge['badge_icon']}</div>
|
|
<div class="badge-content">
|
|
<h4>{badge['badge_name']}</h4>
|
|
<p>Earned from {badge['gym_name']} ({badge['location_name']})</p>
|
|
<div class="badge-stats">
|
|
<span>First victory: {badge_date}</span>
|
|
<span>Total victories: {badge['victories']}</span>
|
|
<span>Highest difficulty: Level {badge['highest_difficulty']}</span>
|
|
</div>
|
|
</div>
|
|
</div>"""
|
|
else:
|
|
badges_html = """
|
|
<div class="empty-state">
|
|
<div class="empty-icon">🏆</div>
|
|
<h3>No gym badges yet</h3>
|
|
<p>Challenge gyms to earn badges and prove your training skills!</p>
|
|
</div>"""
|
|
|
|
# Build encounters HTML
|
|
encounters_html = ""
|
|
if encounters:
|
|
rarity_colors = {1: "#ffffff", 2: "#1eff00", 3: "#0070dd", 4: "#a335ee", 5: "#ff8000"}
|
|
for encounter in encounters:
|
|
rarity_color = rarity_colors.get(encounter['rarity'], "#ffffff")
|
|
type_str = encounter['type1']
|
|
if encounter['type2']:
|
|
type_str += f"/{encounter['type2']}"
|
|
|
|
# Safely handle date formatting
|
|
try:
|
|
if encounter['first_encounter_date'] and isinstance(encounter['first_encounter_date'], str):
|
|
encounter_date = encounter['first_encounter_date'].split()[0]
|
|
else:
|
|
encounter_date = 'Unknown'
|
|
except (AttributeError, IndexError):
|
|
encounter_date = 'Unknown'
|
|
|
|
encounters_html += f"""
|
|
<div class="encounter-card" style="border-left-color: {rarity_color};">
|
|
<div class="encounter-header">
|
|
<strong style="color: {rarity_color};">{encounter['species_name']}</strong>
|
|
<span class="type-badge">{type_str}</span>
|
|
</div>
|
|
<div class="encounter-stats">
|
|
<span>Encountered {encounter['total_encounters']} times</span>
|
|
<span>Caught {encounter['caught_count']} times</span>
|
|
</div>
|
|
<div class="encounter-date">First seen: {encounter_date}</div>
|
|
</div>"""
|
|
else:
|
|
encounters_html = """
|
|
<div class="empty-state">
|
|
<div class="empty-icon">👁️</div>
|
|
<h3>No pets encountered yet</h3>
|
|
<p>Use !explore to discover wild pets!</p>
|
|
</div>"""
|
|
|
|
# Build content for the unified template
|
|
content = f"""
|
|
<div class="header">
|
|
<h1>🐾 {nickname}'s Profile</h1>
|
|
<p>Level {player['level']} Trainer</p>
|
|
<p><em>Currently in {player.get('location_name', 'Unknown Location')}</em></p>
|
|
<div style="margin-top: 20px;">
|
|
<a href="/teambuilder/{nickname}" class="btn btn-primary">
|
|
🔧 Team Builder
|
|
</a>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- Quick Navigation -->
|
|
<div class="quick-nav">
|
|
<a href="#stats" class="nav-pill">📊 Stats</a>
|
|
<a href="#pets" class="nav-pill">🐾 Pets</a>
|
|
<a href="#achievements" class="nav-pill">🏆 Achievements</a>
|
|
<a href="#inventory" class="nav-pill">🎒 Inventory</a>
|
|
<a href="#gym-badges" class="nav-pill">🏆 Badges</a>
|
|
<a href="#encounters" class="nav-pill">👁️ Encounters</a>
|
|
</div>
|
|
|
|
<div class="section" id="stats">
|
|
<div class="section-header">📊 Player Statistics</div>
|
|
<div class="section-content">
|
|
<div class="stats-grid">
|
|
<div class="stat-card">
|
|
<div class="stat-value">{player['level']}</div>
|
|
<div class="stat-label">Level</div>
|
|
</div>
|
|
<div class="stat-card">
|
|
<div class="stat-value">{player['experience']}</div>
|
|
<div class="stat-label">Experience</div>
|
|
</div>
|
|
<div class="stat-card">
|
|
<div class="stat-value">${player['money']}</div>
|
|
<div class="stat-label">Money</div>
|
|
</div>
|
|
<div class="stat-card">
|
|
<div class="stat-value">{total_pets}</div>
|
|
<div class="stat-label">Pets Caught</div>
|
|
</div>
|
|
<div class="stat-card">
|
|
<div class="stat-value">{active_count}</div>
|
|
<div class="stat-label">Active Pets</div>
|
|
</div>
|
|
<div class="stat-card">
|
|
<div class="stat-value">{len(achievements)}</div>
|
|
<div class="stat-label">Achievements</div>
|
|
</div>
|
|
<div class="stat-card">
|
|
<div class="stat-value">{encounter_stats.get('species_encountered', 0)}</div>
|
|
<div class="stat-label">Species Seen</div>
|
|
</div>
|
|
<div class="stat-card">
|
|
<div class="stat-value">{encounter_stats.get('completion_percentage', 0)}%</div>
|
|
<div class="stat-label">Petdex Complete</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="section" id="pets">
|
|
<div class="section-header">🐾 Pet Collection</div>
|
|
<div class="section-content">
|
|
<div class="pets-container">
|
|
<div class="pets-table-wrapper">
|
|
<table class="pets-table">
|
|
<thead>
|
|
<tr>
|
|
<th>Status</th>
|
|
<th>Name</th>
|
|
<th>Species</th>
|
|
<th>Type</th>
|
|
<th>Level</th>
|
|
<th>HP</th>
|
|
<th>Stats</th>
|
|
</tr>
|
|
</thead>
|
|
<tbody>
|
|
{pets_html}
|
|
</tbody>
|
|
</table>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="section" id="achievements">
|
|
<div class="section-header">🏆 Achievements</div>
|
|
<div class="section-content">
|
|
<div class="achievements-grid">
|
|
{achievements_html}
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="section" id="inventory">
|
|
<div class="section-header">🎒 Inventory</div>
|
|
<div class="section-content">
|
|
<div class="inventory-grid">
|
|
{inventory_html}
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="section" id="gym-badges">
|
|
<div class="section-header">🏆 Gym Badges</div>
|
|
<div class="section-content">
|
|
<div class="badges-grid">
|
|
{badges_html}
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="section" id="encounters">
|
|
<div class="section-header">👁️ Pet Encounters</div>
|
|
<div class="section-content">
|
|
<div class="encounters-summary">
|
|
<p>Species discovered: {encounter_stats.get('species_encountered', 0)}/{encounter_stats.get('total_species', 0)}
|
|
({encounter_stats.get('completion_percentage', 0)}% complete)</p>
|
|
<p>Total encounters: {encounter_stats.get('total_encounters', 0)}</p>
|
|
</div>
|
|
<div class="encounters-grid">
|
|
{encounters_html}
|
|
</div>
|
|
</div>
|
|
</div>
|
|
"""
|
|
|
|
# Add custom CSS for the profile page
|
|
additional_css = """
|
|
|
|
/* Profile Page Styles */
|
|
html {
|
|
scroll-behavior: smooth;
|
|
}
|
|
|
|
.quick-nav {
|
|
background: var(--bg-secondary);
|
|
padding: 15px;
|
|
border-radius: 10px;
|
|
margin-bottom: 20px;
|
|
text-align: center;
|
|
box-shadow: 0 2px 10px var(--shadow-color);
|
|
}
|
|
|
|
.nav-pill {
|
|
display: inline-block;
|
|
background: var(--bg-tertiary);
|
|
color: var(--text-primary);
|
|
padding: 8px 16px;
|
|
border-radius: 20px;
|
|
text-decoration: none;
|
|
margin: 5px;
|
|
font-size: 0.9em;
|
|
transition: all 0.3s ease;
|
|
border: 1px solid var(--border-color);
|
|
}
|
|
|
|
.nav-pill:hover {
|
|
background: var(--gradient-primary);
|
|
color: white;
|
|
transform: translateY(-2px);
|
|
}
|
|
|
|
.stats-grid {
|
|
display: grid;
|
|
grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
|
|
gap: 20px;
|
|
margin-bottom: 20px;
|
|
}
|
|
|
|
.stat-card {
|
|
background: var(--bg-tertiary);
|
|
padding: 20px;
|
|
border-radius: 10px;
|
|
text-align: center;
|
|
border: 1px solid var(--border-color);
|
|
transition: transform 0.3s ease;
|
|
}
|
|
|
|
.stat-card:hover {
|
|
transform: translateY(-5px);
|
|
}
|
|
|
|
.stat-value {
|
|
font-size: 2em;
|
|
font-weight: bold;
|
|
color: var(--text-accent);
|
|
margin-bottom: 5px;
|
|
}
|
|
|
|
.stat-label {
|
|
color: var(--text-secondary);
|
|
font-size: 0.9em;
|
|
}
|
|
|
|
.pets-table-wrapper {
|
|
overflow-x: auto;
|
|
}
|
|
|
|
.pets-table {
|
|
width: 100%;
|
|
border-collapse: collapse;
|
|
margin: 20px 0;
|
|
background: var(--bg-tertiary);
|
|
border-radius: 8px;
|
|
overflow: hidden;
|
|
min-width: 600px;
|
|
}
|
|
|
|
.pets-table th, .pets-table td {
|
|
padding: 12px 15px;
|
|
text-align: left;
|
|
border-bottom: 1px solid var(--border-color);
|
|
}
|
|
|
|
.pets-table th {
|
|
background: var(--bg-primary);
|
|
color: var(--text-accent);
|
|
font-weight: 600;
|
|
position: sticky;
|
|
top: 0;
|
|
z-index: 10;
|
|
}
|
|
|
|
.pets-table tr:hover {
|
|
background: var(--hover-color);
|
|
}
|
|
|
|
.pet-active {
|
|
color: var(--text-accent);
|
|
font-weight: bold;
|
|
}
|
|
|
|
.pet-stored {
|
|
color: var(--text-secondary);
|
|
}
|
|
|
|
.type-badge {
|
|
background: var(--bg-primary);
|
|
color: var(--text-accent);
|
|
padding: 2px 8px;
|
|
border-radius: 12px;
|
|
font-size: 0.8em;
|
|
margin-right: 5px;
|
|
}
|
|
|
|
.achievements-grid, .badges-grid, .encounters-grid, .inventory-grid {
|
|
display: grid;
|
|
grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
|
|
gap: 15px;
|
|
}
|
|
|
|
.achievement-card, .badge-card, .encounter-card, .inventory-item {
|
|
background: var(--bg-tertiary);
|
|
padding: 15px;
|
|
border-radius: 8px;
|
|
border-left: 4px solid var(--text-accent);
|
|
transition: transform 0.3s ease;
|
|
}
|
|
|
|
.achievement-card:hover, .badge-card:hover, .encounter-card:hover, .inventory-item:hover {
|
|
transform: translateY(-3px);
|
|
}
|
|
|
|
.achievement-card {
|
|
display: flex;
|
|
align-items: flex-start;
|
|
gap: 15px;
|
|
}
|
|
|
|
.achievement-icon {
|
|
font-size: 1.5em;
|
|
flex-shrink: 0;
|
|
}
|
|
|
|
.achievement-content h4 {
|
|
margin: 0 0 8px 0;
|
|
color: var(--text-accent);
|
|
}
|
|
|
|
.achievement-content p {
|
|
margin: 0 0 8px 0;
|
|
color: var(--text-primary);
|
|
}
|
|
|
|
.achievement-date {
|
|
color: var(--text-secondary);
|
|
font-size: 0.9em;
|
|
}
|
|
|
|
.badge-card {
|
|
display: flex;
|
|
align-items: flex-start;
|
|
gap: 15px;
|
|
border-left-color: gold;
|
|
}
|
|
|
|
.badge-icon {
|
|
font-size: 1.5em;
|
|
flex-shrink: 0;
|
|
}
|
|
|
|
.badge-content h4 {
|
|
margin: 0 0 8px 0;
|
|
color: gold;
|
|
}
|
|
|
|
.badge-content p {
|
|
margin: 0 0 10px 0;
|
|
color: var(--text-primary);
|
|
}
|
|
|
|
.badge-stats {
|
|
display: flex;
|
|
flex-direction: column;
|
|
gap: 4px;
|
|
}
|
|
|
|
.badge-stats span {
|
|
color: var(--text-secondary);
|
|
font-size: 0.9em;
|
|
}
|
|
|
|
.encounter-card {
|
|
border-left: 4px solid var(--text-accent);
|
|
}
|
|
|
|
.encounter-header {
|
|
margin-bottom: 10px;
|
|
}
|
|
|
|
.encounter-stats {
|
|
display: flex;
|
|
flex-direction: column;
|
|
gap: 4px;
|
|
margin-bottom: 8px;
|
|
}
|
|
|
|
.encounter-stats span {
|
|
color: var(--text-primary);
|
|
font-size: 0.9em;
|
|
}
|
|
|
|
.encounter-date {
|
|
color: var(--text-secondary);
|
|
font-size: 0.9em;
|
|
}
|
|
|
|
.inventory-item {
|
|
border-left: 4px solid var(--text-accent);
|
|
}
|
|
|
|
.item-header {
|
|
margin-bottom: 8px;
|
|
}
|
|
|
|
.item-description {
|
|
color: var(--text-primary);
|
|
margin-bottom: 8px;
|
|
}
|
|
|
|
.item-meta {
|
|
color: var(--text-secondary);
|
|
font-size: 0.9em;
|
|
}
|
|
|
|
.empty-state {
|
|
text-align: center;
|
|
padding: 40px;
|
|
color: var(--text-secondary);
|
|
}
|
|
|
|
.empty-icon {
|
|
font-size: 3em;
|
|
margin-bottom: 15px;
|
|
}
|
|
|
|
.empty-state h3 {
|
|
margin: 0 0 10px 0;
|
|
color: var(--text-primary);
|
|
}
|
|
|
|
.empty-state p {
|
|
margin: 0;
|
|
font-size: 1.1em;
|
|
}
|
|
|
|
.encounters-summary {
|
|
text-align: center;
|
|
margin-bottom: 20px;
|
|
padding: 15px;
|
|
background: var(--bg-tertiary);
|
|
border-radius: 8px;
|
|
}
|
|
|
|
.encounters-summary p {
|
|
margin: 5px 0;
|
|
color: var(--text-secondary);
|
|
}
|
|
|
|
.btn {
|
|
display: inline-block;
|
|
padding: 12px 24px;
|
|
border-radius: 6px;
|
|
text-decoration: none;
|
|
font-weight: 600;
|
|
text-align: center;
|
|
transition: all 0.3s ease;
|
|
border: none;
|
|
cursor: pointer;
|
|
}
|
|
|
|
.btn-primary {
|
|
background: var(--gradient-primary);
|
|
color: white;
|
|
}
|
|
|
|
.btn-primary:hover {
|
|
transform: translateY(-2px);
|
|
box-shadow: 0 4px 15px rgba(102, 126, 234, 0.4);
|
|
}
|
|
|
|
/* Mobile Responsive */
|
|
@media (max-width: 768px) {
|
|
.stats-grid {
|
|
grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
|
|
gap: 15px;
|
|
}
|
|
|
|
.stat-card {
|
|
padding: 15px;
|
|
}
|
|
|
|
.stat-value {
|
|
font-size: 1.5em;
|
|
}
|
|
|
|
.achievements-grid, .badges-grid, .encounters-grid, .inventory-grid {
|
|
grid-template-columns: 1fr;
|
|
}
|
|
|
|
.nav-pill {
|
|
padding: 6px 12px;
|
|
font-size: 0.8em;
|
|
margin: 3px;
|
|
}
|
|
|
|
.pets-table {
|
|
min-width: 500px;
|
|
}
|
|
|
|
.pets-table th, .pets-table td {
|
|
padding: 8px 10px;
|
|
font-size: 0.9em;
|
|
}
|
|
}
|
|
"""
|
|
|
|
# Get the unified template with the additional CSS
|
|
html_content = self.get_page_template(f"{nickname}'s Profile", content, "players")
|
|
html_content = html_content.replace("</style>", additional_css + "</style>")
|
|
|
|
self.send_response(200)
|
|
self.send_header('Content-type', 'text/html')
|
|
self.end_headers()
|
|
self.wfile.write(html_content.encode())
|
|
|
|
def log_message(self, format, *args):
|
|
"""Override to reduce logging noise"""
|
|
pass
|
|
|
|
def serve_teambuilder(self, nickname):
|
|
"""Serve the team builder interface"""
|
|
from urllib.parse import unquote
|
|
nickname = unquote(nickname)
|
|
|
|
try:
|
|
from src.database import Database
|
|
database = Database()
|
|
|
|
# Get event loop
|
|
try:
|
|
loop = asyncio.get_running_loop()
|
|
except RuntimeError:
|
|
loop = asyncio.new_event_loop()
|
|
asyncio.set_event_loop(loop)
|
|
|
|
player_data = loop.run_until_complete(self.fetch_player_data(database, nickname))
|
|
|
|
if player_data is None:
|
|
self.serve_player_not_found(nickname)
|
|
return
|
|
|
|
pets = player_data['pets']
|
|
if not pets:
|
|
self.serve_teambuilder_no_pets(nickname)
|
|
return
|
|
|
|
self.serve_teambuilder_interface(nickname, pets)
|
|
|
|
except Exception as e:
|
|
print(f"Error loading team builder for {nickname}: {e}")
|
|
self.serve_player_error(nickname, f"Error loading team builder: {str(e)}")
|
|
|
|
def serve_teambuilder_no_pets(self, nickname):
|
|
"""Show message when player has no pets using unified template"""
|
|
content = f"""
|
|
<div class="header">
|
|
<h1>🐾 Team Builder</h1>
|
|
<p>Build your perfect team for battles and adventures</p>
|
|
</div>
|
|
|
|
<div class="no-pets-message">
|
|
<h2>🐾 No Pets Found</h2>
|
|
<p>{nickname}, you need to catch some pets before using the team builder!</p>
|
|
<p>Head to the IRC channel and use <code>!explore</code> to find wild pets!</p>
|
|
<a href="/player/{nickname}" class="btn btn-primary">← Back to Profile</a>
|
|
</div>
|
|
"""
|
|
|
|
# Add no-pets-specific CSS
|
|
additional_css = """
|
|
.main-container {
|
|
text-align: center;
|
|
max-width: 800px;
|
|
margin: 0 auto;
|
|
}
|
|
|
|
.no-pets-message {
|
|
background: var(--bg-secondary);
|
|
padding: 40px;
|
|
border-radius: 15px;
|
|
border: 2px solid var(--warning-color);
|
|
margin-top: 30px;
|
|
box-shadow: 0 4px 20px rgba(0,0,0,0.3);
|
|
}
|
|
|
|
.no-pets-message h2 {
|
|
color: var(--warning-color);
|
|
margin-top: 0;
|
|
}
|
|
"""
|
|
|
|
html_content = self.get_page_template(f"Team Builder - {nickname}", content, "players")
|
|
html_content = html_content.replace("</style>", additional_css + "</style>")
|
|
|
|
self.send_response(200)
|
|
self.send_header('Content-type', 'text/html')
|
|
self.end_headers()
|
|
self.wfile.write(html_content.encode())
|
|
|
|
def serve_teambuilder_interface(self, nickname, pets):
|
|
"""Serve the full interactive team builder interface"""
|
|
active_pets = [pet for pet in pets if pet['is_active']]
|
|
inactive_pets = [pet for pet in pets if not pet['is_active']]
|
|
|
|
# Debug logging
|
|
print(f"Team Builder Debug for {nickname}:")
|
|
print(f"Total pets: {len(pets)}")
|
|
active_names = [f"{pet['nickname'] or pet['species_name']} (ID:{pet['id']}, is_active:{pet['is_active']})" for pet in active_pets]
|
|
inactive_names = [f"{pet['nickname'] or pet['species_name']} (ID:{pet['id']}, is_active:{pet['is_active']})" for pet in inactive_pets]
|
|
print(f"Active pets: {len(active_pets)} - {active_names}")
|
|
print(f"Inactive pets: {len(inactive_pets)} - {inactive_names}")
|
|
|
|
# Generate detailed pet cards with debugging
|
|
def make_pet_card(pet, is_active):
|
|
name = pet['nickname'] or pet['species_name']
|
|
status = "Active" if is_active else "Storage"
|
|
status_class = "active" if is_active else "storage"
|
|
type_str = pet['type1']
|
|
if pet['type2']:
|
|
type_str += f"/{pet['type2']}"
|
|
|
|
# Debug logging
|
|
print(f"Making pet card for {name} (ID: {pet['id']}): is_active={pet['is_active']}, passed_is_active={is_active}, status_class={status_class}, team_order={pet.get('team_order', 'None')}")
|
|
|
|
# Calculate HP percentage for health bar
|
|
hp_percent = (pet['hp'] / pet['max_hp']) * 100 if pet['max_hp'] > 0 else 0
|
|
hp_color = "#4CAF50" if hp_percent > 60 else "#FF9800" if hp_percent > 25 else "#f44336"
|
|
|
|
return f"""
|
|
<div class="pet-card {status_class}" draggable="true" data-pet-id="{pet['id']}" data-active="{str(is_active).lower()}" data-team-order="{pet.get('team_order', '')}">
|
|
<div class="pet-header">
|
|
<h4 class="pet-name">{name}</h4>
|
|
<div class="status-badge">{status}</div>
|
|
</div>
|
|
<div class="pet-species">Level {pet['level']} {pet['species_name']}</div>
|
|
<div class="pet-type">{type_str}</div>
|
|
|
|
<div class="hp-section">
|
|
<div class="hp-label">HP: {pet['hp']}/{pet['max_hp']}</div>
|
|
<div class="hp-bar">
|
|
<div class="hp-fill" style="width: {hp_percent}%; background: {hp_color};"></div>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="stats-grid">
|
|
<div class="stat">
|
|
<span class="stat-label">ATK</span>
|
|
<span class="stat-value">{pet['attack']}</span>
|
|
</div>
|
|
<div class="stat">
|
|
<span class="stat-label">DEF</span>
|
|
<span class="stat-value">{pet['defense']}</span>
|
|
</div>
|
|
<div class="stat">
|
|
<span class="stat-label">SPD</span>
|
|
<span class="stat-value">{pet['speed']}</span>
|
|
</div>
|
|
<div class="stat">
|
|
<span class="stat-label">EXP</span>
|
|
<span class="stat-value">{pet['experience']}</span>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="pet-happiness">
|
|
<span class="happiness-emoji">{'😊' if pet['happiness'] > 70 else '😐' if pet['happiness'] > 40 else '😞'}</span>
|
|
<span>Happiness: {pet['happiness']}/100</span>
|
|
</div>
|
|
</div>"""
|
|
|
|
# Create 6 numbered slots and place pets in their positions
|
|
team_slots = [''] * 6 # Initialize 6 empty slots
|
|
|
|
# Place active pets in their team_order positions
|
|
for pet in active_pets:
|
|
team_order = pet.get('team_order')
|
|
if team_order and 1 <= team_order <= 6:
|
|
team_slots[team_order - 1] = make_pet_card(pet, True)
|
|
|
|
storage_cards = ''.join(make_pet_card(pet, False) for pet in inactive_pets)
|
|
|
|
html = f"""<!DOCTYPE html>
|
|
<html lang="en">
|
|
<head>
|
|
<meta charset="UTF-8">
|
|
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
|
<title>Team Builder - {nickname}</title>
|
|
<style>
|
|
:root {{
|
|
--bg-primary: #0f0f23;
|
|
--bg-secondary: #1e1e3f;
|
|
--bg-tertiary: #2a2a4a;
|
|
--text-primary: #cccccc;
|
|
--text-secondary: #999999;
|
|
--text-accent: #66ff66;
|
|
--active-color: #4CAF50;
|
|
--storage-color: #FF9800;
|
|
--drag-hover: #3a3a5a;
|
|
--shadow: 0 4px 15px rgba(0,0,0,0.3);
|
|
}}
|
|
|
|
body {{
|
|
font-family: 'Segoe UI', Arial, sans-serif;
|
|
background: var(--bg-primary);
|
|
color: var(--text-primary);
|
|
margin: 0;
|
|
padding: 20px;
|
|
min-height: 100vh;
|
|
}}
|
|
|
|
.header {{
|
|
text-align: center;
|
|
background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
|
|
padding: 30px;
|
|
border-radius: 15px;
|
|
margin-bottom: 30px;
|
|
box-shadow: var(--shadow);
|
|
}}
|
|
|
|
.header h1 {{ margin: 0; font-size: 2.5em; }}
|
|
.header p {{ margin: 10px 0 0 0; opacity: 0.9; }}
|
|
|
|
.team-sections {{
|
|
display: grid;
|
|
grid-template-columns: 1fr 1fr;
|
|
gap: 30px;
|
|
margin-bottom: 30px;
|
|
}}
|
|
|
|
@media (max-width: 768px) {{
|
|
.team-sections {{ grid-template-columns: 1fr; }}
|
|
}}
|
|
|
|
.team-section {{
|
|
background: var(--bg-secondary);
|
|
border-radius: 15px;
|
|
padding: 20px;
|
|
min-height: 500px;
|
|
box-shadow: var(--shadow);
|
|
}}
|
|
|
|
.section-header {{
|
|
font-size: 1.3em;
|
|
font-weight: bold;
|
|
margin-bottom: 20px;
|
|
padding: 15px;
|
|
border-radius: 8px;
|
|
text-align: center;
|
|
}}
|
|
|
|
.active-header {{ background: var(--active-color); color: white; }}
|
|
.storage-header {{ background: var(--storage-color); color: white; }}
|
|
|
|
.pets-container {{
|
|
display: grid;
|
|
grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
|
|
gap: 15px;
|
|
min-height: 200px;
|
|
}}
|
|
|
|
.team-slots-container {{
|
|
display: grid;
|
|
grid-template-columns: repeat(3, 1fr);
|
|
gap: 15px;
|
|
min-height: 400px;
|
|
}}
|
|
|
|
.team-slot {{
|
|
background: var(--bg-tertiary);
|
|
border: 2px dashed #666;
|
|
border-radius: 12px;
|
|
padding: 10px;
|
|
position: relative;
|
|
min-height: 120px;
|
|
transition: all 0.3s ease;
|
|
display: flex;
|
|
flex-direction: column;
|
|
}}
|
|
|
|
.team-slot:hover {{
|
|
border-color: var(--text-accent);
|
|
background: var(--drag-hover);
|
|
}}
|
|
|
|
.team-slot.drag-over {{
|
|
border-color: var(--text-accent);
|
|
background: var(--drag-hover);
|
|
border-style: solid;
|
|
transform: scale(1.02);
|
|
}}
|
|
|
|
.slot-number {{
|
|
position: absolute;
|
|
top: 5px;
|
|
left: 5px;
|
|
background: var(--active-color);
|
|
color: white;
|
|
width: 24px;
|
|
height: 24px;
|
|
border-radius: 50%;
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: center;
|
|
font-size: 0.9em;
|
|
font-weight: bold;
|
|
z-index: 10;
|
|
}}
|
|
|
|
.slot-content {{
|
|
flex: 1;
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: center;
|
|
position: relative;
|
|
}}
|
|
|
|
.slot-content:empty::before {{
|
|
content: "Empty Slot";
|
|
color: var(--text-secondary);
|
|
font-style: italic;
|
|
opacity: 0.7;
|
|
}}
|
|
|
|
.slot-content .pet-card {{
|
|
margin: 0;
|
|
width: 100%;
|
|
max-width: none;
|
|
}}
|
|
|
|
.pet-card {{
|
|
background: var(--bg-tertiary);
|
|
border-radius: 12px;
|
|
padding: 15px;
|
|
cursor: grab;
|
|
transition: all 0.3s ease;
|
|
border: 2px solid transparent;
|
|
position: relative;
|
|
box-shadow: 0 2px 8px rgba(0,0,0,0.2);
|
|
user-select: none;
|
|
}}
|
|
|
|
.pet-card:active {{
|
|
cursor: grabbing;
|
|
}}
|
|
|
|
.pet-card:hover {{
|
|
transform: translateY(-3px);
|
|
box-shadow: var(--shadow);
|
|
}}
|
|
|
|
.pet-card.active {{ border-color: var(--active-color); }}
|
|
.pet-card.storage {{ border-color: var(--storage-color); }}
|
|
|
|
.pet-card.dragging {{
|
|
opacity: 0.6;
|
|
transform: rotate(3deg) scale(0.95);
|
|
z-index: 1000;
|
|
}}
|
|
|
|
.pet-header {{
|
|
display: flex;
|
|
justify-content: space-between;
|
|
align-items: flex-start;
|
|
margin-bottom: 10px;
|
|
}}
|
|
|
|
.pet-name {{
|
|
margin: 0;
|
|
font-size: 1.2em;
|
|
color: var(--text-accent);
|
|
font-weight: bold;
|
|
}}
|
|
|
|
.status-badge {{
|
|
padding: 4px 8px;
|
|
border-radius: 12px;
|
|
font-size: 0.8em;
|
|
font-weight: bold;
|
|
}}
|
|
|
|
.active .status-badge {{ background: var(--active-color); color: white; }}
|
|
.storage .status-badge {{ background: var(--storage-color); color: white; }}
|
|
|
|
.pet-species {{
|
|
color: var(--text-secondary);
|
|
margin-bottom: 5px;
|
|
font-weight: 500;
|
|
}}
|
|
|
|
.pet-type {{
|
|
background: linear-gradient(135deg, #667eea, #764ba2);
|
|
color: white;
|
|
padding: 2px 8px;
|
|
border-radius: 10px;
|
|
font-size: 0.85em;
|
|
display: inline-block;
|
|
margin-bottom: 10px;
|
|
}}
|
|
|
|
.hp-section {{
|
|
margin: 10px 0;
|
|
}}
|
|
|
|
.hp-label {{
|
|
font-size: 0.9em;
|
|
color: var(--text-secondary);
|
|
margin-bottom: 5px;
|
|
}}
|
|
|
|
.hp-bar {{
|
|
background: #333;
|
|
border-radius: 10px;
|
|
height: 8px;
|
|
overflow: hidden;
|
|
}}
|
|
|
|
.hp-fill {{
|
|
height: 100%;
|
|
border-radius: 10px;
|
|
transition: width 0.3s ease;
|
|
}}
|
|
|
|
.stats-grid {{
|
|
display: grid;
|
|
grid-template-columns: 1fr 1fr;
|
|
gap: 8px;
|
|
margin: 12px 0;
|
|
}}
|
|
|
|
.stat {{
|
|
display: flex;
|
|
justify-content: space-between;
|
|
background: rgba(255,255,255,0.05);
|
|
padding: 6px 10px;
|
|
border-radius: 6px;
|
|
}}
|
|
|
|
.stat-label {{
|
|
color: var(--text-secondary);
|
|
font-size: 0.85em;
|
|
}}
|
|
|
|
.stat-value {{
|
|
color: var(--text-accent);
|
|
font-weight: bold;
|
|
}}
|
|
|
|
.pet-happiness {{
|
|
display: flex;
|
|
align-items: center;
|
|
gap: 8px;
|
|
margin-top: 10px;
|
|
font-size: 0.9em;
|
|
color: var(--text-secondary);
|
|
}}
|
|
|
|
.happiness-emoji {{
|
|
font-size: 1.2em;
|
|
}}
|
|
|
|
.drop-zone {{
|
|
min-height: 80px;
|
|
border: 2px dashed #666;
|
|
border-radius: 10px;
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: center;
|
|
color: var(--text-secondary);
|
|
margin-top: 15px;
|
|
transition: all 0.3s ease;
|
|
font-style: italic;
|
|
}}
|
|
|
|
.drop-zone.drag-over {{
|
|
border-color: var(--text-accent);
|
|
background: var(--drag-hover);
|
|
color: var(--text-accent);
|
|
border-style: solid;
|
|
}}
|
|
|
|
.drop-zone.has-pets {{
|
|
display: none;
|
|
}}
|
|
|
|
.controls {{
|
|
background: var(--bg-secondary);
|
|
padding: 25px;
|
|
border-radius: 15px;
|
|
text-align: center;
|
|
box-shadow: var(--shadow);
|
|
}}
|
|
|
|
.save-btn {{
|
|
background: linear-gradient(135deg, #4CAF50, #45a049);
|
|
color: white;
|
|
border: none;
|
|
padding: 15px 30px;
|
|
font-size: 1.1em;
|
|
border-radius: 25px;
|
|
cursor: pointer;
|
|
margin: 0 10px;
|
|
transition: all 0.3s ease;
|
|
font-weight: bold;
|
|
}}
|
|
|
|
.save-btn:hover {{
|
|
transform: translateY(-2px);
|
|
box-shadow: 0 6px 20px rgba(76, 175, 80, 0.4);
|
|
}}
|
|
|
|
.save-btn:disabled {{
|
|
background: #666;
|
|
cursor: not-allowed;
|
|
transform: none;
|
|
box-shadow: none;
|
|
}}
|
|
|
|
.back-btn {{
|
|
background: linear-gradient(135deg, #666, #555);
|
|
color: white;
|
|
text-decoration: none;
|
|
padding: 15px 30px;
|
|
border-radius: 25px;
|
|
display: inline-block;
|
|
margin: 0 10px;
|
|
transition: all 0.3s ease;
|
|
font-weight: bold;
|
|
}}
|
|
|
|
.back-btn:hover {{
|
|
transform: translateY(-2px);
|
|
box-shadow: 0 6px 20px rgba(0,0,0,0.3);
|
|
}}
|
|
|
|
.pin-section {{
|
|
background: var(--bg-secondary);
|
|
padding: 25px;
|
|
border-radius: 15px;
|
|
margin-top: 20px;
|
|
text-align: center;
|
|
display: none;
|
|
box-shadow: var(--shadow);
|
|
}}
|
|
|
|
.pin-input {{
|
|
background: var(--bg-tertiary);
|
|
border: 2px solid #666;
|
|
color: var(--text-primary);
|
|
padding: 15px;
|
|
font-size: 1.3em;
|
|
border-radius: 10px;
|
|
text-align: center;
|
|
width: 200px;
|
|
margin: 0 10px;
|
|
letter-spacing: 2px;
|
|
}}
|
|
|
|
.pin-input:focus {{
|
|
border-color: var(--text-accent);
|
|
outline: none;
|
|
box-shadow: 0 0 10px rgba(102, 255, 102, 0.3);
|
|
}}
|
|
|
|
.verify-btn {{
|
|
background: linear-gradient(135deg, #2196F3, #1976D2);
|
|
color: white;
|
|
border: none;
|
|
padding: 15px 30px;
|
|
font-size: 1.1em;
|
|
border-radius: 25px;
|
|
cursor: pointer;
|
|
margin: 0 10px;
|
|
transition: all 0.3s ease;
|
|
font-weight: bold;
|
|
}}
|
|
|
|
.verify-btn:hover {{
|
|
transform: translateY(-2px);
|
|
box-shadow: 0 6px 20px rgba(33, 150, 243, 0.4);
|
|
}}
|
|
|
|
.message {{
|
|
background: var(--bg-tertiary);
|
|
padding: 15px;
|
|
border-radius: 10px;
|
|
margin: 15px 0;
|
|
text-align: center;
|
|
}}
|
|
|
|
.success {{ border-left: 4px solid #4CAF50; }}
|
|
.error {{ border-left: 4px solid #f44336; }}
|
|
.info {{ border-left: 4px solid #2196F3; }}
|
|
|
|
.empty-state {{
|
|
text-align: center;
|
|
padding: 40px 20px;
|
|
color: var(--text-secondary);
|
|
font-style: italic;
|
|
}}
|
|
|
|
.back-link {{
|
|
color: var(--text-accent);
|
|
text-decoration: none;
|
|
margin-bottom: 20px;
|
|
display: inline-block;
|
|
font-weight: 500;
|
|
}}
|
|
|
|
.back-link:hover {{
|
|
text-decoration: underline;
|
|
}}
|
|
</style>
|
|
</head>
|
|
<body>
|
|
<a href="/player/{nickname}" class="back-link">← Back to {nickname}'s Profile</a>
|
|
|
|
<div class="header">
|
|
<h1>🐾 Team Builder</h1>
|
|
<p>Drag pets between Active and Storage to build your perfect team</p>
|
|
<p><strong>{nickname}</strong> | Active: {len(active_pets)} pets | Storage: {len(inactive_pets)} pets</p>
|
|
</div>
|
|
|
|
<div class="team-sections">
|
|
<div class="team-section">
|
|
<div class="section-header active-header">⭐ Active Team</div>
|
|
<div class="team-slots-container" id="team-slots-container">
|
|
<div class="team-slot" id="slot-1" data-position="1">
|
|
<div class="slot-number">1</div>
|
|
<div class="slot-content">{team_slots[0]}</div>
|
|
</div>
|
|
<div class="team-slot" id="slot-2" data-position="2">
|
|
<div class="slot-number">2</div>
|
|
<div class="slot-content">{team_slots[1]}</div>
|
|
</div>
|
|
<div class="team-slot" id="slot-3" data-position="3">
|
|
<div class="slot-number">3</div>
|
|
<div class="slot-content">{team_slots[2]}</div>
|
|
</div>
|
|
<div class="team-slot" id="slot-4" data-position="4">
|
|
<div class="slot-number">4</div>
|
|
<div class="slot-content">{team_slots[3]}</div>
|
|
</div>
|
|
<div class="team-slot" id="slot-5" data-position="5">
|
|
<div class="slot-number">5</div>
|
|
<div class="slot-content">{team_slots[4]}</div>
|
|
</div>
|
|
<div class="team-slot" id="slot-6" data-position="6">
|
|
<div class="slot-number">6</div>
|
|
<div class="slot-content">{team_slots[5]}</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="team-section">
|
|
<div class="section-header storage-header">📦 Storage</div>
|
|
<div class="pets-container" id="storage-container">
|
|
{storage_cards}
|
|
</div>
|
|
<div class="drop-zone {('has-pets' if inactive_pets else '')}" id="storage-drop">
|
|
Drop pets here to store them
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="controls">
|
|
<button class="save-btn" id="save-btn" onclick="saveTeam()">🔒 Save Team Changes</button>
|
|
<a href="/player/{nickname}" class="back-btn">← Back to Profile</a>
|
|
<div style="margin-top: 15px; color: var(--text-secondary); font-size: 0.9em;">
|
|
Changes are saved securely with PIN verification via IRC
|
|
</div>
|
|
</div>
|
|
|
|
<div class="pin-section" id="pin-section">
|
|
<h3>🔐 PIN Verification Required</h3>
|
|
<p>A 6-digit PIN has been sent to you via IRC private message.</p>
|
|
<p>Enter the PIN below to confirm your team changes:</p>
|
|
<input type="text" class="pin-input" id="pin-input" placeholder="000000" maxlength="6">
|
|
<button class="verify-btn" onclick="verifyPin()">✅ Verify & Apply Changes</button>
|
|
<div id="message-area"></div>
|
|
</div>
|
|
|
|
<script>
|
|
let originalTeam = {{}};
|
|
let currentTeam = {{}};
|
|
let draggedElement = null;
|
|
|
|
// Test function to verify basic functionality
|
|
function runDragDropTest() {{
|
|
console.log('=== DRAG DROP TEST ===');
|
|
const petCards = document.querySelectorAll('.pet-card');
|
|
console.log('Pet cards found:', petCards.length);
|
|
|
|
petCards.forEach((card, index) => {{
|
|
console.log(`Card ${{index}}: ID=${{card.dataset.petId}}, draggable=${{card.draggable}}, active=${{card.dataset.active}}`);
|
|
}});
|
|
|
|
const containers = ['active-container', 'storage-container', 'active-drop', 'storage-drop'];
|
|
containers.forEach(id => {{
|
|
const element = document.getElementById(id);
|
|
console.log(`Container ${{id}}: exists=${{!!element}}`);
|
|
}});
|
|
|
|
// Test function availability (non-destructive)
|
|
if (petCards.length > 0) {{
|
|
console.log('Testing function availability...');
|
|
const testCard = petCards[0];
|
|
const petId = testCard.dataset.petId;
|
|
const isCurrentlyActive = currentTeam[petId];
|
|
|
|
console.log(`Test pet ${{petId}} is currently: ${{isCurrentlyActive ? 'active' : 'storage'}}`);
|
|
console.log('Move functions available:', {{
|
|
movePetToStorage: typeof movePetToStorage === 'function',
|
|
movePetToActive: typeof movePetToActive === 'function'
|
|
}});
|
|
console.log('✅ Test complete - no pets were moved');
|
|
}}
|
|
}}
|
|
|
|
// Add click-to-move as backup for drag issues
|
|
function addClickToMoveBackup() {{
|
|
document.querySelectorAll('.pet-card').forEach(card => {{
|
|
// Add double-click handler
|
|
card.addEventListener('dblclick', function() {{
|
|
const petId = this.dataset.petId;
|
|
const currentPosition = currentTeam[petId];
|
|
|
|
console.log(`Double-click: Moving pet ${{petId}} from ${{currentPosition ? `team slot ${{currentPosition}}` : 'storage'}}`);
|
|
|
|
if (currentPosition) {{
|
|
movePetToStorage(petId);
|
|
}} else {{
|
|
// Find first empty slot
|
|
for (let i = 1; i <= 6; i++) {{
|
|
const slot = document.getElementById(`slot-${{i}}`);
|
|
const slotContent = slot.querySelector('.slot-content');
|
|
if (slotContent.children.length === 0) {{
|
|
movePetToTeamSlot(petId, i);
|
|
return;
|
|
}}
|
|
}}
|
|
console.log('No empty slots available');
|
|
}}
|
|
}});
|
|
|
|
// Add visual hint
|
|
const hint = document.createElement('div');
|
|
hint.textContent = '💡 Double-click to move';
|
|
hint.style.cssText = 'position: absolute; top: 5px; left: 5px; background: rgba(0,0,0,0.7); color: white; padding: 2px 6px; border-radius: 3px; font-size: 10px; pointer-events: none; opacity: 0; transition: opacity 0.3s;';
|
|
card.style.position = 'relative';
|
|
card.appendChild(hint);
|
|
|
|
card.addEventListener('mouseenter', () => hint.style.opacity = '1');
|
|
card.addEventListener('mouseleave', () => hint.style.opacity = '0');
|
|
}});
|
|
}}
|
|
|
|
// Declare container variables once at the top level
|
|
const teamSlotsContainer = document.getElementById('team-slots-container');
|
|
const storageContainer = document.getElementById('storage-container');
|
|
const storageDrop = document.getElementById('storage-drop');
|
|
const teamSlots = Array.from({{length: 6}}, (_, i) => document.getElementById(`slot-${{i + 1}}`));
|
|
|
|
// Initialize team state with detailed debugging
|
|
console.log('=== TEAM STATE INITIALIZATION ===');
|
|
const allCards = document.querySelectorAll('.pet-card');
|
|
console.log(`Found ${{allCards.length}} pet cards total`);
|
|
console.log(`Team slots container:`, teamSlotsContainer);
|
|
console.log(`Storage container has ${{storageContainer.children.length}} pets initially`);
|
|
|
|
let teamPositions = {{}}; // Track pet positions in team slots
|
|
|
|
allCards.forEach((card, index) => {{
|
|
const petId = card.dataset.petId;
|
|
const isActive = card.dataset.active === 'true';
|
|
const teamOrder = card.dataset.teamOrder;
|
|
|
|
console.log(`Pet ${{index}}: ID=${{petId}}, data-active=${{card.dataset.active}}, isActive=${{isActive}}, team_order=${{teamOrder}}`);
|
|
|
|
if (isActive && teamOrder) {{
|
|
teamPositions[petId] = parseInt(teamOrder);
|
|
originalTeam[petId] = parseInt(teamOrder);
|
|
currentTeam[petId] = parseInt(teamOrder);
|
|
}} else {{
|
|
originalTeam[petId] = false;
|
|
currentTeam[petId] = false;
|
|
}}
|
|
}});
|
|
|
|
console.log('Team positions:', teamPositions);
|
|
console.log('Original team state:', originalTeam);
|
|
console.log('Current team state:', currentTeam);
|
|
|
|
// Completely rewritten drag and drop for slot system
|
|
function initializeDragAndDrop() {{
|
|
console.log('Initializing drag and drop...');
|
|
|
|
// Make all pet cards draggable
|
|
document.querySelectorAll('.pet-card').forEach(card => {{
|
|
card.draggable = true;
|
|
card.style.cursor = 'grab';
|
|
|
|
card.addEventListener('dragstart', function(e) {{
|
|
console.log('DRAGSTART: Pet ID', this.dataset.petId);
|
|
draggedElement = this;
|
|
this.style.opacity = '0.5';
|
|
this.style.cursor = 'grabbing';
|
|
|
|
// Check if dataTransfer exists (it won't in synthetic events)
|
|
if (e.dataTransfer) {{
|
|
e.dataTransfer.effectAllowed = 'move';
|
|
e.dataTransfer.setData('text/plain', this.dataset.petId);
|
|
}} else {{
|
|
console.log('Warning: dataTransfer is null (synthetic event)');
|
|
}}
|
|
}});
|
|
|
|
card.addEventListener('dragend', function(e) {{
|
|
console.log('DRAGEND');
|
|
this.style.opacity = '';
|
|
this.style.cursor = 'grab';
|
|
draggedElement = null;
|
|
// Clear all highlights
|
|
document.querySelectorAll('.drag-over').forEach(el => el.classList.remove('drag-over'));
|
|
}});
|
|
}});
|
|
|
|
// Set up team slot drop zones
|
|
teamSlots.forEach((slot, index) => {{
|
|
const position = index + 1;
|
|
|
|
slot.addEventListener('dragover', function(e) {{
|
|
e.preventDefault();
|
|
if (e.dataTransfer) {{
|
|
e.dataTransfer.dropEffect = 'move';
|
|
}}
|
|
}});
|
|
|
|
slot.addEventListener('dragenter', function(e) {{
|
|
e.preventDefault();
|
|
this.classList.add('drag-over');
|
|
console.log(`DRAGENTER: Team slot ${{position}}`);
|
|
}});
|
|
|
|
slot.addEventListener('dragleave', function(e) {{
|
|
if (!this.contains(e.relatedTarget)) {{
|
|
this.classList.remove('drag-over');
|
|
}}
|
|
}});
|
|
|
|
slot.addEventListener('drop', function(e) {{
|
|
e.preventDefault();
|
|
console.log(`DROP: Team slot ${{position}}`);
|
|
this.classList.remove('drag-over');
|
|
|
|
if (draggedElement) {{
|
|
const petId = draggedElement.dataset.petId;
|
|
console.log(`Moving pet ${{petId}} to team slot ${{position}}`);
|
|
movePetToTeamSlot(petId, position);
|
|
}}
|
|
}});
|
|
}});
|
|
|
|
// Set up storage drop zones
|
|
[storageContainer, storageDrop].forEach(zone => {{
|
|
if (zone) {{
|
|
zone.addEventListener('dragover', function(e) {{
|
|
e.preventDefault();
|
|
if (e.dataTransfer) {{
|
|
e.dataTransfer.dropEffect = 'move';
|
|
}}
|
|
}});
|
|
|
|
zone.addEventListener('dragenter', function(e) {{
|
|
e.preventDefault();
|
|
this.classList.add('drag-over');
|
|
console.log('DRAGENTER: Storage zone');
|
|
}});
|
|
|
|
zone.addEventListener('dragleave', function(e) {{
|
|
if (!this.contains(e.relatedTarget)) {{
|
|
this.classList.remove('drag-over');
|
|
}}
|
|
}});
|
|
|
|
zone.addEventListener('drop', function(e) {{
|
|
e.preventDefault();
|
|
console.log('DROP: Storage zone');
|
|
this.classList.remove('drag-over');
|
|
|
|
if (draggedElement) {{
|
|
const petId = draggedElement.dataset.petId;
|
|
console.log('Moving pet', petId, 'to storage');
|
|
movePetToStorage(petId);
|
|
}}
|
|
}});
|
|
}}
|
|
}});
|
|
|
|
console.log('Drag and drop initialization complete');
|
|
}}
|
|
|
|
function movePetToTeamSlot(petId, position) {{
|
|
console.log(`movePetToTeamSlot called for pet ${{petId}}, position ${{position}}`);
|
|
const card = document.querySelector(`[data-pet-id="${{petId}}"]`);
|
|
if (!card) {{
|
|
console.log(`No card found for pet ${{petId}}`);
|
|
return;
|
|
}}
|
|
|
|
const slot = document.getElementById(`slot-${{position}}`);
|
|
if (!slot) {{
|
|
console.log(`No slot found for position ${{position}}`);
|
|
return;
|
|
}}
|
|
|
|
const slotContent = slot.querySelector('.slot-content');
|
|
|
|
// Check if slot is already occupied
|
|
if (slotContent.children.length > 0) {{
|
|
console.log(`Slot ${{position}} is already occupied, swapping pets`);
|
|
const existingCard = slotContent.querySelector('.pet-card');
|
|
if (existingCard) {{
|
|
const existingPetId = existingCard.dataset.petId;
|
|
// Move existing pet to storage
|
|
movePetToStorage(existingPetId);
|
|
}}
|
|
}}
|
|
|
|
// Update state
|
|
currentTeam[petId] = position;
|
|
|
|
// Move DOM element
|
|
card.classList.remove('storage');
|
|
card.classList.add('active');
|
|
card.dataset.active = 'true';
|
|
card.dataset.teamOrder = position;
|
|
card.querySelector('.status-badge').textContent = 'Active';
|
|
slotContent.appendChild(card);
|
|
|
|
// Update interface
|
|
updateSaveButton();
|
|
|
|
console.log(`Pet moved to team slot ${{position}} successfully`);
|
|
}}
|
|
|
|
function movePetToStorage(petId) {{
|
|
console.log(`movePetToStorage called for pet ${{petId}}`);
|
|
const card = document.querySelector(`[data-pet-id="${{petId}}"]`);
|
|
if (!card) {{
|
|
console.log(`No card found for pet ${{petId}}`);
|
|
return;
|
|
}}
|
|
|
|
const currentPosition = currentTeam[petId];
|
|
|
|
console.log(`Pet ${{petId}} current state: ${{currentPosition ? `team slot ${{currentPosition}}` : 'storage'}}`);
|
|
|
|
if (currentPosition) {{
|
|
console.log(`Moving pet ${{petId}} to storage...`);
|
|
|
|
// Update state
|
|
currentTeam[petId] = false;
|
|
|
|
// Move DOM element
|
|
card.classList.remove('active');
|
|
card.classList.add('storage');
|
|
card.dataset.active = 'false';
|
|
card.dataset.teamOrder = '';
|
|
card.querySelector('.status-badge').textContent = 'Storage';
|
|
storageContainer.appendChild(card);
|
|
|
|
// Update interface
|
|
updateSaveButton();
|
|
updateDropZoneVisibility();
|
|
|
|
console.log('Pet moved to storage successfully');
|
|
}} else {{
|
|
console.log(`Pet ${{petId}} is already in storage, no move needed`);
|
|
}}
|
|
}}
|
|
|
|
|
|
function updateDropZoneVisibility() {{
|
|
// Update storage drop zone visibility
|
|
if (storageContainer && storageContainer.children.length > 0) {{
|
|
if (storageDrop) storageDrop.classList.add('has-pets');
|
|
}} else {{
|
|
if (storageDrop) storageDrop.classList.remove('has-pets');
|
|
}}
|
|
|
|
console.log('Drop zone visibility updated:', {{
|
|
storageContainerPets: storageContainer ? storageContainer.children.length : 0
|
|
}});
|
|
}}
|
|
|
|
function updateSaveButton() {{
|
|
const hasChanges = JSON.stringify(originalTeam) !== JSON.stringify(currentTeam);
|
|
const saveBtn = document.getElementById('save-btn');
|
|
saveBtn.disabled = !hasChanges;
|
|
|
|
if (hasChanges) {{
|
|
saveBtn.textContent = '🔒 Save Team Changes';
|
|
}} else {{
|
|
saveBtn.textContent = '✅ No Changes';
|
|
}}
|
|
}}
|
|
|
|
async function saveTeam() {{
|
|
const changes = {{}};
|
|
for (const petId in currentTeam) {{
|
|
if (currentTeam[petId] !== originalTeam[petId]) {{
|
|
changes[petId] = currentTeam[petId];
|
|
}}
|
|
}}
|
|
|
|
if (Object.keys(changes).length === 0) {{
|
|
showMessage('No changes to save!', 'info');
|
|
return;
|
|
}}
|
|
|
|
try {{
|
|
const response = await fetch('/teambuilder/{nickname}/save', {{
|
|
method: 'POST',
|
|
headers: {{ 'Content-Type': 'application/json' }},
|
|
body: JSON.stringify(changes)
|
|
}});
|
|
|
|
const result = await response.json();
|
|
|
|
if (result.success) {{
|
|
showMessage('PIN sent to IRC! Check your private messages.', 'success');
|
|
document.getElementById('pin-section').style.display = 'block';
|
|
document.getElementById('pin-section').scrollIntoView({{ behavior: 'smooth' }});
|
|
}} else {{
|
|
showMessage('Error: ' + result.error, 'error');
|
|
}}
|
|
}} catch (error) {{
|
|
showMessage('Network error: ' + error.message, 'error');
|
|
}}
|
|
}}
|
|
|
|
async function verifyPin() {{
|
|
const pin = document.getElementById('pin-input').value.trim();
|
|
if (pin.length !== 6 || !/^\\d{{6}}$/.test(pin)) {{
|
|
showMessage('Please enter a valid 6-digit PIN', 'error');
|
|
return;
|
|
}}
|
|
|
|
try {{
|
|
const response = await fetch('/teambuilder/{nickname}/verify', {{
|
|
method: 'POST',
|
|
headers: {{ 'Content-Type': 'application/json' }},
|
|
body: JSON.stringify({{ pin: pin }})
|
|
}});
|
|
|
|
const result = await response.json();
|
|
|
|
if (result.success) {{
|
|
showMessage('Team changes applied successfully! 🎉', 'success');
|
|
// Update original team state
|
|
originalTeam = {{...currentTeam}};
|
|
updateSaveButton();
|
|
document.getElementById('pin-section').style.display = 'none';
|
|
document.getElementById('pin-input').value = '';
|
|
|
|
// Visual celebration
|
|
document.querySelectorAll('.pet-card').forEach(card => {{
|
|
card.style.animation = 'bounce 0.6s ease-in-out';
|
|
}});
|
|
setTimeout(() => {{
|
|
document.querySelectorAll('.pet-card').forEach(card => {{
|
|
card.style.animation = '';
|
|
}});
|
|
}}, 600);
|
|
}} else {{
|
|
showMessage('Verification failed: ' + result.error, 'error');
|
|
}}
|
|
}} catch (error) {{
|
|
showMessage('Network error: ' + error.message, 'error');
|
|
}}
|
|
}}
|
|
|
|
function showMessage(text, type) {{
|
|
const messageArea = document.getElementById('message-area');
|
|
messageArea.innerHTML = `<div class="message ${{type}}">${{text}}</div>`;
|
|
|
|
// Auto-hide success messages
|
|
if (type === 'success') {{
|
|
setTimeout(() => {{
|
|
messageArea.innerHTML = '';
|
|
}}, 5000);
|
|
}}
|
|
}}
|
|
|
|
// Add keyboard support for PIN input
|
|
document.getElementById('pin-input').addEventListener('keypress', function(e) {{
|
|
if (e.key === 'Enter') {{
|
|
verifyPin();
|
|
}}
|
|
}});
|
|
|
|
// Initialize interface with debugging
|
|
console.log('Starting initialization...');
|
|
|
|
// Debug initial state (using previously declared variables)
|
|
console.log('Initial state:', {{
|
|
activePets: activeContainer.children.length,
|
|
storagePets: storageContainer.children.length
|
|
}});
|
|
|
|
initializeDragAndDrop();
|
|
addClickToMoveBackup(); // Add double-click as backup
|
|
updateSaveButton();
|
|
|
|
// Delay updateDropZoneVisibility to ensure DOM is fully settled
|
|
console.log('Before updateDropZoneVisibility...');
|
|
setTimeout(() => {{
|
|
console.log('Running delayed updateDropZoneVisibility...');
|
|
updateDropZoneVisibility();
|
|
}}, 100);
|
|
|
|
console.log('Initialization complete.');
|
|
|
|
// Test available via manual button only - no automatic execution
|
|
|
|
// Add test button for manual debugging
|
|
const testButton = document.createElement('button');
|
|
testButton.textContent = '🧪 Test Functions';
|
|
testButton.style.cssText = 'position: fixed; top: 10px; right: 10px; z-index: 9999; padding: 10px; background: #ff6b6b; color: white; border: none; border-radius: 5px; cursor: pointer;';
|
|
testButton.onclick = runDragDropTest;
|
|
document.body.appendChild(testButton);
|
|
|
|
// Add instruction for backup method
|
|
const instruction = document.createElement('div');
|
|
instruction.innerHTML = '💡 <strong>Backup:</strong> Double-click any pet to move it between Active/Storage';
|
|
instruction.style.cssText = 'position: fixed; bottom: 20px; right: 20px; background: rgba(0,0,0,0.8); color: white; padding: 10px; border-radius: 5px; font-size: 12px; z-index: 9999; max-width: 250px;';
|
|
document.body.appendChild(instruction);
|
|
|
|
// Add bounce animation
|
|
const style = document.createElement('style');
|
|
style.textContent = `
|
|
@keyframes bounce {{
|
|
0%, 20%, 60%, 100% {{ transform: translateY(0); }}
|
|
40% {{ transform: translateY(-10px); }}
|
|
80% {{ transform: translateY(-5px); }}
|
|
}}
|
|
`;
|
|
document.head.appendChild(style);
|
|
|
|
console.log('🐾 Team Builder initialized successfully!');
|
|
</script>
|
|
</body>
|
|
</html>"""
|
|
|
|
# Generate storage pets HTML first
|
|
storage_pets_html = ""
|
|
for pet in inactive_pets:
|
|
storage_pets_html += make_pet_card(pet, False)
|
|
|
|
# Generate active pets HTML for team slots
|
|
active_pets_html = ""
|
|
for pet in active_pets:
|
|
if pet.get('team_order'):
|
|
active_pets_html += make_pet_card(pet, True)
|
|
|
|
# Create content using string concatenation instead of f-strings to avoid CSS brace issues
|
|
team_builder_content = """
|
|
<style>
|
|
/* Team Builder Specific CSS */
|
|
.team-builder-container {
|
|
max-width: 1200px;
|
|
margin: 0 auto;
|
|
padding: 20px;
|
|
}
|
|
|
|
.header {
|
|
text-align: center;
|
|
margin-bottom: 30px;
|
|
}
|
|
|
|
.header h1 {
|
|
color: var(--text-accent);
|
|
font-size: 2.5em;
|
|
margin: 0;
|
|
}
|
|
|
|
.team-sections {
|
|
margin-top: 30px;
|
|
}
|
|
|
|
.section {
|
|
margin-bottom: 40px;
|
|
}
|
|
|
|
.section h2 {
|
|
color: var(--text-accent);
|
|
border-bottom: 2px solid var(--accent-blue);
|
|
padding-bottom: 10px;
|
|
margin-bottom: 20px;
|
|
}
|
|
|
|
.team-slots-container {
|
|
display: grid;
|
|
grid-template-columns: repeat(3, 1fr);
|
|
grid-template-rows: repeat(2, 1fr);
|
|
gap: 15px;
|
|
margin-bottom: 30px;
|
|
justify-content: center;
|
|
}
|
|
|
|
.team-slot {
|
|
background: var(--bg-secondary);
|
|
border: 2px dashed var(--border-color);
|
|
border-radius: 12px;
|
|
min-height: 200px;
|
|
display: flex;
|
|
flex-direction: column;
|
|
justify-content: center;
|
|
align-items: center;
|
|
text-align: center;
|
|
position: relative;
|
|
transition: all 0.3s ease;
|
|
}
|
|
|
|
.team-slot:hover {
|
|
border-color: var(--accent-blue);
|
|
background: var(--hover-color);
|
|
}
|
|
|
|
.team-slot.drag-over {
|
|
border-color: var(--text-accent);
|
|
background: var(--hover-color);
|
|
transform: scale(1.02);
|
|
}
|
|
|
|
.slot-header {
|
|
position: absolute;
|
|
top: 10px;
|
|
left: 50%;
|
|
transform: translateX(-50%);
|
|
font-weight: bold;
|
|
color: var(--text-accent);
|
|
font-size: 1.1em;
|
|
}
|
|
|
|
.slot-content {
|
|
width: 100%;
|
|
height: 100%;
|
|
display: flex;
|
|
justify-content: center;
|
|
align-items: center;
|
|
}
|
|
|
|
.empty-slot {
|
|
color: var(--text-secondary);
|
|
font-style: italic;
|
|
text-align: center;
|
|
}
|
|
|
|
.storage-container {
|
|
display: grid;
|
|
grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
|
|
gap: 20px;
|
|
margin-top: 20px;
|
|
}
|
|
|
|
.pet-card {
|
|
background: var(--bg-secondary);
|
|
border: 1px solid var(--border-color);
|
|
border-radius: 12px;
|
|
padding: 15px;
|
|
cursor: move;
|
|
user-select: none;
|
|
transition: all 0.3s ease;
|
|
position: relative;
|
|
}
|
|
|
|
.pet-card:hover {
|
|
transform: translateY(-2px);
|
|
box-shadow: 0 4px 15px rgba(0,0,0,0.2);
|
|
border-color: var(--accent-blue);
|
|
}
|
|
|
|
.pet-card.active {
|
|
border-color: var(--text-accent);
|
|
background: var(--bg-tertiary);
|
|
}
|
|
|
|
.pet-card.storage {
|
|
border-color: var(--border-color);
|
|
}
|
|
|
|
.pet-header {
|
|
display: flex;
|
|
justify-content: space-between;
|
|
align-items: center;
|
|
margin-bottom: 10px;
|
|
}
|
|
|
|
.pet-name {
|
|
color: var(--text-primary);
|
|
margin: 0;
|
|
font-size: 1.2em;
|
|
}
|
|
|
|
.status-badge {
|
|
background: var(--accent-blue);
|
|
color: white;
|
|
padding: 4px 8px;
|
|
border-radius: 6px;
|
|
font-size: 0.8em;
|
|
font-weight: bold;
|
|
}
|
|
|
|
.pet-card.active .status-badge {
|
|
background: var(--text-accent);
|
|
}
|
|
|
|
.pet-species, .pet-type {
|
|
color: var(--text-secondary);
|
|
margin: 5px 0;
|
|
}
|
|
|
|
.hp-section {
|
|
margin: 10px 0;
|
|
}
|
|
|
|
.hp-label {
|
|
font-size: 0.9em;
|
|
color: var(--text-secondary);
|
|
}
|
|
|
|
.hp-bar {
|
|
background: var(--bg-primary);
|
|
height: 8px;
|
|
border-radius: 4px;
|
|
overflow: hidden;
|
|
margin-top: 4px;
|
|
}
|
|
|
|
.hp-fill {
|
|
height: 100%;
|
|
transition: width 0.3s ease;
|
|
}
|
|
|
|
.stats-grid {
|
|
display: grid;
|
|
grid-template-columns: repeat(4, 1fr);
|
|
gap: 8px;
|
|
margin-top: 10px;
|
|
}
|
|
|
|
.stat {
|
|
text-align: center;
|
|
}
|
|
|
|
.stat-label {
|
|
font-size: 0.7em;
|
|
color: var(--text-secondary);
|
|
display: block;
|
|
}
|
|
|
|
.stat-value {
|
|
font-weight: bold;
|
|
color: var(--text-primary);
|
|
}
|
|
|
|
.controls {
|
|
text-align: center;
|
|
margin: 30px 0;
|
|
}
|
|
|
|
.save-btn {
|
|
background: var(--text-accent);
|
|
color: var(--bg-primary);
|
|
border: none;
|
|
padding: 12px 30px;
|
|
border-radius: 8px;
|
|
font-size: 1.1em;
|
|
font-weight: bold;
|
|
cursor: pointer;
|
|
transition: all 0.3s ease;
|
|
margin-right: 15px;
|
|
}
|
|
|
|
.save-btn:hover {
|
|
transform: translateY(-2px);
|
|
box-shadow: 0 4px 15px rgba(102, 255, 102, 0.3);
|
|
}
|
|
|
|
.save-btn:disabled {
|
|
background: var(--text-secondary);
|
|
cursor: not-allowed;
|
|
}
|
|
|
|
.back-btn {
|
|
background: var(--accent-blue);
|
|
color: white;
|
|
padding: 12px 20px;
|
|
border-radius: 8px;
|
|
text-decoration: none;
|
|
display: inline-block;
|
|
transition: all 0.3s ease;
|
|
}
|
|
|
|
.back-btn:hover {
|
|
transform: translateY(-2px);
|
|
box-shadow: 0 4px 15px rgba(74, 171, 247, 0.3);
|
|
}
|
|
|
|
.pin-section {
|
|
background: var(--bg-secondary);
|
|
border-radius: 12px;
|
|
padding: 30px;
|
|
margin: 20px 0;
|
|
text-align: center;
|
|
display: none;
|
|
}
|
|
|
|
.pin-input {
|
|
background: var(--bg-tertiary);
|
|
border: 2px solid var(--border-color);
|
|
border-radius: 8px;
|
|
padding: 15px;
|
|
font-size: 1.5em;
|
|
color: var(--text-primary);
|
|
text-align: center;
|
|
width: 200px;
|
|
margin: 15px;
|
|
}
|
|
|
|
.verify-btn {
|
|
background: var(--success-color);
|
|
color: white;
|
|
border: none;
|
|
padding: 12px 25px;
|
|
border-radius: 8px;
|
|
font-size: 1.1em;
|
|
cursor: pointer;
|
|
transition: all 0.3s ease;
|
|
}
|
|
|
|
.verify-btn:hover {
|
|
transform: translateY(-2px);
|
|
box-shadow: 0 4px 15px rgba(81, 207, 102, 0.3);
|
|
}
|
|
|
|
.message {
|
|
padding: 15px;
|
|
border-radius: 8px;
|
|
margin: 15px 0;
|
|
}
|
|
|
|
.message.success {
|
|
background: var(--success-color);
|
|
color: white;
|
|
}
|
|
|
|
.message.error {
|
|
background: var(--error-color);
|
|
color: white;
|
|
}
|
|
|
|
.drag-hint {
|
|
position: fixed;
|
|
bottom: 20px;
|
|
right: 20px;
|
|
background: rgba(0,0,0,0.8);
|
|
color: white;
|
|
padding: 15px;
|
|
border-radius: 8px;
|
|
font-size: 12px;
|
|
z-index: 9999;
|
|
max-width: 250px;
|
|
}
|
|
|
|
@keyframes bounce {
|
|
0%, 20%, 60%, 100% { transform: translateY(0); }
|
|
40% { transform: translateY(-10px); }
|
|
80% { transform: translateY(-5px); }
|
|
}
|
|
</style>
|
|
|
|
<div class="team-builder-container">
|
|
<div class="header">
|
|
<h1>🐾 Team Builder</h1>
|
|
<p>Drag pets between Active Team and Storage. Double-click as backup.</p>
|
|
</div>
|
|
|
|
<div class="team-sections">
|
|
<div class="section">
|
|
<h2>⚔️ Active Team (1-6 pets)</h2>
|
|
<div class="team-slots-container" id="team-slots-container">
|
|
<div class="team-slot" id="slot-1">
|
|
<div class="slot-header">Slot 1 (Leader)</div>
|
|
<div class="slot-content">
|
|
<div class="empty-slot">Drop pet here</div>
|
|
</div>
|
|
</div>
|
|
<div class="team-slot" id="slot-2">
|
|
<div class="slot-header">Slot 2</div>
|
|
<div class="slot-content">
|
|
<div class="empty-slot">Drop pet here</div>
|
|
</div>
|
|
</div>
|
|
<div class="team-slot" id="slot-3">
|
|
<div class="slot-header">Slot 3</div>
|
|
<div class="slot-content">
|
|
<div class="empty-slot">Drop pet here</div>
|
|
</div>
|
|
</div>
|
|
<div class="team-slot" id="slot-4">
|
|
<div class="slot-header">Slot 4</div>
|
|
<div class="slot-content">
|
|
<div class="empty-slot">Drop pet here</div>
|
|
</div>
|
|
</div>
|
|
<div class="team-slot" id="slot-5">
|
|
<div class="slot-header">Slot 5</div>
|
|
<div class="slot-content">
|
|
<div class="empty-slot">Drop pet here</div>
|
|
</div>
|
|
</div>
|
|
<div class="team-slot" id="slot-6">
|
|
<div class="slot-header">Slot 6</div>
|
|
<div class="slot-content">
|
|
<div class="empty-slot">Drop pet here</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="section">
|
|
<h2>📦 Storage</h2>
|
|
<div class="storage-container" id="storage-container">
|
|
""" + storage_pets_html + active_pets_html + """
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="controls">
|
|
<button class="save-btn" id="save-btn" onclick="saveTeam()">🔒 Save Team Changes</button>
|
|
<a href="/player/""" + nickname + """" class="back-btn">← Back to Profile</a>
|
|
<div style="margin-top: 15px; color: var(--text-secondary); font-size: 0.9em;">
|
|
Changes are saved securely with PIN verification via IRC
|
|
</div>
|
|
</div>
|
|
|
|
<div class="pin-section" id="pin-section">
|
|
<h3>🔐 PIN Verification Required</h3>
|
|
<p>A 6-digit PIN has been sent to you via IRC private message.</p>
|
|
<p>Enter the PIN below to confirm your team changes:</p>
|
|
<input type="text" class="pin-input" id="pin-input" placeholder="000000" maxlength="6">
|
|
<button class="verify-btn" onclick="verifyPin()">✅ Verify & Apply Changes</button>
|
|
<div id="message-area"></div>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="drag-hint">
|
|
💡 <strong>How to use:</strong><br>
|
|
• Drag pets to team slots<br>
|
|
• Double-click to move pets<br>
|
|
• Empty slots show placeholders
|
|
</div>
|
|
|
|
<script>
|
|
let originalTeam = {};
|
|
let currentTeam = {};
|
|
let draggedElement = null;
|
|
|
|
// Initialize when DOM is ready
|
|
document.addEventListener('DOMContentLoaded', function() {
|
|
console.log('Team Builder: DOM loaded, initializing...');
|
|
initializeTeamBuilder();
|
|
});
|
|
|
|
function initializeTeamBuilder() {
|
|
console.log('Team Builder: Starting initialization...');
|
|
|
|
// Initialize team state
|
|
const allCards = document.querySelectorAll('.pet-card');
|
|
console.log(`Found ${allCards.length} pet cards`);
|
|
|
|
allCards.forEach(card => {
|
|
const petId = card.dataset.petId;
|
|
const isActive = card.dataset.active === 'true';
|
|
const teamOrder = card.dataset.teamOrder;
|
|
|
|
if (isActive && teamOrder) {
|
|
originalTeam[petId] = parseInt(teamOrder);
|
|
currentTeam[petId] = parseInt(teamOrder);
|
|
|
|
// Move to correct slot
|
|
const slot = document.getElementById(`slot-${teamOrder}`);
|
|
if (slot) {
|
|
const slotContent = slot.querySelector('.slot-content');
|
|
slotContent.innerHTML = '';
|
|
slotContent.appendChild(card);
|
|
}
|
|
} else {
|
|
originalTeam[petId] = false;
|
|
currentTeam[petId] = false;
|
|
}
|
|
});
|
|
|
|
console.log('Team state initialized:', originalTeam);
|
|
|
|
// Initialize drag and drop
|
|
initializeDragAndDrop();
|
|
|
|
// Initialize double-click backup
|
|
initializeDoubleClick();
|
|
|
|
// Update save button
|
|
updateSaveButton();
|
|
|
|
console.log('Team Builder: Initialization complete');
|
|
}
|
|
|
|
function initializeDragAndDrop() {
|
|
console.log('Initializing drag and drop...');
|
|
|
|
// Make pet cards draggable
|
|
document.querySelectorAll('.pet-card').forEach(card => {
|
|
card.draggable = true;
|
|
|
|
card.addEventListener('dragstart', function(e) {
|
|
draggedElement = this;
|
|
this.style.opacity = '0.5';
|
|
console.log('Drag started:', this.dataset.petId);
|
|
});
|
|
|
|
card.addEventListener('dragend', function(e) {
|
|
this.style.opacity = '';
|
|
draggedElement = null;
|
|
document.querySelectorAll('.drag-over').forEach(el => el.classList.remove('drag-over'));
|
|
});
|
|
});
|
|
|
|
// Set up team slot drop zones
|
|
for (let i = 1; i <= 6; i++) {
|
|
const slot = document.getElementById(`slot-${i}`);
|
|
if (slot) {
|
|
slot.addEventListener('dragover', e => e.preventDefault());
|
|
slot.addEventListener('dragenter', function(e) {
|
|
e.preventDefault();
|
|
this.classList.add('drag-over');
|
|
});
|
|
slot.addEventListener('dragleave', function(e) {
|
|
if (!this.contains(e.relatedTarget)) {
|
|
this.classList.remove('drag-over');
|
|
}
|
|
});
|
|
slot.addEventListener('drop', function(e) {
|
|
e.preventDefault();
|
|
this.classList.remove('drag-over');
|
|
if (draggedElement) {
|
|
movePetToTeamSlot(draggedElement.dataset.petId, i);
|
|
}
|
|
});
|
|
}
|
|
}
|
|
|
|
// Set up storage drop zone
|
|
const storageContainer = document.getElementById('storage-container');
|
|
if (storageContainer) {
|
|
storageContainer.addEventListener('dragover', e => e.preventDefault());
|
|
storageContainer.addEventListener('dragenter', function(e) {
|
|
e.preventDefault();
|
|
this.classList.add('drag-over');
|
|
});
|
|
storageContainer.addEventListener('dragleave', function(e) {
|
|
if (!this.contains(e.relatedTarget)) {
|
|
this.classList.remove('drag-over');
|
|
}
|
|
});
|
|
storageContainer.addEventListener('drop', function(e) {
|
|
e.preventDefault();
|
|
this.classList.remove('drag-over');
|
|
if (draggedElement) {
|
|
movePetToStorage(draggedElement.dataset.petId);
|
|
}
|
|
});
|
|
}
|
|
}
|
|
|
|
function initializeDoubleClick() {
|
|
document.querySelectorAll('.pet-card').forEach(card => {
|
|
card.addEventListener('dblclick', function() {
|
|
const petId = this.dataset.petId;
|
|
const currentPosition = currentTeam[petId];
|
|
|
|
if (currentPosition) {
|
|
// Move to storage
|
|
movePetToStorage(petId);
|
|
} else {
|
|
// Find first empty slot
|
|
for (let i = 1; i <= 6; i++) {
|
|
const slot = document.getElementById(`slot-${i}`);
|
|
const slotContent = slot.querySelector('.slot-content');
|
|
if (slotContent.children.length === 0 || slotContent.querySelector('.empty-slot')) {
|
|
movePetToTeamSlot(petId, i);
|
|
return;
|
|
}
|
|
}
|
|
console.log('No empty slots available');
|
|
}
|
|
});
|
|
});
|
|
}
|
|
|
|
function movePetToTeamSlot(petId, position) {
|
|
console.log(`Moving pet ${petId} to slot ${position}`);
|
|
const card = document.querySelector(`[data-pet-id="${petId}"]`);
|
|
const slot = document.getElementById(`slot-${position}`);
|
|
|
|
if (!card || !slot) return;
|
|
|
|
const slotContent = slot.querySelector('.slot-content');
|
|
|
|
// If slot is occupied, move existing pet to storage
|
|
const existingCard = slotContent.querySelector('.pet-card');
|
|
if (existingCard) {
|
|
movePetToStorage(existingCard.dataset.petId);
|
|
}
|
|
|
|
// Update state
|
|
currentTeam[petId] = position;
|
|
|
|
// Update card
|
|
card.classList.remove('storage');
|
|
card.classList.add('active');
|
|
card.dataset.active = 'true';
|
|
card.dataset.teamOrder = position;
|
|
card.querySelector('.status-badge').textContent = 'Active';
|
|
|
|
// Move to slot
|
|
slotContent.innerHTML = '';
|
|
slotContent.appendChild(card);
|
|
|
|
updateSaveButton();
|
|
}
|
|
|
|
function movePetToStorage(petId) {
|
|
console.log(`Moving pet ${petId} to storage`);
|
|
const card = document.querySelector(`[data-pet-id="${petId}"]`);
|
|
const storageContainer = document.getElementById('storage-container');
|
|
|
|
if (!card || !storageContainer) return;
|
|
|
|
// Update state
|
|
currentTeam[petId] = false;
|
|
|
|
// Update card
|
|
card.classList.remove('active');
|
|
card.classList.add('storage');
|
|
card.dataset.active = 'false';
|
|
card.dataset.teamOrder = '';
|
|
card.querySelector('.status-badge').textContent = 'Storage';
|
|
|
|
// Move to storage
|
|
storageContainer.appendChild(card);
|
|
|
|
updateSaveButton();
|
|
}
|
|
|
|
function updateSaveButton() {
|
|
const saveBtn = document.getElementById('save-btn');
|
|
const hasChanges = JSON.stringify(originalTeam) !== JSON.stringify(currentTeam);
|
|
saveBtn.disabled = !hasChanges;
|
|
saveBtn.textContent = hasChanges ? '🔒 Save Team Changes' : '✅ No Changes';
|
|
}
|
|
|
|
async function saveTeam() {
|
|
const teamData = {};
|
|
Object.entries(currentTeam).forEach(([petId, position]) => {
|
|
teamData[petId] = position;
|
|
});
|
|
|
|
try {
|
|
const response = await fetch('/teambuilder/""" + nickname + """/save', {
|
|
method: 'POST',
|
|
headers: { 'Content-Type': 'application/json' },
|
|
body: JSON.stringify(teamData)
|
|
});
|
|
|
|
const result = await response.json();
|
|
if (result.success) {
|
|
document.getElementById('pin-section').style.display = 'block';
|
|
showMessage('PIN sent to IRC! Check your private messages.', 'success');
|
|
} else {
|
|
showMessage('Error: ' + result.error, 'error');
|
|
}
|
|
} catch (error) {
|
|
showMessage('Network error: ' + error.message, 'error');
|
|
}
|
|
}
|
|
|
|
async function verifyPin() {
|
|
const pin = document.getElementById('pin-input').value;
|
|
if (!pin || pin.length !== 6) {
|
|
showMessage('Please enter a 6-digit PIN', 'error');
|
|
return;
|
|
}
|
|
|
|
try {
|
|
const response = await fetch('/teambuilder/""" + nickname + """/verify', {
|
|
method: 'POST',
|
|
headers: { 'Content-Type': 'application/json' },
|
|
body: JSON.stringify({ pin: pin })
|
|
});
|
|
|
|
const result = await response.json();
|
|
if (result.success) {
|
|
showMessage('Team saved successfully!', 'success');
|
|
originalTeam = { ...currentTeam };
|
|
updateSaveButton();
|
|
document.getElementById('pin-section').style.display = 'none';
|
|
document.getElementById('pin-input').value = '';
|
|
|
|
// Celebration animation
|
|
document.querySelectorAll('.pet-card').forEach(card => {
|
|
card.style.animation = 'bounce 0.6s ease-in-out';
|
|
});
|
|
setTimeout(() => {
|
|
document.querySelectorAll('.pet-card').forEach(card => {
|
|
card.style.animation = '';
|
|
});
|
|
}, 600);
|
|
} else {
|
|
showMessage('Verification failed: ' + result.error, 'error');
|
|
}
|
|
} catch (error) {
|
|
showMessage('Network error: ' + error.message, 'error');
|
|
}
|
|
}
|
|
|
|
function showMessage(text, type) {
|
|
const messageArea = document.getElementById('message-area');
|
|
messageArea.innerHTML = `<div class="message ${type}">${text}</div>`;
|
|
|
|
if (type === 'success') {
|
|
setTimeout(() => {
|
|
messageArea.innerHTML = '';
|
|
}, 5000);
|
|
}
|
|
}
|
|
|
|
// PIN input keyboard support
|
|
document.getElementById('pin-input').addEventListener('keypress', function(e) {
|
|
if (e.key === 'Enter') {
|
|
verifyPin();
|
|
}
|
|
});
|
|
</script>
|
|
"""
|
|
|
|
# Get the unified template
|
|
html_content = self.get_page_template(f"Team Builder - {nickname}", team_builder_content, "")
|
|
|
|
self.send_response(200)
|
|
self.send_header('Content-type', 'text/html')
|
|
self.end_headers()
|
|
self.wfile.write(html_content.encode())
|
|
|
|
def handle_team_save(self, nickname):
|
|
"""Handle team save request and generate PIN"""
|
|
try:
|
|
# Get POST data
|
|
content_length = int(self.headers.get('Content-Length', 0))
|
|
if content_length == 0:
|
|
self.send_json_response({"success": False, "error": "No data provided"}, 400)
|
|
return
|
|
|
|
post_data = self.rfile.read(content_length).decode('utf-8')
|
|
|
|
# Parse JSON data
|
|
import json
|
|
try:
|
|
team_data = json.loads(post_data)
|
|
except json.JSONDecodeError:
|
|
self.send_json_response({"success": False, "error": "Invalid JSON data"}, 400)
|
|
return
|
|
|
|
# Run async operations
|
|
import asyncio
|
|
result = asyncio.run(self._handle_team_save_async(nickname, team_data))
|
|
|
|
if result["success"]:
|
|
self.send_json_response(result, 200)
|
|
else:
|
|
self.send_json_response(result, 400)
|
|
|
|
except Exception as e:
|
|
print(f"Error in handle_team_save: {e}")
|
|
self.send_json_response({"success": False, "error": "Internal server error"}, 500)
|
|
|
|
async def _handle_team_save_async(self, nickname, team_data):
|
|
"""Async handler for team save"""
|
|
try:
|
|
# Get player
|
|
player = await self.database.get_player(nickname)
|
|
if not player:
|
|
return {"success": False, "error": "Player not found"}
|
|
|
|
# Validate team composition
|
|
validation = await self.database.validate_team_composition(player["id"], team_data)
|
|
if not validation["valid"]:
|
|
return {"success": False, "error": validation["error"]}
|
|
|
|
# Create pending team change with PIN
|
|
import json
|
|
result = await self.database.create_pending_team_change(
|
|
player["id"],
|
|
json.dumps(team_data)
|
|
)
|
|
|
|
if result["success"]:
|
|
# Send PIN via IRC
|
|
self.send_pin_via_irc(nickname, result["pin_code"])
|
|
|
|
return {
|
|
"success": True,
|
|
"message": "PIN sent to your IRC private messages",
|
|
"expires_in_minutes": 10
|
|
}
|
|
else:
|
|
return result
|
|
|
|
except Exception as e:
|
|
print(f"Error in _handle_team_save_async: {e}")
|
|
return {"success": False, "error": str(e)}
|
|
|
|
def handle_team_verify(self, nickname):
|
|
"""Handle PIN verification and apply team changes"""
|
|
try:
|
|
# Get POST data
|
|
content_length = int(self.headers.get('Content-Length', 0))
|
|
if content_length == 0:
|
|
self.send_json_response({"success": False, "error": "No PIN provided"}, 400)
|
|
return
|
|
|
|
post_data = self.rfile.read(content_length).decode('utf-8')
|
|
|
|
# Parse JSON data
|
|
import json
|
|
try:
|
|
data = json.loads(post_data)
|
|
pin_code = data.get("pin", "").strip()
|
|
except (json.JSONDecodeError, AttributeError):
|
|
self.send_json_response({"success": False, "error": "Invalid data format"}, 400)
|
|
return
|
|
|
|
if not pin_code:
|
|
self.send_json_response({"success": False, "error": "PIN code is required"}, 400)
|
|
return
|
|
|
|
# Run async operations
|
|
import asyncio
|
|
result = asyncio.run(self._handle_team_verify_async(nickname, pin_code))
|
|
|
|
if result["success"]:
|
|
self.send_json_response(result, 200)
|
|
else:
|
|
self.send_json_response(result, 400)
|
|
|
|
except Exception as e:
|
|
print(f"Error in handle_team_verify: {e}")
|
|
self.send_json_response({"success": False, "error": "Internal server error"}, 500)
|
|
|
|
async def _handle_team_verify_async(self, nickname, pin_code):
|
|
"""Async handler for PIN verification"""
|
|
try:
|
|
# Get player
|
|
player = await self.database.get_player(nickname)
|
|
if not player:
|
|
return {"success": False, "error": "Player not found"}
|
|
|
|
# Apply team changes with PIN verification
|
|
result = await self.database.apply_team_change(player["id"], pin_code)
|
|
|
|
if result["success"]:
|
|
return {
|
|
"success": True,
|
|
"message": f"Team changes applied successfully! {result['changes_applied']} pets updated.",
|
|
"changes_applied": result["changes_applied"]
|
|
}
|
|
else:
|
|
return result
|
|
|
|
except Exception as e:
|
|
print(f"Error in _handle_team_verify_async: {e}")
|
|
return {"success": False, "error": str(e)}
|
|
|
|
def send_pin_via_irc(self, nickname, pin_code):
|
|
"""Send PIN to player via IRC private message"""
|
|
print(f"🔐 PIN for {nickname}: {pin_code}")
|
|
|
|
# Try to send via IRC bot if available
|
|
if self.bot and hasattr(self.bot, 'send_message'):
|
|
try:
|
|
# Send PIN via private message
|
|
self.bot.send_message(nickname, f"🔐 Team Builder PIN: {pin_code}")
|
|
self.bot.send_message(nickname, f"💡 Enter this PIN on the web page to confirm your team changes. PIN expires in 10 minutes.")
|
|
print(f"✅ PIN sent to {nickname} via IRC")
|
|
except Exception as e:
|
|
print(f"❌ Failed to send PIN via IRC: {e}")
|
|
else:
|
|
print(f"❌ No IRC bot available to send PIN to {nickname}")
|
|
print(f"💡 Manual PIN for {nickname}: {pin_code}")
|
|
|
|
|
|
class PetBotWebServer:
|
|
"""Standalone web server for PetBot"""
|
|
|
|
def __init__(self, database=None, port=8080, bot=None):
|
|
self.database = database or Database()
|
|
self.port = port
|
|
self.bot = bot
|
|
self.server = None
|
|
|
|
def run(self):
|
|
"""Start the web server"""
|
|
self.server = HTTPServer(('0.0.0.0', self.port), PetBotRequestHandler)
|
|
self.server.database = self.database
|
|
self.server.bot = self.bot
|
|
|
|
print(f'🌐 Starting PetBot web server on http://0.0.0.0:{self.port}')
|
|
print(f'📡 Accessible from WSL at: http://172.27.217.61:{self.port}')
|
|
print(f'📡 Accessible from Windows at: http://localhost:{self.port}')
|
|
print('')
|
|
print('🌐 Public access at: http://petz.rdx4.com/')
|
|
print('')
|
|
|
|
self.server.serve_forever()
|
|
|
|
def start_in_thread(self):
|
|
"""Start the web server in a background thread"""
|
|
import threading
|
|
self.thread = threading.Thread(target=self.run, daemon=True)
|
|
self.thread.start()
|
|
|
|
def stop(self):
|
|
"""Stop the web server"""
|
|
if self.server:
|
|
self.server.shutdown()
|
|
self.server.server_close()
|
|
|
|
def run_standalone():
|
|
"""Run the web server in standalone mode"""
|
|
import sys
|
|
|
|
port = 8080
|
|
if len(sys.argv) > 1:
|
|
try:
|
|
port = int(sys.argv[1])
|
|
except ValueError:
|
|
print('Usage: python webserver.py [port]')
|
|
sys.exit(1)
|
|
|
|
server = PetBotWebServer(port)
|
|
|
|
print('🌐 PetBot Web Server')
|
|
print('=' * 50)
|
|
print(f'Port: {port}')
|
|
print('')
|
|
print('🔗 Local URLs:')
|
|
print(f' http://localhost:{port}/ - Game Hub (local)')
|
|
print(f' http://localhost:{port}/help - Command Help (local)')
|
|
print(f' http://localhost:{port}/players - Player List (local)')
|
|
print(f' http://localhost:{port}/leaderboard - Leaderboard (local)')
|
|
print(f' http://localhost:{port}/locations - Locations (local)')
|
|
print('')
|
|
print('🌐 Public URLs:')
|
|
print(' http://petz.rdx4.com/ - Game Hub')
|
|
print(' http://petz.rdx4.com/help - Command Help')
|
|
print(' http://petz.rdx4.com/players - Player List')
|
|
print(' http://petz.rdx4.com/leaderboard - Leaderboard')
|
|
print(' http://petz.rdx4.com/locations - Locations')
|
|
print('')
|
|
print('Press Ctrl+C to stop')
|
|
|
|
try:
|
|
server.run()
|
|
except KeyboardInterrupt:
|
|
print('\n✅ Web server stopped')
|
|
|
|
if __name__ == '__main__':
|
|
run_standalone()
|
|
|