fix bug where collected cards are not initialized as part of the deck

src/engine/battle.js

@@ -1,7 +1,7 @@
 import { ENEMIES } from "../data/enemies.js";
 import { RELICS } from "../data/relics.js";
 import { CARDS } from "../data/cards.js";
-import { draw, endTurnDiscard, clamp, cloneCard } from "./core.js";
+import { draw, endTurnDiscard, clamp, cloneCard, shuffle } from "./core.js";
 
 export function createBattle(ctx, enemyId) {
     const enemyData = ENEMIES[enemyId];
@@ -10,6 +10,11 @@ export function createBattle(ctx, enemyId) {
     ctx.flags = {};
     ctx.lastCard = null;
 
+    // Initialize draw pile from current deck for the battle
+    ctx.player.draw = shuffle(ctx.player.deck.slice());
+    ctx.player.discard = [];
+    ctx.player.hand = [];
+
 
     const relicCtx = { 
         ...ctx, 

style.css

@@ -366,13 +366,19 @@ h3 {
     gap: 15px;
 }
 
-.energy-section, .gold-section, .block-section, .relics-section {
+.energy-section,
+.gold-section,
+.block-section,
+.relics-section {
     display: flex;
     align-items: center;
     gap: 4px;
 }
 
-.energy-label, .gold-icon, .block-icon, .relics-label {
+.energy-label,
+.gold-icon,
+.block-icon,
+.relics-label {
     font-size: 14px;
 }
 
@@ -474,7 +480,8 @@ h3 {
     opacity: 0.4;
 }
 
-.gold-amount, .block-amount {
+.gold-amount,
+.block-amount {
     font-weight: bold;
     font-size: 14px;
     color: #d4af37;
@@ -522,13 +529,27 @@ h3 {
 }
 
 @keyframes sparkle {
-    0% { opacity: 0.3; }
-    100% { opacity: 0.8; }
+    0% {
+        opacity: 0.3;
+    }
+
+    100% {
+        opacity: 0.8;
+    }
 }
 
 @keyframes pulse {
-    0%, 100% { transform: translate(-50%, -50%) scale(1); opacity: 0.1; }
-    50% { transform: translate(-50%, -50%) scale(1.1); opacity: 0.2; }
+
+    0%,
+    100% {
+        transform: translate(-50%, -50%) scale(1);
+        opacity: 0.1;
+    }
+
+    50% {
+        transform: translate(-50%, -50%) scale(1.1);
+        opacity: 0.2;
+    }
 }
 
 
@@ -644,23 +665,53 @@ h3 {
 }
 
 @keyframes enemyIdle {
-    0% { transform: translateY(0px) scale(1); }
-    100% { transform: translateY(-10px) scale(1.02); }
+    0% {
+        transform: translateY(0px) scale(1);
+    }
+
+    100% {
+        transform: translateY(-10px) scale(1.02);
+    }
 }
 
 @keyframes shadowPulse {
-    0% { transform: scaleX(1); opacity: 0.3; }
-    100% { transform: scaleX(1.1); opacity: 0.2; }
+    0% {
+        transform: scaleX(1);
+        opacity: 0.3;
+    }
+
+    100% {
+        transform: scaleX(1.1);
+        opacity: 0.2;
+    }
 }
 
 @keyframes shieldGlow {
-    0%, 100% { transform: scale(1); opacity: 0.8; }
-    50% { transform: scale(1.2); opacity: 1; }
+
+    0%,
+    100% {
+        transform: scale(1);
+        opacity: 0.8;
+    }
+
+    50% {
+        transform: scale(1.2);
+        opacity: 1;
+    }
 }
 
 @keyframes debuffPulse {
-    0%, 100% { transform: scale(1); opacity: 0.7; }
-    50% { transform: scale(1.1); opacity: 1; }
+
+    0%,
+    100% {
+        transform: scale(1);
+        opacity: 0.7;
+    }
+
+    50% {
+        transform: scale(1.1);
+        opacity: 1;
+    }
 }
 
 
@@ -702,8 +753,13 @@ h3 {
 }
 
 @keyframes playerIdle {
-    0% { transform: translateY(0px) scale(1); }
-    100% { transform: translateY(-10px) scale(1.02); }
+    0% {
+        transform: translateY(0px) scale(1);
+    }
+
+    100% {
+        transform: translateY(-10px) scale(1.02);
+    }
 }
 
 
@@ -730,16 +786,19 @@ h3 {
         scale: 0.5;
         transform: translate(-50%, -50%) translateY(0px);
     }
+
     15% {
         opacity: 1;
         scale: 1.4;
         transform: translate(-50%, -50%) translateY(-10px);
     }
+
     30% {
         opacity: 1;
         scale: 1.2;
         transform: translate(-50%, -50%) translateY(-20px);
     }
+
     100% {
         opacity: 0;
         scale: 0.8;
@@ -1152,8 +1211,13 @@ h3 {
 }
 
 @keyframes scanline {
-    0% { transform: translateX(-100%); }
-    100% { transform: translateX(100%); }
+    0% {
+        transform: translateX(-100%);
+    }
+
+    100% {
+        transform: translateX(100%);
+    }
 }
 
 .enemy-nameplate {
@@ -1234,9 +1298,20 @@ h3 {
     background: rgba(220, 53, 69, 0.1);
     margin-top: 10px;
 }
-.intent-info { border-color: #17a2b8; background: rgba(23, 162, 184, 0.1); }
-.intent-warning { border-color: #ffc107; }
-.intent-success { border-color: #28a745; background: rgba(40, 167, 69, 0.1); }
+
+.intent-info {
+    border-color: #17a2b8;
+    background: rgba(23, 162, 184, 0.1);
+}
+
+.intent-warning {
+    border-color: #ffc107;
+}
+
+.intent-success {
+    border-color: #28a745;
+    background: rgba(40, 167, 69, 0.1);
+}
 
 .intent-icon {
     font-size: 24px;
@@ -1277,7 +1352,8 @@ h3 {
     margin-bottom: 5px;
 }
 
-.player-shield, .player-debuff {
+.player-shield,
+.player-debuff {
     position: absolute;
     font-size: 16px;
     top: -5px;
@@ -1296,13 +1372,15 @@ h3 {
     align-items: center;
 }
 
-.player-health-display, .player-energy-display {
+.player-health-display,
+.player-energy-display {
     display: flex;
     align-items: center;
     gap: 10px;
 }
 
-.health-icon, .energy-label {
+.health-icon,
+.energy-label {
     font-size: 16px;
 }
 
@@ -1508,7 +1586,8 @@ h3 {
     opacity: 0.8;
 }
 
-.battle-tips, .battle-tips-bottom {
+.battle-tips,
+.battle-tips-bottom {
     display: flex;
     flex-direction: column;
     gap: 5px;
@@ -1613,14 +1692,45 @@ h3 {
 }
 
 
-.battle-card:nth-child(1) { transform: rotate(-8deg); z-index: 1; }
-.battle-card:nth-child(2) { transform: rotate(-4deg); z-index: 2; }
-.battle-card:nth-child(3) { transform: rotate(-2deg); z-index: 3; }
-.battle-card:nth-child(4) { transform: rotate(0deg); z-index: 4; }
-.battle-card:nth-child(5) { transform: rotate(2deg); z-index: 5; }
-.battle-card:nth-child(6) { transform: rotate(4deg); z-index: 6; }
-.battle-card:nth-child(7) { transform: rotate(8deg); z-index: 7; }
-.battle-card:nth-child(8) { transform: rotate(12deg); z-index: 8; }
+.battle-card:nth-child(1) {
+    transform: rotate(-8deg);
+    z-index: 1;
+}
+
+.battle-card:nth-child(2) {
+    transform: rotate(-4deg);
+    z-index: 2;
+}
+
+.battle-card:nth-child(3) {
+    transform: rotate(-2deg);
+    z-index: 3;
+}
+
+.battle-card:nth-child(4) {
+    transform: rotate(0deg);
+    z-index: 4;
+}
+
+.battle-card:nth-child(5) {
+    transform: rotate(2deg);
+    z-index: 5;
+}
+
+.battle-card:nth-child(6) {
+    transform: rotate(4deg);
+    z-index: 6;
+}
+
+.battle-card:nth-child(7) {
+    transform: rotate(8deg);
+    z-index: 7;
+}
+
+.battle-card:nth-child(8) {
+    transform: rotate(12deg);
+    z-index: 8;
+}
 
 
 .battle-card.playable:hover {
@@ -2139,7 +2249,8 @@ h3 {
     padding: 40px;
 }
 
-.block-display, .debuff-display {
+.block-display,
+.debuff-display {
     display: inline-block;
     background: rgba(110, 168, 254, 0.2);
     padding: 4px 8px;
@@ -2423,8 +2534,13 @@ h3 {
 }
 
 @keyframes avatarGlow {
-    0% { opacity: 0.6; }
-    100% { opacity: 1; }
+    0% {
+        opacity: 0.6;
+    }
+
+    100% {
+        opacity: 1;
+    }
 }
 
 .tooltip-avatar-img {
@@ -2483,17 +2599,13 @@ h3 {
 
 .relic-title-logo svg {
     filter:
-        drop-shadow(0 0 20px rgba(255, 215, 0, 0.4))
-        drop-shadow(0 0 40px rgba(255, 140, 0, 0.3))
-        drop-shadow(4px 4px 8px rgba(0, 0, 0, 0.6));
+        drop-shadow(0 0 20px rgba(255, 215, 0, 0.4)) drop-shadow(0 0 40px rgba(255, 140, 0, 0.3)) drop-shadow(4px 4px 8px rgba(0, 0, 0, 0.6));
     transition: all 0.3s ease;
 }
 
 .relic-title-logo:hover svg {
     filter:
-        drop-shadow(0 0 30px rgba(255, 215, 0, 0.6))
-        drop-shadow(0 0 60px rgba(255, 140, 0, 0.4))
-        drop-shadow(4px 4px 8px rgba(0, 0, 0, 0.6));
+        drop-shadow(0 0 30px rgba(255, 215, 0, 0.6)) drop-shadow(0 0 60px rgba(255, 140, 0, 0.4)) drop-shadow(4px 4px 8px rgba(0, 0, 0, 0.6));
     transform: scale(1.05);
 }
 
@@ -2649,8 +2761,13 @@ h3 {
 }
 
 @keyframes relicGlow {
-    0% { transform: rotate(0deg); }
-    100% { transform: rotate(360deg); }
+    0% {
+        transform: rotate(0deg);
+    }
+
+    100% {
+        transform: rotate(360deg);
+    }
 }
 
 .relic-portrait .relic-icon {
@@ -3124,10 +3241,13 @@ h3 {
 }
 
 @keyframes currentPulse {
-    0%, 100% { 
+
+    0%,
+    100% {
         transform: scale(1);
         opacity: 1;
     }
+
     50% {
         transform: scale(1.2);
         opacity: 0.3;
@@ -3274,16 +3394,13 @@ h3 {
 
 .deck-stack:hover .deck-stack-card {
     transform:
-        translateX(calc(var(--card-index) * -140px))
-        translateY(calc(var(--card-index) * -30px));
+        translateX(calc(var(--card-index) * -140px)) translateY(calc(var(--card-index) * -30px));
     z-index: calc(30 + var(--card-index));
 }
 
 .deck-stack:hover .deck-stack-card:hover {
     transform:
-        translateX(calc(var(--card-index) * -140px))
-        translateY(calc(var(--card-index) * -30px - 15px))
-        scale(1.05);
+        translateX(calc(var(--card-index) * -140px)) translateY(calc(var(--card-index) * -30px - 15px)) scale(1.05);
     z-index: 100;
 }
 
@@ -3900,7 +4017,8 @@ h3 {
     font-weight: bold;
 }
 
-.gold-icon, .price-icon {
+.gold-icon,
+.price-icon {
     width: 24px;
     height: 24px;
     object-fit: contain;
@@ -4433,10 +4551,13 @@ h3 {
 }
 
 @keyframes defeatPulse {
-    0%, 100% { 
+
+    0%,
+    100% {
         transform: scale(1);
         filter: drop-shadow(0 0 20px rgba(139, 69, 19, 0.6));
     }
+
     50% {
         transform: scale(1.05);
         filter: drop-shadow(0 0 30px rgba(139, 69, 19, 0.8));
@@ -4508,8 +4629,15 @@ h3 {
 }
 
 @keyframes defeatFloat {
-    0%, 100% { transform: translateY(0px) rotate(0deg); }
-    50% { transform: translateY(-10px) rotate(2deg); }
+
+    0%,
+    100% {
+        transform: translateY(0px) rotate(0deg);
+    }
+
+    50% {
+        transform: translateY(-10px) rotate(2deg);
+    }
 }
 
 .defeat-stats {
@@ -4764,8 +4892,15 @@ h3 {
 }
 
 @keyframes victoryGlow {
-    0% { opacity: 0.5; transform: translate(-50%, -50%) scale(1); }
-    100% { opacity: 0.8; transform: translate(-50%, -50%) scale(1.1); }
+    0% {
+        opacity: 0.5;
+        transform: translate(-50%, -50%) scale(1);
+    }
+
+    100% {
+        opacity: 0.8;
+        transform: translate(-50%, -50%) scale(1.1);
+    }
 }
 
 .victory-stats {
@@ -5364,13 +5499,28 @@ h3 {
 }
 
 @keyframes blink {
-    0%, 50% { opacity: 1; }
-    51%, 100% { opacity: 0.3; }
+
+    0%,
+    50% {
+        opacity: 1;
+    }
+
+    51%,
+    100% {
+        opacity: 0.3;
+    }
 }
 
 @keyframes float {
-    0%, 100% { transform: translateY(0px); }
-    50% { transform: translateY(-10px); }
+
+    0%,
+    100% {
+        transform: translateY(0px);
+    }
+
+    50% {
+        transform: translateY(-10px);
+    }
 }
 
 @media (max-width: 768px) {
@@ -5439,8 +5589,8 @@ h3 {
     color: white;
     font-size: 12px;
     font-weight: bold;
-    min-width: 20px;
-    height: 20px;
+    min-width: 25px;
+    height: 25px;
     border-radius: 50%;
     display: flex;
     align-items: center;
@@ -5451,11 +5601,14 @@ h3 {
 }
 
 @keyframes badgePulse {
-    0%, 100% {
+
+    0%,
+    100% {
         transform: scale(1);
     }
+
     50% {
-        transform: scale(1.1);
+        transform: scale(1.3);
     }
 }
 
@@ -5481,8 +5634,13 @@ h3 {
 }
 
 @keyframes fadeIn {
-    from { opacity: 0; }
-    to { opacity: 1; }
+    from {
+        opacity: 0;
+    }
+
+    to {
+        opacity: 1;
+    }
 }
 
 .messages-modal {
@@ -5502,6 +5660,7 @@ h3 {
         opacity: 0;
         transform: scale(0.9) translateY(-20px);
     }
+
     to {
         opacity: 1;
         transform: scale(1) translateY(0);
@@ -5582,7 +5741,8 @@ h3 {
     color: var(--text);
     line-height: 1.6;
     font-size: 1.05em;
-    white-space: pre-wrap; /* Preserve line breaks */
+    white-space: pre-wrap;
+    /* Preserve line breaks */
 }
 
 /* No Messages Placeholder */