- No pets encountered yet. Use !explore to discover wild pets!
+
+
šļø
+
No pets encountered yet
+
Use !explore to discover wild pets!
"""
- html = f"""
-
-
-
-
-
PetBot - {nickname}'s Profile
-
-
-
-
ā Back to Game Hub
-
-
-
-
-
-
-
-
-
{player['level']}
-
Level
-
-
-
{player['experience']}
-
Experience
-
-
-
${player['money']}
-
Money
-
-
-
{total_pets}
-
Pets Caught
-
-
-
{active_count}
-
Active Pets
-
-
-
{len(achievements)}
-
Achievements
-
-
-
{encounter_stats.get('species_encountered', 0)}
-
Species Seen
-
-
-
{encounter_stats.get('completion_percentage', 0)}%
-
Petdex Complete
-
-
-
-
-
-
-
-
-
-
-
- | Status |
- Name |
- Species |
- Type |
- Level |
- HP |
- Stats |
-
-
-
- {pets_html}
-
-
-
-
-
-
-
-
- {achievements_html}
-
-
-
-
-
-
- {inventory_html}
-
-
-
-
-
-
-
-
-
-
Species discovered: {encounter_stats.get('species_encountered', 0)}/{encounter_stats.get('total_species', 0)}
- ({encounter_stats.get('completion_percentage', 0)}% complete)
-
Total encounters: {encounter_stats.get('total_encounters', 0)}
-
- {encounters_html}
-
-
-
-"""
+ }
+
+ .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("", additional_css + "")
self.send_response(200)
self.send_header('Content-type', 'text/html')
self.end_headers()
- self.wfile.write(html.encode())
+ self.wfile.write(html_content.encode())
def log_message(self, format, *args):
"""Override to reduce logging noise"""
@@ -2091,31 +2801,51 @@ class PetBotRequestHandler(BaseHTTPRequestHandler):
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"""
- html = f"""
-
-
-
-
-
Team Builder - {nickname}
-
-
-
-
-
š¾ No Pets Found
-
{nickname}, you need to catch some pets before using the team builder!
-
ā Back to Profile
-
-
-"""
+ """Show message when player has no pets using unified template"""
+ content = f"""
+
+
+
+
š¾ No Pets Found
+
{nickname}, you need to catch some pets before using the team builder!
+
Head to the IRC channel and use !explore to find wild pets!
+
ā Back to Profile
+
+ """
+
+ # 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("", additional_css + "")
self.send_response(200)
self.send_header('Content-type', 'text/html')
self.end_headers()
- self.wfile.write(html.encode())
+ self.wfile.write(html_content.encode())
def serve_teambuilder_interface(self, nickname, pets):
"""Serve the full interactive team builder interface"""
@@ -2140,14 +2870,14 @@ class PetBotRequestHandler(BaseHTTPRequestHandler):
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}")
+ 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"""
-
+
"""
- active_cards = ''.join(make_pet_card(pet, True) for pet in active_pets)
+ # 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"""
@@ -2269,6 +3007,75 @@ class PetBotRequestHandler(BaseHTTPRequestHandler):
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;
@@ -2565,11 +3372,31 @@ class PetBotRequestHandler(BaseHTTPRequestHandler):
-
- {active_cards}
-
-
- Drop pets here to add to your active team
+
@@ -2644,14 +3471,23 @@ class PetBotRequestHandler(BaseHTTPRequestHandler):
// Add double-click handler
card.addEventListener('dblclick', function() {{
const petId = this.dataset.petId;
- const isActive = currentTeam[petId];
+ const currentPosition = currentTeam[petId];
- console.log(`Double-click: Moving pet ${{petId}} from ${{isActive ? 'active' : 'storage'}} to ${{isActive ? 'storage' : 'active'}}`);
+ console.log(`Double-click: Moving pet ${{petId}} from ${{currentPosition ? `team slot ${{currentPosition}}` : 'storage'}}`);
- if (isActive) {{
+ if (currentPosition) {{
movePetToStorage(petId);
}} else {{
- movePetToActive(petId);
+ // 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');
}}
}});
@@ -2668,49 +3504,42 @@ class PetBotRequestHandler(BaseHTTPRequestHandler):
}}
// Declare container variables once at the top level
- const activeContainer = document.getElementById('active-container');
+ const teamSlotsContainer = document.getElementById('team-slots-container');
const storageContainer = document.getElementById('storage-container');
- const activeDrop = document.getElementById('active-drop');
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(`Active container has ${{activeContainer.children.length}} pets initially`);
+ 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 currentContainer = card.parentElement.id;
+ const teamOrder = card.dataset.teamOrder;
- console.log(`Pet ${{index}}: ID=${{petId}}, data-active=${{card.dataset.active}}, isActive=${{isActive}}, currentContainer=${{currentContainer}}`);
+ console.log(`Pet ${{index}}: ID=${{petId}}, data-active=${{card.dataset.active}}, isActive=${{isActive}}, team_order=${{teamOrder}}`);
- originalTeam[petId] = isActive;
- currentTeam[petId] = isActive;
-
- // CRITICAL: Verify container placement is correct - DO NOT MOVE unless absolutely necessary
- const expectedContainer = isActive ? activeContainer : storageContainer;
- const expectedContainerId = isActive ? 'active-container' : 'storage-container';
-
- if (currentContainer !== expectedContainerId) {{
- console.error(`MISMATCH! Pet ${{petId}} is in ${{currentContainer}} but should be in ${{expectedContainerId}} based on data-active=${{card.dataset.active}}`);
- console.log(`Moving pet ${{petId}} to correct container...`);
- expectedContainer.appendChild(card);
+ if (isActive && teamOrder) {{
+ teamPositions[petId] = parseInt(teamOrder);
+ originalTeam[petId] = parseInt(teamOrder);
+ currentTeam[petId] = parseInt(teamOrder);
}} else {{
- console.log(`Pet ${{petId}} correctly placed in ${{currentContainer}}`);
+ originalTeam[petId] = false;
+ currentTeam[petId] = false;
}}
}});
- console.log('After initialization:');
- console.log(`Active container now has ${{activeContainer.children.length}} pets`);
- console.log(`Storage container now has ${{storageContainer.children.length}} pets`);
-
+ console.log('Team positions:', teamPositions);
console.log('Original team state:', originalTeam);
console.log('Current team state:', currentTeam);
- // Completely rewritten drag and drop - simpler approach
+ // Completely rewritten drag and drop for slot system
function initializeDragAndDrop() {{
console.log('Initializing drag and drop...');
@@ -2744,43 +3573,43 @@ class PetBotRequestHandler(BaseHTTPRequestHandler):
}});
}});
- // Set up drop zones (using previously declared variables)
-
- [activeContainer, activeDrop].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: Active 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: Active zone');
+ // 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');
-
- if (draggedElement) {{
- const petId = draggedElement.dataset.petId;
- console.log('Moving pet', petId, 'to active');
- movePetToActive(petId);
- }}
- }});
- }}
+ }}
+ }});
+
+ 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) {{
@@ -2819,39 +3648,48 @@ class PetBotRequestHandler(BaseHTTPRequestHandler):
console.log('Drag and drop initialization complete');
}}
- function movePetToActive(petId) {{
- console.log(`movePetToActive called for pet ${{petId}}`);
+ 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 currentIsActive = currentTeam[petId];
-
- console.log(`Pet ${{petId}} current state: ${{currentIsActive ? 'active' : 'storage'}}`);
-
- if (!currentIsActive) {{
- console.log(`Moving pet ${{petId}} to active...`);
-
- // Update state
- currentTeam[petId] = true;
-
- // Move DOM element
- card.classList.remove('storage');
- card.classList.add('active');
- card.dataset.active = 'true';
- card.querySelector('.status-badge').textContent = 'Active';
- activeContainer.appendChild(card);
-
- // Update interface
- updateSaveButton();
- updateDropZoneVisibility();
-
- console.log('Pet moved to active successfully');
- }} else {{
- console.log(`Pet ${{petId}} is already active, no move needed`);
+ 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) {{
@@ -2862,11 +3700,11 @@ class PetBotRequestHandler(BaseHTTPRequestHandler):
return;
}}
- const currentIsActive = currentTeam[petId];
+ const currentPosition = currentTeam[petId];
- console.log(`Pet ${{petId}} current state: ${{currentIsActive ? 'active' : 'storage'}}`);
+ console.log(`Pet ${{petId}} current state: ${{currentPosition ? `team slot ${{currentPosition}}` : 'storage'}}`);
- if (currentIsActive) {{
+ if (currentPosition) {{
console.log(`Moving pet ${{petId}} to storage...`);
// Update state
@@ -2876,6 +3714,7 @@ class PetBotRequestHandler(BaseHTTPRequestHandler):
card.classList.remove('active');
card.classList.add('storage');
card.dataset.active = 'false';
+ card.dataset.teamOrder = '';
card.querySelector('.status-badge').textContent = 'Storage';
storageContainer.appendChild(card);
@@ -2891,16 +3730,7 @@ class PetBotRequestHandler(BaseHTTPRequestHandler):
function updateDropZoneVisibility() {{
- // Using previously declared container variables
-
- // CRITICAL: Only update visual indicators, never move pets
- // Use CSS classes instead of direct style manipulation
- if (activeContainer && activeContainer.children.length > 0) {{
- if (activeDrop) activeDrop.classList.add('has-pets');
- }} else {{
- if (activeDrop) activeDrop.classList.remove('has-pets');
- }}
-
+ // Update storage drop zone visibility
if (storageContainer && storageContainer.children.length > 0) {{
if (storageDrop) storageDrop.classList.add('has-pets');
}} else {{
@@ -2908,7 +3738,6 @@ class PetBotRequestHandler(BaseHTTPRequestHandler):
}}
console.log('Drop zone visibility updated:', {{
- activeContainerPets: activeContainer ? activeContainer.children.length : 0,
storageContainerPets: storageContainer ? storageContainer.children.length : 0
}});
}}
@@ -3072,10 +3901,716 @@ class PetBotRequestHandler(BaseHTTPRequestHandler):