111 lines
4.5 KiB
JavaScript
111 lines
4.5 KiB
JavaScript
import { SPELLS } from '../../engine/data/Spells.js';
|
|
|
|
export class SpellbookUI {
|
|
constructor(game) {
|
|
this.game = game;
|
|
this.spellBookContainer = null;
|
|
}
|
|
|
|
toggle(hero) {
|
|
if (this.spellBookContainer) {
|
|
document.body.removeChild(this.spellBookContainer);
|
|
this.spellBookContainer = null;
|
|
return;
|
|
}
|
|
|
|
const container = document.createElement('div');
|
|
Object.assign(container.style, {
|
|
position: 'absolute',
|
|
bottom: '140px',
|
|
left: '50%',
|
|
transform: 'translateX(-50%)',
|
|
display: 'flex',
|
|
gap: '15px',
|
|
backgroundColor: 'rgba(20, 10, 30, 0.9)',
|
|
padding: '20px',
|
|
borderRadius: '10px',
|
|
border: '2px solid #9933ff',
|
|
zIndex: '1500',
|
|
boxShadow: '0 0 20px rgba(100, 0, 255, 0.5)'
|
|
});
|
|
|
|
const title = document.createElement('div');
|
|
title.textContent = "LIBRO DE HECHIZOS";
|
|
Object.assign(title.style, {
|
|
position: 'absolute', top: '-30px', left: '0', width: '100%', textAlign: 'center',
|
|
color: '#d8bfff', fontFamily: '"Cinzel", serif', fontSize: '18px', textShadow: '0 0 5px #8a2be2'
|
|
});
|
|
container.appendChild(title);
|
|
|
|
SPELLS.forEach(spell => {
|
|
const canCast = this.game.canCastSpell(spell);
|
|
|
|
const card = document.createElement('div');
|
|
Object.assign(card.style, {
|
|
width: '180px', height: '260px', position: 'relative', cursor: canCast ? 'pointer' : 'not-allowed',
|
|
transition: 'transform 0.2s', filter: canCast ? 'none' : 'grayscale(100%) brightness(50%)',
|
|
backgroundImage: this.getSpellTemplate(spell.type), backgroundSize: 'cover'
|
|
});
|
|
|
|
if (canCast) {
|
|
card.onmouseenter = () => { card.style.transform = 'scale(1.1) translateY(-10px)'; card.style.zIndex = '10'; };
|
|
card.onmouseleave = () => { card.style.transform = 'scale(1)'; card.style.zIndex = '1'; };
|
|
|
|
card.onclick = (e) => {
|
|
e.stopPropagation();
|
|
document.body.removeChild(this.spellBookContainer);
|
|
this.spellBookContainer = null;
|
|
|
|
if (spell.type === 'attack' || spell.type === 'defense') {
|
|
this.game.startSpellTargeting(spell);
|
|
} else {
|
|
// Global/Instant
|
|
this.game.executeSpell(spell);
|
|
}
|
|
};
|
|
}
|
|
|
|
// Cost Badge
|
|
const costBadge = document.createElement('div');
|
|
costBadge.textContent = spell.cost;
|
|
Object.assign(costBadge.style, {
|
|
position: 'absolute', top: '12px', left: '12px', width: '30px', height: '30px', borderRadius: '50%',
|
|
backgroundColor: '#fff', color: '#000', fontWeight: 'bold', display: 'flex', alignItems: 'center', justifyContent: 'center',
|
|
border: '2px solid #000', fontSize: '18px', fontFamily: 'serif'
|
|
});
|
|
card.appendChild(costBadge);
|
|
|
|
// Name
|
|
const nameEl = document.createElement('div');
|
|
nameEl.textContent = spell.name.toUpperCase();
|
|
Object.assign(nameEl.style, {
|
|
position: 'absolute', top: '45px', width: '100%', textAlign: 'center', fontSize: '14px',
|
|
color: '#000', fontWeight: 'bold', fontFamily: '"Cinzel", serif', padding: '0 10px', boxSizing: 'border-box'
|
|
});
|
|
card.appendChild(nameEl);
|
|
|
|
// Description
|
|
const descEl = document.createElement('div');
|
|
descEl.textContent = spell.description;
|
|
Object.assign(descEl.style, {
|
|
position: 'absolute', bottom: '30px', left: '10px', width: '160px', height: '80px',
|
|
fontSize: '11px', color: '#000', textAlign: 'center', display: 'flex', alignItems: 'center',
|
|
justifyContent: 'center', fontFamily: 'serif', lineHeight: '1.2'
|
|
});
|
|
card.appendChild(descEl);
|
|
|
|
container.appendChild(card);
|
|
});
|
|
|
|
document.body.appendChild(container);
|
|
this.spellBookContainer = container;
|
|
}
|
|
|
|
getSpellTemplate(type) {
|
|
let filename = 'attack_template.png';
|
|
if (type === 'heal') filename = 'healing_template.png';
|
|
if (type === 'defense') filename = 'defense_template.png';
|
|
return `url('/assets/images/dungeon1/spells/${filename}')`;
|
|
}
|
|
}
|