308 lines
9.5 KiB
JavaScript
308 lines
9.5 KiB
JavaScript
class StoryScene extends Phaser.Scene {
|
|
constructor() {
|
|
super({ key: 'StoryScene' });
|
|
}
|
|
|
|
create() {
|
|
const width = this.cameras.main.width;
|
|
const height = this.cameras.main.height;
|
|
|
|
// Dark background with gradient
|
|
const bg = this.add.rectangle(0, 0, width, height, 0x0a0a0a);
|
|
bg.setOrigin(0);
|
|
|
|
// Title
|
|
const title = this.add.text(width / 2, 80, 'NOVAFARMA', {
|
|
fontSize: '72px',
|
|
fontFamily: 'Courier New',
|
|
color: '#00ff41',
|
|
fontStyle: 'bold',
|
|
stroke: '#000000',
|
|
strokeThickness: 6
|
|
});
|
|
title.setOrigin(0.5);
|
|
|
|
// Subtitle
|
|
const subtitle = this.add.text(width / 2, 150, '2084 - Survival Farm', {
|
|
fontSize: '20px',
|
|
fontFamily: 'Courier New',
|
|
color: '#888888'
|
|
});
|
|
subtitle.setOrigin(0.5);
|
|
|
|
// Accessibility Info Panel (Prominent)
|
|
const accessibilityInfo = this.add.text(width / 2, 190,
|
|
'♿ ACCESSIBILITY OPTIONS AVAILABLE BELOW ↓\nFor players with visual, motor, or cognitive needs',
|
|
{
|
|
fontSize: '14px',
|
|
fontFamily: 'Courier New',
|
|
color: '#44ff44',
|
|
align: 'center',
|
|
backgroundColor: '#1a1a2e',
|
|
padding: { x: 15, y: 8 }
|
|
}
|
|
);
|
|
accessibilityInfo.setOrigin(0.5);
|
|
|
|
// Pulsing animation for visibility
|
|
this.tweens.add({
|
|
targets: accessibilityInfo,
|
|
alpha: 0.7,
|
|
yoyo: true,
|
|
repeat: -1,
|
|
duration: 1500,
|
|
ease: 'Sine.easeInOut'
|
|
});
|
|
|
|
// Main Menu Buttons
|
|
this.createMainMenu(width, height);
|
|
|
|
// Language selector (bottom)
|
|
this.createLanguageSelector(width, height);
|
|
|
|
// Version info
|
|
const version = this.add.text(10, height - 30, 'v0.9.0 ALPHA', {
|
|
fontSize: '14px',
|
|
color: '#444444',
|
|
fontFamily: 'Courier New'
|
|
});
|
|
}
|
|
|
|
createMainMenu(width, height) {
|
|
const buttons = [
|
|
{
|
|
label: '▶ NEW GAME',
|
|
color: '#00ff41',
|
|
action: () => this.startNewGame(),
|
|
description: 'Start a new adventure'
|
|
},
|
|
{
|
|
label: '📁 LOAD GAME',
|
|
color: '#4477ff',
|
|
action: () => this.loadGame(),
|
|
description: 'Continue your saved game'
|
|
},
|
|
{
|
|
label: '⚙️ SETTINGS',
|
|
color: '#ffaa00',
|
|
action: () => this.showSettings(),
|
|
description: 'Graphics, audio, controls'
|
|
},
|
|
{
|
|
label: '♿ ACCESSIBILITY',
|
|
color: '#44ff44',
|
|
action: () => this.showAccessibility(),
|
|
description: 'Options for disabilities: Vision, Motor, Cognitive, Epilepsy'
|
|
},
|
|
{
|
|
label: '❌ EXIT',
|
|
color: '#ff4444',
|
|
action: () => this.exitGame(),
|
|
description: 'Close the game'
|
|
}
|
|
];
|
|
|
|
const startY = 230;
|
|
const spacing = 75;
|
|
|
|
buttons.forEach((btn, index) => {
|
|
const y = startY + (index * spacing);
|
|
|
|
// Button background
|
|
const bg = this.add.rectangle(width / 2, y, 400, 60, 0x1a1a2e, 1);
|
|
bg.setStrokeStyle(3, 0x00ff41);
|
|
|
|
// Button text
|
|
const text = this.add.text(width / 2, y, btn.label, {
|
|
fontSize: '28px',
|
|
fontFamily: 'Courier New',
|
|
color: btn.color,
|
|
fontStyle: 'bold'
|
|
});
|
|
text.setOrigin(0.5);
|
|
|
|
// Description text (hidden by default)
|
|
const desc = this.add.text(width / 2, y + 40, btn.description, {
|
|
fontSize: '12px',
|
|
fontFamily: 'Courier New',
|
|
color: '#888888',
|
|
align: 'center'
|
|
});
|
|
desc.setOrigin(0.5);
|
|
desc.setAlpha(0); // Hidden initially
|
|
|
|
// Make interactive
|
|
bg.setInteractive({ useHandCursor: true });
|
|
bg.on('pointerover', () => {
|
|
bg.setFillStyle(0x2a2a4e);
|
|
text.setScale(1.1);
|
|
desc.setAlpha(1); // Show description
|
|
});
|
|
bg.on('pointerout', () => {
|
|
bg.setFillStyle(0x1a1a2e);
|
|
text.setScale(1.0);
|
|
desc.setAlpha(0); // Hide description
|
|
});
|
|
bg.on('pointerdown', () => {
|
|
// Flash effect
|
|
this.tweens.add({
|
|
targets: bg,
|
|
alpha: 0.5,
|
|
yoyo: true,
|
|
duration: 100,
|
|
onComplete: btn.action
|
|
});
|
|
});
|
|
});
|
|
}
|
|
|
|
createLanguageSelector(width, height) {
|
|
// Initialize localization
|
|
if (!window.i18n) {
|
|
window.i18n = new LocalizationSystem();
|
|
}
|
|
|
|
// Globe button (bottom-right)
|
|
const globeBtn = this.add.text(width - 80, height - 60, '🌍', {
|
|
fontSize: '48px'
|
|
});
|
|
globeBtn.setOrigin(0.5);
|
|
globeBtn.setInteractive({ useHandCursor: true });
|
|
|
|
let langMenuOpen = false;
|
|
let langMenu = null;
|
|
|
|
globeBtn.on('pointerover', () => {
|
|
globeBtn.setScale(1.2);
|
|
});
|
|
globeBtn.on('pointerout', () => {
|
|
if (!langMenuOpen) globeBtn.setScale(1.0);
|
|
});
|
|
globeBtn.on('pointerdown', () => {
|
|
if (langMenuOpen) {
|
|
// Close menu
|
|
if (langMenu) langMenu.destroy();
|
|
langMenu = null;
|
|
langMenuOpen = false;
|
|
globeBtn.setScale(1.0);
|
|
} else {
|
|
// Open menu
|
|
langMenuOpen = true;
|
|
langMenu = this.createLanguageMenu(width, height, () => {
|
|
langMenuOpen = false;
|
|
globeBtn.setScale(1.0);
|
|
if (langMenu) langMenu.destroy();
|
|
langMenu = null;
|
|
});
|
|
}
|
|
});
|
|
}
|
|
|
|
createLanguageMenu(width, height, onClose) {
|
|
const container = this.add.container(0, 0);
|
|
|
|
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 menuX = width - 220;
|
|
const menuY = height - 350;
|
|
const menuW = 200;
|
|
const menuH = 280;
|
|
|
|
// Panel background
|
|
const panel = this.add.rectangle(menuX, menuY, menuW, menuH, 0x1a1a2e, 0.98);
|
|
panel.setStrokeStyle(3, 0x00ff41);
|
|
container.add(panel);
|
|
|
|
// Language buttons
|
|
languages.forEach((lang, index) => {
|
|
const btnY = menuY - 100 + (index * 55);
|
|
const isActive = window.i18n.getCurrentLanguage() === lang.code;
|
|
|
|
const btn = this.add.text(menuX, btnY, `${lang.flag} ${lang.name}`, {
|
|
fontSize: '20px',
|
|
fontFamily: 'Courier New',
|
|
color: isActive ? '#00ff41' : '#ffffff',
|
|
backgroundColor: isActive ? '#333333' : '#1a1a2e',
|
|
padding: { x: 15, y: 8 }
|
|
});
|
|
btn.setOrigin(0.5);
|
|
btn.setInteractive({ useHandCursor: true });
|
|
|
|
btn.on('pointerover', () => {
|
|
btn.setScale(1.05);
|
|
if (!isActive) btn.setBackgroundColor('#2a2a4e');
|
|
});
|
|
btn.on('pointerout', () => {
|
|
btn.setScale(1.0);
|
|
if (!isActive) btn.setBackgroundColor('#1a1a2e');
|
|
});
|
|
btn.on('pointerdown', () => {
|
|
window.i18n.setLanguage(lang.code);
|
|
onClose();
|
|
});
|
|
|
|
container.add(btn);
|
|
});
|
|
|
|
return container;
|
|
}
|
|
|
|
startNewGame() {
|
|
console.log('🎮 Starting New Game...');
|
|
this.scene.start('GameScene');
|
|
}
|
|
|
|
loadGame() {
|
|
console.log('📁 Loading Game...');
|
|
// TODO: Implement save/load system
|
|
alert('Load Game - Coming Soon!');
|
|
}
|
|
|
|
showSettings() {
|
|
console.log('⚙️ Opening Settings...');
|
|
// TODO: Settings menu
|
|
alert('Settings - Use ⚙️ button in-game!');
|
|
}
|
|
|
|
showAccessibility() {
|
|
console.log('♿ Opening Accessibility Menu...');
|
|
|
|
// Create accessibility quick menu
|
|
const options = [
|
|
'♿ ACCESSIBILITY OPTIONS',
|
|
'',
|
|
'1. High Contrast Mode',
|
|
'2. Large Text Mode',
|
|
'3. Color Blind Mode',
|
|
'4. Screen Reader Support',
|
|
'5. Reduce Flashing (Epilepsy)',
|
|
'6. One-Handed Controls',
|
|
'7. Audio Cues',
|
|
'',
|
|
'Full accessibility settings available in-game (ESC → Settings)',
|
|
'',
|
|
'Tip: Press 1-7 to toggle these features'
|
|
];
|
|
|
|
alert(options.join('\n'));
|
|
|
|
// TODO: Implement full accessibility menu
|
|
// For now, just show information
|
|
}
|
|
|
|
exitGame() {
|
|
console.log('❌ Exiting...');
|
|
if (window.close) {
|
|
window.close();
|
|
} else {
|
|
alert('Close the window to exit.');
|
|
}
|
|
}
|
|
}
|