User prompt
When the game end only show text
User prompt
Place the text higher on the screen and make it smaller.
User prompt
Have the words appear line by line, make the message stay on screen longer, and when the message appears, the screen should turn completely black.
User prompt
BİGGER TEXT AND MAKE İT RED BUT WHEN TEXT COME TO SCREEN MAKE THE BACKSCREEN BLACK
User prompt
REPLACE TEXT WİTH KOMÜN BAŞARAMADI
User prompt
replace commune collapsed text with KOMUN HAYATTA KALAMADI
User prompt
icons top bar and bigger buttons
User prompt
bigger icons
Code edit (1 edits merged)
Please save this source code
User prompt
Commune: Four Pillars
Initial prompt
Design a clean, minimalist user interface for a resource management game with the following specifications: Layout & Structure: The interface features 4 vertical columns, arranged from left to right in the following order: Nature, Human, Money, Faith. Each column represents one of the four core resources of the game. Bars: Each column contains a gray vertical bar that visually indicates the current value of that resource (ranging from 0 to 13). The bars must be completely text-free. Directly above each gray bar, place a number (0–13) that updates in real-time to reflect the current value of the associated resource. Icons (Assets): Below each bar, display a unique asset icon that visually represents the resource: Nature → a custom plant or forest-themed box asset Human → a population-related box asset (e.g., stylized figures) Money → a financial box asset (e.g., coins, cash, vault) Faith → a symbolic religious box asset (e.g., temple, shrine) Do not use emojis. Each asset icon must be placed on a separate layer, allowing for individual control and possible animation. Controls: Each column should include two buttons: One to increase the value by 1 and one to decrease it by 1. Game Logic: The game ends immediately if any of the four resource values reaches 0 or 13. When the game ends, display the message: “The commune did not survive.” (Centered on the screen in a bold, minimalist style.) UI Constraints: No additional text should appear anywhere on the screen aside from the numbers above the bars and the final message. The overall visual style should be modern, flat or slightly stylized, and suitable for both desktop and mobile adaptation.
/**** * 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