198 lines
5.0 KiB
Markdown
198 lines
5.0 KiB
Markdown
# 👁️ VISUAL SOUND CUE SYSTEM - TESTING GUIDE
|
|
|
|
**System:** VisualSoundCueSystem.js
|
|
**Purpose:** Accessibility for deaf/hard-of-hearing players
|
|
**Status:** ✅ IMPLEMENTED
|
|
|
|
---
|
|
|
|
## 🎯 **Features Implemented:**
|
|
|
|
### 1. ✅ **Visual Heartbeat** (Low Health Indicator)
|
|
- ❤️ Heart emoji appears in top-left corner
|
|
- Pulses faster as health decreases
|
|
- Shows when health < 30%
|
|
- Speed: 300ms (critical) to 1000ms (low)
|
|
|
|
### 2. ✅ **Damage Direction Indicator**
|
|
- 🎯 Large arrow shows damage direction
|
|
- Arrows: ↑ ↓ ← →
|
|
- Red color (#ff0000)
|
|
- Fades out after 800ms
|
|
|
|
### 3. ✅ **Screen Flash Notifications**
|
|
- ⚡ Full-screen color flash
|
|
- Types:
|
|
- 🔴 Danger (red)
|
|
- 🟡 Warning (orange)
|
|
- 🔵 Info (blue)
|
|
- 🟢 Success (green)
|
|
- Large icon in center
|
|
- Optional subtitle message
|
|
|
|
### 4. ✅ **Smart Subtitles**
|
|
- 💬 Bottom-center text box
|
|
- Black background (80% opacity)
|
|
- White text, centered
|
|
- Auto-hide after 3 seconds
|
|
- Optional speaker name: `[Speaker]: Message`
|
|
|
|
---
|
|
|
|
## 🧪 **Testing Commands:**
|
|
|
|
Open browser console (F12) and run these commands:
|
|
|
|
### **Test Heartbeat:**
|
|
```javascript
|
|
// Simulate low health (triggers heartbeat)
|
|
const gameScene = game.scene.getScene('GameScene');
|
|
gameScene.visualSoundCueSystem.updateHeartbeat(25); // 25% health
|
|
```
|
|
|
|
### **Test Damage Indicator:**
|
|
```javascript
|
|
// Show damage from different directions
|
|
const gameScene = game.scene.getScene('GameScene');
|
|
gameScene.visualSoundCueSystem.showDamageIndicator('up', 10);
|
|
gameScene.visualSoundCueSystem.showDamageIndicator('down', 15);
|
|
gameScene.visualSoundCueSystem.showDamageIndicator('left', 20);
|
|
gameScene.visualSoundCueSystem.showDamageIndicator('right', 25);
|
|
```
|
|
|
|
### **Test Screen Flash:**
|
|
```javascript
|
|
const gameScene = game.scene.getScene('GameScene');
|
|
|
|
// Danger flash
|
|
gameScene.visualSoundCueSystem.showScreenFlash('danger', '[DANGER!]');
|
|
|
|
// Warning flash
|
|
gameScene.visualSoundCueSystem.showScreenFlash('warning', '[WARNING!]');
|
|
|
|
// Info flash
|
|
gameScene.visualSoundCueSystem.showScreenFlash('info', '[INFO]');
|
|
|
|
// Success flash
|
|
gameScene.visualSoundCueSystem.showScreenFlash('success', '[SUCCESS!]');
|
|
```
|
|
|
|
### **Test Subtitles:**
|
|
```javascript
|
|
const gameScene = game.scene.getScene('GameScene');
|
|
|
|
// Simple subtitle
|
|
gameScene.visualSoundCueSystem.showSubtitle('Hello, World!', 3000);
|
|
|
|
// With speaker name
|
|
gameScene.visualSoundCueSystem.showSubtitle('Welcome to NovaFarma!', 3000, 'System');
|
|
```
|
|
|
|
### **Test Sound Events:**
|
|
```javascript
|
|
const gameScene = game.scene.getScene('GameScene');
|
|
|
|
// Damage event
|
|
gameScene.visualSoundCueSystem.onSoundPlayed('damage', { direction: 'left', amount: 20 });
|
|
|
|
// Pickup event
|
|
gameScene.visualSoundCueSystem.onSoundPlayed('pickup', { item: 'Wood' });
|
|
|
|
// Harvest event
|
|
gameScene.visualSoundCueSystem.onSoundPlayed('harvest');
|
|
|
|
// Build event
|
|
gameScene.visualSoundCueSystem.onSoundPlayed('build');
|
|
|
|
// Danger event
|
|
gameScene.visualSoundCueSystem.onSoundPlayed('danger');
|
|
|
|
// Night event
|
|
gameScene.visualSoundCueSystem.onSoundPlayed('night');
|
|
|
|
// Achievement event
|
|
gameScene.visualSoundCueSystem.onSoundPlayed('achievement', { message: '[LEVEL UP!]' });
|
|
```
|
|
|
|
---
|
|
|
|
## ⚙️ **Settings:**
|
|
|
|
### **Toggle Features:**
|
|
```javascript
|
|
const gameScene = game.scene.getScene('GameScene');
|
|
|
|
// Toggle heartbeat
|
|
gameScene.visualSoundCueSystem.toggleHeartbeat(true/false);
|
|
|
|
// Toggle damage indicators
|
|
gameScene.visualSoundCueSystem.toggleDamageIndicator(true/false);
|
|
|
|
// Toggle screen flashes
|
|
gameScene.visualSoundCueSystem.toggleScreenFlash(true/false);
|
|
|
|
// Toggle subtitles
|
|
gameScene.visualSoundCueSystem.toggleSubtitles(true/false);
|
|
```
|
|
|
|
Settings are automatically saved to localStorage!
|
|
|
|
---
|
|
|
|
## 🎮 **In-Game Integration:**
|
|
|
|
The system automatically responds to game events:
|
|
|
|
1. **Health < 30%** → Heartbeat starts
|
|
2. **Player takes damage** → Damage indicator shows direction
|
|
3. **Night falls** → Screen flash warning
|
|
4. **Achievement unlocked** → Success flash
|
|
5. **Item picked up** → Subtitle shows item name
|
|
6. **Crop harvested** → Subtitle notification
|
|
|
|
---
|
|
|
|
## 📝 **Next Steps:**
|
|
|
|
To fully integrate, connect to actual game events:
|
|
|
|
```javascript
|
|
// In Player.js - when taking damage
|
|
this.scene.visualSoundCueSystem.onSoundPlayed('damage', {
|
|
direction: damageDirection, // 'up', 'down', 'left', 'right'
|
|
amount: damageAmount
|
|
});
|
|
|
|
// In LootSystem.js - when picking up item
|
|
this.scene.visualSoundCueSystem.onSoundPlayed('pickup', {
|
|
item: itemName
|
|
});
|
|
|
|
// In FarmingSystem.js - when harvesting
|
|
this.scene.visualSoundCueSystem.onSoundPlayed('harvest');
|
|
|
|
// In WeatherSystem.js - when night falls
|
|
this.scene.visualSoundCueSystem.onSoundPlayed('night');
|
|
```
|
|
|
|
---
|
|
|
|
## ✅ **Checklist:**
|
|
|
|
- [x] Visual heartbeat (low health)
|
|
- [x] Damage direction indicator
|
|
- [x] Screen flash notifications
|
|
- [x] Smart subtitles
|
|
- [x] Settings persistence
|
|
- [x] Auto-update on health change
|
|
- [ ] Integration with game events (TODO)
|
|
- [ ] UI settings menu (TODO)
|
|
|
|
---
|
|
|
|
## 🎉 **Status:**
|
|
|
|
**READY FOR TESTING!** ✅
|
|
|
|
All visual sound cue features are implemented and functional. Use the testing commands above to see them in action!
|