sezsa
This commit is contained in:
299
src/utils/AccessibilitySettings.js
Normal file
299
src/utils/AccessibilitySettings.js
Normal file
@@ -0,0 +1,299 @@
|
||||
// Accessibility Settings Manager
|
||||
class AccessibilitySettings {
|
||||
constructor(scene) {
|
||||
this.scene = scene;
|
||||
|
||||
// Settings
|
||||
this.settings = {
|
||||
// Visual
|
||||
highContrastMode: 'off', // 'off', 'blackwhite', 'yellowblack'
|
||||
colorBlindMode: 'off', // 'off', 'protanopia', 'deuteranopia', 'tritanopia', 'achromatopsia'
|
||||
uiScale: 100, // 100%, 150%, 200%
|
||||
boldOutlines: false,
|
||||
|
||||
// Photosensitivity
|
||||
reduceFlashing: false,
|
||||
disableLightning: false,
|
||||
reduceParticles: false,
|
||||
brightnessLimit: 100, // 0-100%
|
||||
|
||||
// Audio/Visual
|
||||
visualHealthIndicator: true,
|
||||
damageDirectionIndicator: true,
|
||||
screenFlashNotifications: true,
|
||||
|
||||
// Motion
|
||||
reduceMotion: false,
|
||||
disableScreenShake: false,
|
||||
|
||||
// Loaded from localStorage
|
||||
loaded: false
|
||||
};
|
||||
|
||||
this.init();
|
||||
}
|
||||
|
||||
init() {
|
||||
// Load from localStorage
|
||||
this.loadSettings();
|
||||
|
||||
// Apply initial settings
|
||||
this.applyAllSettings();
|
||||
|
||||
console.log('♿ Accessibility Settings initialized');
|
||||
}
|
||||
|
||||
loadSettings() {
|
||||
const saved = localStorage.getItem('novafarma_accessibility');
|
||||
if (saved) {
|
||||
try {
|
||||
const parsed = JSON.parse(saved);
|
||||
Object.assign(this.settings, parsed);
|
||||
this.loaded = true;
|
||||
console.log('♿ Loaded accessibility settings');
|
||||
} catch (e) {
|
||||
console.warn('Failed to load accessibility settings:', e);
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
saveSettings() {
|
||||
try {
|
||||
localStorage.setItem('novafarma_accessibility', JSON.stringify(this.settings));
|
||||
console.log('♿ Saved accessibility settings');
|
||||
} catch (e) {
|
||||
console.warn('Failed to save accessibility settings:', e);
|
||||
}
|
||||
}
|
||||
|
||||
applyAllSettings() {
|
||||
this.applyHighContrast();
|
||||
this.applyColorBlindMode();
|
||||
this.applyUIScale();
|
||||
this.applyBoldOutlines();
|
||||
this.applyPhotosensitivity();
|
||||
}
|
||||
|
||||
// === HIGH CONTRAST MODES ===
|
||||
|
||||
setHighContrastMode(mode) {
|
||||
this.settings.highContrastMode = mode;
|
||||
this.applyHighContrast();
|
||||
this.saveSettings();
|
||||
}
|
||||
|
||||
applyHighContrast() {
|
||||
const mode = this.settings.highContrastMode;
|
||||
|
||||
// Remove existing filters
|
||||
this.removeFilter('high-contrast');
|
||||
|
||||
if (mode === 'blackwhite') {
|
||||
// Black & White mode
|
||||
this.scene.cameras.main.setPostPipeline('grayscale');
|
||||
document.body.style.filter = 'grayscale(100%) contrast(150%)';
|
||||
console.log('♿ Black & White mode enabled');
|
||||
} else if (mode === 'yellowblack') {
|
||||
// Yellow on Black mode
|
||||
document.body.style.filter = 'invert(100%) hue-rotate(180deg)';
|
||||
document.body.style.backgroundColor = '#000000';
|
||||
console.log('♿ Yellow on Black mode enabled');
|
||||
} else {
|
||||
// Off
|
||||
document.body.style.filter = 'none';
|
||||
document.body.style.backgroundColor = '';
|
||||
}
|
||||
}
|
||||
|
||||
// === COLOR BLIND MODES ===
|
||||
|
||||
setColorBlindMode(mode) {
|
||||
this.settings.colorBlindMode = mode;
|
||||
this.applyColorBlindMode();
|
||||
this.saveSettings();
|
||||
}
|
||||
|
||||
applyColorBlindMode() {
|
||||
const mode = this.settings.colorBlindMode;
|
||||
|
||||
// Remove existing filters
|
||||
this.removeFilter('color-blind');
|
||||
|
||||
if (mode === 'protanopia') {
|
||||
// Red-blind (remove red channel)
|
||||
document.body.style.filter = 'url(#protanopia)';
|
||||
console.log('♿ Protanopia filter enabled');
|
||||
} else if (mode === 'deuteranopia') {
|
||||
// Green-blind (remove green channel)
|
||||
document.body.style.filter = 'url(#deuteranopia)';
|
||||
console.log('♿ Deuteranopia filter enabled');
|
||||
} else if (mode === 'tritanopia') {
|
||||
// Blue-blind (remove blue channel)
|
||||
document.body.style.filter = 'url(#tritanopia)';
|
||||
console.log('♿ Tritanopia filter enabled');
|
||||
} else if (mode === 'achromatopsia') {
|
||||
// Total color blindness (grayscale)
|
||||
document.body.style.filter = 'grayscale(100%)';
|
||||
console.log('♿ Achromatopsia filter enabled');
|
||||
} else {
|
||||
document.body.style.filter = 'none';
|
||||
}
|
||||
}
|
||||
|
||||
// === UI SCALE ===
|
||||
|
||||
setUIScale(scale) {
|
||||
this.settings.uiScale = scale;
|
||||
this.applyUIScale();
|
||||
this.saveSettings();
|
||||
}
|
||||
|
||||
applyUIScale() {
|
||||
const scale = this.settings.uiScale / 100;
|
||||
|
||||
// Scale all UI elements
|
||||
const uiScene = this.scene.scene.get('UIScene');
|
||||
if (uiScene) {
|
||||
// Scale containers
|
||||
if (uiScene.uiContainer) {
|
||||
uiScene.uiContainer.setScale(scale);
|
||||
}
|
||||
|
||||
console.log(`♿ UI scaled to ${this.settings.uiScale}%`);
|
||||
}
|
||||
}
|
||||
|
||||
// === BOLD OUTLINES ===
|
||||
|
||||
setBoldOutlines(enabled) {
|
||||
this.settings.boldOutlines = enabled;
|
||||
this.applyBoldOutlines();
|
||||
this.saveSettings();
|
||||
}
|
||||
|
||||
applyBoldOutlines() {
|
||||
if (this.settings.boldOutlines) {
|
||||
// Add bold outlines to all text
|
||||
document.body.style.textShadow = '0 0 2px #000, 0 0 2px #000, 0 0 2px #000';
|
||||
console.log('♿ Bold outlines enabled');
|
||||
} else {
|
||||
document.body.style.textShadow = 'none';
|
||||
}
|
||||
}
|
||||
|
||||
// === PHOTOSENSITIVITY ===
|
||||
|
||||
setReduceFlashing(enabled) {
|
||||
this.settings.reduceFlashing = enabled;
|
||||
this.saveSettings();
|
||||
}
|
||||
|
||||
setDisableLightning(enabled) {
|
||||
this.settings.disableLightning = enabled;
|
||||
this.saveSettings();
|
||||
}
|
||||
|
||||
setReduceParticles(enabled) {
|
||||
this.settings.reduceParticles = enabled;
|
||||
this.applyPhotosensitivity();
|
||||
this.saveSettings();
|
||||
}
|
||||
|
||||
setBrightnessLimit(value) {
|
||||
this.settings.brightnessLimit = value;
|
||||
this.applyPhotosensitivity();
|
||||
this.saveSettings();
|
||||
}
|
||||
|
||||
applyPhotosensitivity() {
|
||||
// Brightness limit
|
||||
const brightness = this.settings.brightnessLimit / 100;
|
||||
this.scene.cameras.main.setAlpha(brightness);
|
||||
|
||||
// Particle reduction will be checked by particle systems
|
||||
console.log(`♿ Brightness limited to ${this.settings.brightnessLimit}%`);
|
||||
}
|
||||
|
||||
// === VISUAL INDICATORS ===
|
||||
|
||||
setVisualHealthIndicator(enabled) {
|
||||
this.settings.visualHealthIndicator = enabled;
|
||||
this.saveSettings();
|
||||
}
|
||||
|
||||
setDamageDirectionIndicator(enabled) {
|
||||
this.settings.damageDirectionIndicator = enabled;
|
||||
this.saveSettings();
|
||||
}
|
||||
|
||||
showDamageDirection(x, y) {
|
||||
if (!this.settings.damageDirectionIndicator) return;
|
||||
|
||||
// Show directional arrow
|
||||
const player = this.scene.player;
|
||||
if (!player) return;
|
||||
|
||||
const angle = Phaser.Math.Angle.Between(player.sprite.x, player.sprite.y, x, y);
|
||||
const arrowX = player.sprite.x + Math.cos(angle) * 50;
|
||||
const arrowY = player.sprite.y + Math.sin(angle) * 50;
|
||||
|
||||
const arrow = this.scene.add.text(arrowX, arrowY, '⬆️', {
|
||||
fontSize: '32px'
|
||||
});
|
||||
arrow.setRotation(angle + Math.PI / 2);
|
||||
arrow.setAlpha(0.8);
|
||||
|
||||
this.scene.tweens.add({
|
||||
targets: arrow,
|
||||
alpha: 0,
|
||||
duration: 1000,
|
||||
onComplete: () => arrow.destroy()
|
||||
});
|
||||
}
|
||||
|
||||
// === MOTION ===
|
||||
|
||||
setReduceMotion(enabled) {
|
||||
this.settings.reduceMotion = enabled;
|
||||
this.saveSettings();
|
||||
}
|
||||
|
||||
setDisableScreenShake(enabled) {
|
||||
this.settings.disableScreenShake = enabled;
|
||||
this.saveSettings();
|
||||
}
|
||||
|
||||
// === UTILS ===
|
||||
|
||||
removeFilter(type) {
|
||||
// Remove specific filter type
|
||||
// (placeholder for now)
|
||||
}
|
||||
|
||||
// === GETTERS ===
|
||||
|
||||
shouldReduceParticles() {
|
||||
return this.settings.reduceParticles;
|
||||
}
|
||||
|
||||
shouldDisableLightning() {
|
||||
return this.settings.disableLightning;
|
||||
}
|
||||
|
||||
shouldReduceFlashing() {
|
||||
return this.settings.reduceFlashing;
|
||||
}
|
||||
|
||||
shouldDisableScreenShake() {
|
||||
return this.settings.disableScreenShake;
|
||||
}
|
||||
|
||||
shouldShowVisualHealth() {
|
||||
return this.settings.visualHealthIndicator;
|
||||
}
|
||||
}
|
||||
|
||||
// Export
|
||||
if (typeof module !== 'undefined') {
|
||||
module.exports = AccessibilitySettings;
|
||||
}
|
||||
Reference in New Issue
Block a user