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

/**** 
* Classes
****/ 
// Fog tile (covers unseen areas)
var FogTile = Container.expand(function () {
	var self = Container.call(this);
	self.asset = self.attachAsset('fog', {
		anchorX: 0.5,
		anchorY: 0.5
	});
	self.alpha = 0.92;
	return self;
});
// MapTile: floor, wall, exit, item
var MapTile = Container.expand(function () {
	var self = Container.call(this);
	self.type = 'floor'; // default
	self.asset = null;
	self.xIndex = 0;
	self.yIndex = 0;
	self.hasItem = false;
	self.itemAsset = null;
	self.isExit = false;
	self.setType = function (type) {
		self.type = type;
		if (self.asset) {
			self.removeChild(self.asset);
		}
		if (type === 'floor') {
			self.asset = self.attachAsset('floor', {
				anchorX: 0.5,
				anchorY: 0.5
			});
		} else if (type === 'wall') {
			self.asset = self.attachAsset('wall', {
				anchorX: 0.5,
				anchorY: 0.5
			});
		} else if (type === 'exit') {
			self.asset = self.attachAsset('exit', {
				anchorX: 0.5,
				anchorY: 0.5
			});
			self.isExit = true;
		}
	};
	self.placeItem = function () {
		self.hasItem = true;
		if (!self.itemAsset) {
			self.itemAsset = self.attachAsset('item', {
				anchorX: 0.5,
				anchorY: 0.5
			});
		}
	};
	self.removeItem = function () {
		self.hasItem = false;
		if (self.itemAsset) {
			self.removeChild(self.itemAsset);
			self.itemAsset = null;
		}
	};
	return self;
});
// Player class
var Player = Container.expand(function () {
	var self = Container.call(this);
	self.asset = self.attachAsset('player', {
		anchorX: 0.5,
		anchorY: 0.5
	});
	self.xIndex = 0;
	self.yIndex = 0;
	return self;
});

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

/**** 
* Game Code
****/ 
// Shapes for player, floor, wall, exit, item, fog, and arrow buttons
// --- MAP CONFIGURATION ---
var MAP_WIDTH = 9;
var MAP_HEIGHT = 11;
var TILE_SIZE = 160;
var MAP_OFFSET_X = Math.floor((2048 - MAP_WIDTH * TILE_SIZE) / 2);
var MAP_OFFSET_Y = 320; // leave space for GUI at top
// Map data: 0 = floor, 1 = wall, 2 = exit, 3 = item
// Simple static map for MVP
var mapData = [[1, 1, 1, 1, 1, 1, 1, 1, 1], [1, 0, 0, 0, 1, 0, 0, 3, 1], [1, 0, 1, 0, 1, 0, 1, 0, 1], [1, 0, 1, 0, 0, 0, 1, 0, 1], [1, 0, 1, 1, 1, 0, 1, 0, 1], [1, 0, 0, 0, 1, 0, 0, 0, 1], [1, 1, 1, 0, 1, 1, 1, 0, 1], [1, 3, 0, 0, 0, 0, 1, 0, 1], [1, 0, 1, 1, 1, 0, 1, 0, 1], [1, 0, 0, 0, 1, 0, 0, 2, 1], [1, 1, 1, 1, 1, 1, 1, 1, 1]];
// --- GLOBALS ---
var mapTiles = []; // 2D array of MapTile
var fogTiles = []; // 2D array of FogTile
var player = null;
var playerStart = {
	x: 1,
	y: 1
};
var exitPos = {
	x: 7,
	y: 9
};
var itemsTotal = 0;
var itemsCollected = 0;
var visionRadius = 1.5; // tiles
var moveLock = false; // prevent double moves
var arrowButtons = {};
var lastPlayerPos = {
	x: 1,
	y: 1
};
// --- GUI ---
var itemsTxt = new Text2('Items: 0/0', {
	size: 90,
	fill: "#fff"
});
itemsTxt.anchor.set(0.5, 0);
LK.gui.top.addChild(itemsTxt);
// --- MAP GENERATION ---
for (var y = 0; y < MAP_HEIGHT; y++) {
	mapTiles[y] = [];
	fogTiles[y] = [];
	for (var x = 0; x < MAP_WIDTH; x++) {
		var tile = new MapTile();
		tile.xIndex = x;
		tile.yIndex = y;
		var type = mapData[y][x];
		if (type === 1) {
			tile.setType('wall');
		} else if (type === 2) {
			tile.setType('exit');
			exitPos.x = x;
			exitPos.y = y;
		} else {
			tile.setType('floor');
		}
		if (type === 3) {
			tile.placeItem();
			itemsTotal++;
		}
		tile.x = MAP_OFFSET_X + x * TILE_SIZE + TILE_SIZE / 2;
		tile.y = MAP_OFFSET_Y + y * TILE_SIZE + TILE_SIZE / 2;
		game.addChild(tile);
		mapTiles[y][x] = tile;
		// Fog
		var fog = new FogTile();
		fog.x = tile.x;
		fog.y = tile.y;
		game.addChild(fog);
		fogTiles[y][x] = fog;
	}
}
itemsTxt.setText('Items: 0/' + itemsTotal);
// --- PLAYER ---
player = new Player();
player.xIndex = playerStart.x;
player.yIndex = playerStart.y;
player.x = MAP_OFFSET_X + player.xIndex * TILE_SIZE + TILE_SIZE / 2;
player.y = MAP_OFFSET_Y + player.yIndex * TILE_SIZE + TILE_SIZE / 2;
game.addChild(player);
// --- FOG OF WAR ---
function updateFog() {
	for (var y = 0; y < MAP_HEIGHT; y++) {
		for (var x = 0; x < MAP_WIDTH; x++) {
			var dx = x - player.xIndex;
			var dy = y - player.yIndex;
			var dist = Math.sqrt(dx * dx + dy * dy);
			if (dist <= visionRadius) {
				// Reveal
				fogTiles[y][x].alpha = 0;
			} else if (dist <= visionRadius + 1) {
				// Faded memory
				fogTiles[y][x].alpha = 0.5;
			} else {
				// Full fog
				fogTiles[y][x].alpha = 0.92;
			}
		}
	}
}
updateFog();
// --- MOVEMENT LOGIC ---
function canMoveTo(x, y) {
	if (x < 0 || x >= MAP_WIDTH || y < 0 || y >= MAP_HEIGHT) return false;
	var tile = mapTiles[y][x];
	if (tile.type === 'wall') return false;
	return true;
}
function movePlayer(dx, dy) {
	if (moveLock) return;
	var nx = player.xIndex + dx;
	var ny = player.yIndex + dy;
	if (!canMoveTo(nx, ny)) {
		// Bump animation
		var bumpX = player.x + dx * 20;
		var bumpY = player.y + dy * 20;
		moveLock = true;
		tween(player, {
			x: bumpX,
			y: bumpY
		}, {
			duration: 80,
			easing: tween.easeOut,
			onFinish: function onFinish() {
				tween(player, {
					x: MAP_OFFSET_X + player.xIndex * TILE_SIZE + TILE_SIZE / 2,
					y: MAP_OFFSET_Y + player.yIndex * TILE_SIZE + TILE_SIZE / 2
				}, {
					duration: 80,
					onFinish: function onFinish() {
						moveLock = false;
					}
				});
			}
		});
		return;
	}
	lastPlayerPos.x = player.xIndex;
	lastPlayerPos.y = player.yIndex;
	player.xIndex = nx;
	player.yIndex = ny;
	moveLock = true;
	tween(player, {
		x: MAP_OFFSET_X + nx * TILE_SIZE + TILE_SIZE / 2,
		y: MAP_OFFSET_Y + ny * TILE_SIZE + TILE_SIZE / 2
	}, {
		duration: 120,
		easing: tween.easeInOut,
		onFinish: function onFinish() {
			moveLock = false;
			afterMove();
		}
	});
	updateFog();
}
function afterMove() {
	// Check for item
	var tile = mapTiles[player.yIndex][player.xIndex];
	if (tile.hasItem) {
		tile.removeItem();
		itemsCollected++;
		itemsTxt.setText('Items: ' + itemsCollected + '/' + itemsTotal);
		LK.effects.flashObject(player, 0xffe066, 400);
	}
	// Check for exit
	if (tile.isExit) {
		if (itemsCollected >= itemsTotal) {
			LK.showYouWin();
		} else {
			// Flash exit red if not all items collected
			LK.effects.flashObject(tile, 0xff0000, 400);
		}
	}
}
// --- ARROW BUTTONS ---
function createArrowButton(id, x, y, rotation, moveFn) {
	var btn = LK.getAsset(id, {
		anchorX: 0.5,
		anchorY: 0.5
	});
	btn.x = x;
	btn.y = y;
	btn.scaleX = 1.1;
	btn.scaleY = 1.1;
	btn.rotation = rotation;
	btn.alpha = 0.85;
	btn.interactive = true;
	btn.down = function () {
		moveFn();
	};
	LK.gui.bottom.addChild(btn);
	return btn;
}
// Place arrow buttons at bottom left, spaced vertically and fully visible
// Avoid top left 100x100 for menu, so start at x=200
var btnX = 200; // 200px from left edge for visibility
var btnY = 400; // 400px above the bottom edge for visibility
var btnSpacing = 220; // vertical spacing
arrowButtons.up = createArrowButton('arrowUp', btnX, btnY - btnSpacing, 0, function () {
	movePlayer(0, -1);
});
arrowButtons.down = createArrowButton('arrowDown', btnX, btnY + btnSpacing, Math.PI, function () {
	movePlayer(0, 1);
});
arrowButtons.left = createArrowButton('arrowLeft', btnX - btnSpacing, btnY, -Math.PI / 2, function () {
	movePlayer(-1, 0);
});
arrowButtons.right = createArrowButton('arrowRight', btnX + btnSpacing, btnY, Math.PI / 2, function () {
	movePlayer(1, 0);
});
// --- TOUCH DRAG MOVEMENT (OPTIONAL) ---
// For MVP, only arrow buttons. (No swipe/drag movement.)
// --- GAME UPDATE ---
game.update = function () {
	// No per-frame logic needed for MVP
};
// --- GAME OVER HANDLING ---
// Handled by LK.showYouWin()
// --- INITIAL FOG UPDATE ---
updateFog();

===================================================================
--- original.js
+++ change.js
@@ -281,23 +281,23 @@
 	};
 	LK.gui.bottom.addChild(btn);
 	return btn;
 }
-// Place arrow buttons at bottom center, spaced out and fully visible
-// LK.gui.bottom is at y=0, but the bottom of the screen, so we want the buttons to be above the very bottom edge
-var btnY = 180; // 180px above the bottom edge for visibility (button is 180x180)
-var btnSpacing = 220;
-var guiCenterX = 1024; // Center of 2048px width
-arrowButtons.up = createArrowButton('arrowUp', guiCenterX, btnY - btnSpacing, 0, function () {
+// Place arrow buttons at bottom left, spaced vertically and fully visible
+// Avoid top left 100x100 for menu, so start at x=200
+var btnX = 200; // 200px from left edge for visibility
+var btnY = 400; // 400px above the bottom edge for visibility
+var btnSpacing = 220; // vertical spacing
+arrowButtons.up = createArrowButton('arrowUp', btnX, btnY - btnSpacing, 0, function () {
 	movePlayer(0, -1);
 });
-arrowButtons.down = createArrowButton('arrowDown', guiCenterX, btnY + btnSpacing, Math.PI, function () {
+arrowButtons.down = createArrowButton('arrowDown', btnX, btnY + btnSpacing, Math.PI, function () {
 	movePlayer(0, 1);
 });
-arrowButtons.left = createArrowButton('arrowLeft', guiCenterX - btnSpacing, btnY, -Math.PI / 2, function () {
+arrowButtons.left = createArrowButton('arrowLeft', btnX - btnSpacing, btnY, -Math.PI / 2, function () {
 	movePlayer(-1, 0);
 });
-arrowButtons.right = createArrowButton('arrowRight', guiCenterX + btnSpacing, btnY, Math.PI / 2, function () {
+arrowButtons.right = createArrowButton('arrowRight', btnX + btnSpacing, btnY, Math.PI / 2, function () {
 	movePlayer(1, 0);
 });
 // --- TOUCH DRAG MOVEMENT (OPTIONAL) ---
 // For MVP, only arrow buttons. (No swipe/drag movement.)