===================================================================
--- original.js
+++ change.js
@@ -63,9 +63,13 @@
 		anchorX: 0.5,
 		anchorY: 0.5,
 		alpha: 0.1
 	});
-	self.heartFrames = {}; // Initialize heartFrames as a property of BigHeart class
+	self.heartFrames = Array.from({
+		length: 10
+	}, function () {
+		return Array(6).fill(null);
+	}); // Initialize heartFrames as a 2D array
 	for (var type = 9; type >= 0; type--) {
 		self.heartFrames[type] = [];
 		for (var i = 5; i >= 0; i--) {
 			self.heartFrames[type][5 - i] = self.attachAsset('heart_' + type + '_frame_' + i, {
@@ -109,16 +113,12 @@
 	// Event handler called when a press happens on element. This is automatically called on press if bigHeart is attached.
 	self.down = function (x, y, obj) {
 		// Log the down event
 		log("Down event triggered on BigHeart");
-		if (self.currentGraphic && self.nextGraphic) {
-			log("Current indexes:: ", self.currentGraphic.index, ',', self.nextGraphic.index); // Log the tap count
-		} else {
-			log("CurrentGraphic or NextGraphic is not initialized.");
-		}
-		// Increment tap counter
-		progressManager.manualGeneration();
+		// First animate the beat to ensure graphics are initialized
 		self.animateBeat();
+		// Then increment tap counter
+		progressManager.manualGeneration();
 		// Create a new heart projection using the current frame index
 		if (self.currentGraphic) {
 			projectionsManager.popHearts(self.currentGraphic.heartType);
 		} else {
@@ -182,59 +182,84 @@
 			});
 		}
 	};
 	self.updateFramesByProgress = function (progress) {
-		// progress should be between 0 and 1
-		var frameCount = 5; // frames 0 to 4 will have alpha transition, frame 5 is final
-		var frameProgress = progress * frameCount;
-		var currentFrameIndex = 5 - Math.floor(frameProgress); // Invert frame order: 5 to 0
-		var alpha = frameProgress - Math.floor(frameProgress); // Get decimal part for alpha transition
+		log("=== updateFramesByProgress ===");
+		log("Raw progress:", progress);
+		// Progress is already tap count / tapsPerLevel, so we need to scale it to frames
+		// Each frame gets 20% of progress (0.2 per frame)
+		var frameProgress = progress * 5; // Convert progress to frame scale (0-5)
+		log("Progress calculations:");
+		log("- frameProgress:", frameProgress);
 		// Hide all frames of current type
 		self.heartFrames[self.heartType].forEach(function (frame) {
 			if (frame && frame._activeTween) {
 				frame._activeTween.stop();
 			}
 			frame.visible = false;
 		});
-		// Handle the final frame (5) separately
+		// Handle the final frame (0) separately - only shown after explosion
 		if (progress >= 1) {
+			log("Progress >= 1, showing frame 0");
 			self.currentGraphic = self.heartFrames[self.heartType][0];
 			if (self.currentGraphic) {
 				self.currentGraphic.visible = true;
 				self.currentGraphic.scaleX = self.currentGraphic.scaleY = 1.1;
 				self.currentGraphic.alpha = 1;
+				log("Frame 0 set to visible with alpha:", self.currentGraphic.alpha);
 			}
 			self.nextGraphic = null;
 			return;
 		}
+		// Calculate frame indices based on progress
+		var currentFrameIndex = 5 - Math.floor(frameProgress);
+		var alpha = 1 - (frameProgress - Math.floor(frameProgress));
+		log("Frame calculations:");
+		log("- heartType:", self.heartType);
+		log("- currentFrameIndex:", currentFrameIndex);
+		log("- alpha:", alpha);
 		// Show next frame first (it will be behind current frame)
-		if (currentFrameIndex > 0) {
+		if (currentFrameIndex > 1) {
+			// Only show next frame if we're not on frame 1
 			self.nextGraphic = self.heartFrames[self.heartType][currentFrameIndex - 1];
 			if (self.nextGraphic) {
 				self.nextGraphic.visible = true;
-				self.nextGraphic.scaleX = self.nextGraphic.scaleY = 1.1;
 				self.nextGraphic.alpha = 1; // Keep next frame fully visible
+				self.nextGraphic.scaleX = self.nextGraphic.scaleY = 1.1;
 				// Ensure nextGraphic is behind currentGraphic
 				if (self.nextGraphic.parent) {
-					self.nextGraphic.parent.setChildIndex(self.nextGraphic, 0);
+					//self.nextGraphic.parent.setChildIndex(self.nextGraphic, 0);
 				}
+				log("Next frame setup:");
+				log("- heartType:", self.nextGraphic.heartType);
+				log("- index:", currentFrameIndex - 1);
+				log("- visible:", self.nextGraphic.visible);
+				log("- alpha:", self.nextGraphic.alpha);
+				log("- scale:", self.nextGraphic.scaleX);
 			}
 		} else {
+			log("No next frame (currentFrameIndex <= 1)");
 			self.nextGraphic = null;
 		}
 		// Show current frame on top
 		self.currentGraphic = self.heartFrames[self.heartType][currentFrameIndex];
 		if (self.currentGraphic) {
 			self.currentGraphic.visible = true;
+			self.currentGraphic.alpha = alpha; // Only fade out current frame
 			self.currentGraphic.scaleX = self.currentGraphic.scaleY = 1.1;
-			self.currentGraphic.alpha = 1 - alpha; // Only fade out current frame
 			// Ensure currentGraphic is above nextGraphic
 			if (self.currentGraphic.parent) {
-				self.currentGraphic.parent.setChildIndex(self.currentGraphic, self.currentGraphic.parent.children.length - 1);
+				//self.currentGraphic.parent.setChildIndex(self.currentGraphic, self.currentGraphic.parent.children.length - 1);
 			}
+			log("Current frame setup:");
+			log("- heartType:", self.currentGraphic.heartType);
+			log("- index:", currentFrameIndex);
+			log("- visible:", self.currentGraphic.visible);
+			log("- alpha:", self.currentGraphic.alpha);
+			log("- scale:", self.currentGraphic.scaleX);
 		}
+		log("=== End updateFramesByProgress ===\n");
 	};
-	// Explosion Animation
 	self.animateExplosion = function (callback) {
 		if (!self.explosionTriggered) {
 			self.explosionTriggered = true;
 			if (true || !isDebug) {
@@ -250,10 +275,35 @@
 					alpha: 1
 				});
 				self.addChild(cloneGraphic);
 			}
+			// Update heart type immediately so new frames are ready
+			if (self.heartType < 9) {
+				var nextHeartType = self.heartType + 1;
+				// Pre-scale both frames of the next heart type
+				tween(self.heartFrames[nextHeartType][5], {
+					scaleX: 1.1,
+					scaleY: 1.1
+				}, {
+					duration: 300,
+					easing: tween.easeOut
+				});
+				tween(self.heartFrames[nextHeartType][4], {
+					scaleX: 1.1,
+					scaleY: 1.1
+				}, {
+					duration: 300,
+					easing: tween.easeOut
+				});
+				// Initialize graphics for new heart type
+				self.currentGraphic = self.heartFrames[nextHeartType][5];
+				self.nextGraphic = self.heartFrames[nextHeartType][4];
+				// Update heart type and notify projections
+				self.heartType = nextHeartType;
+				projectionsManager.updateHeartType(nextHeartType);
+			}
 			LK.setTimeout(function () {
-				LK.effects.flashScreen(0xffffff, 2000); // Flash the screen white for 500ms
+				LK.effects.flashScreen(0xffffff, 2000); // Flash the screen white
 				background.changeBackground(progressManager.currentLevel + 1); // Change background when level changes
 				if (cloneGraphic) {
 					log("nextGraphic for explosion!", cloneGraphic);
 					tween(cloneGraphic, {
@@ -263,71 +313,56 @@
 					}, {
 						duration: 3000,
 						easing: tween.easeOut,
 						onFinish: function onFinish() {
-							// Make all frames of the current heartType invisible
-							self.heartFrames[self.heartType].forEach(function (frame) {
+							// Make all frames of the previous heart type invisible
+							self.heartFrames[self.heartType - 1].forEach(function (frame) {
 								frame.visible = false;
 							});
+							// Make current heart type frames visible
+							if (self.currentGraphic) {
+								self.currentGraphic.visible = true;
+							}
+							if (self.nextGraphic) {
+								self.nextGraphic.visible = true;
+							}
 							self.explosionTriggered = false; // Reset explosion flag
 							cloneGraphic.destroy(); // Remove the clone after animation
-							// Pre-scale the first frame of the next heart type
-							if (self.heartType < 9) {
-								var nextHeartFrame = self.heartFrames[self.heartType + 1][5];
-								if (nextHeartFrame) {
-									tween(nextHeartFrame, {
-										scaleX: 1.1,
-										scaleY: 1.1
-									}, {
-										duration: 300,
-										easing: tween.easeOut
-									});
-								}
-							}
 							if (callback) {
 								callback();
 							}
 						}
 					});
-					// Pre scale next heart
-					tween(self.heartFrames[self.heartType + 1][5], {
-						scaleX: 1.1,
-						scaleY: 1.1
-					}, {
-						duration: 300,
-						easing: tween.easeOut
-					});
-					tween(self.heartFrames[self.heartType + 1][4], {
-						scaleX: 1.1,
-						scaleY: 1.1
-					}, {
-						duration: 300,
-						easing: tween.easeOut
-					});
 				} else {
 					log("No nextGraphic for explosion!");
 				}
-			}, 0);
+			}, 205);
 		}
 	};
 	self.resetGraphics = function () {
-		log("resetGraphics...");
+		log("=== resetGraphics ===");
 		// Stop current graphic tweens
 		if (self.currentGraphic && self.currentGraphic._activeTween) {
 			self.currentGraphic._activeTween.stop();
+			log("Stopped currentGraphic tween");
 		}
 		if (self.nextGraphic && self.nextGraphic._activeTween) {
 			self.nextGraphic._activeTween.stop();
+			log("Stopped nextGraphic tween");
 		}
 		// Hide only active frames
 		if (self.currentGraphic) {
 			self.currentGraphic.visible = false;
+			log("Set currentGraphic visible to false");
 		}
 		if (self.nextGraphic) {
 			self.nextGraphic.visible = false;
+			log("Set nextGraphic visible to false");
 		}
 		self.currentGraphic = null;
 		self.nextGraphic = null;
+		log("Reset currentGraphic and nextGraphic to null");
+		log("=== End resetGraphics ===\n");
 	};
 });
 // Create a class for bigHeart
 var GeneratorButton = Container.expand(function (index) {
@@ -617,18 +652,71 @@
 			}
 		}
 	};
 	self.updateHeartType = function (heartType) {
-		// Update the heart type for all hearts in the pool
-		self.isUpdatingHeartType = true; // Set flag to indicate updateHeartType is running
-		self.heartPool.forEach(function (heart) {
-			heart.children.forEach(function (child) {
-				// Iterate over all children
-				child.visible = child.heartType === heartType; // Set visibility based on heartType
+		log("=== updateHeartType ===");
+		log("Previous heartType:", self.heartType);
+		log("New heartType:", heartType);
+		// Make all frames of the current heartType invisible
+		if (self.heartType !== undefined && self.heartFrames[self.heartType]) {
+			log("Hiding frames for heartType:", self.heartType);
+			self.heartFrames[self.heartType].forEach(function (frame, index) {
+				if (frame) {
+					frame.visible = false;
+					log("- Frame", index, "visibility set to false");
+				}
 			});
-		});
-		self.isUpdatingHeartType = false; // Reset flag after updateHeartType completes
+		}
+		// Update heart type
+		self.heartType = heartType;
+		log("Heart type updated to:", self.heartType);
+		// Reset graphics for new heart type
+		self.resetGraphics();
+		log("Graphics reset for new heart type");
+		// Initialize graphics for new heart type
+		self.currentGraphic = self.heartFrames[self.heartType][5];
+		self.nextGraphic = self.heartFrames[self.heartType][4];
+		if (self.currentGraphic) {
+			self.currentGraphic.visible = true;
+			self.currentGraphic.scaleX = self.currentGraphic.scaleY = 1.1;
+		}
+		if (self.nextGraphic) {
+			self.nextGraphic.visible = true;
+			self.nextGraphic.scaleX = self.nextGraphic.scaleY = 1;
+		}
+		log("Initialized graphics for new heart type");
+		// Update projections
+		if (projectionsManager) {
+			log("Updating projections manager with heartType:", heartType);
+			projectionsManager.updateHeartType(heartType);
+		}
+		log("=== End updateHeartType ===\n");
 	};
+	self.resetGraphics = function () {
+		log("=== resetGraphics ===");
+		// Stop current graphic tweens
+		if (self.currentGraphic && self.currentGraphic._activeTween) {
+			self.currentGraphic._activeTween.stop();
+			log("Stopped currentGraphic tween");
+		}
+		if (self.nextGraphic && self.nextGraphic._activeTween) {
+			self.nextGraphic._activeTween.stop();
+			log("Stopped nextGraphic tween");
+		}
+		// Hide only active frames
+		if (self.currentGraphic) {
+			self.currentGraphic.visible = false;
+			log("Set currentGraphic visible to false");
+		}
+		if (self.nextGraphic) {
+			self.nextGraphic.visible = false;
+			log("Set nextGraphic visible to false");
+		}
+		self.currentGraphic = null;
+		self.nextGraphic = null;
+		log("Reset currentGraphic and nextGraphic to null");
+		log("=== End resetGraphics ===\n");
+	};
 });
 var RainDrop = Container.expand(function () {
 	var self = Container.call(this);
 	self.assets = [];
@@ -952,9 +1040,9 @@
 			});
 		}
 	});
 }
-var isDebug = false;
+var isDebug = true;
 var SWIPE_THRESHOLD = 10; // Threshold in pixels to distinguish between taps and swipes
 var TAP_DETECT_DELAY = 600;
 // Declare maxGenerators as a global variable
 var maxGenerators = 2;
@@ -1209,11 +1297,9 @@
 					frame.visible = false;
 				});
 				bigHeart.animateExplosion(function () {
 					self.currentLevel++;
-					bigHeart.heartType = self.currentLevel;
 					self.updateHeartProgress(); // Start new level with correct frame
-					projectionsManager.updateHeartType(bigHeart.heartType);
 				});
 			}
 		}
 	};