Skip to content

about_button_blank_screen_fix.md

Latest commit

 

History

History
170 lines (137 loc) · 4.83 KB

about_button_blank_screen_fix.md

File metadata and controls

170 lines (137 loc) · 4.83 KB
Raw

Fix: About Button Showing Blank Screen

Issue

Clicking the "About" button (and "How to Play" button) resulted in a blank screen instead of showing the changelog/help overlay.

Root Cause

The changelog and help overlays are children of #gameContainer, which has display: none by default (set in CSS). When clicking "About" or "How to Play":

  1. Home screen was hidden
  2. Changelog/Help overlay had hidden class removed
  3. BUT #gameContainer remained display: none
  4. Result: Blank screen (overlay exists but parent is hidden)

HTML Structure

#gameContainer (display: none initially)
  ├── #gameCanvas
  ├── #hudOverlay
  ├── #helpOverlay ← Child of gameContainer
  ├── #changelogOverlay ← Child of gameContainer
  └── other game elements

Solution

Implemented a three-part fix:

1. Added Tracking Flag

Added viewingOverlayFromHome flag to Game class to track when user is viewing overlays from home screen (before game starts).

// In constructor
this.viewingOverlayFromHome = false;

2. Show Game Container When Opening Overlays

Updated both button handlers to:

  • Set the tracking flag
  • Show the game container (so overlays become visible)
  • Show the overlay
// How to Play button
this.viewingOverlayFromHome = true;
gameContainer.style.display = 'block';  // ← Key fix
helpOverlay.classList.remove('hidden');

// About button
this.viewingOverlayFromHome = true;
gameContainer.style.display = 'block';  // ← Key fix
changelogOverlay.classList.remove('hidden');

3. Smart Return to Home Logic

Updated checkAndShowHomeScreen() to:

  • Check if viewing from home (viewingOverlayFromHome flag)
  • When overlays close, hide game container
  • Show home screen
  • Reset the flag
if (window.game && window.game.viewingOverlayFromHome) {
    if (!this.helpVisible && !this.changelogVisible) {
        gameContainer.style.display = 'none';  // Hide container
        homeScreen.classList.remove('hidden');  // Show home
        window.game.viewingOverlayFromHome = false;  // Reset flag
    }
}

User Flow - Before Fix

Home Screen
  ↓ Click "About"
  ↓ Home screen hidden
  ↓ Changelog overlay shown (but invisible)
  ↓ Game container still display: none
  ↓ RESULT: Blank screen ❌

User Flow - After Fix

Home Screen
  ↓ Click "About"
  ↓ Set viewingOverlayFromHome = true
  ↓ Home screen hidden
  ↓ Game container shown (display: block)
  ↓ Changelog overlay shown
  ↓ RESULT: Changelog visible ✅
  ↓ Press C to close
  ↓ Game container hidden (display: none)
  ↓ Home screen shown
  ↓ viewingOverlayFromHome = false

Changes Made

File: js/game.js

  1. Added tracking flag in constructor:
this.viewingOverlayFromHome = false;
  1. Updated "How to Play" button:
this.viewingOverlayFromHome = true;
gameContainer.style.display = 'block';
  1. Updated "About" button:
this.viewingOverlayFromHome = true;
gameContainer.style.display = 'block';

File: js/modernui.js

Updated checkAndShowHomeScreen() method:

  • Added check for viewingOverlayFromHome flag
  • Hide game container when returning to home from overlay
  • Reset flag after returning to home
  • Preserve original logic for in-game overlay viewing

Different Scenarios Handled

Scenario 1: View Help/About from Home

✅ Show overlay → Close overlay → Return to home

Scenario 2: View Help/About During Game

✅ Show overlay → Close overlay → Return to paused game

Scenario 3: Start Game

✅ Home → Difficulty → Game (normal flow)

Scenario 4: Multiple Overlays

✅ Only return to home when ALL overlays are closed

Testing Checklist

✅ Click "About" from home → Changelog appears ✅ Press C to close → Returns to home screen ✅ Click "How to Play" from home → Help appears ✅ Press H to close → Returns to home screen ✅ Click "Start Mission" → Difficulty selection appears (unchanged) ✅ Open Help during game → Shows help ✅ Close Help during game → Returns to game ✅ No blank screens ✅ No console errors

Technical Details

Why this approach works:

  • viewingOverlayFromHome flag distinguishes between:
    • Viewing overlay before game starts (from home)
    • Viewing overlay during gameplay
  • Game container visibility is controlled separately from game state
  • Clean separation of concerns: navigation vs game state

Why previous approach failed:

  • Assumed game container visibility = game running
  • Didn't account for overlays needing visible container
  • No way to differentiate pre-game vs in-game overlay viewing

Result

✅ "About" button now shows the changelog properly ✅ "How to Play" button now shows help properly ✅ Both return to home screen when closed ✅ Game flow remains unchanged ✅ Professional user experience restored