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.3 KiB

Raw Permalink Blame History

Title Screen Update: Overlay Mode

Change Summary

The title screen now displays as a popup overlay on top of the game canvas, instead of hiding the canvas entirely.

What Changed

Before:

Canvas → HIDDEN
Title Screen → Full Screen
Player sees only the title screen

After:

Canvas → VISIBLE in background
Title Screen → Popup overlay on top
Player can see the game loading behind the title screen

Visual Effect

┌────────────────────────────────────────────────────┐
│ Game Canvas (slightly dimmed, visible behind)      │
│                                                    │
│     ┌──────────────────────────────────────┐      │
│     │  🎬 Title Screen Overlay 🎬         │      │
│     │                                      │      │
│     │       BreakEscape                    │      │
│     │   Educational Security Game         │      │
│     │                                      │      │
│     │        Loading...                    │      │
│     │                                      │      │
│     └──────────────────────────────────────┘      │
│                                                    │
└────────────────────────────────────────────────────┘

Implementation Details

Files Modified:

js/core/game.js
- Removed canvas.style.display = 'none'
- Removed inventory hiding
- Now just starts the title screen without hiding anything
js/minigames/title-screen/title-screen-minigame.js
- Changed hideGameDuringMinigame: true → false
- Background remains semi-transparent via container overlay (rgba 0.95)
css/title-screen.css
- Changed .title-screen-container background from #1a1a1a to transparent
- Let the container's background handle the dimming effect
js/minigames/framework/minigame-manager.js
- Removed canvas show/hide logic on title screen transitions
- Simplified since canvas is never hidden

Benefits

✅ Better Visual Feedback: Players can see the game loading
✅ No Jarring Transition: Game doesn't suddenly appear
✅ More Professional: Looks like a smooth modal
✅ Same Auto-Close Behavior: Still closes after 3 seconds or when next minigame starts
✅ Canvas Always Ready: Game is rendering in the background

Testing

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

You should see:

Game canvas loads and starts rendering
Title screen popup appears on top (semi-transparent background)
Game visible but slightly dimmed behind
After 3 seconds, title screen closes
Mission brief appears (next minigame)
Game becomes fully interactive

Configuration

No changes needed! Just use as before:

{
    "showTitleScreen": true,
    ...
}

The title screen now automatically displays as an overlay without hiding the canvas!

3.3 KiB Raw Permalink Blame History