# 👁️ 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!