This commit is contained in:
2025-12-08 17:31:18 +01:00
parent 30eb2d1dc8
commit 097d35da1b
7 changed files with 713 additions and 105 deletions

View File

@@ -57,6 +57,9 @@ Pripravi se... NOČ PRIHAJA.`;
fontSize: '16px', fill: '#666'
}).setOrigin(1);
// LANGUAGE SELECTOR
this.createLanguageSelector(width, height);
// Input to skip
this.input.keyboard.on('keydown-SPACE', () => {
this.scene.start('GameScene');
@@ -66,4 +69,80 @@ Pripravi se... NOČ PRIHAJA.`;
this.scene.start('GameScene');
});
}
createLanguageSelector(width, height) {
// Initialize localization
if (!window.i18n) {
window.i18n = new LocalizationSystem();
}
const languages = [
{ code: 'slo', flag: '🇸🇮', name: 'SLO' },
{ code: 'en', flag: '🇬🇧', name: 'ENG' },
{ code: 'de', flag: '🇩🇪', name: 'DEU' },
{ code: 'it', flag: '🇮🇹', name: 'ITA' },
{ code: 'cn', flag: '🇨🇳', name: '中文' }
];
const startX = 20;
const startY = 20;
const spacing = 80;
// Title
this.add.text(startX, startY, '🌍 Language:', {
fontSize: '18px',
fill: '#ffffff',
fontFamily: 'Courier New'
});
// Language buttons
languages.forEach((lang, index) => {
const x = startX;
const y = startY + 40 + (index * spacing);
// Background
const bg = this.add.rectangle(x, y, 200, 60, 0x333333, 0.8);
bg.setOrigin(0, 0);
// Flag + Name
const text = this.add.text(x + 100, y + 30, `${lang.flag} ${lang.name}`, {
fontSize: '24px',
fill: window.i18n.getCurrentLanguage() === lang.code ? '#00ff41' : '#ffffff',
fontFamily: 'Courier New'
}).setOrigin(0.5);
// Make interactive
bg.setInteractive({ useHandCursor: true });
bg.on('pointerover', () => {
bg.setFillStyle(0x555555, 0.9);
text.setScale(1.1);
});
bg.on('pointerout', () => {
bg.setFillStyle(0x333333, 0.8);
text.setScale(1.0);
});
bg.on('pointerdown', () => {
// Set language
window.i18n.setLanguage(lang.code);
// Update all text colors
languages.forEach((l, i) => {
const langText = this.children.list.find(child =>
child.text && child.text.includes(l.flag)
);
if (langText) {
langText.setColor(window.i18n.getCurrentLanguage() === l.code ? '#00ff41' : '#ffffff');
}
});
// Visual feedback
this.tweens.add({
targets: bg,
alpha: 0.5,
yoyo: true,
duration: 100
});
});
});
}
}

View File

@@ -1541,4 +1541,177 @@ class UIScene extends Phaser.Scene {
onComplete: () => text.destroy()
});
}
createSettingsButton() {
// Settings gear icon (top-right corner)
const settingsBtn = this.add.text(this.cameras.main.width - 60, 20, '⚙️', {
fontSize: '32px',
color: '#ffffff'
});
settingsBtn.setScrollFactor(0);
settingsBtn.setDepth(9999);
settingsBtn.setInteractive({ useHandCursor: true });
settingsBtn.on('pointerover', () => {
settingsBtn.setScale(1.2);
});
settingsBtn.on('pointerout', () => {
settingsBtn.setScale(1.0);
});
settingsBtn.on('pointerdown', () => {
this.toggleSettingsMenu();
});
}
toggleSettingsMenu() {
if (this.settingsContainer) {
// Close existing menu
this.settingsContainer.destroy();
this.settingsContainer = null;
// Resume game
if (this.gameScene) {
this.gameScene.physics.resume();
}
return;
}
// Pause game
if (this.gameScene) {
this.gameScene.physics.pause();
}
// Create settings menu
const width = this.cameras.main.width;
const height = this.cameras.main.height;
this.settingsContainer = this.add.container(0, 0);
this.settingsContainer.setScrollFactor(0);
this.settingsContainer.setDepth(10000);
// Semi-transparent background
const bg = this.add.rectangle(0, 0, width, height, 0x000000, 0.8);
bg.setOrigin(0);
this.settingsContainer.add(bg);
// Panel
const panelW = 500;
const panelH = 600;
const panelX = width / 2 - panelW / 2;
const panelY = height / 2 - panelH / 2;
const panel = this.add.rectangle(panelX, panelY, panelW, panelH, 0x1a1a2e, 1);
panel.setOrigin(0);
panel.setStrokeStyle(4, 0x00ff41);
this.settingsContainer.add(panel);
// Title
const title = this.add.text(width / 2, panelY + 30, '⚙️ SETTINGS', {
fontSize: '36px',
fontFamily: 'Courier New',
color: '#00ff41',
fontStyle: 'bold'
});
title.setOrigin(0.5, 0);
this.settingsContainer.add(title);
// Language Section
this.createLanguageSection(panelX, panelY + 100, panelW);
// Volume Section (placeholder)
this.createVolumeSection(panelX, panelY + 350, panelW);
// Close button
const closeBtn = this.add.text(width / 2, panelY + panelH - 60, '[ CLOSE ]', {
fontSize: '24px',
fontFamily: 'Courier New',
color: '#ffffff',
backgroundColor: '#ff4444',
padding: { x: 20, y: 10 }
});
closeBtn.setOrigin(0.5);
closeBtn.setInteractive({ useHandCursor: true });
closeBtn.on('pointerover', () => closeBtn.setScale(1.1));
closeBtn.on('pointerout', () => closeBtn.setScale(1.0));
closeBtn.on('pointerdown', () => this.toggleSettingsMenu());
this.settingsContainer.add(closeBtn);
}
createLanguageSection(x, y, width) {
// Initialize localization
if (!window.i18n) {
window.i18n = new LocalizationSystem();
}
const sectionTitle = this.add.text(x + width / 2, y, '🌍 LANGUAGE / JEZIK', {
fontSize: '20px',
fontFamily: 'Courier New',
color: '#ffffff'
});
sectionTitle.setOrigin(0.5, 0);
this.settingsContainer.add(sectionTitle);
const languages = [
{ code: 'slo', flag: '🇸🇮', name: 'Slovenščina' },
{ code: 'en', flag: '🇬🇧', name: 'English' },
{ code: 'de', flag: '🇩🇪', name: 'Deutsch' },
{ code: 'it', flag: '🇮🇹', name: 'Italiano' },
{ code: 'cn', flag: '🇨🇳', name: '中文' }
];
const startY = y + 40;
const spacing = 45;
languages.forEach((lang, index) => {
const btnY = startY + (index * spacing);
const btnX = x + width / 2;
const isActive = window.i18n.getCurrentLanguage() === lang.code;
const btn = this.add.text(btnX, btnY, `${lang.flag} ${lang.name}`, {
fontSize: '18px',
fontFamily: 'Courier New',
color: isActive ? '#00ff41' : '#ffffff',
backgroundColor: isActive ? '#333333' : '#222222',
padding: { x: 15, y: 8 }
});
btn.setOrigin(0.5);
btn.setInteractive({ useHandCursor: true });
btn.on('pointerover', () => {
btn.setScale(1.05);
if (!isActive) btn.setBackgroundColor('#444444');
});
btn.on('pointerout', () => {
btn.setScale(1.0);
if (!isActive) btn.setBackgroundColor('#222222');
});
btn.on('pointerdown', () => {
window.i18n.setLanguage(lang.code);
// Refresh settings menu to update colors
this.toggleSettingsMenu();
this.toggleSettingsMenu();
});
this.settingsContainer.add(btn);
});
}
createVolumeSection(x, y, width) {
const sectionTitle = this.add.text(x + width / 2, y, '🔊 VOLUME', {
fontSize: '20px',
fontFamily: 'Courier New',
color: '#ffffff'
});
sectionTitle.setOrigin(0.5, 0);
this.settingsContainer.add(sectionTitle);
// Placeholder text
const placeholder = this.add.text(x + width / 2, y + 50, 'Volume controls - Coming Soon', {
fontSize: '14px',
fontFamily: 'Courier New',
color: '#888888'
});
placeholder.setOrigin(0.5, 0);
this.settingsContainer.add(placeholder);
}
}