87 lines
3.7 KiB
JavaScript
87 lines
3.7 KiB
JavaScript
import { WindowManager } from './window_manager.js';
|
|
|
|
export const PetsOverlay = {
|
|
open() {
|
|
// Position next to others
|
|
const { win, content } = WindowManager.create('window-pets', '🐾 My Pets', { x: 20, y: 340, width: 220, height: 250 });
|
|
this.update(content);
|
|
},
|
|
|
|
update(container) {
|
|
if (!container) container = document.getElementById('window-pets-content');
|
|
if (!container) return;
|
|
|
|
const MB = window.MagicBot;
|
|
if (!MB || !MB.state || !MB.state.inventory || !MB.state.inventory.items) {
|
|
container.innerHTML = '<div style="color:red">No Data</div>';
|
|
return;
|
|
}
|
|
|
|
container.innerHTML = '';
|
|
const list = document.createElement('div');
|
|
list.style.cssText = "display: flex; flex-direction: column; gap: 8px; font-size: 11px;";
|
|
|
|
const pets = MB.state.inventory.items.filter(i => i.itemType === 'Pet');
|
|
|
|
if (pets.length === 0) {
|
|
container.innerHTML = '<div style="color:#aaa; text-align:center; padding: 10px;">No Pets Found</div>';
|
|
return;
|
|
}
|
|
|
|
pets.forEach(p => {
|
|
const row = document.createElement('div');
|
|
row.style.cssText = `background: rgba(255,255,255,0.05); padding: 8px; border-radius: 4px; display: flex; flex-direction: column; gap: 2px;`;
|
|
|
|
// Name/Species
|
|
const name = p.name || p.petSpecies;
|
|
const species = p.petSpecies;
|
|
const isAutoFeed = MB.automation && MB.automation.pets && MB.automation.pets[p.id] && MB.automation.pets[p.id].autoFeed;
|
|
|
|
const diets = {
|
|
'Bee': ['Strawberry', 'Blueberry', 'Tulip', 'Daffodil', 'Lily'],
|
|
'Goat': ['Pumpkin', 'Coconut', 'Cactus', 'Pepper']
|
|
};
|
|
const diet = diets[species] ? diets[species].join(', ') : 'Unknown Diet';
|
|
|
|
row.innerHTML = `
|
|
<div style="font-weight:bold; color: #bada55; display: flex; justify-content: space-between; align-items:center;">
|
|
<span>${name}</span>
|
|
<label style="font-size:9px; color:#eee; display:flex; align-items:center;">
|
|
<input type="checkbox" class="chk-pet-feed" data-id="${p.id}" ${isAutoFeed ? 'checked' : ''}> A-Feed
|
|
</label>
|
|
</div>
|
|
<div style="display: flex; justify-content: space-between; font-size: 9px; color: #666;">
|
|
<span>${species}</span>
|
|
<span>XP: ${p.xp}</span>
|
|
</div>
|
|
<div style="display: flex; justify-content: space-between;">
|
|
<span>Hunger: ${Math.floor(p.hunger || 0)}</span>
|
|
</div>
|
|
<div style="color: #aaa; font-size: 9px; margin-top: 4px;">
|
|
Diet: ${diet}
|
|
</div>
|
|
`;
|
|
|
|
// Event listener for checkbox (needs to be attached after innerHTML reflow)
|
|
// We'll trust the parent re-render or attach globally for now to avoid complexity in this simple render loop.
|
|
// Actually, let's attach immediately after this loop finishes or use a delegate.
|
|
|
|
list.appendChild(row);
|
|
});
|
|
|
|
// Delegate listener
|
|
list.onchange = (e) => {
|
|
if (e.target.classList.contains('chk-pet-feed')) {
|
|
const id = e.target.getAttribute('data-id');
|
|
if (!MB.automation.pets) MB.automation.pets = {};
|
|
if (!MB.automation.pets[id]) MB.automation.pets[id] = {};
|
|
MB.automation.pets[id].autoFeed = e.target.checked;
|
|
console.log(`[MagicBot] Pet ${id} Auto-Feed: ${e.target.checked}`);
|
|
}
|
|
};
|
|
|
|
container.appendChild(list);
|
|
}
|
|
};
|
|
|