/**** 
* Plugins
****/ 
var tween = LK.import("@upit/tween.v1");
var storage = LK.import("@upit/storage.v1", {
	currentTrack: 0,
	volume: 0.7,
	playlistOrder: [0, 1, 2, 3, 4]
});

/**** 
* Classes
****/ 
var PlaybackControls = Container.expand(function () {
	var self = Container.call(this);
	var isPlaying = false;
	var playButton = self.attachAsset('playButton', {
		anchorX: 0.5,
		anchorY: 0.5,
		x: 0,
		y: 0
	});
	var pauseButton = self.attachAsset('pauseButton', {
		anchorX: 0.5,
		anchorY: 0.5,
		x: 0,
		y: 0
	});
	pauseButton.visible = false;
	var prevButton = self.attachAsset('skipButton', {
		anchorX: 0.5,
		anchorY: 0.5,
		x: -150,
		y: 0
	});
	var nextButton = self.attachAsset('skipButton', {
		anchorX: 0.5,
		anchorY: 0.5,
		x: 150,
		y: 0
	});
	self.setPlayingState = function (playing) {
		isPlaying = playing;
		playButton.visible = !isPlaying;
		pauseButton.visible = isPlaying;
	};
	playButton.interactive = true;
	playButton.down = function (x, y, obj) {
		tween(playButton, {
			scaleX: 0.9,
			scaleY: 0.9
		}, {
			duration: 100
		});
	};
	playButton.up = function (x, y, obj) {
		tween(playButton, {
			scaleX: 1,
			scaleY: 1
		}, {
			duration: 100
		});
		LK.getSound('button_click').play();
		self.setPlayingState(true);
		if (typeof self.onPlay === 'function') {
			self.onPlay();
		}
	};
	pauseButton.interactive = true;
	pauseButton.down = function (x, y, obj) {
		tween(pauseButton, {
			scaleX: 0.9,
			scaleY: 0.9
		}, {
			duration: 100
		});
	};
	pauseButton.up = function (x, y, obj) {
		tween(pauseButton, {
			scaleX: 1,
			scaleY: 1
		}, {
			duration: 100
		});
		LK.getSound('button_click').play();
		self.setPlayingState(false);
		if (typeof self.onPause === 'function') {
			self.onPause();
		}
	};
	prevButton.interactive = true;
	prevButton.down = function (x, y, obj) {
		tween(prevButton, {
			scaleX: 0.9,
			scaleY: 0.9
		}, {
			duration: 100
		});
	};
	prevButton.up = function (x, y, obj) {
		tween(prevButton, {
			scaleX: 1,
			scaleY: 1
		}, {
			duration: 100
		});
		LK.getSound('button_click').play();
		if (typeof self.onPrevious === 'function') {
			self.onPrevious();
		}
	};
	nextButton.interactive = true;
	nextButton.down = function (x, y, obj) {
		tween(nextButton, {
			scaleX: 0.9,
			scaleY: 0.9
		}, {
			duration: 100
		});
	};
	nextButton.up = function (x, y, obj) {
		tween(nextButton, {
			scaleX: 1,
			scaleY: 1
		}, {
			duration: 100
		});
		LK.getSound('button_click').play();
		if (typeof self.onNext === 'function') {
			self.onNext();
		}
	};
	return self;
});
var TrackButton = Container.expand(function (trackId, trackName, artist) {
	var self = Container.call(this);
	self.trackId = trackId;
	self.trackName = trackName;
	self.artist = artist;
	var background = self.attachAsset('trackButton', {
		anchorX: 0,
		anchorY: 0
	});
	var trackText = new Text2(trackName, {
		size: 40,
		fill: 0xFFFFFF
	});
	trackText.anchor.set(0, 0);
	trackText.x = 20;
	trackText.y = 20;
	self.addChild(trackText);
	var artistText = new Text2(artist, {
		size: 30,
		fill: 0xCCCCCC
	});
	artistText.anchor.set(0, 0);
	artistText.x = 20;
	artistText.y = 80;
	self.addChild(artistText);
	self.setHighlight = function (isHighlighted) {
		if (isHighlighted) {
			background.tint = 0x555555;
		} else {
			background.tint = 0x333333;
		}
	};
	self.down = function (x, y, obj) {
		self.setHighlight(true);
	};
	self.up = function (x, y, obj) {
		self.setHighlight(false);
		LK.getSound('button_click').play();
		if (typeof self.onSelect === 'function') {
			self.onSelect(self.trackId);
		}
	};
	return self;
});
var Visualizer = Container.expand(function (numBars) {
	var self = Container.call(this);
	var bars = [];
	var numBars = numBars || 16;
	var gapSize = 10;
	var barWidth = 30;
	var maxBarHeight = 300;
	for (var i = 0; i < numBars; i++) {
		var bar = self.attachAsset('visualizer', {
			anchorX: 0.5,
			anchorY: 1,
			x: i * (barWidth + gapSize) - numBars * (barWidth + gapSize) / 2 + barWidth / 2 + gapSize / 2,
			y: 0,
			scaleY: 0.1
		});
		bars.push(bar);
	}
	self.update = function () {
		for (var i = 0; i < bars.length; i++) {
			var targetHeight = Math.random();
			tween(bars[i], {
				scaleY: 0.1 + targetHeight * 0.9
			}, {
				duration: 200,
				easing: tween.easeOut
			});
		}
	};
	self.pulse = function () {
		for (var i = 0; i < bars.length; i++) {
			var delay = i * 20;
			var bar = bars[i];
			var originalScale = bar.scaleY;
			LK.setTimeout(function () {
				tween(bar, {
					scaleY: originalScale * 1.5
				}, {
					duration: 200,
					easing: tween.easeOut,
					onFinish: function onFinish() {
						tween(bar, {
							scaleY: originalScale
						}, {
							duration: 300,
							easing: tween.easeIn
						});
					}
				});
			}, delay);
		}
	};
	return self;
});
var VolumeControl = Container.expand(function () {
	var self = Container.call(this);
	var volumeBar = self.attachAsset('volumeBar', {
		anchorX: 0,
		anchorY: 0.5,
		x: 0,
		y: 0
	});
	var volumeIndicator = self.attachAsset('volumeIndicator', {
		anchorX: 0.5,
		anchorY: 0.5,
		x: 280,
		y: 0
	});
	var volumeLabel = new Text2("VOLUME", {
		size: 30,
		fill: 0xFFFFFF
	});
	volumeLabel.anchor.set(0, 0.5);
	volumeLabel.x = -120;
	volumeLabel.y = 0;
	self.addChild(volumeLabel);
	var isDragging = false;
	self.volume = storage.volume;
	self.updateIndicatorPosition = function () {
		volumeIndicator.x = volumeBar.width * self.volume;
	};
	self.updateIndicatorPosition();
	self.setVolume = function (volume) {
		self.volume = Math.max(0, Math.min(1, volume));
		storage.volume = self.volume;
		self.updateIndicatorPosition();
		if (typeof self.onVolumeChange === 'function') {
			self.onVolumeChange(self.volume);
		}
	};
	volumeBar.interactive = true;
	volumeBar.down = function (x, y, obj) {
		isDragging = true;
		var localX = x - volumeBar.x;
		var volume = Math.max(0, Math.min(1, localX / volumeBar.width));
		self.setVolume(volume);
	};
	volumeBar.up = function (x, y, obj) {
		isDragging = false;
	};
	volumeBar.move = function (x, y, obj) {
		if (isDragging) {
			var localX = x - volumeBar.x;
			var volume = Math.max(0, Math.min(1, localX / volumeBar.width));
			self.setVolume(volume);
		}
	};
	volumeIndicator.interactive = true;
	volumeIndicator.down = function (x, y, obj) {
		isDragging = true;
	};
	volumeIndicator.up = function (x, y, obj) {
		isDragging = false;
	};
	volumeIndicator.move = function (x, y, obj) {
		if (isDragging) {
			var localX = x;
			var volume = Math.max(0, Math.min(1, localX / volumeBar.width));
			self.setVolume(volume);
		}
	};
	return self;
});

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

/**** 
* Game Code
****/ 
// Game state variables
var currentTrack = storage.currentTrack;
var isPlaying = false;
var tracks = [{
	id: 'hiphop_track_1',
	name: "Old School Beats",
	artist: "DJ Smooth"
}, {
	id: 'hiphop_track_2',
	name: "Street Flow",
	artist: "MC Rapids"
}, {
	id: 'hiphop_track_3',
	name: "Urban Groove",
	artist: "Lyrical Giants"
}, {
	id: 'hiphop_track_4',
	name: "Concrete Jungle",
	artist: "City Dwellers"
}, {
	id: 'hiphop_track_5',
	name: "Rhythm Nation",
	artist: "Beat Collective"
}];
var playlistOrder = storage.playlistOrder;
var visualizerUpdateTimer;
// Create background
game.setBackgroundColor(0x111111);
// Create title
var titleText = new Text2("HIP-HOP RADIO MIXER", {
	size: 80,
	fill: 0xFFFFFF
});
titleText.anchor.set(0.5, 0);
titleText.x = 2048 / 2;
titleText.y = 100;
game.addChild(titleText);
// Create playlist container
var playlistContainer = game.addChild(LK.getAsset('playlist', {
	anchorX: 0.5,
	anchorY: 0,
	x: 2048 / 2,
	y: 220
}));
var playlistLabel = new Text2("TRACKS", {
	size: 50,
	fill: 0xFFFFFF
});
playlistLabel.anchor.set(0.5, 0);
playlistLabel.x = 0;
playlistLabel.y = 20;
playlistContainer.addChild(playlistLabel);
// Add track buttons to playlist
var trackButtons = [];
for (var i = 0; i < tracks.length; i++) {
	var track = tracks[i];
	var trackButton = new TrackButton(i, track.name, track.artist);
	trackButton.x = -250;
	trackButton.y = 100 + i * 170;
	trackButton.onSelect = function (trackId) {
		selectTrack(trackId);
	};
	playlistContainer.addChild(trackButton);
	trackButtons.push(trackButton);
}
// Create controls
var controls = new PlaybackControls();
controls.x = 2048 / 2;
controls.y = 2732 - 400;
game.addChild(controls);
controls.onPlay = function () {
	playCurrentTrack();
};
controls.onPause = function () {
	pauseCurrentTrack();
};
controls.onNext = function () {
	playNextTrack();
};
controls.onPrevious = function () {
	playPreviousTrack();
};
// Create volume control
var volumeControl = new VolumeControl();
volumeControl.x = 2048 / 2 - 200;
volumeControl.y = 2732 - 300;
game.addChild(volumeControl);
volumeControl.onVolumeChange = function (volume) {
	updateVolume(volume);
};
// Create now playing info
var nowPlayingLabel = new Text2("NOW PLAYING", {
	size: 40,
	fill: 0x999999
});
nowPlayingLabel.anchor.set(0.5, 0);
nowPlayingLabel.x = 2048 / 2;
nowPlayingLabel.y = 2732 - 600;
game.addChild(nowPlayingLabel);
var nowPlayingTrack = new Text2("", {
	size: 60,
	fill: 0xFFFFFF
});
nowPlayingTrack.anchor.set(0.5, 0);
nowPlayingTrack.x = 2048 / 2;
nowPlayingTrack.y = 2732 - 550;
game.addChild(nowPlayingTrack);
var nowPlayingArtist = new Text2("", {
	size: 40,
	fill: 0xCCCCCC
});
nowPlayingArtist.anchor.set(0.5, 0);
nowPlayingArtist.x = 2048 / 2;
nowPlayingArtist.y = 2732 - 490;
game.addChild(nowPlayingArtist);
// Create visualizer
var visualizer = new Visualizer(16);
visualizer.x = 2048 / 2;
visualizer.y = 2732 - 650;
game.addChild(visualizer);
// Functions
function selectTrack(trackId) {
	currentTrack = trackId;
	storage.currentTrack = currentTrack;
	updateNowPlaying();
	if (isPlaying) {
		playCurrentTrack();
	}
	// Update track button highlights
	for (var i = 0; i < trackButtons.length; i++) {
		trackButtons[i].setHighlight(i === currentTrack);
	}
	visualizer.pulse();
}
function updateNowPlaying() {
	var track = tracks[currentTrack];
	nowPlayingTrack.setText(track.name);
	nowPlayingArtist.setText(track.artist);
}
function playCurrentTrack() {
	var track = tracks[currentTrack];
	LK.stopMusic();
	LK.playMusic(track.id, {
		fade: {
			start: 0,
			end: volumeControl.volume,
			duration: 500
		}
	});
	isPlaying = true;
	controls.setPlayingState(true);
	// Highlight current track in playlist
	for (var i = 0; i < trackButtons.length; i++) {
		trackButtons[i].setHighlight(i === currentTrack);
	}
	// Start visualizer
	if (visualizerUpdateTimer) {
		LK.clearInterval(visualizerUpdateTimer);
	}
	visualizerUpdateTimer = LK.setInterval(function () {
		visualizer.update();
	}, 300);
}
function pauseCurrentTrack() {
	LK.stopMusic();
	isPlaying = false;
	controls.setPlayingState(false);
	// Stop visualizer updates
	if (visualizerUpdateTimer) {
		LK.clearInterval(visualizerUpdateTimer);
		visualizerUpdateTimer = null;
	}
}
function playNextTrack() {
	currentTrack = (currentTrack + 1) % tracks.length;
	storage.currentTrack = currentTrack;
	updateNowPlaying();
	if (isPlaying) {
		playCurrentTrack();
	}
	visualizer.pulse();
}
function playPreviousTrack() {
	currentTrack = (currentTrack - 1 + tracks.length) % tracks.length;
	storage.currentTrack = currentTrack;
	updateNowPlaying();
	if (isPlaying) {
		playCurrentTrack();
	}
	visualizer.pulse();
}
function updateVolume(volume) {
	if (isPlaying) {
		LK.stopMusic();
		var track = tracks[currentTrack];
		LK.playMusic(track.id, {
			volume: volume
		});
	}
}
// Initialize game state
updateNowPlaying();
updateVolume(volumeControl.volume);
// The first track will play when the middle button is pressed
// Track starts paused, waiting for user interaction
isPlaying = false;
controls.setPlayingState(false);
// No automatic playback - removed playCurrentTrack() call
// Make playlist draggable
var dragStartY = 0;
var initialY = 0;
var isDraggingPlaylist = false;
game.down = function (x, y, obj) {
	// Check if touch is on playlist
	var playlistBounds = {
		x: playlistContainer.x - playlistContainer.width / 2,
		y: playlistContainer.y,
		width: playlistContainer.width,
		height: playlistContainer.height
	};
	if (x >= playlistBounds.x && x <= playlistBounds.x + playlistBounds.width && y >= playlistBounds.y && y <= playlistBounds.y + playlistBounds.height) {
		isDraggingPlaylist = true;
		dragStartY = y;
		initialY = playlistContainer.y;
	}
};
game.up = function (x, y, obj) {
	isDraggingPlaylist = false;
};
game.move = function (x, y, obj) {
	if (isDraggingPlaylist) {
		var deltaY = y - dragStartY;
		var newY = initialY + deltaY;
		// Limit scrolling
		newY = Math.max(220, Math.min(newY, 220));
		playlistContainer.y = newY;
	}
};
// Score tracking (number of tracks played)
var tracksPlayed = 0;
// Update game state
game.update = function () {
	// Increment score when tracks are played
	if (isPlaying) {
		if (LK.ticks % 600 === 0) {
			// Every 10 seconds
			tracksPlayed++;
			LK.setScore(tracksPlayed);
		}
	}
};
// Initialize score
LK.setScore(tracksPlayed);

===================================================================
--- original.js
+++ change.js
@@ -511,12 +511,13 @@
 }
 // Initialize game state
 updateNowPlaying();
 updateVolume(volumeControl.volume);
-// Play the first track immediately
-isPlaying = true;
-controls.setPlayingState(true);
-playCurrentTrack();
+// The first track will play when the middle button is pressed
+// Track starts paused, waiting for user interaction
+isPlaying = false;
+controls.setPlayingState(false);
+// No automatic playback - removed playCurrentTrack() call
 // Make playlist draggable
 var dragStartY = 0;
 var initialY = 0;
 var isDraggingPlaylist = false;