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

/**** 
* Classes
****/ 
// Bridge class to represent the bridge being built
var Bridge = Container.expand(function () {
	var self = Container.call(this);
	var bridgeGraphicsBG = self.attachAsset('bridge', {
		anchorX: .5,
		anchorY: 1
	});
	bridgeGraphicsBG.tint = 0xb5b6bf;
	var bridgeGraphics = self.attachAsset('bridge', {
		anchorX: .5,
		anchorY: 1,
		scaleY: 0
	});
	var bridgeShadow = shadowContainer.attachAsset('shadow', {
		anchorX: .5,
		anchorY: 1
	});
	self.update = function () {
		bridgeShadow.width = self.width + 40;
		bridgeShadow.height = self.height + 40;
		bridgeShadow.rotation = self.rotation;
		bridgeShadow.x = self.x - Math.sin(bridgeShadow.rotation) * 20;
		bridgeShadow.y = self.y + Math.cos(bridgeShadow.rotation) * 20;
	};
	self.remove = function () {
		bridgeShadow.destroy();
		self.destroy();
	};
	self.setProgress = function (progress) {
		bridgeGraphics.scale.y = progress;
	};
	// Method to update the bridge's width based on voice pitch
});
// Character class to represent the character in the game
var Character = Container.expand(function () {
	var self = Container.call(this);
	var characterGraphics = self.attachAsset('character', {
		anchorX: 0.5,
		anchorY: 1
	});
	characterGraphics.rotation = .02;
	self.currentPlatform = undefined;
	self.state = 'walking';
	var mouseIsDown = false;
	game.down = function () {
		mouseIsDown = true;
	};
	function dropBridge() {
		if (self.state == 'bridge') {
			self.state = 'dropping';
			var nextPlatform = platforms[currentPlatformOffset + 1];
			var platformGap = nextPlatform.x - self.currentPlatform.x - self.currentPlatform.width + 26;
			var platformOffset = currentBridge.height - platformGap;
			if (platformOffset < 0) {
				//We die;
				console.log("die due to short bridge");
				tween(currentBridge, {
					rotation: Math.PI
				}, {
					duration: 1000,
					easing: tween.bounceOut
				});
				LK.setTimeout(function () {
					self.state = 'dieshort';
				}, 550);
				LK.setTimeout(function () {
					LK.getSound('thump').play();
				}, 200);
				return;
			} else if (platformOffset > nextPlatform.width) {
				console.log("die due to large bridge");
				LK.setTimeout(function () {
					self.state = 'dielong';
				}, 550);
			} else {
				console.log("you survive");
				LK.setTimeout(function () {
					currentPlatformOffset++;
					self.currentPlatform = nextPlatform;
					self.state = 'walking';
				}, 520);
				var nwidth = 100 + Math.random() * 200;
				var np = addPlatform(platforms[platforms.length - 1].x + platforms[platforms.length - 1].width + 50 + nwidth / 2 + Math.random() * 750, nwidth);
				var npTargetY = np.y;
				np.y = 3500;
				tween(np, {
					y: npTargetY
				}, {
					duration: 500,
					easing: tween.easeOut
				});
			}
			tween(currentBridge, {
				rotation: Math.PI / 2
			}, {
				duration: 500,
				easing: tween.bounceOut
			});
			LK.setTimeout(function () {
				LK.getSound('thump').play();
			}, 50);
			//currentBridge.height = platformGap + nextPlatform.width;
		}
	}
	game.up = function () {
		if (mouseIsDown) {
			//	dropBridge();
		}
		mouseIsDown = false;
	};
	var ticksToDrop = 100;
	var curentTicksToDrop = 0;
	self.update = function () {
		switch (self.state) {
			case 'walking':
				{
					var targetX = self.currentPlatform.x + self.currentPlatform.width - self.width / 2 - 15;
					self.x += 20;
					if (self.x >= targetX) {
						self.x = targetX;
						self.state = 'bridge';
						addNewBridge(self.x + self.width / 2 - 10);
						curentTicksToDrop = 0;
					}
					break;
				}
			case 'bridge':
				{
					if (facekit.volume > .1 && facekit.pitch < 1000) {
						var targetHeight = 50 + facekit.pitch * 2;
						currentBridge.height -= (currentBridge.height - targetHeight) / 10;
						console.log(facekit.volume, facekit.pitch);
						debugLabel.setText("Volume: ".concat(facekit.volume.toFixed(2), ",\nPitch: ").concat(facekit.pitch.toFixed(2)));
					}
					/*if (mouseIsDown) {
						currentBridge.height += 15;
					}*/
					curentTicksToDrop++;
					currentBridge.setProgress(curentTicksToDrop / ticksToDrop);
					if (curentTicksToDrop >= ticksToDrop) {
						dropBridge();
					}
					break;
				}
			case 'dielong':
			case 'dieshort':
				{
					self.x += 20;
					var targetX = self.currentPlatform.x + self.currentPlatform.width + self.width / 2 + 50;
					if (self.state == 'dielong') {
						targetX = self.currentPlatform.x + self.currentPlatform.width + currentBridge.height + self.width / 2 + 50;
					}
					if (self.x > targetX) {
						self.state = 'died';
						tween(self, {
							x: self.x + 150,
							y: 3500
						}, {
							duration: 500,
							easing: tween.easeIn
						});
						LK.setTimeout(function () {
							LK.effects.flashScreen(0xff0000, 1000);
							LK.showGameOver();
						}, 500);
					}
					break;
				}
		}
		var targetX = -character.x + 400 - container.x;
		if (targetX <= 0) {
			container.x += targetX / 15;
			shadowContainer.x = container.x;
		}
	};
});
// Platform class to represent the platform in the game
var Platform = Container.expand(function (width) {
	var self = Container.call(this);
	var platformGraphics = self.attachAsset('platform', {
		anchorX: 0,
		anchorY: 0
	});
	var platformShadow = shadowContainer.attachAsset('shadow', {
		anchorX: 0,
		anchorY: 0
	});
	self.height = 500;
	platformShadow.width = width + 40;
	platformShadow.height = self.height + 40;
	this.update = function () {
		platformShadow.x = self.x - 20;
		platformShadow.y = self.y - 20;
	};
	this.remove = function () {
		platformShadow.destroy();
		self.destroy();
	};
});
// Tutorial class to represent the tutorial in the game
var Tutorial = Container.expand(function () {
	var self = Container.call(this);
	var dashContainer = self.addChild(new Container());
	for (var a = 0; a < 20; a++) {
		var shadow = dashContainer.attachAsset('shadow', {
			anchorX: 0.5,
			anchorY: 0.5,
			x: -2048 / 2 + a * ((2048 - 100) / 20) + 95,
			width: 50 + 30,
			height: 20 + 30
		});
		var dash = dashContainer.attachAsset('dash', {
			anchorX: 0.5,
			anchorY: 0.5,
			x: -2048 / 2 + a * ((2048 - 100) / 20) + 95
		});
	}
	dashContainer.y = 340;
	var tutorialGraphics = self.attachAsset('tutorial', {
		anchorX: 0.5,
		anchorY: 0.5
	});
});

/**** 
* Initialize Game
****/ 
var game = new LK.Game({
	backgroundColor: 0x000000 //Init game with black background 
});

/**** 
* Game Code
****/ 
var tutorial = game.addChild(new Tutorial());
tutorial.x = 2048 / 2;
tutorial.y = 2732 / 2;
var shadowContainer = game.addChild(new Container());
// Create a debug label to display volume and pitch
var debugLabel = new Text2('Volume: 0\n Pitch: 0', {
	size: 50,
	fill: 0xFFFFFF
});
debugLabel.anchor.set(1, 0); // Anchor to the top-right corner
LK.gui.topRight.addChild(debugLabel);
var container = game.addChild(new Container());
var platforms = [];
var bridges = [];
function addPlatform(x, width) {
	var platform = container.addChild(new Platform(width));
	platform.y = 2400;
	platform.x = x;
	platform.width = width;
	platforms.push(platform);
	for (var a = 0; a < platforms.length - 4; a++) {
		if (platforms[a]) {
			platforms[a].remove();
			platforms[a] = undefined;
		}
	}
	return platform;
}
addPlatform(0, 500);
addPlatform(1000, 300);
var character = container.addChild(new Character());
var currentPlatformOffset = 0;
character.currentPlatform = platforms[currentPlatformOffset];
character.y = 2402 - 5;
character.x = -200;
var currentBridge;
function addNewBridge(x) {
	currentBridge = container.addChild(new Bridge());
	currentBridge.scale.set(0, 0);
	tween(currentBridge, {
		scaleX: 1,
		scaleY: 1
	}, {
		duration: 100,
		easing: tween.easeIn
	});
	currentBridge.y = 2400 + 25;
	currentBridge.x = x;
	bridges.push(currentBridge);
	for (var a = 0; a < bridges.length - 4; a++) {
		if (bridges[a]) {
			bridges[a].remove();
			bridges[a] = undefined;
		}
	}
}

===================================================================
--- original.js
+++ change.js
@@ -138,9 +138,9 @@
 					if (facekit.volume > .1 && facekit.pitch < 1000) {
 						var targetHeight = 50 + facekit.pitch * 2;
 						currentBridge.height -= (currentBridge.height - targetHeight) / 10;
 						console.log(facekit.volume, facekit.pitch);
-						debugLabel.setText("Volume: ".concat(facekit.volume.toFixed(2), ", Pitch: ").concat(facekit.pitch.toFixed(2)));
+						debugLabel.setText("Volume: ".concat(facekit.volume.toFixed(2), ",\nPitch: ").concat(facekit.pitch.toFixed(2)));
 					}
 					/*if (mouseIsDown) {
 						currentBridge.height += 15;
 					}*/
@@ -208,16 +208,28 @@
 });
 // Tutorial class to represent the tutorial in the game
 var Tutorial = Container.expand(function () {
 	var self = Container.call(this);
+	var dashContainer = self.addChild(new Container());
+	for (var a = 0; a < 20; a++) {
+		var shadow = dashContainer.attachAsset('shadow', {
+			anchorX: 0.5,
+			anchorY: 0.5,
+			x: -2048 / 2 + a * ((2048 - 100) / 20) + 95,
+			width: 50 + 30,
+			height: 20 + 30
+		});
+		var dash = dashContainer.attachAsset('dash', {
+			anchorX: 0.5,
+			anchorY: 0.5,
+			x: -2048 / 2 + a * ((2048 - 100) / 20) + 95
+		});
+	}
+	dashContainer.y = 340;
 	var tutorialGraphics = self.attachAsset('tutorial', {
 		anchorX: 0.5,
 		anchorY: 0.5
 	});
-	tutorialGraphics.tint = 0x273cb8;
-	self.update = function () {
-		// Update the tutorial graphics as needed
-	};
 });
 
 /**** 
 * Initialize Game
@@ -228,8 +240,11 @@
 
 /**** 
 * Game Code
 ****/ 
+var tutorial = game.addChild(new Tutorial());
+tutorial.x = 2048 / 2;
+tutorial.y = 2732 / 2;
 var shadowContainer = game.addChild(new Container());
 // Create a debug label to display volume and pitch
 var debugLabel = new Text2('Volume: 0\n Pitch: 0', {
 	size: 50,