Michael Mainguy
ee90e420d6
All checks were successful
Build / build (push) Successful in 1m21s
## Major Fixes ### 1. Fixed Invisible Meshes Issue - Root cause: Emissive materials require disableLighting=true without scene lighting - Added disableLighting=true to all loaded materials in loadAsset.ts - Scene intentionally uses no dynamic lights (space game with emissive textures) ### 2. Fixed CloudFlare Proxy + Vite Cache Issues - Updated vite.config.ts to pre-bundle BabylonJS procedural textures - Added force:false to prevent unnecessary cache invalidation - Fixed 504 Gateway Timeout errors on shader module dynamic imports - Separated babylon-procedural chunk for better caching ### 3. Responsive Design Improvements - Consolidated all CSS into public/styles.css with design tokens - Removed duplicate styles.css file - Created semantic header with navigation - Extracted 300+ lines of inline styles to CSS classes - Added mobile-first responsive breakpoints (320px, 480px, 768px, 1024px, 1440px) - Implemented fluid typography with clamp() ### 4. Level Progression System - Fixed level unlocking logic (tutorial always unlocked, others require auth) - Updated DEFAULT_LEVEL_ORDER to match actual level names - Made populateLevelSelector() async to properly await authentication - Added 3-column carousel layout for level selection - Visual states: locked, unlocked, current, completed ### 5. Discord Widget Management - Disabled Discord widget initialization (commented out) to prevent GraphQL errors - Added hide() call during gameplay - Can be re-enabled when Discord bot is properly configured ### 6. TypeScript Error Fixes - Removed unused hasSavedLevels import - Updated replay callbacks to use appHeader instead of individual link references - Fixed all TS compilation errors ## Files Modified - index.html - Semantic header, removed inline styles - public/styles.css - Consolidated styles with design tokens - src/gameConfig.ts - Enabled progression by default - src/levelSelector.ts - Fixed progression logic, async auth check - src/loginScreen.ts - Removed inline styles - src/main.ts - Discord handling, header visibility, error suppression - src/preloader.ts - Removed inline styles - src/progression.ts - Added isLevelUnlocked() method - src/utils/loadAsset.ts - Fixed emissive materials (disableLighting=true) - vite.config.ts - Pre-bundle procedural textures, prevent cache issues - styles.css - DELETED (consolidated into public/styles.css) 🤖 Generated with [Claude Code](https://claude.com/claude-code) Co-Authored-By: Claude <noreply@anthropic.com>
431 lines
18 KiB
HTML
431 lines
18 KiB
HTML
<!doctype html>
|
||
<html lang="en">
|
||
<head>
|
||
<meta charset="UTF-8" />
|
||
<meta content="width=device-width, initial-scale=1, height=device-height" name="viewport">
|
||
<link href="/styles.css" rel="stylesheet">
|
||
<title>Space Game</title>
|
||
<script>
|
||
navigator.serviceWorker.getRegistrations().then(registrations => {
|
||
for (const registration of registrations) {
|
||
registration.unregister();
|
||
}
|
||
});
|
||
</script>
|
||
</head>
|
||
<body>
|
||
<!-- Game View -->
|
||
<div data-view="game">
|
||
<canvas id="gameCanvas"></canvas>
|
||
|
||
<!-- Semantic Header with Navigation -->
|
||
<header class="app-header" id="appHeader" style="display: none;">
|
||
<div class="header-content">
|
||
<div class="header-left">
|
||
<h1 class="app-title">Space Combat VR</h1>
|
||
</div>
|
||
<nav class="header-nav">
|
||
<div id="userProfile"></div>
|
||
<a href="#/editor" class="nav-link editor-link">📝 Level Editor</a>
|
||
<a href="#/settings" class="nav-link settings-link">⚙️ Settings</a>
|
||
</nav>
|
||
</div>
|
||
</header>
|
||
|
||
<div id="mainDiv">
|
||
<div id="loadingDiv"></div>
|
||
<div id="levelSelect">
|
||
|
||
<!-- Hero Section -->
|
||
<div class="hero">
|
||
<h1 class="hero-title">🚀 Space Combat VR</h1>
|
||
<p class="hero-subtitle">
|
||
Pilot your spaceship through asteroid fields and complete missions
|
||
</p>
|
||
</div>
|
||
|
||
<!-- Level Selection Section -->
|
||
<div class="level-section">
|
||
<h2 class="level-header">Your Mission</h2>
|
||
<p class="level-description">
|
||
Complete levels to unlock new challenges and the level editor
|
||
</p>
|
||
<div id="levelCardsContainer" class="card-container">
|
||
<!-- Level cards will be dynamically populated from localStorage -->
|
||
</div>
|
||
</div>
|
||
|
||
<!-- Controls Section (Collapsed by default) -->
|
||
<details class="controls-info">
|
||
<summary>
|
||
🎮 How to Play (Click to expand)
|
||
</summary>
|
||
<div class="controls-grid">
|
||
<div class="control-section">
|
||
<h3>VR Controllers (Required for VR)</h3>
|
||
<ul>
|
||
<li><strong>Left Thumbstick:</strong> Move forward/backward and yaw left/right</li>
|
||
<li><strong>Right Thumbstick:</strong> Pitch up/down and Roll left/right</li>
|
||
<li><strong>Front Trigger:</strong> Fire weapon</li>
|
||
</ul>
|
||
</div>
|
||
<div class="control-section">
|
||
<h3>Desktop Controls (Preview Mode)</h3>
|
||
<ul>
|
||
<li><strong>W/S:</strong> Move forward/backward</li>
|
||
<li><strong>A/D:</strong> Yaw left/right</li>
|
||
<li><strong>Arrow Up/Down:</strong> Pitch up/down</li>
|
||
<li><strong>Arrow Left/Right:</strong> Roll left/right</li>
|
||
<li><strong>Space:</strong> Fire weapon</li>
|
||
</ul>
|
||
</div>
|
||
</div>
|
||
<p class="controls-note">
|
||
⚠️ <strong>Note:</strong> This game is designed for VR headsets with controllers. Desktop controls are provided for preview and testing purposes only.
|
||
</p>
|
||
</details>
|
||
|
||
<!-- Test Buttons (Hidden by default) -->
|
||
<div class="test-buttons-container" id="testButtonsContainer" style="display: none;">
|
||
<button id="testLevelBtn" class="test-level-button">
|
||
🧪 Test Scene (Debug)
|
||
</button>
|
||
<button id="viewReplaysBtn" class="test-level-button">
|
||
📹 View Replays
|
||
</button>
|
||
<br>
|
||
<a href="#/editor" class="level-create-link">
|
||
+ Create New Level
|
||
</a>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
|
||
<!-- Editor View -->
|
||
<div data-view="editor" style="display: none;">
|
||
<div class="editor-container">
|
||
<a href="#/" class="back-link">← Back to Game</a>
|
||
|
||
<h1>🚀 Level Editor</h1>
|
||
<p class="subtitle">Configure and generate custom level configurations</p>
|
||
|
||
<div class="section">
|
||
<h2>Difficulty Presets</h2>
|
||
<div class="preset-buttons">
|
||
<button class="preset-btn" data-difficulty="recruit">Recruit</button>
|
||
<button class="preset-btn" data-difficulty="pilot">Pilot</button>
|
||
<button class="preset-btn" data-difficulty="captain">Captain</button>
|
||
<button class="preset-btn" data-difficulty="commander">Commander</button>
|
||
<button class="preset-btn" data-difficulty="test">Test</button>
|
||
<button class="preset-btn" data-difficulty="custom">Custom</button>
|
||
</div>
|
||
</div>
|
||
|
||
<div class="editor-grid">
|
||
<!-- Basic Settings -->
|
||
<div class="section">
|
||
<h2>⚙️ Basic Settings</h2>
|
||
<div class="form-group">
|
||
<label for="levelName">Level Name</label>
|
||
<input type="text" id="levelName" placeholder="my-custom-level">
|
||
</div>
|
||
<div class="form-group">
|
||
<label for="difficulty">Difficulty</label>
|
||
<select id="difficulty">
|
||
<option value="recruit">Recruit</option>
|
||
<option value="pilot">Pilot</option>
|
||
<option value="captain">Captain</option>
|
||
<option value="commander">Commander</option>
|
||
<option value="test">Test</option>
|
||
<option value="custom">Custom</option>
|
||
</select>
|
||
</div>
|
||
<div class="form-group">
|
||
<label for="author">Author (Optional)</label>
|
||
<input type="text" id="author" placeholder="Your name">
|
||
</div>
|
||
<div class="form-group">
|
||
<label for="description">Description (Optional)</label>
|
||
<input type="text" id="description" placeholder="Level description">
|
||
</div>
|
||
</div>
|
||
|
||
<!-- Ship Configuration -->
|
||
<div class="section">
|
||
<h2>🚀 Ship</h2>
|
||
<div class="form-group">
|
||
<label>Position</label>
|
||
<div class="vector-input">
|
||
<div>
|
||
<div class="vector-label">X</div>
|
||
<input type="number" id="shipX" value="0" step="0.1">
|
||
</div>
|
||
<div>
|
||
<div class="vector-label">Y</div>
|
||
<input type="number" id="shipY" value="1" step="0.1">
|
||
</div>
|
||
<div>
|
||
<div class="vector-label">Z</div>
|
||
<input type="number" id="shipZ" value="0" step="0.1">
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
|
||
<!-- Start Base Configuration -->
|
||
<div class="section">
|
||
<h2>🎯 Start Base</h2>
|
||
<div class="form-group">
|
||
<label>Position</label>
|
||
<div class="vector-input">
|
||
<div>
|
||
<div class="vector-label">X</div>
|
||
<input type="number" id="baseX" value="0" step="0.1">
|
||
</div>
|
||
<div>
|
||
<div class="vector-label">Y</div>
|
||
<input type="number" id="baseY" value="0" step="0.1">
|
||
</div>
|
||
<div>
|
||
<div class="vector-label">Z</div>
|
||
<input type="number" id="baseZ" value="0" step="0.1">
|
||
</div>
|
||
</div>
|
||
</div>
|
||
<div class="form-group">
|
||
<label>Base GLB Path</label>
|
||
<input type="text" id="baseGlbPath" value="base.glb" placeholder="base.glb">
|
||
</div>
|
||
</div>
|
||
|
||
<!-- Sun Configuration -->
|
||
<div class="section">
|
||
<h2>☀️ Sun</h2>
|
||
<div class="form-group">
|
||
<label>Position</label>
|
||
<div class="vector-input">
|
||
<div>
|
||
<div class="vector-label">X</div>
|
||
<input type="number" id="sunX" value="0" step="1">
|
||
</div>
|
||
<div>
|
||
<div class="vector-label">Y</div>
|
||
<input type="number" id="sunY" value="0" step="1">
|
||
</div>
|
||
<div>
|
||
<div class="vector-label">Z</div>
|
||
<input type="number" id="sunZ" value="400" step="1">
|
||
</div>
|
||
</div>
|
||
</div>
|
||
<div class="form-group">
|
||
<label for="sunDiameter">Diameter</label>
|
||
<input type="number" id="sunDiameter" value="50" step="1" min="1">
|
||
</div>
|
||
</div>
|
||
|
||
<!-- Planet Generation -->
|
||
<div class="section">
|
||
<h2>🪐 Planets</h2>
|
||
<div class="form-group">
|
||
<label for="planetCount">Count</label>
|
||
<input type="number" id="planetCount" value="12" min="0" max="50">
|
||
</div>
|
||
<div class="form-group">
|
||
<label for="planetMinDiam">Min Diameter</label>
|
||
<input type="number" id="planetMinDiam" value="100" step="10" min="10">
|
||
</div>
|
||
<div class="form-group">
|
||
<label for="planetMaxDiam">Max Diameter</label>
|
||
<input type="number" id="planetMaxDiam" value="200" step="10" min="10">
|
||
</div>
|
||
<div class="form-group">
|
||
<label for="planetMinDist">Min Distance from Sun</label>
|
||
<input type="number" id="planetMinDist" value="1000" step="100" min="100">
|
||
</div>
|
||
<div class="form-group">
|
||
<label for="planetMaxDist">Max Distance from Sun</label>
|
||
<input type="number" id="planetMaxDist" value="2000" step="100" min="100">
|
||
</div>
|
||
</div>
|
||
|
||
<!-- Asteroid Generation -->
|
||
<div class="section">
|
||
<h2>☄️ Asteroids</h2>
|
||
<div class="form-group">
|
||
<label for="asteroidCount">Count</label>
|
||
<input type="number" id="asteroidCount" value="20" min="1" max="200">
|
||
</div>
|
||
<div class="form-group">
|
||
<label for="forceMultiplier">Force Multiplier</label>
|
||
<input type="number" id="forceMultiplier" value="1.2" step="0.1" min="0.1">
|
||
<div class="help-text">Controls asteroid speed</div>
|
||
</div>
|
||
<div class="form-group">
|
||
<label for="asteroidMinSize">Min Size</label>
|
||
<input type="number" id="asteroidMinSize" value="2" step="0.5" min="0.5">
|
||
</div>
|
||
<div class="form-group">
|
||
<label for="asteroidMaxSize">Max Size</label>
|
||
<input type="number" id="asteroidMaxSize" value="7" step="0.5" min="0.5">
|
||
</div>
|
||
<div class="form-group">
|
||
<label for="asteroidMinDist">Min Distance</label>
|
||
<input type="number" id="asteroidMinDist" value="100" step="10" min="10">
|
||
<div class="help-text">Distance from start base</div>
|
||
</div>
|
||
<div class="form-group">
|
||
<label for="asteroidMaxDist">Max Distance</label>
|
||
<input type="number" id="asteroidMaxDist" value="250" step="10" min="10">
|
||
</div>
|
||
</div>
|
||
</div>
|
||
|
||
<div class="button-group">
|
||
<button class="btn-primary" id="generateBtn">Generate & Save</button>
|
||
<button class="btn-success" id="downloadBtn">Download JSON</button>
|
||
<button class="btn-secondary" id="copyBtn">Copy to Clipboard</button>
|
||
</div>
|
||
|
||
<div class="output-section" id="savedLevelsSection">
|
||
<h2>💾 Saved Levels</h2>
|
||
<div id="savedLevelsList"></div>
|
||
</div>
|
||
|
||
<div class="output-section editor-json-output" id="outputSection" style="display: none;">
|
||
<h2>Generated JSON</h2>
|
||
<p class="editor-json-note">
|
||
You can edit this JSON directly and save your changes.
|
||
</p>
|
||
<textarea id="jsonEditor" class="json-editor-textarea"></textarea>
|
||
<div class="editor-json-buttons">
|
||
<button class="btn-primary" id="saveEditedJsonBtn">Save Edited JSON</button>
|
||
<button class="btn-secondary" id="validateJsonBtn">Validate JSON</button>
|
||
</div>
|
||
<div id="jsonValidationMessage" class="json-validation-message"></div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
|
||
<!-- Settings View -->
|
||
<div data-view="settings" style="display: none;">
|
||
<div class="editor-container">
|
||
<a href="#/" class="back-link">← Back to Game</a>
|
||
|
||
<h1>⚙️ Game Settings</h1>
|
||
<p class="subtitle">Configure graphics quality and physics settings</p>
|
||
|
||
<div class="settings-grid">
|
||
<!-- Physics Settings -->
|
||
<div class="section">
|
||
<h2>⚛️ Physics</h2>
|
||
<p class="settings-description">
|
||
Disabling physics can significantly improve performance but will prevent gameplay.
|
||
</p>
|
||
|
||
<div class="form-group">
|
||
<label class="checkbox-label">
|
||
<input type="checkbox" id="physicsEnabled" class="settings-checkbox">
|
||
<span>Enable Physics</span>
|
||
</label>
|
||
<div class="help-text">
|
||
Required for collisions, shooting, and asteroid movement. Disabling this will prevent gameplay but may help with debugging or viewing the scene.
|
||
</div>
|
||
</div>
|
||
</div>
|
||
|
||
<!-- Debug Settings -->
|
||
<div class="section">
|
||
<h2>🐛 Developer</h2>
|
||
<p class="settings-description">
|
||
Enable debug logging to console for troubleshooting and development.
|
||
</p>
|
||
|
||
<div class="form-group">
|
||
<label class="checkbox-label">
|
||
<input type="checkbox" id="debugEnabled" class="settings-checkbox">
|
||
<span>Enable Debug Logging</span>
|
||
</label>
|
||
<div class="help-text">
|
||
When enabled, debug messages will be shown in the browser console. Useful for development and troubleshooting issues.
|
||
</div>
|
||
</div>
|
||
</div>
|
||
|
||
<!-- Ship Physics Settings -->
|
||
<div class="section">
|
||
<h2>🚀 Ship Physics</h2>
|
||
<p class="settings-description">
|
||
Advanced tuning parameters for ship movement and handling. Adjust these to customize how the ship responds to controls.
|
||
</p>
|
||
|
||
<div class="form-group">
|
||
<label for="maxLinearVelocity">Max Linear Velocity</label>
|
||
<input type="number" id="maxLinearVelocity" value="200" step="10" min="50" max="1000">
|
||
<div class="help-text">
|
||
Maximum forward/backward speed of the ship. Higher values allow faster movement.
|
||
</div>
|
||
</div>
|
||
|
||
<div class="form-group">
|
||
<label for="maxAngularVelocity">Max Angular Velocity</label>
|
||
<input type="number" id="maxAngularVelocity" value="1.4" step="0.1" min="0.5" max="5.0">
|
||
<div class="help-text">
|
||
Maximum rotation speed of the ship. Higher values allow faster turning.
|
||
</div>
|
||
</div>
|
||
|
||
<div class="form-group">
|
||
<label for="linearForceMultiplier">Linear Force Multiplier</label>
|
||
<input type="number" id="linearForceMultiplier" value="800" step="50" min="100" max="3000">
|
||
<div class="help-text">
|
||
Acceleration power for forward/backward thrust. Higher values = faster acceleration.
|
||
</div>
|
||
</div>
|
||
|
||
<div class="form-group">
|
||
<label for="angularForceMultiplier">Angular Force Multiplier</label>
|
||
<input type="number" id="angularForceMultiplier" value="15" step="1" min="5" max="50">
|
||
<div class="help-text">
|
||
Torque power for rotation. Higher values = faster rotational acceleration.
|
||
</div>
|
||
</div>
|
||
</div>
|
||
|
||
<!-- Info Section -->
|
||
<div class="section">
|
||
<h2>ℹ️ Quality Level Guide</h2>
|
||
<div class="settings-info-content">
|
||
<p><strong class="settings-label">Wireframe:</strong> Minimal rendering, shows mesh structure only. Best for debugging or very low-end devices.</p>
|
||
<p><strong class="settings-label">Simple Material:</strong> Basic solid colors without textures. Good performance with basic visuals.</p>
|
||
<p><strong class="settings-label">Full Texture:</strong> Standard textures with procedural generation. Recommended for most users.</p>
|
||
<p><strong class="settings-label">PBR Texture:</strong> Physically-based rendering with enhanced materials. Best visual quality but higher GPU usage.</p>
|
||
</div>
|
||
</div>
|
||
|
||
<!-- Current Config Display -->
|
||
<div class="section">
|
||
<h2>💾 Storage Info</h2>
|
||
<div class="settings-info-content">
|
||
<p>Settings are automatically saved to your browser's local storage and will persist between sessions.</p>
|
||
<p class="settings-warning">
|
||
⚠️ Note: Changes will take effect when you start a new level. Restart the current level to see changes.
|
||
</p>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
|
||
<div class="button-group">
|
||
<button class="btn-primary" id="saveSettingsBtn">💾 Save Settings</button>
|
||
<button class="btn-secondary" id="resetSettingsBtn">🔄 Reset to Defaults</button>
|
||
</div>
|
||
|
||
<div id="settingsMessage" class="settings-message"></div>
|
||
</div>
|
||
</div>
|
||
|
||
<script type="module" src="/src/main.ts"></script>
|
||
</body>
|
||
</html>
|