/**** 
* Plugins
****/ 
var tween = LK.import("@upit/tween.v1");

/**** 
* Classes
****/ 
// BeatCell: A single cell in the sequencer grid
var BeatCell = Container.expand(function () {
	var self = Container.call(this);
	// State: is this cell active?
	self.active = false;
	// Store which row this cell is in (set externally after creation)
	self.row = 0;
	// Attach inactive asset by default
	self.gfx = self.attachAsset('cell', {
		anchorX: 0.5,
		anchorY: 0.5
	});
	// For toggling
	self.toggle = function () {
		self.active = !self.active;
		self.gfx.destroy();
		if (self.active) {
			// Use different asset for each row
			if (self.row === 0) {
				self.gfx = self.attachAsset('cellLeft', {
					anchorX: 0.5,
					anchorY: 0.5
				});
			} else if (self.row === 1) {
				self.gfx = self.attachAsset('cellActive', {
					anchorX: 0.5,
					anchorY: 0.5
				});
			} else if (self.row === 2) {
				self.gfx = self.attachAsset('cellRight', {
					anchorX: 0.5,
					anchorY: 0.5
				});
			}
		} else {
			self.gfx = self.attachAsset('cell', {
				anchorX: 0.5,
				anchorY: 0.5
			});
		}
	};
	// Set state directly
	self.setActive = function (val) {
		if (self.active !== val) self.toggle();
	};
	// Touch/click event
	self.down = function (x, y, obj) {
		self.toggle();
	};
	return self;
});
// Hero: The main character that reacts to the beat
var Hero = Container.expand(function () {
	var self = Container.call(this);
	self.gfx = self.attachAsset('hero', {
		anchorX: 0.5,
		anchorY: 0.5
	});
	// Jump indicator (hidden by default)
	self.jumpInd = self.attachAsset('jump', {
		anchorX: 0.5,
		anchorY: 1
	});
	self.jumpInd.y = self.gfx.height / 2 + 10;
	self.jumpInd.alpha = 0;
	// State
	self.isJumping = false;
	// Move to (x, y) with tween
	self.moveTo = function (nx, ny, duration) {
		tween(self, {
			x: nx,
			y: ny
		}, {
			duration: duration || 180,
			easing: tween.cubicOut
		});
	};
	// Jump animation
	self.jump = function () {
		if (self.isJumping) return;
		self.isJumping = true;
		// Show jump indicator
		self.jumpInd.alpha = 1;
		// Animate up and down
		var origY = self.y;
		tween(self, {
			y: origY - 180
		}, {
			duration: 120,
			easing: tween.easeOut,
			onFinish: function onFinish() {
				tween(self, {
					y: origY
				}, {
					duration: 180,
					easing: tween.bounceIn,
					onFinish: function onFinish() {
						self.isJumping = false;
						self.jumpInd.alpha = 0;
					}
				});
			}
		});
		LK.getSound('jumpSnd').play();
	};
	return self;
});

/**** 
* Initialize Game
****/ 
var game = new LK.Game({
	backgroundColor: 0x181830
});

/**** 
* Game Code
****/ 
// Music loop (background, optional)
// Sound for move
// Sound for jump
// Sound for beat
// Jump indicator
// Character
// Beat grid cell (active)
// Beat grid cell (inactive)
// --- Sequencer Grid Setup ---
// --- Sequencer Grid Setup ---
// Fit grid to full width (leaving 40px margin on each side)
var GRID_COLS = 8; // Steps per bar
var GRID_ROWS = 3; // Actions: 0=move left, 1=jump, 2=move right
var GRID_MARGIN_X = 40;
var CELL_SIZE = Math.floor((2048 - 2 * GRID_MARGIN_X) / GRID_COLS);
var GRID_HEIGHT = GRID_ROWS * CELL_SIZE;
var GRID_TOP = 2732 - GRID_HEIGHT - 80; // 80px margin from bottom
var GRID_LEFT = GRID_MARGIN_X;
// Store grid cells
var grid = [];
for (var r = 0; r < GRID_ROWS; r++) {
	grid[r] = [];
	for (var c = 0; c < GRID_COLS; c++) {
		var cell = new BeatCell();
		cell.row = r;
		cell.x = GRID_LEFT + c * CELL_SIZE + CELL_SIZE / 2;
		cell.y = GRID_TOP + r * CELL_SIZE + CELL_SIZE / 2;
		game.addChild(cell);
		grid[r][c] = cell;
	}
}
// --- Hero Setup ---
var hero = new Hero();
var HERO_START_X = GRID_LEFT + Math.floor(GRID_COLS / 2) * CELL_SIZE + CELL_SIZE / 2;
var HERO_START_Y = GRID_TOP - 220;
hero.x = HERO_START_X;
hero.y = HERO_START_Y;
game.addChild(hero);
// --- Sequencer State ---
var currentStep = 0;
var stepInterval = 400; // ms per step (150bpm)
var lastStepTime = Date.now();
var playing = true;
// --- Score & UI ---
var score = 0;
var scoreTxt = new Text2('0', {
	size: 100,
	fill: "#fff"
});
scoreTxt.anchor.set(0.5, 0);
LK.gui.top.addChild(scoreTxt);
// Step indicator (shows which column is active)
var stepIndicators = [];
for (var c = 0; c < GRID_COLS; c++) {
	var ind = LK.getAsset('cellActive', {
		anchorX: 0.5,
		anchorY: 0.5,
		scaleX: 0.3,
		scaleY: 0.3,
		alpha: 0.0
	});
	ind.x = GRID_LEFT + c * CELL_SIZE + CELL_SIZE / 2;
	ind.y = GRID_TOP + GRID_ROWS * CELL_SIZE + 40; // Just below the grid
	game.addChild(ind);
	stepIndicators.push(ind);
}
// --- Game Board Boundaries ---
var HERO_MIN_X = GRID_LEFT + CELL_SIZE / 2;
var HERO_MAX_X = GRID_LEFT + (GRID_COLS - 1) * CELL_SIZE + CELL_SIZE / 2;
// --- Touch: Drag to move hero horizontally (optional, for fun) ---
var dragHero = false;
game.down = function (x, y, obj) {
	// If touch is near hero, allow drag
	var dx = x - hero.x,
		dy = y - hero.y;
	if (dx * dx + dy * dy < 200 * 200) {
		dragHero = true;
	}
};
game.up = function (x, y, obj) {
	dragHero = false;
};
game.move = function (x, y, obj) {
	if (dragHero) {
		// Clamp to board
		var nx = Math.max(HERO_MIN_X, Math.min(HERO_MAX_X, x));
		hero.x = nx;
	}
};
// --- Main Sequencer Logic ---
function doStepActions(stepIdx) {
	// For each row, if cell is active, trigger action
	var didAction = false;
	// Determine which actions are active for this step
	var leftActive = grid[0][stepIdx].active;
	var jumpActive = grid[1][stepIdx].active;
	var rightActive = grid[2][stepIdx].active;
	// If both left and right are active, they cancel out (no horizontal movement)
	var horizontalMove = 0;
	if (leftActive && !rightActive) {
		horizontalMove = -1;
	}
	if (rightActive && !leftActive) {
		horizontalMove = 1;
	}
	// If both left and right are active, horizontalMove remains 0
	// If jump is active
	if (jumpActive) {
		// If both left and right are active, only perform standstill jump
		if (horizontalMove === 0) {
			hero.jump();
			didAction = true;
		} else {
			// Blend jump with movement: jump and move in the direction
			// Move first, then jump (for visual effect)
			var nx = hero.x + horizontalMove * CELL_SIZE;
			// Teleport if out of bounds
			if (nx < HERO_MIN_X) nx = HERO_MAX_X;
			if (nx > HERO_MAX_X) nx = HERO_MIN_X;
			if (nx !== hero.x) {
				hero.moveTo(nx, hero.y, 180);
				LK.getSound('moveSnd').play();
			}
			hero.jump();
			didAction = true;
		}
	} else {
		// No jump, just move if left or right (but not both)
		if (horizontalMove !== 0) {
			var nx = hero.x + horizontalMove * CELL_SIZE;
			// Teleport if out of bounds
			if (nx < HERO_MIN_X) nx = HERO_MAX_X;
			if (nx > HERO_MAX_X) nx = HERO_MIN_X;
			if (nx !== hero.x) {
				hero.moveTo(nx, hero.y, 180);
				LK.getSound('moveSnd').play();
				didAction = true;
			}
		}
	}
	// Play beat sound if any action
	if (didAction) {
		LK.getSound('beat').play();
		score += 1;
		scoreTxt.setText(score);
		// Win condition: 1000 actions
		if (score >= 1000) {
			LK.showYouWin();
		}
	}
}
// --- Game Update Loop ---
game.update = function () {
	// Step sequencer timing
	var now = Date.now();
	if (playing && now - lastStepTime >= stepInterval) {
		// Hide previous step indicator
		stepIndicators[currentStep].alpha = 0.0;
		// Advance step
		currentStep = (currentStep + 1) % GRID_COLS;
		// Show current step indicator
		stepIndicators[currentStep].alpha = 1.0;
		// Animate indicator
		tween(stepIndicators[currentStep], {
			alpha: 0.0
		}, {
			duration: stepInterval - 40,
			easing: tween.linear
		});
		// Trigger actions
		doStepActions(currentStep);
		lastStepTime = now;
	}
};
// --- Music (optional) ---
LK.playMusic('bgmusic', {
	fade: {
		start: 0,
		end: 0.3,
		duration: 1200
	}
});
// (Instructions/tutorial text removed)
// --- Game Over: Reset state automatically handled by LK ---
// --- Prevent UI in top-left 100x100 px ---
/* No elements placed in this area */

===================================================================
--- original.js
+++ change.js
@@ -10,8 +10,10 @@
 var BeatCell = Container.expand(function () {
 	var self = Container.call(this);
 	// State: is this cell active?
 	self.active = false;
+	// Store which row this cell is in (set externally after creation)
+	self.row = 0;
 	// Attach inactive asset by default
 	self.gfx = self.attachAsset('cell', {
 		anchorX: 0.5,
 		anchorY: 0.5
@@ -20,12 +22,25 @@
 	self.toggle = function () {
 		self.active = !self.active;
 		self.gfx.destroy();
 		if (self.active) {
-			self.gfx = self.attachAsset('cellActive', {
-				anchorX: 0.5,
-				anchorY: 0.5
-			});
+			// Use different asset for each row
+			if (self.row === 0) {
+				self.gfx = self.attachAsset('cellLeft', {
+					anchorX: 0.5,
+					anchorY: 0.5
+				});
+			} else if (self.row === 1) {
+				self.gfx = self.attachAsset('cellActive', {
+					anchorX: 0.5,
+					anchorY: 0.5
+				});
+			} else if (self.row === 2) {
+				self.gfx = self.attachAsset('cellRight', {
+					anchorX: 0.5,
+					anchorY: 0.5
+				});
+			}
 		} else {
 			self.gfx = self.attachAsset('cell', {
 				anchorX: 0.5,
 				anchorY: 0.5
@@ -132,8 +147,9 @@
 for (var r = 0; r < GRID_ROWS; r++) {
 	grid[r] = [];
 	for (var c = 0; c < GRID_COLS; c++) {
 		var cell = new BeatCell();
+		cell.row = r;
 		cell.x = GRID_LEFT + c * CELL_SIZE + CELL_SIZE / 2;
 		cell.y = GRID_TOP + r * CELL_SIZE + CELL_SIZE / 2;
 		game.addChild(cell);
 		grid[r][c] = cell;
@@ -169,9 +185,9 @@
 		scaleY: 0.3,
 		alpha: 0.0
 	});
 	ind.x = GRID_LEFT + c * CELL_SIZE + CELL_SIZE / 2;
-	ind.y = GRID_TOP - 40; // Just above the grid
+	ind.y = GRID_TOP + GRID_ROWS * CELL_SIZE + 40; // Just below the grid
 	game.addChild(ind);
 	stepIndicators.push(ind);
 }
 // --- Game Board Boundaries ---