index.html

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Blockbuster 3D VR Store — Walkthrough Experience</title>
  <meta name="description" content="Experience a fully walkable 3D Virtual Reality replica of a classic Blockbuster video store. Walk down the aisles, browse movies, and visit IMDB pages.">
  <meta name="theme-color" content="#002d8a">

  <!-- A-Frame CDN -->
  <script src="https://aframe.io/releases/1.4.2/aframe.min.js"></script>

  <!-- Google Fonts & Custom CSS -->
  <link rel="stylesheet" href="styles.css">
</head>
<body>

  <!-- ===== LOADING SCREEN ===== -->
  <div id="loading-screen" class="loading-screen" role="progressbar" aria-valuemin="0" aria-valuemax="100">
    <h1 class="loading-logo">BLOCKBUSTER VIDEO</h1>
    <p class="loading-subtitle">3D VR Store Experience</p>
    <div class="loading-bar">
      <div class="loading-progress"></div>
    </div>
    <p class="loading-text">Generating retro shelf textures...</p>
  </div>

  <!-- ===== INSTRUCTIONS OVERLAY ===== -->
  <div id="overlay" class="overlay hidden" role="dialog" aria-modal="true" aria-labelledby="dialog-title">
    <div class="overlay-content">
      <h1 id="dialog-title">Welcome to Blockbuster!</h1>
      <p class="subtitle">Virtual Reality Walkthrough</p>
      
      <div class="controls-info desktop-controls">
        <div><strong>⌨️ Move:</strong> <span>W / A / S / D keys (or Arrow keys)</span></div>
        <div><strong>🖱️ Look Around:</strong> <span>Move your mouse / drag screen</span></div>
        <div><strong>🔴 Click Movie:</strong> <span>Opens its IMDB page in a new tab</span></div>
        <div><strong>🌐 VR Mode:</strong> <span>Click the VR glasses icon at bottom-right</span></div>
      </div>

      <div class="controls-info mobile-controls">
        <div><strong>🚶 Walk:</strong> <span>Walk with your phone to move in VR</span></div>
        <div><strong>🕹️ Joystick:</strong> <span>Use the on-screen joystick to move</span></div>
        <div><strong>📱 Look Around:</strong> <span>Move your phone to look around</span></div>
        <div><strong>👆 Tap Movie:</strong> <span>Opens its IMDB page in a new tab</span></div>
      </div>

      <button class="click-prompt" style="background: none; border: none; font-size: inherit; font-family: inherit; cursor: pointer;">
        TAP TO ENTER THE STORE
      </button>
    </div>
  </div>

  <!-- ===== RETICLE / CROSSHAIR ===== -->
  <div id="crosshair" class="crosshair hidden" aria-hidden="true"></div>

  <!-- ===== MOVIE TOOLTIP ===== -->
  <div id="movie-tooltip" class="movie-tooltip hidden" aria-live="polite">
    <h2 id="tooltip-title" class="tooltip-title">Movie Title</h2>
    <div id="tooltip-info" class="tooltip-info">2026 · ★ 8.5</div>
    <div class="tooltip-hint">Click to view on IMDB</div>
  </div>

  <!-- ===== MOBILE VIRTUAL JOYSTICK ===== -->
  <div id="mobile-joystick" class="mobile-joystick hidden" aria-hidden="true">
    <div id="joystick-base" class="joystick-base">
      <div id="joystick-thumb" class="joystick-thumb"></div>
    </div>
  </div>

  <!-- ===== MOBILE D-PAD ===== -->
  <div id="mobile-dpad" class="mobile-dpad hidden" aria-hidden="true">
    <button id="dpad-up" class="dpad-btn dpad-up" aria-label="Move Forward">▲</button>
    <button id="dpad-left" class="dpad-btn dpad-left" aria-label="Move Left">◀</button>
    <button id="dpad-right" class="dpad-btn dpad-right" aria-label="Move Right">▶</button>
    <button id="dpad-down" class="dpad-btn dpad-down" aria-label="Move Backward">▼</button>
  </div>

  <!-- ===== MOBILE DEBUG STATUS ===== -->
  <div id="mobile-debug" class="mobile-debug hidden">
    <span id="debug-status">Motion: OFF</span>
  </div>

  <!-- ===== AUDIO CONTROLS ===== -->
  <button id="bgm-toggle" class="bgm-toggle" aria-label="Toggle background music">
    <span class="music-icon">🎵</span>
    <span class="music-text">OOPS!... I DID IT AGAIN</span>
  </button>

  <!-- ===== 3D DVD INSPECTION OVERLAY ===== -->
  <div id="inspect-overlay" class="inspect-overlay hidden" role="dialog" aria-modal="true" aria-labelledby="inspect-title">
    <div class="inspect-hud-card">
      <h2 id="inspect-title">Movie Title</h2>
      <div id="inspect-meta">2026 · ★ 8.5</div>
      <div class="inspect-desc">Drag or swipe the screen to rotate and inspect the DVD cover.</div>
      
      <div class="inspect-actions">
        <button id="inspect-btn-close" class="inspect-btn btn-secondary">◀ PUT BACK</button>
        <button id="inspect-btn-trailer" class="inspect-btn btn-trailer">🎬 WATCH TRAILER</button>
        <button id="inspect-btn-imdb" class="inspect-btn btn-primary">RENT NOW (IMDB) ▶</button>
      </div>
    </div>
  </div>

  <!-- ===== YOUTUBE TRAILER MODAL OVERLAY ===== -->
  <div id="trailer-modal" class="trailer-modal hidden" role="dialog" aria-modal="true" aria-labelledby="trailer-modal-title">
    <div class="trailer-modal-backdrop"></div>
    <div class="trailer-modal-content">
      <button id="trailer-modal-close" class="trailer-modal-close" aria-label="Close Trailer">×</button>
      <h3 id="trailer-modal-title" class="sr-only">Movie Trailer</h3>
      <div class="trailer-iframe-wrapper">
        <iframe id="trailer-iframe" src="" frameborder="0" allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture" allowfullscreen></iframe>
      </div>
      <div class="trailer-link-wrapper">
        <a id="trailer-youtube-link" href="" target="_blank" class="trailer-youtube-btn">
          🌐 Video Not Playing? Watch on YouTube (100% Backup Link) ↗
        </a>
      </div>
    </div>
  </div>




  <!-- ===== 3D VR SCENE ===== -->
  <a-scene 
    keyboard-shortcuts="enterVR: true; resetSensor: true"
    renderer="antialias: true; colorManagement: true; logarithmicDepthBuffer: false"
    loading-screen="enabled: false">

    <!-- Assets management -->
    <a-assets>
      <!-- Floor texture mapping for noise/realism -->
      <canvas id="canvas-floor" width="128" height="128" style="display:none;"></canvas>
    </a-assets>

    <!-- Camera & Controls Rig -->
    <a-entity id="rig" position="0 0 7" wasd-controls="acceleration: 45; fly: false" boundary-check step-movement>
      <a-entity id="camera" camera look-controls="pointerLockEnabled: true" position="0 1.6 0">
        <!-- Laser controller / cursor interaction for clicking movies in VR or Desktop -->
        <a-cursor 
          id="scene-cursor"
          raycaster="objects: .clickable" 
          visible="false"
          showLine="false">
        </a-cursor>
      </a-entity>
    </a-entity>

    <!-- Lighting -->
    <!-- Ambient room illumination -->
    <a-light type="ambient" color="#2b2d42" intensity="0.65"></a-light>
    
    <!-- Fluorescent Light Tubes on Ceiling -->
    <!-- Row 1 -->
    <a-light type="point" color="#fffff2" intensity="0.5" distance="18" position="-6 3.8 -5"></a-light>
    <a-light type="point" color="#fffff2" intensity="0.5" distance="18" position="0 3.8 -5"></a-light>
    <a-light type="point" color="#fffff2" intensity="0.5" distance="18" position="6 3.8 -5"></a-light>
    <!-- Row 2 -->
    <a-light type="point" color="#fffff2" intensity="0.5" distance="18" position="-6 3.8 2"></a-light>
    <a-light type="point" color="#fffff2" intensity="0.5" distance="18" position="0 3.8 2"></a-light>
    <a-light type="point" color="#fffff2" intensity="0.5" distance="18" position="6 3.8 2"></a-light>

    <!-- Room Geometry -->
    
    <!-- Floor: Dark charcoal carpet -->
    <a-plane 
      position="0 0 0" 
      rotation="-90 0 0" 
      width="30" 
      depth="20" 
      material="color: #1a1a1f; roughness: 0.98; metalness: 0.1">
    </a-plane>

    <!-- Ceiling: Cream drop tiles with realistic wood panel molding edges -->
    <a-plane 
      position="0 4 0" 
      rotation="90 0 0" 
      width="30" 
      depth="20" 
      material="color: #efeadb; roughness: 0.95">
    </a-plane>

    <!-- Fluorescent Light Fixtures (Ceiling Meshes) -->
    <!-- Row 1 -->
    <a-box position="-6 3.96 -5" width="3" height="0.08" depth="0.5" material="color: #ffffff; emissive: #ffffff; emissiveIntensity: 1"></a-box>
    <a-box position="0 3.96 -5" width="3" height="0.08" depth="0.5" material="color: #ffffff; emissive: #ffffff; emissiveIntensity: 1"></a-box>
    <a-box position="6 3.96 -5" width="3" height="0.08" depth="0.5" material="color: #ffffff; emissive: #ffffff; emissiveIntensity: 1"></a-box>
    <!-- Row 2 -->
    <a-box position="-6 3.96 2" width="3" height="0.08" depth="0.5" material="color: #ffffff; emissive: #ffffff; emissiveIntensity: 1"></a-box>
    <a-box position="0 3.96 2" width="3" height="0.08" depth="0.5" material="color: #ffffff; emissive: #ffffff; emissiveIntensity: 1"></a-box>
    <a-box position="6 3.96 2" width="3" height="0.08" depth="0.5" material="color: #ffffff; emissive: #ffffff; emissiveIntensity: 1"></a-box>

    <!-- Back Wall (Shelf Unit + Dense DVDs) -->
    <a-box position="0 2 -10" width="30" height="4" depth="0.1" material="color: #ffd700"></a-box> <!-- Yellow border band -->
    <a-plane 
      id="back-wall-dvds" 
      position="0 1.6 -9.9" 
      width="30" 
      height="3.2" 
      material="shader: flat; side: double">
    </a-plane>

    <!-- Left Wall (Shelf Unit + Dense DVDs) -->
    <a-box position="-15 2 0" rotation="0 90 0" width="20" height="4" depth="0.1" material="color: #ffd700"></a-box>
    <a-plane 
      id="left-wall-dvds" 
      position="-14.9 1.6 0" 
      rotation="0 90 0" 
      width="20" 
      height="3.2" 
      material="shader: flat; side: double">
    </a-plane>

    <!-- Right Wall (Shelf Unit + Dense DVDs) -->
    <a-box position="15 2 0" rotation="0 -90 0" width="20" height="4" depth="0.1" material="color: #ffd700"></a-box>
    <a-plane 
      id="right-wall-dvds" 
      position="14.9 1.6 0" 
      rotation="0 -90 0" 
      width="20" 
      height="3.2" 
      material="shader: flat; side: double">
    </a-plane>

    <!-- Front Entrance Wall (Double glass doors mockup) -->
    <a-box position="0 2 10" width="30" height="4" depth="0.1" material="color: #002d8a"></a-box>
    <!-- Glass doors visual -->
    <a-plane position="-2 1.5 9.9" width="3" height="3" material="color: #5bb2d9; opacity: 0.45; transparent: true; side: double; metalness: 0.8; roughness: 0.1"></a-plane>
    <a-plane position="2 1.5 9.9" width="3" height="3" material="color: #5bb2d9; opacity: 0.45; transparent: true; side: double; metalness: 0.8; roughness: 0.1"></a-plane>
    
  </a-scene>

  <!-- Main JavaScript File -->
  <script src="script.js"></script>
</body>
</html>