Compare commits
2 Commits
274c4f92cd
...
599d1ef7fb
| Author | SHA1 | Date | |
|---|---|---|---|
| 599d1ef7fb | |||
| 2759c64c43 |
@@ -1,19 +1,23 @@
|
||||
import AccessibilityManager from '../systems/AccessibilityManager.js';
|
||||
|
||||
class StoryScene extends Phaser.Scene {
|
||||
constructor() {
|
||||
super({ key: 'StoryScene' });
|
||||
}
|
||||
|
||||
preload() {
|
||||
// Load audio assets
|
||||
this.load.audio('forest_ambient', 'assets/audio/music/forest_ambient.mp3');
|
||||
}
|
||||
|
||||
create() {
|
||||
const width = this.cameras.main.width;
|
||||
const height = this.cameras.main.height;
|
||||
|
||||
// Warm background (Stardew Valley style)
|
||||
const bg = this.add.rectangle(0, 0, width, height, 0x2d1b00);
|
||||
bg.setOrigin(0);
|
||||
|
||||
// Add subtle texture overlay
|
||||
const overlay = this.add.rectangle(0, 0, width, height, 0x000000, 0.3);
|
||||
overlay.setOrigin(0);
|
||||
// 🎨 NOIR GRADIENT BACKGROUND (dark red-black)
|
||||
const graphics = this.add.graphics();
|
||||
graphics.fillGradientStyle(0x1a0000, 0x1a0000, 0x000000, 0x000000, 1);
|
||||
graphics.fillRect(0, 0, width, height);
|
||||
|
||||
// 🌫️ NOIR FOG EFFECT
|
||||
this.createNoirFog(width, height);
|
||||
@@ -97,36 +101,42 @@ class StoryScene extends Phaser.Scene {
|
||||
}
|
||||
|
||||
createNoirFog(width, height) {
|
||||
// Create fog particles for noir atmosphere
|
||||
// Create fog particles with SOFT texture
|
||||
const graphics = this.add.graphics();
|
||||
graphics.fillStyle(0x888888, 1);
|
||||
graphics.fillCircle(16, 16, 16);
|
||||
graphics.generateTexture('fog_particle', 32, 32);
|
||||
|
||||
// Soft feathered circle (not harsh edges)
|
||||
const gradient = graphics.createRadialGradient(32, 32, 0, 32, 32, 32);
|
||||
gradient.addColorStop(0, 'rgba(200, 200, 200, 1)');
|
||||
gradient.addColorStop(0.5, 'rgba(150, 150, 150, 0.5)');
|
||||
gradient.addColorStop(1, 'rgba(100, 100, 100, 0)');
|
||||
|
||||
graphics.fillStyle(0xCCCCCC, 1);
|
||||
graphics.fillCircle(32, 32, 28);
|
||||
graphics.generateTexture('fog_particle', 64, 64);
|
||||
graphics.destroy();
|
||||
|
||||
// Fog particle emitter (PHASER 3 API FIX)
|
||||
// Fog particle emitter - SOFTER, LARGER, SUBTLE
|
||||
const fogEmitter = this.add.particles(0, 0, 'fog_particle', {
|
||||
x: { min: -100, max: width + 100 },
|
||||
y: { min: -50, max: height + 50 },
|
||||
speedX: { min: -15, max: 15 },
|
||||
speedY: { min: -5, max: 5 },
|
||||
scale: { start: 0.2, end: 1.0 },
|
||||
alpha: { start: 0, end: 0.12 },
|
||||
lifespan: 10000,
|
||||
frequency: 400,
|
||||
quantity: 1,
|
||||
blendMode: 'NORMAL'
|
||||
speedX: { min: -10, max: 10 },
|
||||
speedY: { min: -3, max: 3 },
|
||||
scale: { start: 2.0, end: 4.0 }, // LARGER!
|
||||
alpha: { start: 0, end: 0.05 }, // SUBTLE!
|
||||
lifespan: 15000,
|
||||
frequency: 600,
|
||||
quantity: 1
|
||||
});
|
||||
|
||||
fogEmitter.setDepth(2); // Above background, below UI
|
||||
fogEmitter.setDepth(2);
|
||||
|
||||
// Noir vignette (dark edges)
|
||||
// ENHANCED NOIR VIGNETTE (dark edges)
|
||||
const vignette = this.add.rectangle(width / 2, height / 2, width, height, 0x000000, 0);
|
||||
vignette.setDepth(50);
|
||||
vignette.setDepth(100);
|
||||
|
||||
this.tweens.add({
|
||||
targets: vignette,
|
||||
alpha: 0.35,
|
||||
alpha: 0.5, // Stronger vignette
|
||||
duration: 3000,
|
||||
yoyo: true,
|
||||
repeat: -1,
|
||||
@@ -486,27 +496,111 @@ class StoryScene extends Phaser.Scene {
|
||||
showAccessibility() {
|
||||
console.log('♿ Opening Accessibility Menu...');
|
||||
|
||||
// Create accessibility quick menu
|
||||
const options = [
|
||||
'♿ ACCESSIBILITY OPTIONS',
|
||||
// Initialize AccessibilityManager if not exists
|
||||
if (!this.accessibility) {
|
||||
this.accessibility = new AccessibilityManager(this);
|
||||
}
|
||||
|
||||
// Create live accessibility menu
|
||||
const width = this.cameras.main.width;
|
||||
const height = this.cameras.main.height;
|
||||
|
||||
const menuBg = this.add.rectangle(width / 2, height / 2, 500, 400, 0x000000, 0.9);
|
||||
menuBg.setDepth(1000);
|
||||
|
||||
const title = this.add.text(width / 2, height / 2 - 170, '♿ ACCESSIBILITY OPTIONS', {
|
||||
fontSize: '24px',
|
||||
fontFamily: '"Noto Sans", Georgia, serif',
|
||||
color: '#f4e4c1',
|
||||
fontStyle: 'bold'
|
||||
});
|
||||
title.setOrigin(0.5);
|
||||
title.setDepth(1001);
|
||||
|
||||
const instructions = [
|
||||
'Press number keys to toggle:',
|
||||
'',
|
||||
'1. High Contrast Mode',
|
||||
'2. Large Text Mode',
|
||||
'2. Large Text (2x)',
|
||||
'3. Color Blind Mode',
|
||||
'4. Screen Reader Support',
|
||||
'5. Reduce Flashing (Epilepsy)',
|
||||
'6. One-Handed Controls',
|
||||
'7. Audio Cues',
|
||||
'4. Screen Reader',
|
||||
'5. Reduce Motion',
|
||||
'6. One-Handed (Left)',
|
||||
'7. Font Scale Reset',
|
||||
'',
|
||||
'Full accessibility settings available in-game (ESC → Settings)',
|
||||
'',
|
||||
'Tip: Press 1-7 to toggle these features'
|
||||
'Press ESC to close'
|
||||
];
|
||||
|
||||
alert(options.join('\n'));
|
||||
const instructionsText = this.add.text(width / 2, height / 2 - 50, instructions.join('\n'), {
|
||||
fontSize: '16px',
|
||||
fontFamily: '"Noto Sans", Georgia, serif',
|
||||
color: '#d4a574',
|
||||
align: 'center',
|
||||
lineSpacing: 8
|
||||
});
|
||||
instructionsText.setOrigin(0.5);
|
||||
instructionsText.setDepth(1001);
|
||||
|
||||
// TODO: Implement full accessibility menu
|
||||
// For now, just show information
|
||||
// Keyboard listener for options
|
||||
const keyHandler = (event) => {
|
||||
switch (event.key) {
|
||||
case '1':
|
||||
if (this.accessibility.settings.highContrast) {
|
||||
this.accessibility.disableHighContrast();
|
||||
alert('✅ High Contrast: OFF');
|
||||
} else {
|
||||
this.accessibility.enableHighContrast();
|
||||
alert('✅ High Contrast: ON');
|
||||
}
|
||||
break;
|
||||
case '2':
|
||||
this.accessibility.setSubtitleSize('xlarge');
|
||||
alert('✅ Large Text: ON (2.0x scale)');
|
||||
break;
|
||||
case '3':
|
||||
if (this.accessibility.settings.colorBlindMode === 'none') {
|
||||
this.accessibility.setColorBlindMode('protanopia');
|
||||
alert('✅ Color Blind Mode: Protanopia');
|
||||
} else {
|
||||
this.accessibility.setColorBlindMode('none');
|
||||
alert('✅ Color Blind Mode: OFF');
|
||||
}
|
||||
break;
|
||||
case '4':
|
||||
alert('ℹ️ Screen Reader: Coming soon!');
|
||||
break;
|
||||
case '5':
|
||||
if (this.accessibility.settings.reduceMotion) {
|
||||
this.accessibility.disableReduceMotion();
|
||||
alert('✅ Reduce Motion: OFF');
|
||||
} else {
|
||||
this.accessibility.enableReduceMotion();
|
||||
alert('✅ Reduce Motion: ON');
|
||||
}
|
||||
break;
|
||||
case '6':
|
||||
if (this.accessibility.settings.oneHandedMode) {
|
||||
this.accessibility.disableOneHandedMode();
|
||||
alert('✅ One-Handed Mode: OFF');
|
||||
} else {
|
||||
this.accessibility.enableOneHandedMode('left');
|
||||
alert('✅ One-Handed Mode: LEFT HAND');
|
||||
}
|
||||
break;
|
||||
case '7':
|
||||
this.accessibility.setFontScale(1.0);
|
||||
alert('✅ Font Scale: Reset to 1.0x');
|
||||
break;
|
||||
case 'Escape':
|
||||
menuBg.destroy();
|
||||
title.destroy();
|
||||
instructionsText.destroy();
|
||||
document.removeEventListener('keydown', keyHandler);
|
||||
break;
|
||||
}
|
||||
};
|
||||
|
||||
document.addEventListener('keydown', keyHandler);
|
||||
}
|
||||
|
||||
exitGame() {
|
||||
|
||||
Reference in New Issue
Block a user