mirror of https://github.com/cliffe/BreakEscape.git synced 2026-02-20 13:50:46 +00:00

Files

Z. Cliffe Schreuders 87072c6f4e Add title screen minigame implementation with customization options

- Created TITLE_SCREEN_CUSTOMIZATION.md with examples for extending the title screen.
- Added TITLE_SCREEN_DEVELOPER_GUIDE.md for technical guidance on implementation.
- Introduced TITLE_SCREEN_IMPLEMENTATION.md detailing the architecture and features.
- Compiled TITLE_SCREEN_INDEX.md as a documentation index for easy navigation.
- Updated TITLE_SCREEN_OVERLAY_UPDATE.md to reflect changes in title screen display mode.
- Created TITLE_SCREEN_QUICK_START.md for a quick setup guide.
- Developed TITLE_SCREEN_README.md as a comprehensive overview of the title screen system.
- Added title-screen-demo.json scenario to demonstrate title screen functionality.
- Modified existing files to integrate the title screen into the game flow.

2025-11-14 13:20:21 +00:00

3.9 KiB

Raw Permalink Blame History

Title Screen Implementation Quick Start

✅ What Was Created

1. Title Screen Minigame (`js/minigames/title-screen/title-screen-minigame.js`)

┌─────────────────────────────────────────┐
│                                         │
│          BreakEscape                    │  ← Green glowing title
│          (pulsing effect)               │
│                                         │
│     Educational Security Game          │  ← Subtitle
│                                         │
│          Loading...                     │  ← Animated dots
│                                         │
└─────────────────────────────────────────┘

2. CSS Styling (`css/title-screen.css`)

Green glowing effect with text-shadow
Pulse animation on the title
Full-screen dark background (#1a1a1a)
Monospace font for tech aesthetic

3. Integration Points

✅ Registered in minigames framework
✅ Auto-launches during game create() phase
✅ Auto-closes when next minigame starts
✅ Canvas remains hidden until title screen closes

🚀 How to Use

In Scenario JSON:

{
    "showTitleScreen": true,
    "scenario_brief": "Your mission...",
    ...
}

Or disable it:

{
    "showTitleScreen": false,
    ...
}

Or via JavaScript:

window.startTitleScreenMinigame({
    autoCloseTimeout: 5000  // Custom timeout in ms
});

🔄 Flow Diagram

┌─────────────────────────────────────────┐
│  Game create() phase                    │
│  - Load scenario JSON ✓                 │
│  - Initialize rooms (hidden) ✓          │
│  - Set up player/camera ✓               │
└──────────────────────────────────────────┘
                    ↓
    Check: showTitleScreen === true?
                    ↓
        ┌───────────────────────┐
        │  Hide canvas/inventory│
        │  Start title screen   │
        └───────────────────────┘
                    ↓
        User waits 3 seconds OR
        next minigame starts
                    ↓
        ┌───────────────────────┐
        │ Close title screen    │
        │ Show canvas/inventory │
        │ Continue to next scene│
        └───────────────────────┘

📝 Files Modified

js/minigames/index.js - Register title screen
js/core/game.js - Launch title screen during create()
js/minigames/framework/minigame-manager.js - Auto-show canvas on transition

🧪 Test It

# Start server
cd /path/to/BreakEscape
python3 -m http.server 8000

# Visit with title screen scenario
http://localhost:8000/index.html?scenario=title-screen-demo

You should see the BreakEscape title appear immediately, then transition to the game!

💡 Future Customization Ideas

The title screen is fully customizable. Modify in title-screen-minigame.js:

// Change content in init()
this.container.innerHTML = `
    <div class="title-screen-container">
        <div class="title-screen-title">BreakEscape</div>
        <div class="title-screen-subtitle">Custom subtitle here</div>
        <div class="title-screen-custom">Add any content!</div>
    </div>
`;

Or add scenario-specific styling:

{
    "titleScreenConfig": {
        "title": "Custom Title",
        "subtitle": "Custom Subtitle",
        "backgroundColor": "#000033"
    }
}

Then enhance the minigame to use these settings!

3.9 KiB Raw Permalink Blame History