/**** * 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: 160, fill: 0xFF0000 }); endMsg.anchor.set(0.5, 0.5); endMsg.x = 2048 / 2; endMsg.y = 500; 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) { // Black out the screen immediately game.setBackgroundColor(0x000000); // Hide all resource bars for (var i = 0; i < resourceBars.length; i++) { resourceBars[i].visible = false; } // Hide any other game elements if needed (add here if more are added in the future) // Prepare for line-by-line reveal endMsg.setText(''); endMsg.visible = true; // Split message into lines (support both \n and single line) var lines = (msg + '').split('\n'); var currentLine = 0; // Helper to show next line function showNextLine() { if (currentLine < lines.length) { // Add next line var shown = ''; for (var i = 0; i <= currentLine; i++) { shown += lines[i]; if (i < currentLine) shown += '\n'; } endMsg.setText(shown); currentLine++; // Show next line after 600ms LK.setTimeout(showNextLine, 600); } else { // All lines shown, keep message for longer LK.setTimeout(function () { LK.showGameOver(); }, 1800); } } // Start line-by-line reveal showNextLine(); } // 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
/****
* 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: 160,
fill: 0xFF0000
});
endMsg.anchor.set(0.5, 0.5);
endMsg.x = 2048 / 2;
endMsg.y = 500;
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) {
// Black out the screen immediately
game.setBackgroundColor(0x000000);
// Hide all resource bars
for (var i = 0; i < resourceBars.length; i++) {
resourceBars[i].visible = false;
}
// Hide any other game elements if needed (add here if more are added in the future)
// Prepare for line-by-line reveal
endMsg.setText('');
endMsg.visible = true;
// Split message into lines (support both \n and single line)
var lines = (msg + '').split('\n');
var currentLine = 0;
// Helper to show next line
function showNextLine() {
if (currentLine < lines.length) {
// Add next line
var shown = '';
for (var i = 0; i <= currentLine; i++) {
shown += lines[i];
if (i < currentLine) shown += '\n';
}
endMsg.setText(shown);
currentLine++;
// Show next line after 600ms
LK.setTimeout(showNextLine, 600);
} else {
// All lines shown, keep message for longer
LK.setTimeout(function () {
LK.showGameOver();
}, 1800);
}
}
// Start line-by-line reveal
showNextLine();
}
// 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
plant icon white. In-Game asset. 2d. High contrast. No shadows
white people icon. In-Game asset. 2d. High contrast. No shadows
make this minimalsis white icon and düzelt. No background. Transparent background. Blank background. No shadows. 2d. In-Game asset. flat
white dollar icon. In-Game asset. 2d. High contrast. No shadows