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

/**** 
* Classes
****/ 
// DrumPad: Interactive drum pad at the bottom
var DrumPad = Container.expand(function () {
	var self = Container.call(this);
	// .padType: 'kick', 'snare', etc. (set after creation)
	self.padType = null;
	self.asset = null;
	// .isPressed: for visual feedback
	self.isPressed = false;
	// Set up asset
	self.setPadType = function (type) {
		self.padType = type;
		var assetId = type + 'Pad';
		if (self.asset) self.removeChild(self.asset);
		var size = PAD_SIZES[type];
		self.asset = self.attachAsset(assetId, {
			anchorX: 0.5,
			anchorY: 0.5,
			width: size ? size.w : undefined,
			height: size ? size.h : undefined
		});
	};
	// Visual feedback on press
	self.flash = function () {
		if (!self.asset) return;
		tween(self.asset, {
			alpha: 0.5
		}, {
			duration: 60,
			onFinish: function onFinish() {
				tween(self.asset, {
					alpha: 1
				}, {
					duration: 120
				});
			}
		});
	};
	return self;
});
// Note: Falling note bar
var Note = Container.expand(function () {
	var self = Container.call(this);
	// .noteType: 'kick', 'snare', etc.
	self.noteType = null;
	self.asset = null;
	self.hit = false; // If already hit
	self.setNoteType = function (type) {
		self.noteType = type;
		var assetId = type + 'Note';
		if (self.asset) self.removeChild(self.asset);
		self.asset = self.attachAsset(assetId, {
			anchorX: 0.5,
			anchorY: 0.5
		});
	};
	// Called every tick
	self.update = function () {
		self.y += noteSpeed;
	};
	return self;
});

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

/**** 
* Game Code
****/ 
// --- Game constants ---
// Drum pads (kick, snare, hi-hat, tom1, tom2, crash1, crash2)
// Note bars (falling notes)
// Sounds for each drum
// Music track
// Drum pad sounds
var PAD_TYPES = ['kick', 'snare', 'hihat', 'tom1', 'crash1'];
var PAD_COLS = PAD_TYPES.length;
var GAME_W = 2048,
	GAME_H = 2732;
var PAD_Y = GAME_H - 320; // Y position for pads
// --- Pad Sizing and Full-Width Layout ---
// Each pad will be as wide as possible, with no side gaps, and all pads will be adjacent.
var PAD_SIZES = {};
var PAD_X_POSITIONS = {};
var padWidth = GAME_W / PAD_COLS;
var padCenterY = PAD_Y;
for (var i = 0; i < PAD_COLS; i++) {
	var type = PAD_TYPES[i];
	// Pad width: fill the column, pad height: keep previous aspect ratio (or max of previous)
	// We'll use the original aspect ratio for each pad type, but scale width to padWidth
	// Use original aspect ratios from previous PAD_SIZES
	var origSizes = {
		'kick': {
			w: 420,
			h: 210
		},
		'snare': {
			w: 340,
			h: 170
		},
		'hihat': {
			w: 300,
			h: 150
		},
		'tom1': {
			w: 320,
			h: 160
		},
		'crash1': {
			w: 340,
			h: 170
		}
	};
	var aspect = origSizes[type].h / origSizes[type].w;
	var w = padWidth;
	var h = w * aspect;
	PAD_SIZES[type] = {
		w: w,
		h: h
	};
	// Center of each pad: left edge + half width + i*padWidth
	PAD_X_POSITIONS[type] = i * padWidth + padWidth / 2;
}
// Swap hihat and tom1 X positions
var tmpX = PAD_X_POSITIONS['hihat'];
PAD_X_POSITIONS['hihat'] = PAD_X_POSITIONS['tom1'];
PAD_X_POSITIONS['tom1'] = tmpX;
// Note spawn area (top)
var NOTE_START_Y = -60;
var NOTE_TARGET_Y = PAD_Y - 80; // Where notes should be hit
// Note speed (pixels per frame)
var noteSpeed = 18;
// Timing window (pixels): how close to NOTE_TARGET_Y is a "hit"
var HIT_WINDOW = 100;
// --- State ---
var pads = [];
var notes = [];
var score = 0;
var combo = 0;
var maxCombo = 0;
var lastTick = 0;
var noteIndex = 0;
var isPlaying = false;
var songStartTick = 0;
// --- UI ---
var scoreTxt = new Text2('0', {
	size: 120,
	fill: "#fff"
});
scoreTxt.anchor.set(0.5, 0);
LK.gui.top.addChild(scoreTxt);
var comboTxt = new Text2('', {
	size: 70,
	fill: 0xFFE066
});
comboTxt.anchor.set(0.5, 0);
LK.gui.top.addChild(comboTxt);
comboTxt.y = 130;
// --- Song Data (simple pattern for MVP) ---
// Each entry: {tick: <when to spawn>, type: <padType>}
var songNotes = [];
(function () {
	// Simple repeating pattern for MVP
	var pattern = [{
		type: 'kick',
		delay: 0
	}, {
		type: 'snare',
		delay: 18
	}, {
		type: 'hihat',
		delay: 18
	}, {
		type: 'kick',
		delay: 18
	}, {
		type: 'snare',
		delay: 18
	}, {
		type: 'tom1',
		delay: 18
	}, {
		type: 'crash1',
		delay: 36
	}];
	var t = 0;
	for (var i = 0; i < 32; i++) {
		for (var j = 0; j < pattern.length; j++) {
			songNotes.push({
				tick: t,
				type: pattern[j].type
			});
			t += pattern[j].delay;
		}
	}
})();
// --- Create Drum Pads ---
for (var i = 0; i < PAD_COLS; i++) {
	var pad = new DrumPad();
	pad.setPadType(PAD_TYPES[i]);
	pad.x = PAD_X_POSITIONS[PAD_TYPES[i]];
	pad.y = PAD_Y;
	pad.padIndex = i;
	pads.push(pad);
	game.addChild(pad);
}
// --- Pad Touch Handling ---
var activePad = null;
function getPadAt(x, y) {
	for (var i = 0; i < pads.length; i++) {
		var pad = pads[i];
		var dx = x - pad.x,
			dy = y - pad.y;
		var rx = pad.asset.width / 2,
			ry = pad.asset.height / 2;
		if (dx * dx / (rx * rx) + dy * dy / (ry * ry) <= 1) return pad;
	}
	return null;
}
game.down = function (x, y, obj) {
	var pad = getPadAt(x, y);
	if (pad) {
		activePad = pad;
		handlePadHit(pad);
	}
};
game.move = function (x, y, obj) {
	// For multi-touch, could be extended
};
game.up = function (x, y, obj) {
	activePad = null;
};
// --- Note Spawning ---
function spawnNote(type) {
	var note = new Note();
	note.setNoteType(type);
	note.x = PAD_X_POSITIONS[type];
	note.y = NOTE_START_Y;
	note.noteType = type;
	note.hit = false;
	notes.push(note);
	game.addChild(note);
}
// --- Pad Hit Logic ---
function handlePadHit(pad) {
	// Play sound
	var soundId = pad.padType + 'Sound';
	var sound = LK.getSound(soundId);
	if (sound) {
		if (sound.stop) sound.stop(); // Stop if already playing to avoid overlap/delay
		sound.play();
	}
	// Visual feedback
	pad.flash();
	// Find closest note of this type in hit window
	var bestNote = null,
		bestDist = HIT_WINDOW;
	for (var i = 0; i < notes.length; i++) {
		var note = notes[i];
		if (note.hit) continue;
		if (note.noteType !== pad.padType) continue;
		var dist = Math.abs(note.y - NOTE_TARGET_Y);
		if (dist < bestDist) {
			bestDist = dist;
			bestNote = note;
		}
	}
	if (bestNote) {
		// Hit!
		bestNote.hit = true;
		LK.effects.flashObject(bestNote, 0xffffff, 120);
		tween(bestNote, {
			alpha: 0
		}, {
			duration: 120,
			onFinish: function onFinish() {
				bestNote.destroy();
			}
		});
		notes.splice(notes.indexOf(bestNote), 1);
		score += 100;
		combo += 1;
		if (combo > maxCombo) maxCombo = combo;
		scoreTxt.setText(score);
		comboTxt.setText(combo > 1 ? combo + 'x' : '');
	} else {
		// Miss!
		LK.effects.flashScreen(0xff0000, 200);
		combo = 0;
		comboTxt.setText('');
	}
}
// --- Game Update ---
game.update = function () {
	if (!isPlaying) return;
	// Spawn notes according to songNotes
	var relTick = LK.ticks - songStartTick;
	while (noteIndex < songNotes.length && songNotes[noteIndex].tick <= relTick) {
		spawnNote(songNotes[noteIndex].type);
		noteIndex++;
	}
	// Update notes, check for misses
	for (var i = notes.length - 1; i >= 0; i--) {
		var note = notes[i];
		note.update();
		if (!note.hit && note.y > NOTE_TARGET_Y + HIT_WINDOW) {
			// Missed note
			LK.effects.flashObject(note, 0xff0000, 120);
			tween(note, {
				alpha: 0
			}, {
				duration: 120,
				onFinish: function onFinish() {
					note.destroy();
				}
			});
			notes.splice(i, 1);
			combo = 0;
			comboTxt.setText('');
		}
		// Remove notes that go off screen
		if (note.y > GAME_H + 100) {
			if (notes.indexOf(note) !== -1) notes.splice(notes.indexOf(note), 1);
			note.destroy();
		}
	}
	// End of song
	if (noteIndex >= songNotes.length && notes.length === 0) {
		isPlaying = false;
		LK.showYouWin();
	}
};
// --- Start Game ---
function startGame() {
	score = 0;
	combo = 0;
	maxCombo = 0;
	scoreTxt.setText('0');
	comboTxt.setText('');
	notes = [];
	noteIndex = 0;
	isPlaying = true;
	songStartTick = LK.ticks;
	// Preload all drum sounds to reduce latency
	var preloadSounds = ['kickSound', 'snareSound', 'hihatSound', 'tom1Sound', 'crash1Sound'];
	for (var i = 0; i < preloadSounds.length; i++) {
		var s = LK.getSound(preloadSounds[i]);
		if (s && s.play) {
			// Play at zero volume to warm up, then stop immediately
			s.volume = 0;
			s.play();
			if (s.stop) s.stop();
			s.volume = 1;
		}
	}
	LK.playMusic('drumTrack');
}
startGame();
// --- Game Over Handling (missed notes or end of song) ---
// Handled by LK.showYouWin() or LK.showGameOver() as needed
// --- Responsive UI (center score) ---
scoreTxt.x = LK.gui.top.width / 2;
comboTxt.x = LK.gui.top.width / 2;

===================================================================
--- original.js
+++ change.js
@@ -88,36 +88,50 @@
 var PAD_COLS = PAD_TYPES.length;
 var GAME_W = 2048,
 	GAME_H = 2732;
 var PAD_Y = GAME_H - 320; // Y position for pads
-// --- Pad Sizing and Equal Spacing ---
-var PAD_SIZES = {
-	'kick': {
-		w: 420,
-		h: 210
-	},
-	'snare': {
-		w: 340,
-		h: 170
-	},
-	'hihat': {
-		w: 300,
-		h: 150
-	},
-	'tom1': {
-		w: 320,
-		h: 160
-	},
-	'crash1': {
-		w: 340,
-		h: 170
-	}
-};
-// Calculate equal spacing for pads
+// --- Pad Sizing and Full-Width Layout ---
+// Each pad will be as wide as possible, with no side gaps, and all pads will be adjacent.
+var PAD_SIZES = {};
 var PAD_X_POSITIONS = {};
-var padSpacing = GAME_W / (PAD_COLS + 1);
+var padWidth = GAME_W / PAD_COLS;
+var padCenterY = PAD_Y;
 for (var i = 0; i < PAD_COLS; i++) {
-	PAD_X_POSITIONS[PAD_TYPES[i]] = padSpacing * (i + 1);
+	var type = PAD_TYPES[i];
+	// Pad width: fill the column, pad height: keep previous aspect ratio (or max of previous)
+	// We'll use the original aspect ratio for each pad type, but scale width to padWidth
+	// Use original aspect ratios from previous PAD_SIZES
+	var origSizes = {
+		'kick': {
+			w: 420,
+			h: 210
+		},
+		'snare': {
+			w: 340,
+			h: 170
+		},
+		'hihat': {
+			w: 300,
+			h: 150
+		},
+		'tom1': {
+			w: 320,
+			h: 160
+		},
+		'crash1': {
+			w: 340,
+			h: 170
+		}
+	};
+	var aspect = origSizes[type].h / origSizes[type].w;
+	var w = padWidth;
+	var h = w * aspect;
+	PAD_SIZES[type] = {
+		w: w,
+		h: h
+	};
+	// Center of each pad: left edge + half width + i*padWidth
+	PAD_X_POSITIONS[type] = i * padWidth + padWidth / 2;
 }
 // Swap hihat and tom1 X positions
 var tmpX = PAD_X_POSITIONS['hihat'];
 PAD_X_POSITIONS['hihat'] = PAD_X_POSITIONS['tom1'];