diff --git a/src/engine/battle.js b/src/engine/battle.js index da98c6a..9f37eef 100644 --- a/src/engine/battle.js +++ b/src/engine/battle.js @@ -28,6 +28,9 @@ export function startPlayerTurn(ctx) { ctx.flags.nextTurnEnergyPenalty = 0; draw(ctx.player, 5 - ctx.player.hand.length); + // Clear card selection when new turn starts + ctx.selectedCardIndex = null; + const relicCtx = { ...ctx, draw: (n) => draw(ctx.player, n) }; for (const r of ctx.relicStates) r.hooks?.onTurnStart?.(relicCtx, r.state); ctx.log(`Your turn begins. You have ${ctx.player.energy} energy to spend.`); diff --git a/src/ui/render.js b/src/ui/render.js index 378f48e..bfeead3 100644 --- a/src/ui/render.js +++ b/src/ui/render.js @@ -230,6 +230,9 @@ export async function renderBattle(root) { const card = p.hand[index]; if (p.energy >= card.cost) { root.play(index); + // Clear selection when card is played via mouse + root.selectedCardIndex = null; + updateCardSelection(root); } }); }); @@ -247,20 +250,36 @@ export async function renderBattle(root) { }); } + // Initialize card selection state if not exists + if (!root.selectedCardIndex) { + root.selectedCardIndex = null; + } + window.onkeydown = (e) => { if (e.key.toLowerCase() === "e") { - try { root.end(); } catch (error) { console.error("Error ending turn via keyboard:", error); } } + const n = parseInt(e.key, 10); if (n >= 1 && n <= p.hand.length) { - const card = p.hand[n - 1]; - if (p.energy >= card.cost) { - root.play(n - 1); + const cardIndex = n - 1; + const card = p.hand[cardIndex]; + + if (root.selectedCardIndex === cardIndex) { + // Second press of same key - play the card + if (p.energy >= card.cost) { + root.play(cardIndex); + root.selectedCardIndex = null; // Clear selection + updateCardSelection(root); + } + } else { + // First press or different key - select the card + root.selectedCardIndex = cardIndex; + updateCardSelection(root); } } }; @@ -270,6 +289,9 @@ export async function renderBattle(root) { if (logContent) { logContent.scrollTop = logContent.scrollHeight; } + + // Apply initial card selection visual state + updateCardSelection(root); } export async function renderMap(root) { @@ -1009,6 +1031,21 @@ export function renderShop(root) { }); } +function updateCardSelection(root) { + // Remove selection from all cards + root.app.querySelectorAll('.battle-card').forEach(card => { + card.classList.remove('card-selected'); + }); + + // Add selection to currently selected card + if (root.selectedCardIndex !== null) { + const selectedCard = root.app.querySelector(`[data-play="${root.selectedCardIndex}"]`); + if (selectedCard) { + selectedCard.classList.add('card-selected'); + } + } +} + function updateShopAffordability(root) { // Update card affordability root.app.querySelectorAll("[data-buy-card]").forEach(btn => { diff --git a/style.css b/style.css index ff236ea..96151eb 100644 --- a/style.css +++ b/style.css @@ -1739,6 +1739,27 @@ h3 { box-shadow: 0 0 15px rgba(111, 66, 193, 0.3); } +.battle-card.card-selected { + transform: translateY(-80px) scale(1.15) rotate(0deg) !important; + z-index: 300; + margin-left: -60px; + margin-right: 40px; +} + +.battle-card.card-selected ~ .battle-card { + transform: translateX(20px); +} + +.battle-card.card-selected .card-glow { + opacity: 0.8; + filter: blur(6px); + transform: scale(1.05); +} + +.battle-card.card-selected .card-frame { + box-shadow: 0 20px 40px rgba(0, 0, 0, 0.6); +} + .battle-card.playable:hover .card-glow { opacity: 0.8; filter: blur(6px);