mirror of
https://github.com/cliffe/BreakEscape.git
synced 2026-02-20 13:50:46 +00:00
Refactor InkEngine to allow manual control of story continuation; enhance continue method for better text accumulation and logging
Update interactions.js to reference new version of constants Improve NPCBarkSystem to dynamically import phone-chat minigame and handle fallback UI more gracefully Modify constants.js to conditionally export GAME_CONFIG based on Phaser availability Update implementation log for Phone Chat Minigame, detailing completed modules and next steps Create detailed implementation plan for Phone Chat Minigame, outlining structure, features, and integration points Add test HTML page for Phone Chat Minigame, including setup, chat tests, and history management functionalities
This commit is contained in:
Z. Cliffe Schreuders
@@ -94,17 +94,45 @@
|
||||
- [ ] Test auto-trigger workflow (ready to test)
|
||||
- [ ] Test in main game environment
|
||||
|
||||
## TODO (Phase 2: Phone Chat Minigame)
|
||||
## ✅ COMPLETED (Phase 2: Phone Chat Minigame)
|
||||
|
||||
### 📋 Phone Chat UI
|
||||
- [ ] Create `PhoneChatMinigame` class (extend MinigameScene)
|
||||
- [ ] Contact list view
|
||||
- [ ] Conversation view
|
||||
- [ ] Message bubbles (NPC/player)
|
||||
- [ ] Choice buttons
|
||||
- [ ] Message history
|
||||
- [ ] Typing indicator
|
||||
- [ ] CSS styling (`css/phone-chat.css`)
|
||||
### ✅ Phone Chat Modules
|
||||
- [x] **PhoneChatHistory** (`js/minigames/phone-chat/phone-chat-history.js`) - ~270 lines
|
||||
- History management and formatting
|
||||
- Message tracking and unread counts
|
||||
- Export/import functionality
|
||||
- **Status**: Complete ✅
|
||||
|
||||
- [x] **PhoneChatConversation** (`js/minigames/phone-chat/phone-chat-conversation.js`) - ~330 lines
|
||||
- Ink story integration
|
||||
- Story loading and navigation
|
||||
- Choice handling
|
||||
- State management (save/restore)
|
||||
- **Status**: Complete ✅
|
||||
|
||||
- [x] **PhoneChatUI** (`js/minigames/phone-chat/phone-chat-ui.js`) - ~420 lines
|
||||
- Contact list view with unread badges
|
||||
- Conversation view with message bubbles
|
||||
- Choice button rendering
|
||||
- Typing indicator animation
|
||||
- Auto-scrolling
|
||||
- **Status**: Complete ✅
|
||||
|
||||
- [x] **PhoneChatMinigame** (`js/minigames/phone-chat/phone-chat-minigame.js`) - ~370 lines
|
||||
- Main controller extending MinigameScene
|
||||
- Orchestrates UI, conversation, history
|
||||
- Event handling and keyboard shortcuts
|
||||
- **Status**: Complete ✅
|
||||
|
||||
- [x] **CSS Styling** (`css/phone-chat-minigame.css`) - ~175 lines
|
||||
- Phone UI with pixel-art aesthetic
|
||||
- Message bubbles (NPC left, player right)
|
||||
- Choice buttons
|
||||
- Animations (typing, message slide-in)
|
||||
- **Status**: Complete ✅
|
||||
|
||||
- [x] **Registration** - Registered with MinigameFramework as 'phone-chat'
|
||||
- **Status**: Complete ✅
|
||||
|
||||
### 📋 Phone Access
|
||||
- [ ] Phone access button (bottom-right)
|
||||
@@ -144,23 +172,38 @@
|
||||
| ink-engine.js | 360 | ✅ Complete |
|
||||
| npc-events.js | 230 | ✅ Complete |
|
||||
| npc-manager.js | 220 | ✅ Complete |
|
||||
| npc-barks.js | 190 | ✅ Complete |
|
||||
| npc-barks.js | 250 | ✅ Complete |
|
||||
| npc-barks.css | 145 | ✅ Complete |
|
||||
| test.ink | 40 | ✅ Complete |
|
||||
| alice-chat.ink | 180 | ✅ Complete |
|
||||
| generic-npc.ink | 36 | ✅ Complete |
|
||||
| phone-chat-history.js | 270 | ✅ Complete |
|
||||
| phone-chat-conversation.js | 330 | ✅ Complete |
|
||||
| phone-chat-ui.js | 420 | ✅ Complete |
|
||||
| phone-chat-minigame.js | 370 | ✅ Complete |
|
||||
| phone-chat-minigame.css | 175 | ✅ Complete |
|
||||
| test-npc-ink.html | ~400 | ✅ Complete |
|
||||
| test-phone-chat-minigame.html | ~500 | ✅ Complete |
|
||||
|
||||
**Total implemented: ~1,185 lines**
|
||||
**Total implemented: ~3,926 lines across 15 files**
|
||||
|
||||
## Next Steps
|
||||
|
||||
1. Create test HTML page to verify Ink integration
|
||||
2. Test bark system with manual triggers
|
||||
3. Test event system with room transitions
|
||||
4. Begin phone chat minigame implementation
|
||||
### Phase 3: Testing & Integration
|
||||
1. ✅ Test phone-chat minigame with test harness
|
||||
2. ⏳ Verify Alice's complex branching dialogue
|
||||
3. ⏳ Verify Bob's generic NPC story
|
||||
4. ⏳ Test conversation history persistence
|
||||
5. ⏳ Test multiple NPCs on same phone
|
||||
6. ⏳ Test event → bark → phone flow
|
||||
|
||||
## Issues Found
|
||||
|
||||
None so far - initial implementation complete and compiling successfully.
|
||||
### Phase 4: Game Integration
|
||||
1. ⏳ Emit game events from core systems
|
||||
2. ⏳ Add NPC configs to scenario JSON
|
||||
3. ⏳ Test in-game NPC interactions
|
||||
4. ⏳ Polish UI/UX
|
||||
5. ⏳ Performance optimization
|
||||
|
||||
---
|
||||
**Last Updated:** 2025-10-29 00:31
|
||||
**Status:** Phase 1 Complete - Moving to Testing
|
||||
**Last Updated:** 2025-10-29 (Phone Chat Minigame Complete)
|
||||
**Status:** Phase 2 Complete - Ready for Testing
|
||||
|
||||
453
planning_notes/npc/progress/02_PHONE_CHAT_MINIGAME_PLAN.md
Normal file
453
planning_notes/npc/progress/02_PHONE_CHAT_MINIGAME_PLAN.md
Normal file
@@ -0,0 +1,453 @@
|
||||
# Phone Chat Minigame - Implementation Plan
|
||||
|
||||
## Overview
|
||||
Create a Phaser-based phone-chat minigame that integrates with the NPC Ink system, using the same look and feel as the existing `phone-messages-minigame.js` but designed for interactive conversations.
|
||||
|
||||
## Design Goals
|
||||
1. **Visual Consistency**: Match the existing phone UI (signal bars, battery, phone screen)
|
||||
2. **Modular Architecture**: Keep modules under 1000 lines each
|
||||
3. **Separation of Concerns**: Split UI, logic, and Ink integration
|
||||
4. **Reusable Components**: Design for future phone minigame consolidation
|
||||
|
||||
## Module Structure
|
||||
|
||||
### 1. `phone-chat-minigame.js` (Main Controller)
|
||||
**Lines: ~300-400**
|
||||
- Extends `MinigameScene` base class
|
||||
- Orchestrates UI and conversation flow
|
||||
- Handles minigame lifecycle (init, start, cleanup)
|
||||
- Delegates to specialized modules
|
||||
|
||||
**Responsibilities:**
|
||||
```javascript
|
||||
class PhoneChatMinigame extends MinigameScene {
|
||||
- constructor(container, params)
|
||||
- init() // Set up UI structure
|
||||
- start() // Begin conversation
|
||||
- cleanup() // Clean up on exit
|
||||
- handleKeyPress(event) // Keyboard controls
|
||||
}
|
||||
```
|
||||
|
||||
**Dependencies:**
|
||||
- `PhoneChatUI` (UI rendering)
|
||||
- `PhoneChatConversation` (Ink story management)
|
||||
- `PhoneChatHistory` (message history)
|
||||
|
||||
---
|
||||
|
||||
### 2. `phone-chat-ui.js` (UI Component)
|
||||
**Lines: ~400-500**
|
||||
- Renders phone UI elements
|
||||
- Manages DOM structure
|
||||
- Handles UI state (list view, detail view, chat view)
|
||||
- Styling and animations
|
||||
|
||||
**Responsibilities:**
|
||||
```javascript
|
||||
class PhoneChatUI {
|
||||
- constructor(gameContainer, params)
|
||||
- render() // Create phone UI structure
|
||||
- showContactList() // Display NPCs for this phone
|
||||
- showConversation(npcId) // Display chat with NPC
|
||||
- addMessage(type, text) // Add message bubble (npc/player)
|
||||
- addChoices(choices) // Render choice buttons
|
||||
- showTypingIndicator() // NPC is "typing..."
|
||||
- hideTypingIndicator()
|
||||
- updateHeader(npcName) // Update conversation header
|
||||
- scrollToBottom() // Auto-scroll to latest message
|
||||
}
|
||||
```
|
||||
|
||||
**UI Structure:**
|
||||
```html
|
||||
<div class="phone-chat-container">
|
||||
<div class="phone-screen">
|
||||
<div class="phone-header">
|
||||
<!-- Signal bars, battery, time -->
|
||||
</div>
|
||||
|
||||
<div class="contact-list-view"> <!-- OR -->
|
||||
<!-- List of NPCs with unread badges -->
|
||||
</div>
|
||||
|
||||
<div class="conversation-view">
|
||||
<div class="conversation-header">
|
||||
<!-- NPC name, back button, avatar -->
|
||||
</div>
|
||||
<div class="messages-container">
|
||||
<!-- Chat bubbles (NPC left, player right) -->
|
||||
</div>
|
||||
<div class="choices-container">
|
||||
<!-- Choice buttons at bottom -->
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
```
|
||||
|
||||
---
|
||||
|
||||
### 3. `phone-chat-conversation.js` (Ink Integration)
|
||||
**Lines: ~300-400**
|
||||
- Manages Ink story execution
|
||||
- Interfaces with `InkEngine`
|
||||
- Handles conversation state
|
||||
- Processes story output
|
||||
|
||||
**Responsibilities:**
|
||||
```javascript
|
||||
class PhoneChatConversation {
|
||||
- constructor(npcId, npcManager)
|
||||
- async loadStory() // Fetch and initialize Ink story
|
||||
- continue() // Advance story, return { text, choices, canContinue }
|
||||
- makeChoice(index) // Select choice and continue
|
||||
- goToKnot(knotName) // Navigate to specific knot
|
||||
- saveState() // Save Ink state
|
||||
- restoreState() // Restore Ink state
|
||||
- getVariable(name) // Get Ink variable
|
||||
- setVariable(name, value) // Set Ink variable
|
||||
}
|
||||
```
|
||||
|
||||
**Conversation Flow:**
|
||||
1. Load story JSON
|
||||
2. Set NPC name variable
|
||||
3. Navigate to startKnot (or use currentKnot from NPC manager)
|
||||
4. Load conversation history from NPCManager
|
||||
5. Continue story → display text
|
||||
6. Present choices → wait for selection
|
||||
7. Record messages in NPCManager history
|
||||
8. Loop until END or player exits
|
||||
|
||||
---
|
||||
|
||||
### 4. `phone-chat-history.js` (History Management)
|
||||
**Lines: ~200-300**
|
||||
- Interfaces with NPCManager conversation history
|
||||
- Formats messages for display
|
||||
- Handles history loading/saving
|
||||
|
||||
**Responsibilities:**
|
||||
```javascript
|
||||
class PhoneChatHistory {
|
||||
- constructor(npcId, npcManager)
|
||||
- loadHistory() // Get all messages for this NPC
|
||||
- addMessage(type, text, metadata) // Record new message
|
||||
- formatMessage(message) // Format for display
|
||||
- clearHistory() // Clear NPC conversation
|
||||
- getUnreadCount() // Count unread messages
|
||||
- markAllRead() // Mark all messages as read
|
||||
}
|
||||
```
|
||||
|
||||
**Message Format:**
|
||||
```javascript
|
||||
{
|
||||
type: 'npc' | 'player',
|
||||
text: string,
|
||||
timestamp: number,
|
||||
knot?: string,
|
||||
read?: boolean
|
||||
}
|
||||
```
|
||||
|
||||
---
|
||||
|
||||
### 5. `phone-chat.css` (Styles)
|
||||
**Lines: ~400-500**
|
||||
- Copy base styles from `phone-messages-minigame.css`
|
||||
- Chat-specific styles (bubbles, choices)
|
||||
- Animations (typing indicator, message slide-in)
|
||||
- Pixel-art aesthetic (sharp corners, 2px borders)
|
||||
|
||||
**Key Styles:**
|
||||
```css
|
||||
.phone-chat-container { }
|
||||
.phone-screen { }
|
||||
.phone-header { } /* Signal bars, battery */
|
||||
.contact-list-view { }
|
||||
.contact-item { }
|
||||
.unread-badge { }
|
||||
.conversation-view { }
|
||||
.conversation-header { }
|
||||
.messages-container { }
|
||||
.message-bubble { }
|
||||
.message-bubble.npc { } /* Left-aligned, darker */
|
||||
.message-bubble.player { } /* Right-aligned, brighter */
|
||||
.typing-indicator { }
|
||||
.choices-container { }
|
||||
.choice-button { }
|
||||
```
|
||||
|
||||
---
|
||||
|
||||
## File Structure
|
||||
|
||||
```
|
||||
js/minigames/phone-chat/
|
||||
├── phone-chat-minigame.js // Main controller (extends MinigameScene)
|
||||
├── phone-chat-ui.js // UI rendering and DOM management
|
||||
├── phone-chat-conversation.js // Ink story integration
|
||||
└── phone-chat-history.js // History management
|
||||
|
||||
css/
|
||||
└── phone-chat-minigame.css // Styles (based on phone-messages)
|
||||
|
||||
scenarios/ink/
|
||||
└── (NPCs use existing stories: alice-chat.json, generic-npc.json, etc.)
|
||||
```
|
||||
|
||||
---
|
||||
|
||||
## Integration Points
|
||||
|
||||
### With Existing Systems
|
||||
|
||||
**NPCManager:**
|
||||
- Get NPC data (displayName, avatar, storyPath, currentKnot)
|
||||
- Get/add conversation history
|
||||
- Get NPCs by phoneId (for contact list)
|
||||
|
||||
**NPCBarkSystem:**
|
||||
- Triggered from bark clicks (already implemented)
|
||||
- Falls back to inline UI if Phaser unavailable
|
||||
- Opens phone-chat minigame via MinigameFramework
|
||||
|
||||
**MinigameFramework:**
|
||||
- Register as `'phone-chat'` scene
|
||||
- Standard params: `{ npcId, npcName, avatar, inkStoryPath, startKnot, phoneId }`
|
||||
|
||||
**InkEngine:**
|
||||
- Load and run Ink stories
|
||||
- Set `npc_name` variable
|
||||
- Navigate to knots
|
||||
- Get/set variables
|
||||
- Handle choices
|
||||
|
||||
---
|
||||
|
||||
## Features
|
||||
|
||||
### Core Features (MVP)
|
||||
- ✅ Display contact list (multiple NPCs on same phone)
|
||||
- ✅ Open conversation with specific NPC
|
||||
- ✅ Load conversation history
|
||||
- ✅ Display NPC messages (left-aligned bubbles)
|
||||
- ✅ Display player choices as clickable buttons
|
||||
- ✅ Player choices appear as right-aligned bubbles after selection
|
||||
- ✅ Continue Ink story and render new content
|
||||
- ✅ Record all messages in NPCManager history
|
||||
- ✅ Back button to return to contact list
|
||||
- ✅ Close button to exit minigame
|
||||
|
||||
### Enhanced Features (Phase 2)
|
||||
- ⏳ Unread message badges on contacts
|
||||
- ⏳ Typing indicator when NPC "responds"
|
||||
- ⏳ Message timestamps
|
||||
- ⏳ Scroll animations
|
||||
- ⏳ Sound effects (message received, sent)
|
||||
- ⏳ Keyboard shortcuts (Esc to close, Enter to select first choice)
|
||||
- ⏳ Avatar images in conversation header
|
||||
- ⏳ "Mark all as read" functionality
|
||||
- ⏳ Filter contacts by phoneId
|
||||
|
||||
---
|
||||
|
||||
## Implementation Steps
|
||||
|
||||
### Phase 1: Core Structure (Day 1)
|
||||
1. ✅ Create `phone-chat-ui.js` - Basic UI rendering
|
||||
2. ✅ Create `phone-chat-conversation.js` - Ink integration
|
||||
3. ✅ Create `phone-chat-history.js` - History management
|
||||
4. ✅ Create `phone-chat-minigame.js` - Main controller
|
||||
5. ✅ Create `phone-chat-minigame.css` - Base styles
|
||||
|
||||
### Phase 2: Integration (Day 1-2)
|
||||
6. ✅ Wire up UI → Conversation → History
|
||||
7. ✅ Test with Alice (alice-chat.json)
|
||||
8. ✅ Test with Bob (generic-npc.json)
|
||||
9. ✅ Test conversation history persistence
|
||||
10. ✅ Register with MinigameFramework
|
||||
|
||||
### Phase 3: Polish (Day 2)
|
||||
11. ⏳ Add typing indicator animation
|
||||
12. ⏳ Add message slide-in animations
|
||||
13. ⏳ Add unread badges
|
||||
14. ⏳ Add sound effects
|
||||
15. ⏳ Keyboard shortcuts
|
||||
|
||||
### Phase 4: Testing (Day 2-3)
|
||||
16. ⏳ Test multiple NPCs on same phone
|
||||
17. ⏳ Test different phones (player_phone vs office_phone)
|
||||
18. ⏳ Test conversation branching
|
||||
19. ⏳ Test history across sessions
|
||||
20. ⏳ Edge case testing
|
||||
|
||||
---
|
||||
|
||||
## API Reference
|
||||
|
||||
### Params Structure
|
||||
```javascript
|
||||
{
|
||||
npcId: string, // Required: NPC identifier
|
||||
npcName: string, // Display name
|
||||
avatar: string, // Avatar image path
|
||||
inkStoryPath: string, // Path to Ink JSON
|
||||
startKnot: string, // Starting knot (or use NPC's currentKnot)
|
||||
phoneId: string, // Which phone (for multi-phone support)
|
||||
returnCallback: function // Optional callback on exit
|
||||
}
|
||||
```
|
||||
|
||||
### Starting the Minigame
|
||||
```javascript
|
||||
// Via MinigameFramework (in game)
|
||||
window.MinigameFramework.startMinigame('phone-chat', {
|
||||
npcId: 'alice',
|
||||
npcName: 'Alice - Security Consultant',
|
||||
inkStoryPath: 'scenarios/compiled/alice-chat.json',
|
||||
startKnot: 'start'
|
||||
});
|
||||
|
||||
// Via inline fallback (in test harness)
|
||||
const phoneChat = new PhoneChatMinigame(container, params);
|
||||
phoneChat.init();
|
||||
phoneChat.start();
|
||||
```
|
||||
|
||||
---
|
||||
|
||||
## Design Decisions
|
||||
|
||||
### Why Separate Modules?
|
||||
1. **Maintainability**: Each module has single responsibility
|
||||
2. **Testability**: Modules can be tested independently
|
||||
3. **Reusability**: UI can be reused for other phone features
|
||||
4. **Line Limits**: Each module stays under 1000 lines
|
||||
|
||||
### Why Phaser-Based?
|
||||
1. **Game Integration**: Works with existing MinigameFramework
|
||||
2. **Consistency**: Same lifecycle as other minigames
|
||||
3. **Features**: Pause/resume, modal overlay, keyboard controls
|
||||
4. **Fallback**: Inline UI still available for testing
|
||||
|
||||
### Why Separate from phone-messages?
|
||||
1. **Different Use Cases**: Messages are passive, chat is interactive
|
||||
2. **Complexity**: Chat requires Ink integration, choice handling
|
||||
3. **Future Merge**: Can consolidate later with tab-based UI
|
||||
4. **Incremental**: Build and test independently first
|
||||
|
||||
---
|
||||
|
||||
## Visual Design
|
||||
|
||||
### Contact List View
|
||||
```
|
||||
┌─────────────────────┐
|
||||
│ 📶 12:34 🔋85%│
|
||||
├─────────────────────┤
|
||||
│ │
|
||||
│ 👤 Alice ●│ ← Unread badge
|
||||
│ Last: Hey! Click... │
|
||||
│ 📅 2 min ago │
|
||||
│─────────────────────│
|
||||
│ 👤 Bob │
|
||||
│ Last: Second bark...│
|
||||
│ 📅 5 min ago │
|
||||
│─────────────────────│
|
||||
│ │
|
||||
└─────────────────────┘
|
||||
```
|
||||
|
||||
### Conversation View
|
||||
```
|
||||
┌─────────────────────┐
|
||||
│ 📶 12:34 🔋85%│
|
||||
│ ← Alice │ ← Back button + name
|
||||
├─────────────────────┤
|
||||
│ │
|
||||
│ ┌─────────────────┐ │ ← NPC message (left)
|
||||
│ │ Alice: Hey! I'm │ │
|
||||
│ │ Alice, the sec..│ │
|
||||
│ └─────────────────┘ │
|
||||
│ │
|
||||
│ ┌─────────────┐ │ ← Player message (right)
|
||||
│ │ Ask about │ │
|
||||
│ │ security │ │
|
||||
│ └─────────────┘ │
|
||||
│ │
|
||||
│ ┌─────────────────┐ │
|
||||
│ │ Alice: Our sec..│ │
|
||||
│ └─────────────────┘ │
|
||||
│ │
|
||||
├─────────────────────┤
|
||||
│ [Ask about building]│ ← Choice buttons
|
||||
│ [Make small talk] │
|
||||
│ [Say goodbye] │
|
||||
└─────────────────────┘
|
||||
```
|
||||
|
||||
---
|
||||
|
||||
## Success Criteria
|
||||
|
||||
### MVP Complete When:
|
||||
- ✅ Can open phone-chat from bark click
|
||||
- ✅ Contact list shows all NPCs for phone
|
||||
- ✅ Conversation view displays NPC messages
|
||||
- ✅ Player choices appear as buttons
|
||||
- ✅ Selected choices appear as player messages
|
||||
- ✅ Conversation history persists
|
||||
- ✅ Can switch between NPCs
|
||||
- ✅ Can close and reopen without losing history
|
||||
- ✅ Works with both Alice's complex story and Bob's generic story
|
||||
|
||||
### Ready for Game Integration When:
|
||||
- ✅ All core features working
|
||||
- ✅ Tested with multiple NPCs
|
||||
- ✅ Tested with multiple phones
|
||||
- ✅ Performance acceptable (no lag)
|
||||
- ✅ Error handling robust
|
||||
- ✅ Documentation complete
|
||||
|
||||
---
|
||||
|
||||
## Timeline
|
||||
|
||||
**Day 1 (Today):**
|
||||
- Create module files and basic structure
|
||||
- Implement PhoneChatUI
|
||||
- Implement PhoneChatConversation
|
||||
- Wire up basic flow
|
||||
|
||||
**Day 2:**
|
||||
- Implement PhoneChatHistory
|
||||
- Complete main controller
|
||||
- Add CSS styling
|
||||
- Test with existing stories
|
||||
- Register with MinigameFramework
|
||||
|
||||
**Day 3:**
|
||||
- Polish and animations
|
||||
- Edge case testing
|
||||
- Documentation
|
||||
- Game integration prep
|
||||
|
||||
---
|
||||
|
||||
## Notes
|
||||
|
||||
- Reuse CSS patterns from `phone-messages-minigame.css`
|
||||
- Maintain 2px borders (pixel-art aesthetic)
|
||||
- No border-radius (sharp corners only)
|
||||
- Use existing color scheme from phone minigame
|
||||
- Test on both Phaser and inline fallback paths
|
||||
- Keep modules loosely coupled for future refactoring
|
||||
|
||||
---
|
||||
|
||||
**Status:** 📋 Planning Complete - Ready for Implementation
|
||||
**Next Step:** Create module files and begin Phase 1
|
||||
**Estimated Total Lines:** ~1400-1700 (split across 4 modules)
|
||||
Reference in New Issue
Block a user