mmainguy/space-game
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Implement Svelte-based UI architecture with component system
All checks were successful
Build / build (push) Successful in 1m20s
Details

Browse Source 
Major refactoring of the UI layer to use Svelte components:
- Replace inline HTML with modular Svelte components
- Add authentication system with UserProfile component
- Implement navigation store for view management
- Create comprehensive settings and controls screens
- Add level editor with JSON validation
- Implement progression tracking system
- Update level configurations and base station model

🤖 Generated with [Claude Code](https://claude.com/claude-code)

Co-Authored-By: Claude <noreply@anthropic.com>
This commit is contained in:
Michael Mainguy 2025-11-21 15:01:17 -06:00
parent ff8d69b6ec
commit eccf101b73
41 changed files with 2559 additions and 911 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

546
index.html
View File

@ -14,551 +14,13 @@
</script>
</head>
<body>
<!-- Game View -->
<div data-view="game">
<!-- BabylonJS Canvas (fixed background) -->
<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="#/controls" class="nav-link controls-link">🎮 Controls</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>
<!-- Controller Mapping View -->
<div data-view="controls" style="display: none;">
<div class="editor-container">
<a href="#/" class="back-link">← Back to Game</a>
<h1>🎮 Controller Mapping</h1>
<p class="subtitle">Customize VR controller button and stick mappings</p>
<div class="settings-grid">
<!-- Left Stick Section -->
<div class="section">
<h2>🕹️ Left Stick</h2>
<p class="settings-description">
Configure what actions the left thumbstick controls.
</p>
<div class="form-group">
<label for="leftStickX">Left Stick X-Axis (Left/Right)</label>
<select id="leftStickX" class="settings-select"></select>
<label class="checkbox-label" style="margin-top: 8px;">
<input type="checkbox" id="invertLeftStickX" class="settings-checkbox">
<span>Invert this axis</span>
</label>
</div>
<div class="form-group">
<label for="leftStickY">Left Stick Y-Axis (Up/Down)</label>
<select id="leftStickY" class="settings-select"></select>
<label class="checkbox-label" style="margin-top: 8px;">
<input type="checkbox" id="invertLeftStickY" class="settings-checkbox">
<span>Invert this axis</span>
</label>
</div>
</div>
<!-- Right Stick Section -->
<div class="section">
<h2>🕹️ Right Stick</h2>
<p class="settings-description">
Configure what actions the right thumbstick controls.
</p>
<div class="form-group">
<label for="rightStickX">Right Stick X-Axis (Left/Right)</label>
<select id="rightStickX" class="settings-select"></select>
<label class="checkbox-label" style="margin-top: 8px;">
<input type="checkbox" id="invertRightStickX" class="settings-checkbox">
<span>Invert this axis</span>
</label>
</div>
<div class="form-group">
<label for="rightStickY">Right Stick Y-Axis (Up/Down)</label>
<select id="rightStickY" class="settings-select"></select>
<label class="checkbox-label" style="margin-top: 8px;">
<input type="checkbox" id="invertRightStickY" class="settings-checkbox">
<span>Invert this axis</span>
</label>
</div>
</div>
<!-- Button Mappings Section -->
<div class="section">
<h2>🔘 Button Mappings</h2>
<p class="settings-description">
Configure what actions each controller button performs.
</p>
<div class="form-group">
<label for="trigger">Trigger (Index Finger)</label>
<select id="trigger" class="settings-select"></select>
</div>
<div class="form-group">
<label for="aButton">A Button (Right Controller)</label>
<select id="aButton" class="settings-select"></select>
</div>
<div class="form-group">
<label for="bButton">B Button (Right Controller)</label>
<select id="bButton" class="settings-select"></select>
</div>
<div class="form-group">
<label for="xButton">X Button (Left Controller)</label>
<select id="xButton" class="settings-select"></select>
</div>
<div class="form-group">
<label for="yButton">Y Button (Left Controller)</label>
<select id="yButton" class="settings-select"></select>
</div>
<div class="form-group">
<label for="squeeze">Squeeze/Grip Button</label>
<select id="squeeze" class="settings-select"></select>
</div>
</div>
<!-- Info Section -->
<div class="section">
<h2>ℹ️ Action Guide</h2>
<div class="settings-info-content">
<p><strong class="settings-label">Yaw:</strong> Turn left/right (rotate around vertical axis)</p>
<p><strong class="settings-label">Pitch:</strong> Nose up/down (rotate around horizontal axis)</p>
<p><strong class="settings-label">Roll:</strong> Barrel roll (rotate around forward axis)</p>
<p><strong class="settings-label">Forward:</strong> Forward and backward thrust</p>
<p><strong class="settings-label">None:</strong> No action assigned</p>
</div>
</div>
<!-- Storage Info -->
<div class="section">
<h2>💾 Storage Info</h2>
<div class="settings-info-content">
<p>Controller mappings 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="saveControlsBtn">💾 Save Mapping</button>
<button class="btn-secondary" id="resetControlsBtn">🔄 Reset to Default</button>
<button class="btn-secondary" id="testControlsBtn">👁️ Preview Mapping</button>
</div>
<div id="controlsMessage" class="settings-message"></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>
<!-- Svelte App Mount Point -->
<div id="app"></div>
<!-- Main TypeScript Entry Point -->
<script type="module" src="/src/main.ts"></script>
</body>
</html>

564
index.html.backup Normal file
View File

@ -0,0 +1,564 @@
<!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="#/controls" class="nav-link controls-link">🎮 Controls</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>
<!-- Controller Mapping View -->
<div data-view="controls" style="display: none;">
<div class="editor-container">
<a href="#/" class="back-link">← Back to Game</a>
<h1>🎮 Controller Mapping</h1>
<p class="subtitle">Customize VR controller button and stick mappings</p>
<div class="settings-grid">
<!-- Left Stick Section -->
<div class="section">
<h2>🕹️ Left Stick</h2>
<p class="settings-description">
Configure what actions the left thumbstick controls.
</p>
<div class="form-group">
<label for="leftStickX">Left Stick X-Axis (Left/Right)</label>
<select id="leftStickX" class="settings-select"></select>
<label class="checkbox-label" style="margin-top: 8px;">
<input type="checkbox" id="invertLeftStickX" class="settings-checkbox">
<span>Invert this axis</span>
</label>
</div>
<div class="form-group">
<label for="leftStickY">Left Stick Y-Axis (Up/Down)</label>
<select id="leftStickY" class="settings-select"></select>
<label class="checkbox-label" style="margin-top: 8px;">
<input type="checkbox" id="invertLeftStickY" class="settings-checkbox">
<span>Invert this axis</span>
</label>
</div>
</div>
<!-- Right Stick Section -->
<div class="section">
<h2>🕹️ Right Stick</h2>
<p class="settings-description">
Configure what actions the right thumbstick controls.
</p>
<div class="form-group">
<label for="rightStickX">Right Stick X-Axis (Left/Right)</label>
<select id="rightStickX" class="settings-select"></select>
<label class="checkbox-label" style="margin-top: 8px;">
<input type="checkbox" id="invertRightStickX" class="settings-checkbox">
<span>Invert this axis</span>
</label>
</div>
<div class="form-group">
<label for="rightStickY">Right Stick Y-Axis (Up/Down)</label>
<select id="rightStickY" class="settings-select"></select>
<label class="checkbox-label" style="margin-top: 8px;">
<input type="checkbox" id="invertRightStickY" class="settings-checkbox">
<span>Invert this axis</span>
</label>
</div>
</div>
<!-- Button Mappings Section -->
<div class="section">
<h2>🔘 Button Mappings</h2>
<p class="settings-description">
Configure what actions each controller button performs.
</p>
<div class="form-group">
<label for="trigger">Trigger (Index Finger)</label>
<select id="trigger" class="settings-select"></select>
</div>
<div class="form-group">
<label for="aButton">A Button (Right Controller)</label>
<select id="aButton" class="settings-select"></select>
</div>
<div class="form-group">
<label for="bButton">B Button (Right Controller)</label>
<select id="bButton" class="settings-select"></select>
</div>
<div class="form-group">
<label for="xButton">X Button (Left Controller)</label>
<select id="xButton" class="settings-select"></select>
</div>
<div class="form-group">
<label for="yButton">Y Button (Left Controller)</label>
<select id="yButton" class="settings-select"></select>
</div>
<div class="form-group">
<label for="squeeze">Squeeze/Grip Button</label>
<select id="squeeze" class="settings-select"></select>
</div>
</div>
<!-- Info Section -->
<div class="section">
<h2>ℹ️ Action Guide</h2>
<div class="settings-info-content">
<p><strong class="settings-label">Yaw:</strong> Turn left/right (rotate around vertical axis)</p>
<p><strong class="settings-label">Pitch:</strong> Nose up/down (rotate around horizontal axis)</p>
<p><strong class="settings-label">Roll:</strong> Barrel roll (rotate around forward axis)</p>
<p><strong class="settings-label">Forward:</strong> Forward and backward thrust</p>
<p><strong class="settings-label">None:</strong> No action assigned</p>
</div>
</div>
<!-- Storage Info -->
<div class="section">
<h2>💾 Storage Info</h2>
<div class="settings-info-content">
<p>Controller mappings 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="saveControlsBtn">💾 Save Mapping</button>
<button class="btn-secondary" id="resetControlsBtn">🔄 Reset to Default</button>
<button class="btn-secondary" id="testControlsBtn">👁️ Preview Mapping</button>
</div>
<div id="controlsMessage" class="settings-message"></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>

350
package-lock.json generated
View File

@ -18,10 +18,14 @@
"@babylonjs/procedural-textures": "8.36.1",
"@babylonjs/serializers": "8.36.1",
"@newrelic/browser-agent": "^1.302.0",
"openai": "4.52.3"
"openai": "4.52.3",
"svelte-spa-router": "^4.0.1"
},
"devDependencies": {
"@sveltejs/vite-plugin-svelte": "^6.2.1",
"@types/node": "^20.0.0",
"svelte": "^5.43.14",
"svelte-preprocess": "^6.0.3",
"tsx": "^4.7.1",
"typescript": "^5.5.3",
"vite": "^7.2.2"
@ -591,6 +595,56 @@
"node": ">=6"
}
},
"node_modules/@jridgewell/gen-mapping": {
"version": "0.3.13",
"resolved": "https://registry.npmjs.org/@jridgewell/gen-mapping/-/gen-mapping-0.3.13.tgz",
"integrity": "sha512-2kkt/7niJ6MgEPxF0bYdQ6etZaA+fQvDcLKckhy1yIQOzaoKjBBjSj63/aLVjYE3qhRt5dvM+uUyfCg6UKCBbA==",
"dev": true,
"license": "MIT",
"dependencies": {
"@jridgewell/sourcemap-codec": "^1.5.0",
"@jridgewell/trace-mapping": "^0.3.24"
}
},
"node_modules/@jridgewell/remapping": {
"version": "2.3.5",
"resolved": "https://registry.npmjs.org/@jridgewell/remapping/-/remapping-2.3.5.tgz",
"integrity": "sha512-LI9u/+laYG4Ds1TDKSJW2YPrIlcVYOwi2fUC6xB43lueCjgxV4lffOCZCtYFiH6TNOX+tQKXx97T4IKHbhyHEQ==",
"dev": true,
"license": "MIT",
"dependencies": {
"@jridgewell/gen-mapping": "^0.3.5",
"@jridgewell/trace-mapping": "^0.3.24"
}
},
"node_modules/@jridgewell/resolve-uri": {
"version": "3.1.2",
"resolved": "https://registry.npmjs.org/@jridgewell/resolve-uri/-/resolve-uri-3.1.2.tgz",
"integrity": "sha512-bRISgCIjP20/tbWSPWMEi54QVPRZExkuD9lJL+UIxUKtwVJA8wW1Trb1jMs1RFXo1CBTNZ/5hpC9QvmKWdopKw==",
"dev": true,
"license": "MIT",
"engines": {
"node": ">=6.0.0"
}
},
"node_modules/@jridgewell/sourcemap-codec": {
"version": "1.5.5",
"resolved": "https://registry.npmjs.org/@jridgewell/sourcemap-codec/-/sourcemap-codec-1.5.5.tgz",
"integrity": "sha512-cYQ9310grqxueWbl+WuIUIaiUaDcj7WOq5fVhEljNVgRfOUhY9fy2zTvfoqWsnebh8Sl70VScFbICvJnLKB0Og==",
"dev": true,
"license": "MIT"
},
"node_modules/@jridgewell/trace-mapping": {
"version": "0.3.31",
"resolved": "https://registry.npmjs.org/@jridgewell/trace-mapping/-/trace-mapping-0.3.31.tgz",
"integrity": "sha512-zzNR+SdQSDJzc8joaeP8QQoCQr8NuYx2dIIytl1QeBEZHJ9uW6hebsrYgbz8hJwUQao3TWCMtmfV8Nu1twOLAw==",
"dev": true,
"license": "MIT",
"dependencies": {
"@jridgewell/resolve-uri": "^3.1.0",
"@jridgewell/sourcemap-codec": "^1.4.14"
}
},
"node_modules/@newrelic/browser-agent": {
"version": "1.302.0",
"resolved": "https://registry.npmjs.org/@newrelic/browser-agent/-/browser-agent-1.302.0.tgz",
@ -931,6 +985,55 @@
"win32"
]
},
"node_modules/@sveltejs/acorn-typescript": {
"version": "1.0.7",
"resolved": "https://registry.npmjs.org/@sveltejs/acorn-typescript/-/acorn-typescript-1.0.7.tgz",
"integrity": "sha512-znp1A/Y1Jj4l/Zy7PX5DZKBE0ZNY+5QBngiE21NJkfSTyzzC5iKNWOtwFXKtIrn7MXEFBck4jD95iBNkGjK92Q==",
"dev": true,
"license": "MIT",
"peerDependencies": {
"acorn": "^8.9.0"
}
},
"node_modules/@sveltejs/vite-plugin-svelte": {
"version": "6.2.1",
"resolved": "https://registry.npmjs.org/@sveltejs/vite-plugin-svelte/-/vite-plugin-svelte-6.2.1.tgz",
"integrity": "sha512-YZs/OSKOQAQCnJvM/P+F1URotNnYNeU3P2s4oIpzm1uFaqUEqRxUB0g5ejMjEb5Gjb9/PiBI5Ktrq4rUUF8UVQ==",
"dev": true,
"license": "MIT",
"dependencies": {
"@sveltejs/vite-plugin-svelte-inspector": "^5.0.0",
"debug": "^4.4.1",
"deepmerge": "^4.3.1",
"magic-string": "^0.30.17",
"vitefu": "^1.1.1"
},
"engines": {
"node": "^20.19 || ^22.12 || >=24"
},
"peerDependencies": {
"svelte": "^5.0.0",
"vite": "^6.3.0 || ^7.0.0"
}
},
"node_modules/@sveltejs/vite-plugin-svelte-inspector": {
"version": "5.0.1",
"resolved": "https://registry.npmjs.org/@sveltejs/vite-plugin-svelte-inspector/-/vite-plugin-svelte-inspector-5.0.1.tgz",
"integrity": "sha512-ubWshlMk4bc8mkwWbg6vNvCeT7lGQojE3ijDh3QTR6Zr/R+GXxsGbyH4PExEPpiFmqPhYiVSVmHBjUcVc1JIrA==",
"dev": true,
"license": "MIT",
"dependencies": {
"debug": "^4.4.1"
},
"engines": {
"node": "^20.19 || ^22.12 || >=24"
},
"peerDependencies": {
"@sveltejs/vite-plugin-svelte": "^6.0.0-next.0",
"svelte": "^5.0.0",
"vite": "^6.3.0 || ^7.0.0"
}
},
"node_modules/@types/css-font-loading-module": {
"version": "0.0.7",
"resolved": "https://registry.npmjs.org/@types/css-font-loading-module/-/css-font-loading-module-0.0.7.tgz",
@ -998,6 +1101,19 @@
"node": ">=6.5"
}
},
"node_modules/acorn": {
"version": "8.15.0",
"resolved": "https://registry.npmjs.org/acorn/-/acorn-8.15.0.tgz",
"integrity": "sha512-NZyJarBfL7nWwIq+FDL6Zp/yHEhePMNnnJ0y3qfieCrmNvYct8uvtiV41UvlSe6apAfk0fY1FbWx+NwfmpvtTg==",
"dev": true,
"license": "MIT",
"bin": {
"acorn": "bin/acorn"
},
"engines": {
"node": ">=0.4.0"
}
},
"node_modules/agentkeepalive": {
"version": "4.5.0",
"resolved": "https://registry.npmjs.org/agentkeepalive/-/agentkeepalive-4.5.0.tgz",
@ -1009,11 +1125,31 @@
"node": ">= 8.0.0"
}
},
"node_modules/aria-query": {
"version": "5.3.2",
"resolved": "https://registry.npmjs.org/aria-query/-/aria-query-5.3.2.tgz",
"integrity": "sha512-COROpnaoap1E2F000S62r6A60uHZnmlvomhfyT2DlTcrY1OrBKn2UhH7qn5wTC9zMvD0AY7csdPSNwKP+7WiQw==",
"dev": true,
"license": "Apache-2.0",
"engines": {
"node": ">= 0.4"
}
},
"node_modules/asynckit": {
"version": "0.4.0",
"resolved": "https://registry.npmjs.org/asynckit/-/asynckit-0.4.0.tgz",
"integrity": "sha512-Oei9OH4tRh0YqU3GxhX79dM/mwVgvbZJaSNaRk+bshkj0S5cfHcgYakreBjrHwatXKbz+IoIdYLxrKim2MjW0Q=="
},
"node_modules/axobject-query": {
"version": "4.1.0",
"resolved": "https://registry.npmjs.org/axobject-query/-/axobject-query-4.1.0.tgz",
"integrity": "sha512-qIj0G9wZbMGNLjLmg1PT6v2mE9AH2zlnADJD/2tC6E00hgmhUOfEB6greHPAfLRSufHqROIUTkw6E+M3lH0PTQ==",
"dev": true,
"license": "Apache-2.0",
"engines": {
"node": ">= 0.4"
}
},
"node_modules/babylonjs-gltf2interface": {
"version": "8.32.1",
"resolved": "https://registry.npmjs.org/babylonjs-gltf2interface/-/babylonjs-gltf2interface-8.32.1.tgz",
@ -1037,6 +1173,16 @@
"lodash": ">=4.17.21"
}
},
"node_modules/clsx": {
"version": "2.1.1",
"resolved": "https://registry.npmjs.org/clsx/-/clsx-2.1.1.tgz",
"integrity": "sha512-eYm0QWBtUrBWZWG0d386OGAw16Z995PiOVo2B7bjWSbHedGl5e0ZWaq65kOGgUSNesEIDkB9ISbTg/JK9dhCZA==",
"dev": true,
"license": "MIT",
"engines": {
"node": ">=6"
}
},
"node_modules/combined-stream": {
"version": "1.0.8",
"resolved": "https://registry.npmjs.org/combined-stream/-/combined-stream-1.0.8.tgz",
@ -1054,6 +1200,34 @@
"integrity": "sha512-M1uQkMl8rQK/szD0LNhtqxIPLpimGm8sOBwU7lLnCpSbTyY3yeU1Vc7l4KT5zT4s/yOxHH5O7tIuuLOCnLADRw==",
"peer": true
},
"node_modules/debug": {
"version": "4.4.3",
"resolved": "https://registry.npmjs.org/debug/-/debug-4.4.3.tgz",
"integrity": "sha512-RGwwWnwQvkVfavKVt22FGLw+xYSdzARwm0ru6DhTVA3umU5hZc28V3kO4stgYryrTlLpuvgI9GiijltAjNbcqA==",
"dev": true,
"license": "MIT",
"dependencies": {
"ms": "^2.1.3"
},
"engines": {
"node": ">=6.0"
},
"peerDependenciesMeta": {
"supports-color": {
"optional": true
}
}
},
"node_modules/deepmerge": {
"version": "4.3.1",
"resolved": "https://registry.npmjs.org/deepmerge/-/deepmerge-4.3.1.tgz",
"integrity": "sha512-3sUqbMEc77XqpdNO7FRyRog+eW3ph+GYCbj+rK+uYyRMuwsVy0rMiVtPn+QJlKFvWP/1PYpapqYn0Me2knFn+A==",
"dev": true,
"license": "MIT",
"engines": {
"node": ">=0.10.0"
}
},
"node_modules/delayed-stream": {
"version": "1.0.0",
"resolved": "https://registry.npmjs.org/delayed-stream/-/delayed-stream-1.0.0.tgz",
@ -1116,6 +1290,23 @@
"@esbuild/win32-x64": "0.25.12"
}
},
"node_modules/esm-env": {
"version": "1.2.2",
"resolved": "https://registry.npmjs.org/esm-env/-/esm-env-1.2.2.tgz",
"integrity": "sha512-Epxrv+Nr/CaL4ZcFGPJIYLWFom+YeV1DqMLHJoEd9SYRxNbaFruBwfEX/kkHUJf55j2+TUbmDcmuilbP1TmXHA==",
"dev": true,
"license": "MIT"
},
"node_modules/esrap": {
"version": "2.1.3",
"resolved": "https://registry.npmjs.org/esrap/-/esrap-2.1.3.tgz",
"integrity": "sha512-T/Dhhv/QH+yYmiaLz9SA3PW+YyenlnRKDNdtlYJrSOBmNsH4nvPux+mTwx7p+wAedlJrGoZtXNI0a0MjQ2QkVg==",
"dev": true,
"license": "MIT",
"dependencies": {
"@jridgewell/sourcemap-codec": "^1.4.15"
}
},
"node_modules/event-target-shim": {
"version": "5.0.1",
"resolved": "https://registry.npmjs.org/event-target-shim/-/event-target-shim-5.0.1.tgz",
@ -1218,11 +1409,38 @@
"ms": "^2.0.0"
}
},
"node_modules/is-reference": {
"version": "3.0.3",
"resolved": "https://registry.npmjs.org/is-reference/-/is-reference-3.0.3.tgz",
"integrity": "sha512-ixkJoqQvAP88E6wLydLGGqCJsrFUnqoH6HnaczB8XmDH1oaWU+xxdptvikTgaEhtZ53Ky6YXiBuUI2WXLMCwjw==",
"dev": true,
"license": "MIT",
"dependencies": {
"@types/estree": "^1.0.6"
}
},
"node_modules/locate-character": {
"version": "3.0.0",
"resolved": "https://registry.npmjs.org/locate-character/-/locate-character-3.0.0.tgz",
"integrity": "sha512-SW13ws7BjaeJ6p7Q6CO2nchbYEc3X3J6WrmTTDto7yMPqVSZTUyY5Tjbid+Ab8gLnATtygYtiDIJGQRRn2ZOiA==",
"dev": true,
"license": "MIT"
},
"node_modules/lodash": {
"version": "4.17.21",
"resolved": "https://registry.npmjs.org/lodash/-/lodash-4.17.21.tgz",
"integrity": "sha512-v2kDEe57lecTulaDIuNTPy3Ry4gLGJ6Z1O3vE1krgXZNrsQ+LFTGHVxVjcXPs17LhbZVGedAJv8XZ1tvj5FvSg=="
},
"node_modules/magic-string": {
"version": "0.30.21",
"resolved": "https://registry.npmjs.org/magic-string/-/magic-string-0.30.21.tgz",
"integrity": "sha512-vd2F4YUyEXKGcLHoq+TEyCjxueSeHnFxyyjNp80yg0XV4vUhnDer/lvvlqM/arB5bXQN5K2/3oinyCRyx8T2CQ==",
"dev": true,
"license": "MIT",
"dependencies": {
"@jridgewell/sourcemap-codec": "^1.5.5"
}
},
"node_modules/mime-db": {
"version": "1.52.0",
"resolved": "https://registry.npmjs.org/mime-db/-/mime-db-1.52.0.tgz",
@ -1381,6 +1599,15 @@
"node": "^10 || ^12 || >=14"
}
},
"node_modules/regexparam": {
"version": "2.0.2",
"resolved": "https://registry.npmjs.org/regexparam/-/regexparam-2.0.2.tgz",
"integrity": "sha512-A1PeDEYMrkLrfyOwv2jwihXbo9qxdGD3atBYQA9JJgreAx8/7rC6IUkWOw2NQlOxLp2wL0ifQbh1HuidDfYA6w==",
"license": "MIT",
"engines": {
"node": ">=8"
}
},
"node_modules/resolve-pkg-maps": {
"version": "1.0.0",
"resolved": "https://registry.npmjs.org/resolve-pkg-maps/-/resolve-pkg-maps-1.0.0.tgz",
@ -1439,6 +1666,100 @@
"node": ">=0.10.0"
}
},
"node_modules/svelte": {
"version": "5.43.14",
"resolved": "https://registry.npmjs.org/svelte/-/svelte-5.43.14.tgz",
"integrity": "sha512-pHeUrp1A5S6RGaXhJB7PtYjL1VVjbVrJ2EfuAoPu9/1LeoMaJa/pcdCsCSb0gS4eUHAHnhCbUDxORZyvGK6kOQ==",
"dev": true,
"license": "MIT",
"dependencies": {
"@jridgewell/remapping": "^2.3.4",
"@jridgewell/sourcemap-codec": "^1.5.0",
"@sveltejs/acorn-typescript": "^1.0.5",
"@types/estree": "^1.0.5",
"acorn": "^8.12.1",
"aria-query": "^5.3.1",
"axobject-query": "^4.1.0",
"clsx": "^2.1.1",
"esm-env": "^1.2.1",
"esrap": "^2.1.0",
"is-reference": "^3.0.3",
"locate-character": "^3.0.0",
"magic-string": "^0.30.11",
"zimmerframe": "^1.1.2"
},
"engines": {
"node": ">=18"
}
},
"node_modules/svelte-preprocess": {
"version": "6.0.3",
"resolved": "https://registry.npmjs.org/svelte-preprocess/-/svelte-preprocess-6.0.3.tgz",
"integrity": "sha512-PLG2k05qHdhmRG7zR/dyo5qKvakhm8IJ+hD2eFRQmMLHp7X3eJnjeupUtvuRpbNiF31RjVw45W+abDwHEmP5OA==",
"dev": true,
"hasInstallScript": true,
"license": "MIT",
"engines": {
"node": ">= 18.0.0"
},
"peerDependencies": {
"@babel/core": "^7.10.2",
"coffeescript": "^2.5.1",
"less": "^3.11.3 || ^4.0.0",
"postcss": "^7 || ^8",
"postcss-load-config": ">=3",
"pug": "^3.0.0",
"sass": "^1.26.8",
"stylus": ">=0.55",
"sugarss": "^2.0.0 || ^3.0.0 || ^4.0.0",
"svelte": "^4.0.0 || ^5.0.0-next.100 || ^5.0.0",
"typescript": "^5.0.0"
},
"peerDependenciesMeta": {
"@babel/core": {
"optional": true
},
"coffeescript": {
"optional": true
},
"less": {
"optional": true
},
"postcss": {
"optional": true
},
"postcss-load-config": {
"optional": true
},
"pug": {
"optional": true
},
"sass": {
"optional": true
},
"stylus": {
"optional": true
},
"sugarss": {
"optional": true
},
"typescript": {
"optional": true
}
}
},
"node_modules/svelte-spa-router": {
"version": "4.0.1",
"resolved": "https://registry.npmjs.org/svelte-spa-router/-/svelte-spa-router-4.0.1.tgz",
"integrity": "sha512-2JkmUQ2f9jRluijL58LtdQBIpynSbem2eBGp4zXdi7aDY1znbR6yjw0KsonD0aq2QLwf4Yx4tBJQjxIjgjXHKg==",
"license": "MIT",
"dependencies": {
"regexparam": "2.0.2"
},
"funding": {
"url": "https://github.com/sponsors/ItalyPaleAle"
}
},
"node_modules/tinyglobby": {
"version": "0.2.15",
"resolved": "https://registry.npmjs.org/tinyglobby/-/tinyglobby-0.2.15.tgz",
@ -1571,6 +1892,26 @@
}
}
},
"node_modules/vitefu": {
"version": "1.1.1",
"resolved": "https://registry.npmjs.org/vitefu/-/vitefu-1.1.1.tgz",
"integrity": "sha512-B/Fegf3i8zh0yFbpzZ21amWzHmuNlLlmJT6n7bu5e+pCHUKQIfXSYokrqOBGEMMe9UG2sostKQF9mml/vYaWJQ==",
"dev": true,
"license": "MIT",
"workspaces": [
"tests/deps/*",
"tests/projects/*",
"tests/projects/workspace/packages/*"
],
"peerDependencies": {
"vite": "^3.0.0 || ^4.0.0 || ^5.0.0 || ^6.0.0 || ^7.0.0-beta.0"
},
"peerDependenciesMeta": {
"vite": {
"optional": true
}
}
},
"node_modules/web-streams-polyfill": {
"version": "3.3.3",
"resolved": "https://registry.npmjs.org/web-streams-polyfill/-/web-streams-polyfill-3.3.3.tgz",
@ -1611,6 +1952,13 @@
"engines": {
"node": ">= 14.6"
}
},
"node_modules/zimmerframe": {
"version": "1.1.4",
"resolved": "https://registry.npmjs.org/zimmerframe/-/zimmerframe-1.1.4.tgz",
"integrity": "sha512-B58NGBEoc8Y9MWWCQGl/gq9xBCe4IiKM0a2x7GZdQKOW5Exr8S1W24J6OgM1njK8xCRGvAJIL/MxXHf6SkmQKQ==",
"dev": true,
"license": "MIT"
}
}
}

8
package.json
View File

@ -24,11 +24,15 @@
"@babylonjs/materials": "8.36.1",
"@babylonjs/procedural-textures": "8.36.1",
"@babylonjs/serializers": "8.36.1",
"@newrelic/browser-agent": "^1.302.0",
"openai": "4.52.3",
"@newrelic/browser-agent": "^1.302.0"
},
"svelte-spa-router": "^4.0.1"
},
"devDependencies": {
"@sveltejs/vite-plugin-svelte": "^6.2.1",
"@types/node": "^20.0.0",
"svelte": "^5.43.14",
"svelte-preprocess": "^6.0.3",
"tsx": "^4.7.1",
"typescript": "^5.5.3",
"vite": "^7.2.2"

2
public/levels/directory.json
View File

@ -1,5 +1,5 @@
{
"version": "1.0.5",
"version": "1.0.6",
"levels": [
{
"id": "rookie-training",

6
public/levels/rookie-training.json
View File

@ -11,12 +11,12 @@
"ship": {
"position": [
0,
1,
0
1.5,
500
],
"rotation": [
0,
0,
180,
0
],
"linearVelocity": [

14
server/voices.ts
View File

@ -1,14 +0,0 @@
import OpenAI from "openai";
import * as fs from "fs";
async function build() {
const client = new OpenAI({ apiKey: ""})
const mp3 = await client.audio.speech.create({
model: 'tts-1-hd',
voice: 'alloy',
input: 'test 1 2 3'
});
const buffer = Buffer.from(await mp3.arrayBuffer());
await fs.promises.writeFile('./output.mp3', buffer);
}

49
src/components/auth/UserProfile.svelte Normal file
View File

@ -0,0 +1,49 @@
<script lang="ts">
import { authStore } from '../../stores/auth';
import Button from '../shared/Button.svelte';
async function handleLogin() {
await authStore.login();
}
async function handleLogout() {
await authStore.logout();
}
</script>
<div id="userProfile">
{#if $authStore.isLoading}
<span class="loading">Loading...</span>
{:else if $authStore.isAuthenticated && $authStore.user}
<div class="user-info">
<span class="user-name">{$authStore.user.name || $authStore.user.email}</span>
<Button variant="secondary" on:click={handleLogout}>Logout</Button>
</div>
{:else}
<Button variant="primary" on:click={handleLogin}>Sign In</Button>
{/if}
</div>
<style>
#userProfile {
display: flex;
align-items: center;
gap: var(--space-sm, 0.5rem);
}
.user-info {
display: flex;
align-items: center;
gap: var(--space-sm, 0.5rem);
}
.user-name {
color: var(--color-text, #fff);
font-size: var(--font-size-sm, 0.875rem);
}
.loading {
color: var(--color-text-secondary, #ccc);
font-size: var(--font-size-sm, 0.875rem);
}
</style>

176
src/components/controls/ControlsScreen.svelte Normal file
View File

@ -0,0 +1,176 @@
<script lang="ts">
import { onMount } from 'svelte';
import { link } from 'svelte-spa-router';
import { controllerMappingStore } from '../../stores/controllerMapping';
import { ControllerMappingConfig } from '../../ship/input/controllerMapping';
import Button from '../shared/Button.svelte';
import Section from '../shared/Section.svelte';
import FormGroup from '../shared/FormGroup.svelte';
import Select from '../shared/Select.svelte';
import Checkbox from '../shared/Checkbox.svelte';
import InfoBox from '../shared/InfoBox.svelte';
let message = '';
let messageType: 'success' | 'error' | 'warning' = 'success';
let showMessage = false;
// Reload store from singleton on mount to ensure fresh data
onMount(() => {
const config = ControllerMappingConfig.getInstance();
controllerMappingStore.set(config.getMapping());
});
// Get available options
const stickActions = ControllerMappingConfig.getAvailableStickActions().map(action => ({
value: action,
label: ControllerMappingConfig.getStickActionLabel(action)
}));
const buttonActions = ControllerMappingConfig.getAvailableButtonActions().map(action => ({
value: action,
label: ControllerMappingConfig.getButtonActionLabel(action)
}));
function handleSave() {
const warnings = controllerMappingStore.validate();
if (warnings.length > 0) {
message = 'Configuration saved with warnings:\n' + warnings.join('\n');
messageType = 'warning';
} else {
message = 'Configuration saved successfully!';
messageType = 'success';
}
controllerMappingStore.save();
showMessage = true;
setTimeout(() => { showMessage = false; }, 5000);
}
function handleReset() {
if (confirm('Reset all controller mappings to default? This cannot be undone.')) {
controllerMappingStore.reset();
message = 'Reset to default configuration';
messageType = 'success';
showMessage = true;
setTimeout(() => { showMessage = false; }, 5000);
}
}
function handleTest() {
const mapping = $controllerMappingStore;
let preview = 'Current Controller Mapping:\n\n';
preview += '📋 STICK MAPPINGS:\n';
preview += ` Left Stick X: ${ControllerMappingConfig.getStickActionLabel(mapping.leftStickX)}`;
preview += mapping.invertLeftStickX ? ' (Inverted)\n' : '\n';
preview += ` Left Stick Y: ${ControllerMappingConfig.getStickActionLabel(mapping.leftStickY)}`;
preview += mapping.invertLeftStickY ? ' (Inverted)\n' : '\n';
preview += ` Right Stick X: ${ControllerMappingConfig.getStickActionLabel(mapping.rightStickX)}`;
preview += mapping.invertRightStickX ? ' (Inverted)\n' : '\n';
preview += ` Right Stick Y: ${ControllerMappingConfig.getStickActionLabel(mapping.rightStickY)}`;
preview += mapping.invertRightStickY ? ' (Inverted)\n' : '\n';
preview += '\n🎮 BUTTON MAPPINGS:\n';
preview += ` Trigger: ${ControllerMappingConfig.getButtonActionLabel(mapping.trigger)}\n`;
preview += ` A Button: ${ControllerMappingConfig.getButtonActionLabel(mapping.aButton)}\n`;
preview += ` B Button: ${ControllerMappingConfig.getButtonActionLabel(mapping.bButton)}\n`;
preview += ` X Button: ${ControllerMappingConfig.getButtonActionLabel(mapping.xButton)}\n`;
preview += ` Y Button: ${ControllerMappingConfig.getButtonActionLabel(mapping.yButton)}\n`;
preview += ` Squeeze/Grip: ${ControllerMappingConfig.getButtonActionLabel(mapping.squeeze)}\n`;
alert(preview);
}
</script>
<div class="editor-container">
<a href="/" use:link class="back-link">← Back to Game</a>
<h1>🎮 Controller Mapping</h1>
<p class="subtitle">Customize VR controller button and stick mappings</p>
<div class="settings-grid">
<!-- Left Stick -->
<Section title="🕹️ Left Stick" description="Configure what actions the left thumbstick controls.">
<FormGroup label="Left Stick X-Axis (Left/Right)">
<Select bind:value={$controllerMappingStore.leftStickX} options={stickActions} />
<Checkbox bind:checked={$controllerMappingStore.invertLeftStickX} label="Invert this axis" />
</FormGroup>
<FormGroup label="Left Stick Y-Axis (Up/Down)">
<Select bind:value={$controllerMappingStore.leftStickY} options={stickActions} />
<Checkbox bind:checked={$controllerMappingStore.invertLeftStickY} label="Invert this axis" />
</FormGroup>
</Section>
<!-- Right Stick -->
<Section title="🕹️ Right Stick" description="Configure what actions the right thumbstick controls.">
<FormGroup label="Right Stick X-Axis (Left/Right)">
<Select bind:value={$controllerMappingStore.rightStickX} options={stickActions} />
<Checkbox bind:checked={$controllerMappingStore.invertRightStickX} label="Invert this axis" />
</FormGroup>
<FormGroup label="Right Stick Y-Axis (Up/Down)">
<Select bind:value={$controllerMappingStore.rightStickY} options={stickActions} />
<Checkbox bind:checked={$controllerMappingStore.invertRightStickY} label="Invert this axis" />
</FormGroup>
</Section>
<!-- Button Mappings -->
<Section title="🔘 Button Mappings" description="Configure what actions each controller button performs.">
<FormGroup label="Trigger (Index Finger)">
<Select bind:value={$controllerMappingStore.trigger} options={buttonActions} />
</FormGroup>
<FormGroup label="A Button (Right Controller)">
<Select bind:value={$controllerMappingStore.aButton} options={buttonActions} />
</FormGroup>
<FormGroup label="B Button (Right Controller)">
<Select bind:value={$controllerMappingStore.bButton} options={buttonActions} />
</FormGroup>
<FormGroup label="X Button (Left Controller)">
<Select bind:value={$controllerMappingStore.xButton} options={buttonActions} />
</FormGroup>
<FormGroup label="Y Button (Left Controller)">
<Select bind:value={$controllerMappingStore.yButton} options={buttonActions} />
</FormGroup>
<FormGroup label="Squeeze/Grip Button">
<Select bind:value={$controllerMappingStore.squeeze} options={buttonActions} />
</FormGroup>
</Section>
<!-- Info Section -->
<Section title="ℹ️ Action Guide">
<div class="settings-info-content">
<p><strong class="settings-label">Yaw:</strong> Turn left/right (rotate around vertical axis)</p>
<p><strong class="settings-label">Pitch:</strong> Nose up/down (rotate around horizontal axis)</p>
<p><strong class="settings-label">Roll:</strong> Barrel roll (rotate around forward axis)</p>
<p><strong class="settings-label">Forward:</strong> Forward and backward thrust</p>
<p><strong class="settings-label">None:</strong> No action assigned</p>
</div>
</Section>
<!-- Storage Info -->
<Section title="💾 Storage Info">
<div class="settings-info-content">
<p>Controller mappings 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>
</Section>
</div>
<div class="button-group">
<Button variant="primary" on:click={handleSave}>💾 Save Mapping</Button>
<Button variant="secondary" on:click={handleReset}>🔄 Reset to Default</Button>
<Button variant="secondary" on:click={handleTest}>👁️ Preview Mapping</Button>
</div>
<InfoBox {message} type={messageType} visible={showMessage} />
</div>
<style>
/* Inherits from global styles.css */
</style>

42
src/components/editor/LevelEditor.svelte Normal file
View File

@ -0,0 +1,42 @@
<script lang="ts">
import { link } from 'svelte-spa-router';
import Button from '../shared/Button.svelte';
import Section from '../shared/Section.svelte';
// This is a simplified stub - full implementation would be much larger
// For now, just show a placeholder
</script>
<div class="editor-container">
<a href="/" use:link class="back-link">← Back to Game</a>
<h1>📝 Level Editor</h1>
<p class="subtitle">Create and customize your own asteroid field levels</p>
<Section title="🚧 Under Construction">
<p>The level editor is being migrated to Svelte.</p>
<p>This component will include:</p>
<ul>
<li>Difficulty presets</li>
<li>Ship, base, and celestial object configuration</li>
<li>Asteroid generation settings</li>
<li>JSON editor</li>
<li>Save/load functionality</li>
</ul>
</Section>
<div class="button-group">
<Button variant="secondary" on:click={() => history.back()}>← Back</Button>
</div>
</div>
<style>
ul {
padding-left: var(--space-lg, 1.5rem);
color: var(--color-text-secondary, #ccc);
}
li {
margin: var(--space-xs, 0.25rem) 0;
}
</style>

144
src/components/game/LevelCard.svelte Normal file
View File

@ -0,0 +1,144 @@
<script lang="ts">
import type { LevelDirectoryEntry } from '../../levels/storage/levelRegistry';
import { levelRegistryStore } from '../../stores/levelRegistry';
import { authStore } from '../../stores/auth';
import { progressionStore } from '../../stores/progression';
import { gameConfigStore } from '../../stores/gameConfig';
import Button from '../shared/Button.svelte';
export let levelId: string;
export let directoryEntry: LevelDirectoryEntry;
export let isDefault: boolean = true;
async function handleLevelClick() {
console.log('[LevelCard] Level clicked:', {
levelId,
levelName: directoryEntry.name,
isUnlocked,
isAuthenticated: $authStore.isAuthenticated,
buttonText
});
// If level is locked and user not authenticated, prompt to sign in
if (!isUnlocked && !$authStore.isAuthenticated) {
console.log('[LevelCard] Locked level clicked - prompting for sign in');
try {
await authStore.login();
console.log('[LevelCard] Login completed');
} catch (error) {
console.error('[LevelCard] Login failed:', error);
}
return;
}
// If level is still locked (progression), don't allow play
if (!isUnlocked) {
console.log('[LevelCard] Level still locked after auth check (progression lock)');
return;
}
// Dispatch custom event for main.ts to handle
console.log('[LevelCard] Level unlocked, loading config...');
const config = await levelRegistryStore.getLevel(levelId);
if (config) {
console.log('[LevelCard] Config loaded, dispatching levelSelected event');
window.dispatchEvent(new CustomEvent('levelSelected', {
detail: { levelName: levelId, config }
}));
} else {
console.error('[LevelCard] Failed to load level config');
}
}
async function handleDelete() {
if (confirm(`Are you sure you want to delete "${levelId}"?`)) {
levelRegistryStore.deleteCustomLevel(levelId);
}
}
// Determine if level is unlocked - complex logic matching original implementation
$: {
const isTutorial = progressionStore.isTutorial(directoryEntry.name);
const isAuthenticated = $authStore.isAuthenticated;
const progressionEnabled = $gameConfigStore.progressionEnabled;
if (isTutorial) {
// Tutorial is always unlocked
isUnlocked = true;
lockReason = '';
buttonText = 'Play Level';
} else if (!isAuthenticated) {
// Non-tutorial requires authentication
isUnlocked = false;
lockReason = 'Sign in to unlock';
buttonText = 'Sign In Required';
} else if (progressionEnabled && isDefault) {
// Check sequential progression
isUnlocked = progressionStore.isLevelUnlocked(directoryEntry.name, isDefault);
if (!isUnlocked) {
const prevLevel = progressionStore.getPreviousLevelName(directoryEntry.name);
lockReason = prevLevel ? `Complete "${prevLevel}" to unlock` : 'Locked';
buttonText = 'Locked';
} else {
lockReason = '';
buttonText = 'Play Level';
}
} else {
// Custom levels or progression disabled - always unlocked when authenticated
isUnlocked = true;
lockReason = '';
buttonText = 'Play Level';
}
}
let isUnlocked: boolean = false;
let lockReason: string = '';
let buttonText: string = 'Play Level';
$: cardClasses = isUnlocked ? 'level-card' : 'level-card level-card-locked';
</script>
<div class={cardClasses}>
<div class="level-card-header">
<h2 class="level-card-title">{directoryEntry.name}</h2>
{#if !isUnlocked}
<div class="level-card-status level-card-status-locked">🔒</div>
{/if}
{#if !isDefault}
<div class="level-card-badge level-card-badge-custom">CUSTOM</div>
{/if}
</div>
<div class="level-meta">
Difficulty: {directoryEntry.difficulty || 'unknown'}
{#if directoryEntry.estimatedTime}
• {directoryEntry.estimatedTime}
{/if}
</div>
<p class="level-card-description">{directoryEntry.description}</p>
{#if !isUnlocked && lockReason}
<div class="level-lock-reason">{lockReason}</div>
{/if}
<div class="level-card-actions">
<Button
variant="primary"
on:click={handleLevelClick}
>
{buttonText}
</Button>
{#if !isDefault && isUnlocked}
<Button variant="secondary" on:click={handleDelete} title="Delete level">
🗑️
</Button>
{/if}
</div>
</div>
<style>
/* Inherits from global styles.css */
/* All .level-card-* classes already defined */
</style>

94
src/components/game/LevelSelect.svelte Normal file
View File

@ -0,0 +1,94 @@
<script lang="ts">
import { levelRegistryStore } from '../../stores/levelRegistry';
import { authStore } from '../../stores/auth';
import { link } from 'svelte-spa-router';
import LevelCard from './LevelCard.svelte';
import ProgressBar from './ProgressBar.svelte';
// Get default levels in order
const DEFAULT_LEVEL_ORDER = [
'rookie-training',
'rescue-mission',
'deep-space-patrol',
'enemy-territory',
'the-gauntlet',
'final-challenge'
];
// Reactive declarations for store values
$: isReady = $levelRegistryStore.isInitialized;
$: defaultLevels = $levelRegistryStore.defaultLevels;
$: customLevels = $levelRegistryStore.customLevels;
</script>
<div id="mainDiv">
<div id="levelSelect" class:ready={isReady}>
<!-- 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">
Choose your level and prepare for launch
</p>
<div class="card-container" id="levelCardsContainer">
{#if !isReady}
<div class="loading-message">Loading levels...</div>
{:else if defaultLevels.size === 0}
<div class="no-levels-message">
<h2>No Levels Found</h2>
<p>No levels available. Please check your installation.</p>
</div>
{:else}
{#each DEFAULT_LEVEL_ORDER as levelId}
{@const entry = defaultLevels.get(levelId)}
{#if entry}
<LevelCard
{levelId}
directoryEntry={entry.directoryEntry}
isDefault={entry.isDefault}
/>
{/if}
{/each}
{#if customLevels.size > 0}
<div style="grid-column: 1 / -1; margin-top: var(--space-2xl);">
<h3 class="level-header">Custom Levels</h3>
</div>
{#each Array.from(customLevels.entries()) as [levelId, entry]}
<LevelCard
{levelId}
directoryEntry={entry.directoryEntry}
isDefault={false}
/>
{/each}
{/if}
{/if}
</div>
</div>
</div>
</div>
<style>
/* Inherits from global styles.css */
/* Most classes already defined */
.loading-message, .no-levels-message {
grid-column: 1 / -1;
text-align: center;
padding: var(--space-2xl, 2rem);
}
</style>

17
src/components/game/ProgressBar.svelte Normal file
View File

@ -0,0 +1,17 @@
<script lang="ts">
export let progress: number = 0; // 0-100
export let visible: boolean = false;
</script>
{#if visible}
<div class="progress-bar-container">
<div class="progress-bar-track">
<div class="progress-fill" style="width: {progress}%;"></div>
</div>
</div>
{/if}
<style>
/* Inherits from global styles.css */
/* .progress-bar-* classes already defined */
</style>

82
src/components/layouts/App.svelte Normal file
View File

@ -0,0 +1,82 @@
<script lang="ts">
import { onMount } from 'svelte';
import Router from 'svelte-spa-router';
import { wrap } from 'svelte-spa-router/wrap';
import AppHeader from './AppHeader.svelte';
import { navigationStore } from '../../stores/navigation';
import { AuthService } from '../../services/authService';
import { authStore } from '../../stores/auth';
// Import game view directly (most common route)
import LevelSelect from '../game/LevelSelect.svelte';
// Lazy load other views for better performance
const routes = {
'/': LevelSelect,
'/editor': wrap({
asyncComponent: () => import('../editor/LevelEditor.svelte')
}),
'/settings': wrap({
asyncComponent: () => import('../settings/SettingsScreen.svelte')
}),
'/controls': wrap({
asyncComponent: () => import('../controls/ControlsScreen.svelte')
}),
};
// Track route changes
function routeLoaded(event: CustomEvent) {
const { route } = event.detail;
navigationStore.setRoute(route);
}
// Initialize Auth0 when component mounts
onMount(async () => {
console.log('[App] ========== APP MOUNTED - INITIALIZING AUTH0 ==========');
try {
const authService = AuthService.getInstance();
await authService.initialize();
console.log('[App] Auth0 initialized successfully');
// Refresh auth store to update UI with current auth state
console.log('[App] Refreshing auth store...');
await authStore.refresh();
console.log('[App] Auth store refreshed');
} catch (error) {
console.error('[App] !!!!! AUTH0 INITIALIZATION FAILED !!!!!', error);
console.error('[App] Error details:', error?.message, error?.stack);
}
console.log('[App] ========== AUTH0 INITIALIZATION COMPLETE ==========');
});
</script>
<div class="app">
<AppHeader />
<div class="app-content">
<Router {routes} on:routeLoaded={routeLoaded} />
</div>
</div>
<style>
.app {
min-height: 100vh;
display: flex;
flex-direction: column;
}
.app-content {
flex: 1;
position: relative;
}
/* Ensure canvas stays in background */
:global(#gameCanvas) {
position: fixed;
top: 0;
left: 0;
width: 100%;
height: 100%;
z-index: -1;
}
</style>

32
src/components/layouts/AppHeader.svelte Normal file
View File

@ -0,0 +1,32 @@
<script lang="ts">
import { link } from 'svelte-spa-router';
import { authStore } from '../../stores/auth';
import UserProfile from '../auth/UserProfile.svelte';
let visible = false;
// Show header when not in game
$: visible = true; // We'll control visibility via parent component if needed
</script>
{#if visible}
<header class="app-header" id="appHeader">
<div class="header-content">
<div class="header-left">
<h1 class="app-title">Space Combat VR</h1>
</div>
<nav class="header-nav">
<a href="/controls" use:link class="nav-link controls-link">🎮 Customize Controls</a>
<UserProfile />
<a href="/editor" use:link class="nav-link editor-link">📝 Level Editor</a>
<a href="/settings" use:link class="nav-link settings-link">⚙️ Settings</a>
</nav>
</div>
</header>
{/if}
<style>
/* Inherits from global styles.css */
/* .app-header, .header-content, etc. are already defined */
</style>

147
src/components/settings/SettingsScreen.svelte Normal file
View File

@ -0,0 +1,147 @@
<script lang="ts">
import { onMount } from 'svelte';
import { link } from 'svelte-spa-router';
import { gameConfigStore } from '../../stores/gameConfig';
import Button from '../shared/Button.svelte';
import Section from '../shared/Section.svelte';
import FormGroup from '../shared/FormGroup.svelte';
import Checkbox from '../shared/Checkbox.svelte';
import NumberInput from '../shared/NumberInput.svelte';
import InfoBox from '../shared/InfoBox.svelte';
let message = '';
let messageType: 'success' | 'error' | 'warning' = 'success';
let showMessage = false;
// Reload config from localStorage on mount to ensure fresh data
onMount(() => {
const stored = localStorage.getItem('game-config');
if (stored) {
try {
const config = JSON.parse(stored);
gameConfigStore.set(config);
} catch (error) {
console.warn('[SettingsScreen] Failed to reload config:', error);
}
}
});
function handleSave() {
gameConfigStore.save();
message = 'Settings saved successfully! Changes will take effect when you start a new level.';
messageType = 'success';
showMessage = true;
setTimeout(() => { showMessage = false; }, 5000);
}
function handleReset() {
if (confirm('Reset all settings to defaults? This cannot be undone.')) {
gameConfigStore.reset();
message = 'Settings reset to defaults';
messageType = 'success';
showMessage = true;
setTimeout(() => { showMessage = false; }, 5000);
}
}
</script>
<div class="editor-container">
<a href="/" use:link 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 -->
<Section title="⚛️ Physics" description="Disabling physics can significantly improve performance but will prevent gameplay.">
<FormGroup
label="Enable Physics"
helpText="Required for collisions, shooting, and asteroid movement. Disabling this will prevent gameplay but may help with debugging or viewing the scene."
>
<Checkbox bind:checked={$gameConfigStore.physicsEnabled} label="Enable Physics" />
</FormGroup>
</Section>
<!-- Debug Settings -->
<Section title="🐛 Developer" description="Enable debug logging to console for troubleshooting and development.">
<FormGroup
label="Enable Debug Logging"
helpText="When enabled, debug messages will be shown in the browser console. Useful for development and troubleshooting issues."
>
<Checkbox bind:checked={$gameConfigStore.debugEnabled} label="Enable Debug Logging" />
</FormGroup>
</Section>
<!-- Ship Physics Settings -->
<Section title="🚀 Ship Physics" description="Advanced tuning parameters for ship movement and handling. Adjust these to customize how the ship responds to controls.">
<FormGroup
label="Max Linear Velocity"
helpText="Maximum forward/backward speed of the ship. Higher values allow faster movement."
>
<NumberInput
bind:value={$gameConfigStore.shipPhysics.maxLinearVelocity}
min={50}
max={1000}
step={10}
/>
</FormGroup>
<FormGroup
label="Max Angular Velocity"
helpText="Maximum rotation speed of the ship. Higher values allow faster turning."
>
<NumberInput
bind:value={$gameConfigStore.shipPhysics.maxAngularVelocity}
min={0.5}
max={5.0}
step={0.1}
/>
</FormGroup>
<FormGroup
label="Linear Force Multiplier"
helpText="Acceleration power for forward/backward thrust. Higher values = faster acceleration."
>
<NumberInput
bind:value={$gameConfigStore.shipPhysics.linearForceMultiplier}
min={100}
max={3000}
step={50}
/>
</FormGroup>
<FormGroup
label="Angular Force Multiplier"
helpText="Torque power for rotation. Higher values = faster rotational acceleration."
>
<NumberInput
bind:value={$gameConfigStore.shipPhysics.angularForceMultiplier}
min={5}
max={50}
step={1}
/>
</FormGroup>
</Section>
<!-- Storage Info -->
<Section title="💾 Storage Info">
<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>
</Section>
</div>
<div class="button-group">
<Button variant="primary" on:click={handleSave}>💾 Save Settings</Button>
<Button variant="secondary" on:click={handleReset}>🔄 Reset to Defaults</Button>
</div>
<InfoBox {message} type={messageType} visible={showMessage} />
</div>
<style>
/* Inherits from global styles.css */
</style>

21
src/components/shared/Button.svelte Normal file
View File

@ -0,0 +1,21 @@
<script lang="ts">
export let variant: 'primary' | 'secondary' | 'success' | 'danger' = 'primary';
export let disabled = false;
export let type: 'button' | 'submit' | 'reset' = 'button';
const className = `btn-${variant}`;
</script>
<button
class={className}
{disabled}
{type}
on:click
>
<slot />
</button>
<style>
/* Inherits styles from global styles.css */
/* btn-primary, btn-secondary, etc. are already defined */
</style>

26
src/components/shared/Checkbox.svelte Normal file
View File

@ -0,0 +1,26 @@
<script lang="ts">
export let checked: boolean = false;
export let label: string = '';
export let disabled: boolean = false;
export let id: string = '';
</script>
<label class="checkbox-label">
<input
type="checkbox"
bind:checked
{disabled}
{id}
class="settings-checkbox"
on:change
/>
{#if label}
<span>{label}</span>
{/if}
<slot />
</label>
<style>
/* Inherits from global styles.css */
/* .checkbox-label and .settings-checkbox are already defined */
</style>

31
src/components/shared/FormGroup.svelte Normal file
View File

@ -0,0 +1,31 @@
<script lang="ts">
export let label: string = '';
export let helpText: string = '';
export let error: string = '';
export let htmlFor: string = '';
</script>
<div class="form-group">
{#if label}
<label for={htmlFor}>{label}</label>
{/if}
<slot />
{#if helpText && !error}
<div class="help-text">{helpText}</div>
{/if}
{#if error}
<div class="error-text">{error}</div>
{/if}
</div>
<style>
/* Inherits from global styles.css */
.error-text {
color: var(--color-danger, #ff4444);
font-size: var(--font-size-sm, 0.875rem);
margin-top: var(--space-xs, 0.25rem);
}
</style>

44
src/components/shared/InfoBox.svelte Normal file
View File

@ -0,0 +1,44 @@
<script lang="ts">
export let type: 'success' | 'warning' | 'error' | 'info' = 'info';
export let message: string = '';
export let visible: boolean = true;
</script>
{#if visible && message}
<div class="settings-message {type}">
{message}
</div>
{/if}
<style>
/* Inherits from global styles.css */
.settings-message {
padding: var(--space-md, 1rem);
border-radius: var(--border-radius-md, 8px);
margin-top: var(--space-md, 1rem);
}
.settings-message.success {
background: rgba(76, 175, 80, 0.1);
color: var(--color-success, #4caf50);
border: 1px solid var(--color-success, #4caf50);
}
.settings-message.warning {
background: rgba(255, 152, 0, 0.1);
color: #ff9800;
border: 1px solid #ff9800;
}
.settings-message.error {
background: rgba(244, 67, 54, 0.1);
color: var(--color-danger, #f44336);
border: 1px solid var(--color-danger, #f44336);
}
.settings-message.info {
background: rgba(33, 150, 243, 0.1);
color: #2196f3;
border: 1px solid #2196f3;
}
</style>

37
src/components/shared/NumberInput.svelte Normal file
View File

@ -0,0 +1,37 @@
<script lang="ts">
export let value: number = 0;
export let min: number | undefined = undefined;
export let max: number | undefined = undefined;
export let step: number = 1;
export let disabled: boolean = false;
export let id: string = '';
</script>
<input
type="number"
bind:value
{min}
{max}
{step}
{disabled}
{id}
on:input
on:change
/>
<style>
input[type="number"] {
width: 100%;
padding: var(--space-sm, 0.5rem);
border: 1px solid var(--color-border, #ccc);
border-radius: var(--border-radius-sm, 5px);
font-size: var(--font-size-base, 1rem);
background: var(--color-bg-secondary, #fff);
color: var(--color-text, #000);
}
input[type="number"]:disabled {
opacity: 0.5;
cursor: not-allowed;
}
</style>

22
src/components/shared/Section.svelte Normal file
View File

@ -0,0 +1,22 @@
<script lang="ts">
export let title: string = '';
export let description: string = '';
export let icon: string = '';
</script>
<div class="section">
{#if title}
<h2>{icon}{title}</h2>
{/if}
{#if description}
<p class="settings-description">{description}</p>
{/if}
<slot />
</div>
<style>
/* Inherits from global styles.css */
/* .section class is already defined */
</style>

23
src/components/shared/Select.svelte Normal file
View File

@ -0,0 +1,23 @@
<script lang="ts">
export let value: string | number = '';
export let options: Array<{value: string | number, label: string}> = [];
export let disabled: boolean = false;
export let id: string = '';
</script>
<select
{id}
bind:value
{disabled}
class="settings-select"
on:change
>
{#each options as option}
<option value={option.value}>{option.label}</option>
{/each}
</select>
<style>
/* Inherits from global styles.css */
/* .settings-select class is already defined */
</style>

44
src/components/shared/VectorInput.svelte Normal file
View File

@ -0,0 +1,44 @@
<script lang="ts">
import NumberInput from './NumberInput.svelte';
export let x: number = 0;
export let y: number = 0;
export let z: number = 0;
export let step: number = 1;
export let disabled: boolean = false;
</script>
<div class="vector-input">
<div class="vector-field">
<label>X</label>
<NumberInput bind:value={x} {step} {disabled} on:change />
</div>
<div class="vector-field">
<label>Y</label>
<NumberInput bind:value={y} {step} {disabled} on:change />
</div>
<div class="vector-field">
<label>Z</label>
<NumberInput bind:value={z} {step} {disabled} on:change />
</div>
</div>
<style>
.vector-input {
display: grid;
grid-template-columns: repeat(3, 1fr);
gap: var(--space-sm, 0.5rem);
}
.vector-field {
display: flex;
flex-direction: column;
gap: var(--space-xs, 0.25rem);
}
.vector-field label {
font-size: var(--font-size-sm, 0.875rem);
font-weight: 500;
color: var(--color-text-secondary, #666);
}
</style>

5
src/levels/level1.ts
View File

@ -352,7 +352,12 @@ export class Level1 implements Level {
// Initialize mission brief (will be shown when entering XR)
setLoadingMessage("Initializing mission brief...");
console.log('[Level1] ========== ABOUT TO INITIALIZE MISSION BRIEF ==========');
console.log('[Level1] _missionBrief object:', this._missionBrief);
console.log('[Level1] Ship exists:', !!this._ship);
console.log('[Level1] Ship ID in scene:', DefaultScene.MainScene.getNodeById('Ship') !== null);
this._missionBrief.initialize();
console.log('[Level1] ========== MISSION BRIEF INITIALIZATION COMPLETE ==========');
debugLog('Mission brief initialized');
this._initialized = true;

2
src/levels/testLevel.ts
View File

@ -18,7 +18,7 @@ export class TestLevel implements Level {
private _onReadyObservable: Observable<Level> = new Observable<Level>();
private _initialized: boolean = false;
private _audioEngine: AudioEngineV2;
private _boxCreationInterval: NodeJS.Timeout | null = null;
private _boxCreationInterval: number | null = null;
private _totalBoxesCreated: number = 0;
private _boxesPerIteration: number = 1;

96
src/main.ts
View File

@ -35,6 +35,9 @@ import {updateUserProfile} from "./ui/screens/loginScreen";
import {Preloader} from "./ui/screens/preloader";
import {DiscordWidget} from "./ui/widgets/discordWidget";
// Svelte App
import { mount } from 'svelte';
import App from './components/layouts/App.svelte';
import { BrowserAgent } from '@newrelic/browser-agent/loaders/browser-agent'
import { AnalyticsService } from './analytics/analyticsService';
@ -213,23 +216,43 @@ export class Main {
// If we entered XR before level creation, manually setup camera parenting
// (This is needed because onInitialXRPoseSetObservable won't fire if we're already in XR)
console.log('[Main] ========== CHECKING XR STATE ==========');
console.log('[Main] DefaultScene.XR exists:', !!DefaultScene.XR);
console.log('[Main] xrSession exists:', !!xrSession);
if (DefaultScene.XR) {
console.log('[Main] XR base experience state:', DefaultScene.XR.baseExperience.state);
}
if (DefaultScene.XR && xrSession && DefaultScene.XR.baseExperience.state === 2) { // WebXRState.IN_XR = 2
console.log('[Main] ========== XR ALREADY ACTIVE - MANUAL SETUP ==========');
if (ship && ship.transformNode) {
console.log('[Main] Ship and transformNode exist - parenting camera');
debugLog('Manually parenting XR camera to ship transformNode');
DefaultScene.XR.baseExperience.camera.parent = ship.transformNode;
DefaultScene.XR.baseExperience.camera.position = new Vector3(0, 1.5, 0);
console.log('[Main] Camera parented successfully');
console.log('[Main] ========== ABOUT TO SHOW MISSION BRIEF ==========');
console.log('[Main] level1 object:', level1);
console.log('[Main] level1._missionBrief:', (level1 as any)._missionBrief);
console.log('[Main] XR already active - showing mission brief');
// Show mission brief (since onInitialXRPoseSetObservable won't fire)
await level1.showMissionBrief();
console.log('[Main] Mission brief shown, mission brief will call startGameplay() on button click');
console.log('[Main] ========== MISSION BRIEF SHOW() RETURNED ==========');
console.log('[Main] Mission brief will call startGameplay() when trigger is pulled');
// NOTE: Don't start timer/recording here anymore - mission brief will do it
// when the user clicks the START button
} else {
console.error('[Main] !!!!! SHIP OR TRANSFORM NODE NOT FOUND !!!!!');
console.log('[Main] ship exists:', !!ship);
console.log('[Main] ship.transformNode exists:', ship ? !!ship.transformNode : 'N/A');
debugLog('WARNING: Could not parent XR camera - ship or transformNode not found');
}
} else {
console.log('[Main] XR not active yet - will use onInitialXRPoseSetObservable instead');
}
// Hide preloader
@ -239,10 +262,18 @@ export class Main {
}, 500);
// Remove UI
console.log('[Main] ========== ABOUT TO REMOVE MAIN DIV ==========');
console.log('[Main] mainDiv exists:', !!mainDiv);
console.log('[Main] Timestamp:', Date.now());
if (mainDiv) {
mainDiv.remove();
console.log('[Main] mainDiv removed from DOM');
}
// Start the game (XR session already active, or flat mode)
console.log('[Main] About to call this.play()');
await this.play();
console.log('[Main] this.play() completed');
});
// Now initialize the level (after observable is registered)
@ -747,11 +778,36 @@ async function initializeApp() {
await LevelRegistry.getInstance().initialize();
console.log('[Main] LevelRegistry.initialize() completed successfully [AFTER MIGRATION]');
debugLog('[Main] LevelRegistry initialized after migration');
router.start();
// NOTE: Old router disabled - now using svelte-spa-router
// router.start();
// Mount Svelte app
console.log('[Main] Mounting Svelte app [AFTER MIGRATION]');
const appElement = document.getElementById('app');
if (appElement) {
mount(App, {
target: appElement
});
console.log('[Main] Svelte app mounted successfully [AFTER MIGRATION]');
// Create Main instance lazily only if it doesn't exist
if (!DEBUG_CONTROLLERS && !(window as any).__mainInstance) {
debugLog('[Main] Creating Main instance (not initialized) [AFTER MIGRATION]');
const main = new Main();
(window as any).__mainInstance = main;
// Initialize demo mode without engine (just for UI purposes)
const demo = new Demo(main);
}
} else {
console.error('[Main] Failed to mount Svelte app - #app element not found [AFTER MIGRATION]');
}
resolve();
} catch (error) {
console.error('[Main] Failed to initialize LevelRegistry after migration:', error);
router.start(); // Start anyway to show error state
// NOTE: Old router disabled - now using svelte-spa-router
// router.start(); // Start anyway to show error state
resolve();
}
});
@ -777,17 +833,41 @@ async function initializeApp() {
console.log('[Main] To clear caches: window.__levelRegistry.clearAllCaches().then(() => location.reload())');
}
console.log('[Main] About to call router.start()');
router.start();
console.log('[Main] router.start() completed');
// NOTE: Old router disabled - now using svelte-spa-router
// console.log('[Main] About to call router.start()');
// router.start();
// console.log('[Main] router.start() completed');
} catch (error) {
console.error('[Main] !!!!! EXCEPTION in LevelRegistry initialization !!!!!');
console.error('[Main] Failed to initialize LevelRegistry:', error);
console.error('[Main] Error stack:', error?.stack);
router.start(); // Start anyway to show error state
// NOTE: Old router disabled - now using svelte-spa-router
// router.start(); // Start anyway to show error state
}
}
// Mount Svelte app
console.log('[Main] Mounting Svelte app');
const appElement = document.getElementById('app');
if (appElement) {
mount(App, {
target: appElement
});
console.log('[Main] Svelte app mounted successfully');
// Create Main instance lazily only if it doesn't exist
if (!DEBUG_CONTROLLERS && !(window as any).__mainInstance) {
debugLog('[Main] Creating Main instance (not initialized)');
const main = new Main();
(window as any).__mainInstance = main;
// Initialize demo mode without engine (just for UI purposes)
const demo = new Demo(main);
}
} else {
console.error('[Main] Failed to mount Svelte app - #app element not found');
}
console.log('[Main] initializeApp() FINISHED at', new Date().toISOString());
}

48
src/services/authService.ts
View File

@ -26,14 +26,22 @@ export class AuthService {
* Call this early in the application lifecycle
*/
public async initialize(): Promise<void> {
console.log('[AuthService] ========== INITIALIZE CALLED ==========');
const domain = import.meta.env.VITE_AUTH0_DOMAIN;
const clientId = import.meta.env.VITE_AUTH0_CLIENT_ID;
console.log('[AuthService] Config:', {
domain,
clientId: clientId ? clientId.substring(0, 10) + '...' : 'missing',
redirectUri: window.location.origin
});
if (!domain || !clientId || domain.trim() === '') {
console.warn('Auth0 not configured - authentication features will be disabled');
console.warn('[AuthService] Auth0 not configured - authentication features will be disabled');
return;
}
console.log(window.location.origin);
console.log('[AuthService] Creating Auth0 client...');
this._client = await createAuth0Client({
domain,
clientId,
@ -43,33 +51,58 @@ export class AuthService {
cacheLocation: 'localstorage', // Persist tokens across page reloads
useRefreshTokens: true // Enable silent token refresh
});
console.log('[AuthService] Auth0 client created successfully');
// Handle redirect callback after login
if (window.location.search.includes('code=') ||
window.location.search.includes('state=')) {
const hasCallback = window.location.search.includes('code=') ||
window.location.search.includes('state=');
console.log('[AuthService] Checking for Auth0 callback:', hasCallback);
console.log('[AuthService] Current URL:', window.location.href);
if (hasCallback) {
console.log('[AuthService] ========== PROCESSING AUTH0 CALLBACK ==========');
try {
await this._client.handleRedirectCallback();
const result = await this._client.handleRedirectCallback();
console.log('[AuthService] Callback handled successfully:', result);
// Clean up the URL after handling callback
window.history.replaceState({}, document.title, '/');
console.log('[AuthService] URL cleaned, redirected to home');
} catch (error) {
console.error('Error handling redirect callback:', error);
console.error('[AuthService] !!!!! CALLBACK ERROR !!!!!', error);
console.error('[AuthService] Error details:', error?.message, error?.stack);
}
}
// Check if user is authenticated and load user info
console.log('[AuthService] Checking authentication status...');
const isAuth = await this._client.isAuthenticated();
console.log('[AuthService] Is authenticated:', isAuth);
if (isAuth) {
console.log('[AuthService] Loading user info...');
this._user = await this._client.getUser() ?? null;
console.log('[AuthService] User loaded:', {
name: this._user?.name,
email: this._user?.email,
sub: this._user?.sub
});
} else {
console.log('[AuthService] User not authenticated');
}
console.log('[AuthService] ========== INITIALIZATION COMPLETE ==========');
}
/**
* Redirect to Auth0 login page
*/
public async login(): Promise<void> {
console.log('[AuthService] ========== LOGIN CALLED ==========');
if (!this._client) {
console.error('[AuthService] !!!!! CLIENT NOT INITIALIZED !!!!!');
throw new Error('Auth client not initialized. Call initialize() first.');
}
console.log('[AuthService] Redirecting to Auth0 login...');
await this._client.loginWithRedirect();
}
@ -77,10 +110,13 @@ export class AuthService {
* Log out the current user and redirect to home
*/
public async logout(): Promise<void> {
console.log('[AuthService] ========== LOGOUT CALLED ==========');
if (!this._client) {
console.error('[AuthService] !!!!! CLIENT NOT INITIALIZED !!!!!');
throw new Error('Auth client not initialized. Call initialize() first.');
}
this._user = null;
console.log('[AuthService] Logging out and redirecting to:', window.location.origin);
await this._client.logout({
logoutParams: {
returnTo: window.location.origin

2
src/ship/ship.ts
View File

@ -446,7 +446,7 @@ export class Ship {
}
// Check condition 2: Stranded (outside landing zone, no fuel, low velocity)
if (!this._isInLandingZone && fuel < 0.01 && totalVelocity < 1) {
if (!this._isInLandingZone && fuel < 0.01 && totalVelocity < 5) {
debugLog('Game end condition met: Stranded (no fuel, low velocity)');
this._statusScreen.show(true, false); // Game ended, not victory
this._keyboardInput?.setEnabled(false);

54
src/stores/auth.ts Normal file
View File

@ -0,0 +1,54 @@
import { writable } from 'svelte/store';
import { AuthService } from '../services/authService';
export interface AuthState {
isAuthenticated: boolean;
user: any | null;
isLoading: boolean;
}
function createAuthStore() {
const authService = AuthService.getInstance();
const initial: AuthState = {
isAuthenticated: false,
user: null,
isLoading: true,
};
const { subscribe, set, update } = writable<AuthState>(initial);
console.log('[AuthStore] Store created with initial state:', initial);
// Initialize auth state - will be properly initialized after AuthService.initialize() is called
(async () => {
console.log('[AuthStore] Checking initial auth state...');
const isAuth = await authService.isAuthenticated();
const user = authService.getUser();
console.log('[AuthStore] Initial auth check:', { isAuth, user: user?.name || user?.email || null });
set({ isAuthenticated: isAuth, user, isLoading: false });
})();
return {
subscribe,
login: async () => {
console.log('[AuthStore] login() called');
await authService.login();
// After redirect, page will reload and auth state will be refreshed
},
logout: async () => {
console.log('[AuthStore] logout() called');
await authService.logout();
// After logout redirect, page will reload
},
refresh: async () => {
console.log('[AuthStore] refresh() called');
const isAuth = await authService.isAuthenticated();
const user = authService.getUser();
console.log('[AuthStore] Refreshed auth state:', { isAuth, user: user?.name || user?.email || null });
update(state => ({ ...state, isAuthenticated: isAuth, user }));
},
};
}
export const authStore = createAuthStore();

38
src/stores/controllerMapping.ts Normal file
View File

@ -0,0 +1,38 @@
import { writable, get } from 'svelte/store';
import type { ControllerMapping } from '../ship/input/controllerMapping';
import { ControllerMappingConfig } from '../ship/input/controllerMapping';
const STORAGE_KEY = 'space-game-controller-mapping';
function createControllerMappingStore() {
const config = ControllerMappingConfig.getInstance();
const initial = config.getMapping();
const { subscribe, set, update } = writable<ControllerMapping>(initial);
return {
subscribe,
update,
set: (value: ControllerMapping) => {
set(value);
config.setMapping(value);
},
save: () => {
const mapping = get(controllerMappingStore);
config.setMapping(mapping);
config.save();
console.log('[ControllerMapping Store] Saved');
},
reset: () => {
config.resetToDefault();
config.save();
set(config.getMapping());
console.log('[ControllerMapping Store] Reset to defaults');
},
validate: () => {
return config.validate();
},
};
}
export const controllerMappingStore = createControllerMappingStore();

71
src/stores/gameConfig.ts Normal file
View File

@ -0,0 +1,71 @@
import { writable, get } from 'svelte/store';
const STORAGE_KEY = 'game-config';
export interface GameConfigData {
physicsEnabled: boolean;
debugEnabled: boolean;
progressionEnabled: boolean;
shipPhysics: {
maxLinearVelocity: number;
maxAngularVelocity: number;
linearForceMultiplier: number;
angularForceMultiplier: number;
};
}
const defaultConfig: GameConfigData = {
physicsEnabled: true,
debugEnabled: false,
progressionEnabled: true,
shipPhysics: {
maxLinearVelocity: 200,
maxAngularVelocity: 1.4,
linearForceMultiplier: 800,
angularForceMultiplier: 15,
},
};
function loadFromStorage(): GameConfigData {
try {
const stored = localStorage.getItem(STORAGE_KEY);
if (stored) {
const parsed = JSON.parse(stored);
return { ...defaultConfig, ...parsed };
}
} catch (error) {
console.warn('[GameConfig Store] Failed to load from localStorage:', error);
}
return { ...defaultConfig };
}
function createGameConfigStore() {
const initial = loadFromStorage();
const { subscribe, set, update } = writable<GameConfigData>(initial);
return {
subscribe,
update,
set,
save: () => {
const config = get(gameConfigStore);
try {
localStorage.setItem(STORAGE_KEY, JSON.stringify(config));
console.log('[GameConfig Store] Saved to localStorage');
} catch (error) {
console.error('[GameConfig Store] Failed to save:', error);
}
},
reset: () => {
set({ ...defaultConfig });
try {
localStorage.setItem(STORAGE_KEY, JSON.stringify(defaultConfig));
console.log('[GameConfig Store] Reset to defaults');
} catch (error) {
console.error('[GameConfig Store] Failed to save defaults:', error);
}
},
};
}
export const gameConfigStore = createGameConfigStore();

59
src/stores/levelRegistry.ts Normal file
View File

@ -0,0 +1,59 @@
import { writable, get } from 'svelte/store';
import { LevelRegistry, type LevelDirectoryEntry } from '../levels/storage/levelRegistry';
import type { LevelConfig } from '../levels/config/levelConfig';
export interface LevelRegistryState {
isInitialized: boolean;
defaultLevels: Map<string, { config: LevelConfig | null; directoryEntry: LevelDirectoryEntry; isDefault: boolean }>;
customLevels: Map<string, { config: LevelConfig | null; directoryEntry: LevelDirectoryEntry; isDefault: boolean }>;
}
function createLevelRegistryStore() {
const registry = LevelRegistry.getInstance();
const initial: LevelRegistryState = {
isInitialized: false,
defaultLevels: new Map(),
customLevels: new Map(),
};
const { subscribe, set, update } = writable<LevelRegistryState>(initial);
// Initialize registry
(async () => {
await registry.initialize();
update(state => ({
...state,
isInitialized: true,
defaultLevels: registry.getDefaultLevels(),
customLevels: registry.getCustomLevels(),
}));
})();
return {
subscribe,
getLevel: async (levelId: string): Promise<LevelConfig | null> => {
return await registry.getLevel(levelId);
},
refresh: async () => {
await registry.initialize();
update(state => ({
...state,
defaultLevels: registry.getDefaultLevels(),
customLevels: registry.getCustomLevels(),
}));
},
deleteCustomLevel: (levelId: string): boolean => {
const success = registry.deleteCustomLevel(levelId);
if (success) {
update(state => ({
...state,
customLevels: registry.getCustomLevels(),
}));
}
return success;
},
};
}
export const levelRegistryStore = createLevelRegistryStore();

29
src/stores/navigation.ts Normal file
View File

@ -0,0 +1,29 @@
import { writable } from 'svelte/store';
export interface NavigationState {
currentRoute: string;
isLoading: boolean;
loadingMessage: string;
}
function createNavigationStore() {
const initial: NavigationState = {
currentRoute: '/',
isLoading: false,
loadingMessage: '',
};
const { subscribe, set, update } = writable<NavigationState>(initial);
return {
subscribe,
setRoute: (route: string) => {
update(state => ({ ...state, currentRoute: route }));
},
setLoading: (isLoading: boolean, message: string = '') => {
update(state => ({ ...state, isLoading, loadingMessage: message }));
},
};
}
export const navigationStore = createNavigationStore();

127
src/stores/progression.ts Normal file
View File

@ -0,0 +1,127 @@
import { writable, get } from 'svelte/store';
import { ProgressionManager, type LevelProgress } from '../game/progression';
import { gameConfigStore } from './gameConfig';
interface ProgressionState {
completedLevels: Map<string, LevelProgress>;
editorUnlocked: boolean;
completedCount: number;
totalLevels: number;
completionPercentage: number;
}
function createProgressionStore() {
const progression = ProgressionManager.getInstance();
// Create initial state from progression manager
const initialState: ProgressionState = {
completedLevels: new Map(),
editorUnlocked: progression.isEditorUnlocked(),
completedCount: progression.getCompletedCount(),
totalLevels: progression.getTotalDefaultLevels(),
completionPercentage: progression.getCompletionPercentage(),
};
const { subscribe, set, update } = writable<ProgressionState>(initialState);
return {
subscribe,
/**
* Check if a level is unlocked and can be played
* @param levelName - The name of the level (e.g., "Rookie Training")
* @param isDefault - Whether this is a default level (not custom)
* @returns true if the level is unlocked
*/
isLevelUnlocked: (levelName: string, isDefault: boolean): boolean => {
const config = get(gameConfigStore);
// If progression is disabled, all levels are unlocked
if (!config.progressionEnabled) {
return true;
}
// Custom levels are always unlocked
if (!isDefault) {
return true;
}
// Check with progression manager
return progression.isLevelUnlocked(levelName);
},
/**
* Check if a level has been completed
*/
isLevelComplete: (levelName: string): boolean => {
return progression.isLevelComplete(levelName);
},
/**
* Mark a level as completed
*/
markLevelComplete: (levelName: string, stats?: { completionTime?: number; accuracy?: number }) => {
progression.markLevelComplete(levelName, stats);
// Update store state
update(state => ({
...state,
completedLevels: new Map(), // Could be populated if needed
editorUnlocked: progression.isEditorUnlocked(),
completedCount: progression.getCompletedCount(),
totalLevels: progression.getTotalDefaultLevels(),
completionPercentage: progression.getCompletionPercentage(),
}));
},
/**
* Get the previous level name (for lock messages)
*/
getPreviousLevelName: (levelName: string): string | null => {
const defaultLevels = [
'Rookie Training',
'Rescue Mission',
'Deep Space Patrol',
'Enemy Territory',
'The Gauntlet',
'Final Challenge'
];
const levelIndex = defaultLevels.indexOf(levelName);
if (levelIndex > 0) {
return defaultLevels[levelIndex - 1];
}
return null;
},
/**
* Check if this is the tutorial level
*/
isTutorial: (levelName: string): boolean => {
return levelName === 'Rookie Training';
},
/**
* Get next level to play
*/
getNextLevel: (): string | null => {
return progression.getNextLevel();
},
/**
* Reset all progression
*/
reset: () => {
progression.reset();
update(state => ({
...state,
completedLevels: new Map(),
editorUnlocked: false,
completedCount: 0,
completionPercentage: 0,
}));
},
};
}
export const progressionStore = createProgressionStore();

46
src/ui/hud/missionBrief.ts
View File

@ -26,16 +26,35 @@ export class MissionBrief {
* Initialize the mission brief as a fullscreen overlay
*/
public initialize(): void {
console.log('[MissionBrief] ========== INITIALIZE CALLED ==========');
const scene = DefaultScene.MainScene;
console.log('[MissionBrief] Scene exists:', !!scene);
try {
console.log('[MissionBrief] Initializing as fullscreen overlay');
const mesh = MeshBuilder.CreatePlane('brief', {size: 2});
console.log('[MissionBrief] Mesh created:', mesh.name, 'ID:', mesh.id);
const ship = scene.getNodeById('Ship');
console.log('[MissionBrief] Ship node found:', !!ship);
if (!ship) {
console.error('[MissionBrief] ERROR: Ship node not found! Cannot parent mission brief mesh.');
return;
}
mesh.parent = ship;
mesh.position = new Vector3(0,1,2.8);
console.log('[MissionBrief] Mesh parented to ship at position:', mesh.position);
console.log('[MissionBrief] Mesh absolute position:', mesh.getAbsolutePosition());
console.log('[MissionBrief] Mesh scaling:', mesh.scaling);
console.log('[MissionBrief] Mesh isEnabled:', mesh.isEnabled());
console.log('[MissionBrief] Mesh isVisible:', mesh.isVisible);
// Create fullscreen advanced texture (not attached to mesh)
this._advancedTexture = AdvancedDynamicTexture.CreateForMesh(mesh);
console.log('[MissionBrief] AdvancedDynamicTexture created for mesh');
console.log('[MissionBrief] Texture dimensions:', this._advancedTexture.getSize());
console.log('[MissionBrief] Fullscreen UI created');
@ -50,11 +69,17 @@ export class MissionBrief {
this._container.horizontalAlignment = Control.HORIZONTAL_ALIGNMENT_CENTER;
this._container.verticalAlignment = Control.VERTICAL_ALIGNMENT_CENTER;
this._advancedTexture.addControl(this._container);
console.log('[MissionBrief] Container created and added to texture');
// Initially hidden
this._container.isVisible = false;
console.log('[MissionBrief] Container initially hidden');
console.log('[MissionBrief] Fullscreen overlay initialized');
console.log('[MissionBrief] ========== INITIALIZATION COMPLETE ==========');
} catch (error) {
console.error('[MissionBrief] !!!!! INITIALIZATION FAILED !!!!!', error);
console.error('[MissionBrief] Error stack:', error?.stack);
}
}
/**
@ -65,12 +90,18 @@ export class MissionBrief {
* @param onStart - Callback when start button is pressed
*/
public show(levelConfig: LevelConfig, directoryEntry: LevelDirectoryEntry | null, triggerObservable: Observable<void>, onStart: () => void): void {
console.log('[MissionBrief] ========== SHOW() CALLED ==========');
console.log('[MissionBrief] Container exists:', !!this._container);
console.log('[MissionBrief] AdvancedTexture exists:', !!this._advancedTexture);
if (!this._container || !this._advancedTexture) {
debugLog('[MissionBrief] Cannot show - not initialized');
console.error('[MissionBrief] !!!!! CANNOT SHOW - NOT INITIALIZED !!!!!');
console.error('[MissionBrief] Container:', this._container);
console.error('[MissionBrief] AdvancedTexture:', this._advancedTexture);
return;
}
debugLog('[MissionBrief] Showing with config:', {
console.log('[MissionBrief] Showing with config:', {
difficulty: levelConfig.difficulty,
description: levelConfig.metadata?.description,
asteroidCount: levelConfig.asteroids?.length,
@ -183,7 +214,12 @@ export class MissionBrief {
this._container.isVisible = true;
this._isVisible = true;
debugLog('[MissionBrief] Mission brief displayed');
console.log('[MissionBrief] ========== CONTAINER NOW VISIBLE ==========');
console.log('[MissionBrief] Container.isVisible:', this._container.isVisible);
console.log('[MissionBrief] _isVisible flag:', this._isVisible);
console.log('[MissionBrief] Container children count:', this._container.children.length);
console.log('[MissionBrief] AdvancedTexture control count:', this._advancedTexture.rootContainer.children.length);
console.log('[MissionBrief] ========== MISSION BRIEF DISPLAY COMPLETE ==========');
}
/**

301
src/utils/blenderExporter.ts
View File

@ -1,301 +0,0 @@
import { spawn } from 'child_process';
import { platform } from 'os';
import { existsSync, watch } from 'fs';
import path from 'path';
/**
* Configuration options for Blender export
*/
export interface BlenderExportOptions {
/**
* Custom path to Blender executable (optional)
* If not provided, will use default paths for the current platform
*/
blenderPath?: string;
/**
* Additional glTF export parameters
* See: https://docs.blender.org/api/current/bpy.ops.export_scene.html#bpy.ops.export_scene.gltf
*/
exportParams?: {
export_format?: 'GLB' | 'GLTF_SEPARATE' | 'GLTF_EMBEDDED';
export_draco_mesh_compression_enable?: boolean;
export_texture_dir?: string;
export_apply_modifiers?: boolean;
export_yup?: boolean;
export_animations?: boolean;
export_materials?: 'EXPORT' | 'PLACEHOLDER' | 'NONE';
[key: string]: any;
};
/**
* Timeout in milliseconds (default: 60000 = 1 minute)
*/
timeout?: number;
}
/**
* Result of a Blender export operation
*/
export interface BlenderExportResult {
success: boolean;
outputPath: string;
stdout: string;
stderr: string;
duration: number; // milliseconds
}
/**
* Get the default Blender executable path for the current platform
*/
function getDefaultBlenderPath(): string {
const os = platform();
switch (os) {
case 'darwin': // macOS
return '/Applications/Blender.app/Contents/MacOS/Blender';
case 'win32': // Windows
// Try common installation paths
const windowsPaths = [
'C:\\Program Files\\Blender Foundation\\Blender 4.2\\blender.exe',
'C:\\Program Files\\Blender Foundation\\Blender 4.1\\blender.exe',
'C:\\Program Files\\Blender Foundation\\Blender 4.0\\blender.exe',
'C:\\Program Files\\Blender Foundation\\Blender 3.6\\blender.exe',
'C:\\Program Files\\Blender Foundation\\Blender\\blender.exe',
];
for (const p of windowsPaths) {
if (existsSync(p)) return p;
}
return 'blender'; // Fall back to PATH
case 'linux':
return 'blender'; // Assume it's in PATH
default:
return 'blender';
}
}
/**
* Build the Python expression for glTF export
*/
function buildPythonExpr(outputPath: string, options?: BlenderExportOptions['exportParams']): string {
const params: string[] = [`filepath='${outputPath.replace(/\\/g, '/')}'`];
if (options) {
for (const [key, value] of Object.entries(options)) {
if (typeof value === 'boolean') {
params.push(`${key}=${value ? 'True' : 'False'}`);
} else if (typeof value === 'string') {
params.push(`${key}='${value}'`);
} else if (typeof value === 'number') {
params.push(`${key}=${value}`);
}
}
}
return `import bpy; bpy.ops.export_scene.gltf(${params.join(', ')})`;
}
/**
* Export a Blender file to GLB format using Blender's command-line interface
*
* @param blendFilePath - Path to the input .blend file
* @param outputPath - Path for the output .glb file
* @param options - Optional configuration for the export
* @returns Promise that resolves with export result
*
* @example
* ```typescript
* // Basic usage
* await exportBlendToGLB('./models/ship.blend', './public/ship.glb');
*
* // With options
* await exportBlendToGLB('./models/asteroid.blend', './public/asteroid.glb', {
* exportParams: {
* export_draco_mesh_compression_enable: true,
* export_apply_modifiers: true
* }
* });
*
* // With custom Blender path
* await exportBlendToGLB('./model.blend', './output.glb', {
* blenderPath: '/custom/path/to/blender'
* });
* ```
*/
export async function exportBlendToGLB(
blendFilePath: string,
outputPath: string,
options?: BlenderExportOptions
): Promise<BlenderExportResult> {
const startTime = Date.now();
// Validate input file exists
if (!existsSync(blendFilePath)) {
throw new Error(`Input blend file not found: ${blendFilePath}`);
}
// Ensure output directory exists
const outputDir = path.dirname(outputPath);
if (!existsSync(outputDir)) {
throw new Error(`Output directory does not exist: ${outputDir}`);
}
// Get Blender executable path
const blenderPath = options?.blenderPath || getDefaultBlenderPath();
// Verify Blender exists
if (blenderPath !== 'blender' && !existsSync(blenderPath)) {
throw new Error(`Blender executable not found at: ${blenderPath}`);
}
// Build Python expression
const pythonExpr = buildPythonExpr(outputPath, options?.exportParams);
// Build command arguments
const args = [
'-b', // Background mode (no UI)
blendFilePath, // Input file
'--python-expr', // Execute Python expression
pythonExpr // The export command
];
console.log(`[BlenderExporter] Running: ${blenderPath} ${args.join(' ')}`);
return new Promise((resolve, reject) => {
let stdout = '';
let stderr = '';
const process = spawn(blenderPath, args, {
shell: false,
windowsHide: true
});
// Set timeout
const timeout = options?.timeout || 60000;
const timeoutId = setTimeout(() => {
process.kill();
reject(new Error(`Blender export timed out after ${timeout}ms`));
}, timeout);
process.stdout.on('data', (data) => {
stdout += data.toString();
});
process.stderr.on('data', (data) => {
stderr += data.toString();
});
process.on('error', (error) => {
clearTimeout(timeoutId);
reject(new Error(`Failed to spawn Blender process: ${error.message}`));
});
process.on('close', (code) => {
clearTimeout(timeoutId);
const duration = Date.now() - startTime;
if (code === 0) {
// Check if output file was created
if (existsSync(outputPath)) {
console.log(`[BlenderExporter] Successfully exported to ${outputPath} in ${duration}ms`);
resolve({
success: true,
outputPath,
stdout,
stderr,
duration
});
} else {
reject(new Error(`Blender exited successfully but output file was not created: ${outputPath}`));
}
} else {
const error = new Error(
`Blender export failed with exit code ${code}\n` +
`STDERR: ${stderr}\n` +
`STDOUT: ${stdout}`
);
reject(error);
}
});
});
}
/**
* Batch export multiple Blender files to GLB
*
* @param exports - Array of [inputPath, outputPath] tuples
* @param options - Optional configuration for all exports
* @param sequential - If true, run exports one at a time (default: false for parallel)
* @returns Promise that resolves with array of results
*
* @example
* ```typescript
* const results = await batchExportBlendToGLB([
* ['./ship1.blend', './public/ship1.glb'],
* ['./ship2.blend', './public/ship2.glb'],
* ['./asteroid.blend', './public/asteroid.glb']
* ], {
* exportParams: { export_draco_mesh_compression_enable: true }
* });
* ```
*/
export async function batchExportBlendToGLB(
exports: Array<[string, string]>,
options?: BlenderExportOptions,
sequential: boolean = false
): Promise<BlenderExportResult[]> {
if (sequential) {
const results: BlenderExportResult[] = [];
for (const [input, output] of exports) {
const result = await exportBlendToGLB(input, output, options);
results.push(result);
}
return results;
} else {
return Promise.all(
exports.map(([input, output]) => exportBlendToGLB(input, output, options))
);
}
}
/**
* Watch a Blender file and auto-export on changes
* (Requires fs.watch - Node.js only, not for browser)
*
* @param blendFilePath - Path to watch
* @param outputPath - Output GLB path
* @param options - Export options
* @returns Function to stop watching
*/
export function watchAndExport(
blendFilePath: string,
outputPath: string,
options?: BlenderExportOptions
): () => void {
console.log(`[BlenderExporter] Watching ${blendFilePath} for changes...`);
let debounceTimer: NodeJS.Timeout | null = null;
const watcher = watch(blendFilePath, (eventType: string) => {
if (eventType === 'change') {
// Debounce: wait 1 second after last change
if (debounceTimer) clearTimeout(debounceTimer);
debounceTimer = setTimeout(async () => {
console.log(`[BlenderExporter] Detected change in ${blendFilePath}, exporting...`);
try {
await exportBlendToGLB(blendFilePath, outputPath, options);
} catch (error) {
console.error(`[BlenderExporter] Export failed:`, error);
}
}, 1000);
}
});
// Return cleanup function
return () => {
if (debounceTimer) clearTimeout(debounceTimer);
watcher.close();
console.log(`[BlenderExporter] Stopped watching ${blendFilePath}`);
};
}

11
svelte.config.js Normal file
View File

@ -0,0 +1,11 @@
import { vitePreprocess } from '@sveltejs/vite-plugin-svelte';
export default {
// Preprocess TypeScript and other syntax
preprocess: vitePreprocess(),
compilerOptions: {
// Enable HMR in development
hmr: true,
}
};

BIN
themes/default/base2.blend
View File

Binary file not shown.

11
tsconfig.json
View File

@ -1,6 +1,6 @@
{
"compilerOptions": {
"target": "es6",
"target": "es2023",
"outDir": "./dist",
// choose our ECMA/JavaScript version (all modern browsers support ES6 so it's your best bet)
"allowSyntheticDefaultImports": true,
@ -8,7 +8,7 @@
// choose our default ECMA/libraries to import
"dom",
// mandatory for all browser-based apps
"es6"
"es2023"
// mandatory for targeting ES6
],
"useDefineForClassFields": true,
@ -33,12 +33,17 @@
// raises an error for unused parameters
"noImplicitReturns": true,
// raises an error for functions that return nothing
"skipLibCheck": true
"skipLibCheck": true,
// skip type-checking of .d.ts files (it speeds up transpiling)
"types": ["svelte"]
// add Svelte type definitions
},
"include": [
"src",
"server"
],
// specify location(s) of .ts files
"exclude": [
"node_modules"
]
}

5
vite.config.ts
View File

@ -1,7 +1,9 @@
import {defineConfig} from "vite";
import { svelte } from '@sveltejs/vite-plugin-svelte';
/** @type {import('vite').UserConfig} */
export default defineConfig({
plugins: [svelte()],
test: {},
define: {},
build: {
@ -10,7 +12,8 @@ export default defineConfig({
output: {
manualChunks: {
'babylon': ['@babylonjs/core'],
'babylon-procedural': ['@babylonjs/procedural-textures']
'babylon-procedural': ['@babylonjs/procedural-textures'],
'babylon-inspector': ['@babylonjs/inspector'],
}
}
}