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

/**** 
* Classes
****/ 
// ResourceBar: A vertical bar with an icon, value, plus and minus buttons
var ResourceBar = Container.expand(function () {
	var self = Container.call(this);
	// Properties to be set after creation:
	// self.iconId (string), self.color (number), self.value (int), self.onChange (function)
	// Bar background
	var barBg = self.attachAsset('barBg', {
		width: 120,
		height: 600,
		color: 0x222222,
		shape: 'box',
		anchorX: 0.5,
		anchorY: 1
	});
	// Bar fill (dynamic height)
	var barFill = self.attachAsset('barFill', {
		width: 120,
		height: 600,
		color: 0xffffff,
		shape: 'box',
		anchorX: 0.5,
		anchorY: 1
	});
	barFill.y = 0;
	// Icon (top, larger and at the very top)
	var icon = self.attachAsset('icon', {
		width: 220,
		height: 220,
		color: 0xffffff,
		shape: 'ellipse',
		anchorX: 0.5,
		anchorY: 0.5
	});
	icon.y = -820;
	// Value text (centered on bar)
	var valueTxt = new Text2('7', {
		size: 90,
		fill: 0xFFFFFF
	});
	valueTxt.anchor.set(0.5, 0.5);
	valueTxt.x = 0;
	valueTxt.y = -300;
	self.addChild(valueTxt);
	// Plus button (bottom, larger)
	var plusBtn = self.attachAsset('plusBtn', {
		width: 180,
		height: 180,
		color: 0x00c853,
		shape: 'ellipse',
		anchorX: 0.5,
		anchorY: 0.5
	});
	plusBtn.y = 140;
	// Minus button (bottom, larger)
	var minusBtn = self.attachAsset('minusBtn', {
		width: 180,
		height: 180,
		color: 0xd50000,
		shape: 'ellipse',
		anchorX: 0.5,
		anchorY: 0.5
	});
	minusBtn.y = 370;
	// Icon overlay (drawn after icon asset)
	var iconOverlay = null;
	// Set up icon and color
	self.setIcon = function (iconId, color) {
		self.iconId = iconId;
		self.color = color;
		// Set bar fill color
		barFill.color = color;
		// Set icon overlay
		if (iconOverlay) {
			iconOverlay.destroy();
			iconOverlay = null;
		}
		// Use simple shapes for icons
		if (iconId === 'nature') {
			// Green leaf (ellipse)
			iconOverlay = self.attachAsset('natureIcon', {
				width: 200,
				height: 260,
				color: 0x43a047,
				shape: 'ellipse',
				anchorX: 0.5,
				anchorY: 0.5
			});
			iconOverlay.y = icon.y;
		} else if (iconId === 'human') {
			// Blue head (circle)
			iconOverlay = self.attachAsset('humanIcon', {
				width: 220,
				height: 220,
				color: 0x1976d2,
				shape: 'ellipse',
				anchorX: 0.5,
				anchorY: 0.5
			});
			iconOverlay.y = icon.y;
		} else if (iconId === 'money') {
			// Gold coin (circle)
			iconOverlay = self.attachAsset('moneyIcon', {
				width: 220,
				height: 220,
				color: 0xffd600,
				shape: 'ellipse',
				anchorX: 0.5,
				anchorY: 0.5
			});
			iconOverlay.y = icon.y;
		} else if (iconId === 'faith') {
			// Purple diamond (box, rotated)
			iconOverlay = self.attachAsset('faithIcon', {
				width: 200,
				height: 200,
				color: 0x8e24aa,
				shape: 'box',
				anchorX: 0.5,
				anchorY: 0.5
			});
			iconOverlay.y = icon.y;
			iconOverlay.rotation = Math.PI / 4;
		}
	};
	// Set value and update bar
	self.setValue = function (v) {
		self.value = v;
		valueTxt.setText(v);
		// Animate bar fill height (max 13, min 0)
		var h = Math.max(0, Math.min(13, v)) * (600 / 13);
		tween(barFill, {
			height: h
		}, {
			duration: 200,
			easing: tween.cubicOut
		});
	};
	// Plus/minus button events
	plusBtn.down = function () {
		if (self.value < 13) {
			self.setValue(self.value + 1);
			if (self.onChange) self.onChange(1);
		}
	};
	minusBtn.down = function () {
		if (self.value > 0) {
			self.setValue(self.value - 1);
			if (self.onChange) self.onChange(-1);
		}
	};
	// Draw plus/minus symbols (centered, larger)
	var plusTxt = new Text2('+', {
		size: 140,
		fill: 0xFFFFFF
	});
	plusTxt.anchor.set(0.5, 0.5);
	plusTxt.x = plusBtn.x;
	plusTxt.y = plusBtn.y;
	self.addChild(plusTxt);
	var minusTxt = new Text2('–', {
		size: 140,
		fill: 0xFFFFFF
	});
	minusTxt.anchor.set(0.5, 0.5);
	minusTxt.x = minusBtn.x;
	minusTxt.y = minusBtn.y;
	self.addChild(minusTxt);
	return self;
});

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

/**** 
* Game Code
****/ 
// Resource state
var resourceNames = ['nature', 'human', 'money', 'faith'];
var resourceColors = [0x43a047, 0x1976d2, 0xffd600, 0x8e24aa];
var resourceBars = [];
var resourceValues = [7, 7, 7, 7]; // Start at 7
// Layout
var spacing = 400;
var startX = 2048 / 2 - 1.5 * spacing;
var barY = 1800;
// Create resource bars
for (var i = 0; i < 4; i++) {
	var bar = new ResourceBar();
	bar.x = startX + i * spacing;
	bar.y = barY;
	bar.setIcon(resourceNames[i], resourceColors[i]);
	bar.setValue(resourceValues[i]);
	// Closure for index
	(function (idx) {
		bar.onChange = function (delta) {
			resourceValues[idx] += delta;
			checkGameOver();
		};
	})(i);
	resourceBars.push(bar);
	game.addChild(bar);
}
// End message (hidden by default)
var endMsg = new Text2('', {
	size: 320,
	fill: 0xFF0000
});
endMsg.anchor.set(0.5, 0.5);
endMsg.x = 2048 / 2;
endMsg.y = 900;
endMsg.visible = false;
game.addChild(endMsg);
// Check for game over
function checkGameOver() {
	for (var i = 0; i < 4; i++) {
		if (resourceValues[i] <= 0) {
			showEnd('KOMÜN BAŞARAMADI');
			return;
		}
		if (resourceValues[i] >= 13) {
			showEnd('KOMÜN BAŞARAMADI');
			return;
		}
	}
}
// Show end message and trigger game over
function showEnd(msg) {
	endMsg.setText(msg);
	endMsg.visible = true;
	// Set background to black
	game.setBackgroundColor(0x000000);
	// Flash screen
	LK.effects.flashScreen(0xff1744, 800);
	// Show game over (will reset game)
	LK.setTimeout(function () {
		LK.showGameOver();
	}, 1200);
}
// Hide end message on game start
endMsg.visible = false;
// No update loop needed; all logic is event-driven
// Minimalist: no extra text, no score, no timer, no background, no music, no sound
// All UI elements are touch-friendly and large

===================================================================
--- original.js
+++ change.js
@@ -213,10 +213,10 @@
 	game.addChild(bar);
 }
 // End message (hidden by default)
 var endMsg = new Text2('', {
-	size: 180,
-	fill: 0xFFFFFF
+	size: 320,
+	fill: 0xFF0000
 });
 endMsg.anchor.set(0.5, 0.5);
 endMsg.x = 2048 / 2;
 endMsg.y = 900;
@@ -238,8 +238,10 @@
 // Show end message and trigger game over
 function showEnd(msg) {
 	endMsg.setText(msg);
 	endMsg.visible = true;
+	// Set background to black
+	game.setBackgroundColor(0x000000);
 	// Flash screen
 	LK.effects.flashScreen(0xff1744, 800);
 	// Show game over (will reset game)
 	LK.setTimeout(function () {