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

/**** 
* Classes
****/ 
var Button = Container.expand(function () {
	var self = Container.call(this);
	// Create and attach button graphic
	var buttonGraphic = self.attachAsset('button', {
		anchorX: 0.5,
		anchorY: 0.5
	});
	// Add text label
	self.label = new Text2('', {
		size: 50,
		fill: 0xFFFFFF
	});
	self.label.anchor.set(0.5, 0.5);
	self.addChild(self.label);
	// Set button text
	self.setText = function (text) {
		self.label.setText(text);
	};
	// Event handlers
	self.down = function (x, y, obj) {
		buttonGraphic.alpha = 0.7;
	};
	self.up = function (x, y, obj) {
		buttonGraphic.alpha = 1.0;
		if (self.onClick) {
			self.onClick();
		}
	};
	return self;
});
// Game state
var ScanLine = Container.expand(function () {
	var self = Container.call(this);
	// Create and attach scan line graphic
	var lineGraphic = self.attachAsset('scanLine', {
		anchorX: 0.5,
		anchorY: 0,
		alpha: 0.8
	});
	// Line properties
	self.speed = 5;
	self.active = false;
	self.paused = false;
	self.slices = [];
	self.currentPosition = 0;
	self.scanWidth = 2048; // full width of game area
	// Start scanning
	self.startScan = function () {
		self.active = true;
		self.currentPosition = 0;
		self.x = 0;
		// Clear previous scan slices
		for (var i = 0; i < self.slices.length; i++) {
			if (self.slices[i]) {
				self.slices[i].destroy();
			}
		}
		self.slices = [];
		// Create new array for slices based on scan width and speed
		var totalSlices = Math.ceil(self.scanWidth / self.speed);
		for (var i = 0; i < totalSlices; i++) {
			self.slices.push(null);
		}
	};
	// Pause/resume scan
	self.togglePause = function () {
		self.paused = !self.paused;
	};
	// Reset scan
	self.reset = function () {
		self.active = false;
		self.paused = false;
		self.currentPosition = 0;
		self.x = 0;
	};
	// Capture a slice of the current camera view
	self.captureSlice = function () {
		if (!self.active || self.paused) {
			return;
		}
		// Calculate slice index
		var sliceIndex = Math.floor(self.currentPosition / self.speed);
		if (sliceIndex >= self.slices.length) {
			return;
		}
		// Play scan progress sound every 20 slices
		if (sliceIndex % 20 === 0) {
			LK.getSound('scanProgress').play();
		}
		// Create visual representation of the slice using the camera feed
		if (!self.slices[sliceIndex]) {
			var sliceWidth = self.speed;
			var sliceHeight = 2732;
			// Create a container for the slice
			var slice = new Container();
			slice.x = self.currentPosition;
			// Create a visual representation of the camera slice
			// In a real implementation with facekit, we'd capture the actual camera image
			var sliceGraphic = LK.getAsset('scanLine', {
				anchorX: 0.5,
				anchorY: 0,
				width: sliceWidth,
				height: sliceHeight,
				tint: Math.random() * 0xFFFFFF // Temporary random color for visualization
			});
			// In production, would use actual camera data from facekit
			// This is a placeholder for demonstration
			if (facekit && facekit.isFaceDetected) {
				// Apply face position to distort the slice
				// Real implementation would use actual camera feed data
				sliceGraphic.tint = 0xFFFFFF;
			}
			slice.addChild(sliceGraphic);
			game.addChild(slice);
			self.slices[sliceIndex] = slice;
		}
	};
	// Update method called by the game engine each frame
	self.update = function () {
		if (!self.active || self.paused) {
			return;
		}
		// Move scan line
		self.currentPosition += self.speed;
		self.x = self.currentPosition;
		// Capture slice at current position
		self.captureSlice();
		// Check if scan is complete
		if (self.currentPosition >= self.scanWidth) {
			self.active = false;
			// Notify game that scan is complete
			LK.getSound('scanComplete').play();
			game.onScanComplete();
		}
	};
	return self;
});

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

/**** 
* Game Code
****/ 
// Game state
// Import facekit for camera access and face detection
// Import tween for animations
// Create a shape for the scan line
// Create a shape for buttons
// Create a sound for when the scan completes
// Create a sound for scan progress
var scanLine;
var scanButton;
var resetButton;
var gameState = "ready"; // ready, scanning, complete
var instructionText;
var displayWidth = 2048;
var displayHeight = 2732;
// Initialize the scan line
scanLine = new ScanLine();
game.addChild(scanLine);
// Create buttons
scanButton = new Button();
scanButton.setText("START SCAN");
scanButton.x = displayWidth / 2;
scanButton.y = displayHeight - 200;
scanButton.onClick = function () {
	if (gameState === "ready") {
		startScan();
	} else if (gameState === "complete") {
		resetScan();
	}
};
game.addChild(scanButton);
// Create instruction text
instructionText = new Text2("Move your face as the scan line passes to create distortions!", {
	size: 60,
	fill: 0xFFFFFF
});
instructionText.anchor.set(0.5, 0);
instructionText.x = displayWidth / 2;
instructionText.y = 100;
game.addChild(instructionText);
// Start the scanning process
function startScan() {
	gameState = "scanning";
	scanButton.setText("SCANNING...");
	scanLine.startScan();
	instructionText.setText("Move your face to create distortions!");
	// Remove previous result display if it exists
	if (game.resultDisplay) {
		game.resultDisplay.destroy();
		game.resultDisplay = null;
	}
}
// Reset the scan for a new attempt
function resetScan() {
	gameState = "ready";
	scanButton.setText("START SCAN");
	scanLine.reset();
	instructionText.setText("Move your face as the scan line passes to create distortions!");
	// Remove previous result display if it exists
	if (game.resultDisplay) {
		game.resultDisplay.destroy();
		game.resultDisplay = null;
	}
}
// Callback when scan is complete
game.onScanComplete = function () {
	gameState = "complete";
	scanButton.setText("NEW SCAN");
	instructionText.setText("Your warp scan is complete!");
	// Create a container to display the final warp scan image
	var resultContainer = new Container();
	game.addChild(resultContainer);
	resultContainer.x = displayWidth / 2;
	resultContainer.y = displayHeight / 2;
	// Create a background for the final image
	var background = LK.getAsset('button', {
		anchorX: 0.5,
		anchorY: 0.5,
		width: displayWidth * 0.8,
		height: displayHeight * 0.6,
		tint: 0x000000
	});
	background.alpha = 0.7;
	resultContainer.addChild(background);
	// Add all captured slices to the result display
	if (scanLine.slices.length > 0) {
		// Create a container for the final image slices
		var finalImage = new Container();
		resultContainer.addChild(finalImage);
		finalImage.x = -background.width / 2;
		finalImage.y = -background.height / 2;
		// Add all slices to the final image
		for (var i = 0; i < scanLine.slices.length; i++) {
			if (scanLine.slices[i]) {
				var slice = scanLine.slices[i];
				// Clone the slice and add it to the final image
				finalImage.addChild(slice);
			}
		}
	}
	// Store the result container for removal when starting a new scan
	game.resultDisplay = resultContainer;
};
// Game update function
game.update = function () {
	// Nothing needed here as ScanLine handles its own updates
};
// Event handlers
game.down = function (x, y, obj) {
	// Game-level click handling if needed
};
game.up = function (x, y, obj) {
	// Game-level release handling if needed
};
game.move = function (x, y, obj) {
	// Game-level move handling if needed
};
// Camera setup - facekit starts automatically for camera-based games
// We don't need to call any initialization method as facekit
// automatically begins capturing from the camera when imported
// The original code attempted to call facekit.start() which doesn't exist
// facekit plugin is already properly imported at the top
// Camera access and face tracking is now available through:
// facekit.mouthCenter, facekit.leftEye, facekit.rightEye, etc.
// The game can now access face positions like:
// var mouthX = facekit.mouthCenter.x;
// var mouthY = facekit.mouthCenter.y;
// And detect states like:
// if (facekit.mouthOpen) { ... }
// Camera is now ready for the warp scan effect
console.log("Camera and face tracking initialized");

===================================================================
--- original.js
+++ change.js
@@ -95,18 +95,33 @@
 		// Play scan progress sound every 20 slices
 		if (sliceIndex % 20 === 0) {
 			LK.getSound('scanProgress').play();
 		}
-		// Create visual representation of the slice (would be replaced by actual camera slices)
+		// Create visual representation of the slice using the camera feed
 		if (!self.slices[sliceIndex]) {
 			var sliceWidth = self.speed;
 			var sliceHeight = 2732;
 			// Create a container for the slice
 			var slice = new Container();
 			slice.x = self.currentPosition;
+			// Create a visual representation of the camera slice
+			// In a real implementation with facekit, we'd capture the actual camera image
+			var sliceGraphic = LK.getAsset('scanLine', {
+				anchorX: 0.5,
+				anchorY: 0,
+				width: sliceWidth,
+				height: sliceHeight,
+				tint: Math.random() * 0xFFFFFF // Temporary random color for visualization
+			});
+			// In production, would use actual camera data from facekit
+			// This is a placeholder for demonstration
+			if (facekit && facekit.isFaceDetected) {
+				// Apply face position to distort the slice
+				// Real implementation would use actual camera feed data
+				sliceGraphic.tint = 0xFFFFFF;
+			}
+			slice.addChild(sliceGraphic);
 			game.addChild(slice);
-			// In a real implementation, this would capture the camera view at this x-position
-			// For now, we just track the positions where slices would be captured
 			self.slices[sliceIndex] = slice;
 		}
 	};
 	// Update method called by the game engine each frame
@@ -184,21 +199,64 @@
 	gameState = "scanning";
 	scanButton.setText("SCANNING...");
 	scanLine.startScan();
 	instructionText.setText("Move your face to create distortions!");
+	// Remove previous result display if it exists
+	if (game.resultDisplay) {
+		game.resultDisplay.destroy();
+		game.resultDisplay = null;
+	}
 }
 // Reset the scan for a new attempt
 function resetScan() {
 	gameState = "ready";
 	scanButton.setText("START SCAN");
 	scanLine.reset();
 	instructionText.setText("Move your face as the scan line passes to create distortions!");
+	// Remove previous result display if it exists
+	if (game.resultDisplay) {
+		game.resultDisplay.destroy();
+		game.resultDisplay = null;
+	}
 }
 // Callback when scan is complete
 game.onScanComplete = function () {
 	gameState = "complete";
 	scanButton.setText("NEW SCAN");
 	instructionText.setText("Your warp scan is complete!");
+	// Create a container to display the final warp scan image
+	var resultContainer = new Container();
+	game.addChild(resultContainer);
+	resultContainer.x = displayWidth / 2;
+	resultContainer.y = displayHeight / 2;
+	// Create a background for the final image
+	var background = LK.getAsset('button', {
+		anchorX: 0.5,
+		anchorY: 0.5,
+		width: displayWidth * 0.8,
+		height: displayHeight * 0.6,
+		tint: 0x000000
+	});
+	background.alpha = 0.7;
+	resultContainer.addChild(background);
+	// Add all captured slices to the result display
+	if (scanLine.slices.length > 0) {
+		// Create a container for the final image slices
+		var finalImage = new Container();
+		resultContainer.addChild(finalImage);
+		finalImage.x = -background.width / 2;
+		finalImage.y = -background.height / 2;
+		// Add all slices to the final image
+		for (var i = 0; i < scanLine.slices.length; i++) {
+			if (scanLine.slices[i]) {
+				var slice = scanLine.slices[i];
+				// Clone the slice and add it to the final image
+				finalImage.addChild(slice);
+			}
+		}
+	}
+	// Store the result container for removal when starting a new scan
+	game.resultDisplay = resultContainer;
 };
 // Game update function
 game.update = function () {
 	// Nothing needed here as ScanLine handles its own updates