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

Add centralized debug logging system with settings UI control
All checks were successful
Build / build (push) Successful in 1m16s
Details

Browse Source 
- Create debugLog wrapper function in src/debug.ts
- Add debug checkbox to settings screen UI
- Replace all console.log statements with debugLog calls (153 replacements)
- Add debug flag to GameConfig with localStorage persistence
- Fix GameConfig to properly load and reset debug setting
- Preserve console.error and console.warn calls unchanged
- Add Developer section to settings screen with debug toggle
- Enable/disable all debug logging via settings UI checkbox

Debug logging can now be controlled from Settings > Developer section,
reducing console noise in production while maintaining full debugging
capability during development.

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

Co-Authored-By: Claude <noreply@anthropic.com>
This commit is contained in:
Michael Mainguy 2025-10-31 14:44:09 -05:00
parent c21bd93c72
commit b4608e10d8
18 changed files with 217 additions and 185 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

24
index.html
View File

@ -366,6 +366,30 @@
</div> </div>
</div> </div>
<!-- Debug Settings -->
<div class="section">
<h2>🐛 Developer</h2>
<p style="color: #aaa; font-size: 0.9em; margin-bottom: 20px;">
Enable debug logging to console for troubleshooting and development.
</p>
<div class="form-group">
<label style="display: flex; align-items: center; cursor: pointer; user-select: none;">
<input type="checkbox" id="debugEnabled" style="
width: 20px;
height: 20px;
margin-right: 10px;
cursor: pointer;
accent-color: #2196F3;
">
<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>
<!-- Info Section --> <!-- Info Section -->
<div class="section"> <div class="section">
<h2>ℹ️ Quality Level Guide</h2> <h2>ℹ️ Quality Level Guide</h2>

3
src/backgroundStars.ts
View File

@ -1,4 +1,5 @@
import {Color3, Color4, PointsCloudSystem, Scene, StandardMaterial, Vector3} from "@babylonjs/core"; import {Color3, Color4, PointsCloudSystem, Scene, StandardMaterial, Vector3} from "@babylonjs/core";
import debugLog from './debug';
/** /**
* Configuration options for background stars * Configuration options for background stars
@ -108,7 +109,7 @@ export class BackgroundStars {
// Make stars always render behind everything else // Make stars always render behind everything else
mesh.isPickable = false; mesh.isPickable = false;
console.log(`Created ${this.config.count} background stars`); debugLog(`Created ${this.config.count} background stars`);
} }
}); });
} }

49
src/controllerDebug.ts
View File

@ -7,6 +7,7 @@ import {
WebXRDefaultExperience, WebXRDefaultExperience,
Color3 Color3
} from "@babylonjs/core"; } from "@babylonjs/core";
import debugLog from './debug';
/** /**
* Minimal standalone class to debug WebXR controller detection * Minimal standalone class to debug WebXR controller detection
@ -17,7 +18,7 @@ export class ControllerDebug {
private scene: Scene; private scene: Scene;
constructor() { constructor() {
console.log('🔍 ControllerDebug: Starting minimal test...'); debugLog('🔍 ControllerDebug: Starting minimal test...');
this.init(); this.init();
} }
@ -26,11 +27,11 @@ export class ControllerDebug {
const canvas = document.querySelector('#gameCanvas') as HTMLCanvasElement; const canvas = document.querySelector('#gameCanvas') as HTMLCanvasElement;
// Create engine (no antialiasing for Quest compatibility) // Create engine (no antialiasing for Quest compatibility)
console.log('🔍 Creating engine...'); debugLog('🔍 Creating engine...');
this.engine = new Engine(canvas, false); this.engine = new Engine(canvas, false);
// Create scene // Create scene
console.log('🔍 Creating scene...'); debugLog('🔍 Creating scene...');
this.scene = new Scene(this.engine); this.scene = new Scene(this.engine);
this.scene.clearColor = new Color3(0.1, 0.1, 0.2).toColor4(); this.scene.clearColor = new Color3(0.1, 0.1, 0.2).toColor4();
@ -50,24 +51,24 @@ export class ControllerDebug {
disableHandTracking: true disableHandTracking: true
}); });
console.log('🔍 WebXR created successfully'); debugLog('🔍 WebXR created successfully');
console.log('🔍 XR input exists:', !!xr.input); debugLog('🔍 XR input exists:', !!xr.input);
console.log('🔍 XR input controllers:', xr.input.controllers.length); debugLog('🔍 XR input controllers:', xr.input.controllers.length);
// Set up controller observable // Set up controller observable
console.log('🔍 Setting up onControllerAddedObservable...'); debugLog('🔍 Setting up onControllerAddedObservable...');
xr.input.onControllerAddedObservable.add((controller) => { xr.input.onControllerAddedObservable.add((controller) => {
console.log('✅ CONTROLLER ADDED! Handedness:', controller.inputSource.handedness); debugLog('✅ CONTROLLER ADDED! Handedness:', controller.inputSource.handedness);
console.log(' - Input source:', controller.inputSource); debugLog(' - Input source:', controller.inputSource);
console.log(' - Has motion controller:', !!controller.motionController); debugLog(' - Has motion controller:', !!controller.motionController);
// Wait for motion controller // Wait for motion controller
controller.onMotionControllerInitObservable.add((motionController) => { controller.onMotionControllerInitObservable.add((motionController) => {
console.log('✅ MOTION CONTROLLER INITIALIZED:', motionController.handness); debugLog('✅ MOTION CONTROLLER INITIALIZED:', motionController.handness);
console.log(' - Profile:', motionController.profileId); debugLog(' - Profile:', motionController.profileId);
console.log(' - Components:', Object.keys(motionController.components)); debugLog(' - Components:', Object.keys(motionController.components));
// Log when any component changes // Log when any component changes
Object.keys(motionController.components).forEach(componentId => { Object.keys(motionController.components).forEach(componentId => {
@ -75,13 +76,13 @@ export class ControllerDebug {
if (component.onAxisValueChangedObservable) { if (component.onAxisValueChangedObservable) {
component.onAxisValueChangedObservable.add((axes) => { component.onAxisValueChangedObservable.add((axes) => {
console.log(`📍 ${motionController.handness} ${componentId} axes:`, axes); debugLog(`📍 ${motionController.handness} ${componentId} axes:`, axes);
}); });
} }
if (component.onButtonStateChangedObservable) { if (component.onButtonStateChangedObservable) {
component.onButtonStateChangedObservable.add((state) => { component.onButtonStateChangedObservable.add((state) => {
console.log(`🔘 ${motionController.handness} ${componentId} button:`, { debugLog(`🔘 ${motionController.handness} ${componentId} button:`, {
pressed: state.pressed, pressed: state.pressed,
touched: state.touched, touched: state.touched,
value: state.value value: state.value
@ -92,7 +93,7 @@ export class ControllerDebug {
}); });
}); });
console.log('🔍 Observable registered. Waiting for controllers...'); debugLog('🔍 Observable registered. Waiting for controllers...');
// Render loop // Render loop
this.engine.runRenderLoop(() => { this.engine.runRenderLoop(() => {
@ -122,7 +123,7 @@ export class ControllerDebug {
`; `;
button.onclick = async () => { button.onclick = async () => {
console.log('🔍 Button clicked - Entering VR mode...'); debugLog('🔍 Button clicked - Entering VR mode...');
button.remove(); button.remove();
try { try {
@ -130,23 +131,23 @@ export class ControllerDebug {
requiredFeatures: ['local-floor'], requiredFeatures: ['local-floor'],
}); });
console.log(xr.baseExperience.featuresManager.getEnabledFeatures()); debugLog(xr.baseExperience.featuresManager.getEnabledFeatures());
//await xr.baseExperience.exitXRAsync(); //await xr.baseExperience.exitXRAsync();
//await xr.baseExperience.enterXRAsync('immersive-vr', 'local-floor'); //await xr.baseExperience.enterXRAsync('immersive-vr', 'local-floor');
console.log('🔍 ✅ Entered VR mode successfully'); debugLog('🔍 ✅ Entered VR mode successfully');
console.log('🔍 Controllers after entering VR:', xr.input.controllers.length); debugLog('🔍 Controllers after entering VR:', xr.input.controllers.length);
// Check again after delays // Check again after delays
setTimeout(() => { setTimeout(() => {
console.log('🔍 [+1s after VR] Controller count:', xr.input.controllers.length); debugLog('🔍 [+1s after VR] Controller count:', xr.input.controllers.length);
}, 1000); }, 1000);
setTimeout(() => { setTimeout(() => {
console.log('🔍 [+3s after VR] Controller count:', xr.input.controllers.length); debugLog('🔍 [+3s after VR] Controller count:', xr.input.controllers.length);
}, 3000); }, 3000);
setTimeout(() => { setTimeout(() => {
console.log('🔍 [+5s after VR] Controller count:', xr.input.controllers.length); debugLog('🔍 [+5s after VR] Controller count:', xr.input.controllers.length);
}, 5000); }, 5000);
} catch (error) { } catch (error) {
console.error('🔍 ❌ Failed to enter VR:', error); console.error('🔍 ❌ Failed to enter VR:', error);
@ -154,6 +155,6 @@ export class ControllerDebug {
}; };
document.body.appendChild(button); document.body.appendChild(button);
console.log('🔍 Click the button to enter VR mode'); debugLog('🔍 Click the button to enter VR mode');
} }
} }

5
src/createPlanets.ts
View File

@ -7,6 +7,7 @@ import {
} from "@babylonjs/core"; } from "@babylonjs/core";
import { DefaultScene } from "./defaultScene"; import { DefaultScene } from "./defaultScene";
import { getRandomPlanetTexture } from "./planetTextures"; import { getRandomPlanetTexture } from "./planetTextures";
import debugLog from './debug';
/** /**
* Creates multiple planets with random textures, sizes, and positions * Creates multiple planets with random textures, sizes, and positions
@ -66,7 +67,7 @@ export function createPlanets(
planets.push(planet); planets.push(planet);
} }
console.log(`Created ${count} planets with diameters ${minDiameter}-${maxDiameter} at distances ${minDistance}-${maxDistance}`); debugLog(`Created ${count} planets with diameters ${minDiameter}-${maxDiameter} at distances ${minDistance}-${maxDistance}`);
return planets; return planets;
} }
@ -128,6 +129,6 @@ export function createPlanetsOrbital(
planets.push(planet); planets.push(planet);
} }
console.log(`Created ${count} planets in orbital pattern with diameters ${minDiameter}-${maxDiameter} at distances ${minDistance}-${maxDistance}`); debugLog(`Created ${count} planets in orbital pattern with diameters ${minDiameter}-${maxDiameter} at distances ${minDistance}-${maxDistance}`);
return planets; return planets;
} }

9
src/debug.ts Normal file
View File

@ -0,0 +1,9 @@
import {GameConfig} from "./gameConfig";
const config = GameConfig.getInstance();
export default function debugLog(...params: any[]) {
if (config.debug) {
console.log(...params);
}
}

51
src/explosionManager.ts
View File

@ -8,6 +8,7 @@ import {
VertexData VertexData
} from "@babylonjs/core"; } from "@babylonjs/core";
import {DefaultScene} from "./defaultScene"; import {DefaultScene} from "./defaultScene";
import debugLog from './debug';
/** /**
* Configuration for explosion effects * Configuration for explosion effects
@ -44,7 +45,7 @@ export class ExplosionManager {
* Initialize the explosion manager (no longer needed for MeshExploder, but kept for API compatibility) * Initialize the explosion manager (no longer needed for MeshExploder, but kept for API compatibility)
*/ */
public async initialize(): Promise<void> { public async initialize(): Promise<void> {
console.log("ExplosionManager initialized with MeshExploder"); debugLog("ExplosionManager initialized with MeshExploder");
} }
/** /**
@ -55,8 +56,8 @@ export class ExplosionManager {
* @returns Array of sphere mesh objects * @returns Array of sphere mesh objects
*/ */
private splitIntoSeparateMeshes(mesh: Mesh, pieces: number = 32): Mesh[] { private splitIntoSeparateMeshes(mesh: Mesh, pieces: number = 32): Mesh[] {
console.log(`[ExplosionManager] Creating ${pieces} sphere debris pieces`); debugLog(`[ExplosionManager] Creating ${pieces} sphere debris pieces`);
console.log('[ExplosionManager] Base mesh info:', { debugLog('[ExplosionManager] Base mesh info:', {
position: mesh.position.toString(), position: mesh.position.toString(),
scaling: mesh.scaling.toString(), scaling: mesh.scaling.toString(),
hasMaterial: !!mesh.material hasMaterial: !!mesh.material
@ -70,7 +71,7 @@ export class ExplosionManager {
const material = mesh.material?.clone('debris-material'); const material = mesh.material?.clone('debris-material');
if (material) { if (material) {
//(material as any).emissiveColor = Color3.Yellow(); //(material as any).emissiveColor = Color3.Yellow();
console.log('[ExplosionManager] Material cloned successfully'); debugLog('[ExplosionManager] Material cloned successfully');
} else { } else {
console.warn('[ExplosionManager] WARNING: No material on base mesh'); console.warn('[ExplosionManager] WARNING: No material on base mesh');
} }
@ -79,7 +80,7 @@ export class ExplosionManager {
const avgScale = (baseScale.x + baseScale.y + baseScale.z) / 3; const avgScale = (baseScale.x + baseScale.y + baseScale.z) / 3;
const debrisSize = avgScale * 0.3; // Size relative to asteroid const debrisSize = avgScale * 0.3; // Size relative to asteroid
console.log('[ExplosionManager] Debris parameters:', { debugLog('[ExplosionManager] Debris parameters:', {
avgScale, avgScale,
debrisSize, debrisSize,
offsetRadius: avgScale * 0.5 offsetRadius: avgScale * 0.5
@ -117,9 +118,9 @@ export class ExplosionManager {
} }
} }
console.log(`[ExplosionManager] Successfully created ${meshPieces.length}/${pieces} sphere debris pieces`); debugLog(`[ExplosionManager] Successfully created ${meshPieces.length}/${pieces} sphere debris pieces`);
if (meshPieces.length > 0) { if (meshPieces.length > 0) {
console.log('[ExplosionManager] First piece sample:', { debugLog('[ExplosionManager] First piece sample:', {
name: meshPieces[0].name, name: meshPieces[0].name,
position: meshPieces[0].position.toString(), position: meshPieces[0].position.toString(),
isVisible: meshPieces[0].isVisible, isVisible: meshPieces[0].isVisible,
@ -134,8 +135,8 @@ export class ExplosionManager {
* @param mesh The mesh to explode (will be cloned internally) * @param mesh The mesh to explode (will be cloned internally)
*/ */
public playExplosion(mesh: AbstractMesh): void { public playExplosion(mesh: AbstractMesh): void {
console.log('[ExplosionManager] playExplosion called'); debugLog('[ExplosionManager] playExplosion called');
console.log('[ExplosionManager] Input mesh:', { debugLog('[ExplosionManager] Input mesh:', {
name: mesh.name, name: mesh.name,
id: mesh.id, id: mesh.id,
isInstancedMesh: !!(mesh as any).sourceMesh, isInstancedMesh: !!(mesh as any).sourceMesh,
@ -147,20 +148,20 @@ export class ExplosionManager {
let sourceMesh: Mesh; let sourceMesh: Mesh;
if ((mesh as any).sourceMesh) { if ((mesh as any).sourceMesh) {
sourceMesh = (mesh as any).sourceMesh as Mesh; sourceMesh = (mesh as any).sourceMesh as Mesh;
console.log('[ExplosionManager] Using source mesh from instance:', sourceMesh.name); debugLog('[ExplosionManager] Using source mesh from instance:', sourceMesh.name);
} else { } else {
sourceMesh = mesh as Mesh; sourceMesh = mesh as Mesh;
console.log('[ExplosionManager] Using mesh directly (not instanced)'); debugLog('[ExplosionManager] Using mesh directly (not instanced)');
} }
// Clone the source mesh so we don't affect the original // Clone the source mesh so we don't affect the original
console.log('[ExplosionManager] Cloning mesh...'); debugLog('[ExplosionManager] Cloning mesh...');
const meshToExplode = sourceMesh.clone("exploding-" + mesh.name, null, true, false); const meshToExplode = sourceMesh.clone("exploding-" + mesh.name, null, true, false);
if (!meshToExplode) { if (!meshToExplode) {
console.error('[ExplosionManager] ERROR: Failed to clone mesh for explosion'); console.error('[ExplosionManager] ERROR: Failed to clone mesh for explosion');
return; return;
} }
console.log('[ExplosionManager] Mesh cloned successfully'); debugLog('[ExplosionManager] Mesh cloned successfully');
// Apply the instance's transformation to the cloned mesh // Apply the instance's transformation to the cloned mesh
meshToExplode.position = mesh.getAbsolutePosition().clone(); meshToExplode.position = mesh.getAbsolutePosition().clone();
@ -178,7 +179,7 @@ export class ExplosionManager {
return; return;
} }
console.log(`[ExplosionManager] Mesh ready for explosion:`, { debugLog(`[ExplosionManager] Mesh ready for explosion:`, {
name: meshToExplode.name, name: meshToExplode.name,
vertices: meshToExplode.getTotalVertices(), vertices: meshToExplode.getTotalVertices(),
position: meshToExplode.position.toString(), position: meshToExplode.position.toString(),
@ -186,7 +187,7 @@ export class ExplosionManager {
}); });
// Split the mesh into separate mesh objects (MeshExploder requirement) // Split the mesh into separate mesh objects (MeshExploder requirement)
console.log('[ExplosionManager] Splitting mesh into pieces...'); debugLog('[ExplosionManager] Splitting mesh into pieces...');
const meshPieces = this.splitIntoSeparateMeshes(meshToExplode, 12); const meshPieces = this.splitIntoSeparateMeshes(meshToExplode, 12);
if (meshPieces.length === 0) { if (meshPieces.length === 0) {
@ -196,18 +197,18 @@ export class ExplosionManager {
} }
// Original mesh is no longer needed - the pieces replace it // Original mesh is no longer needed - the pieces replace it
console.log('[ExplosionManager] Disposing original cloned mesh'); debugLog('[ExplosionManager] Disposing original cloned mesh');
meshToExplode.dispose(); meshToExplode.dispose();
// Create the exploder with the array of separate meshes // Create the exploder with the array of separate meshes
// The second parameter is optional - it's the center mesh to explode from // The second parameter is optional - it's the center mesh to explode from
// If not provided, MeshExploder will auto-calculate the center // If not provided, MeshExploder will auto-calculate the center
console.log('[ExplosionManager] Creating MeshExploder...'); debugLog('[ExplosionManager] Creating MeshExploder...');
try { try {
const exploder = new MeshExploder(meshPieces); const exploder = new MeshExploder(meshPieces);
console.log('[ExplosionManager] MeshExploder created successfully'); debugLog('[ExplosionManager] MeshExploder created successfully');
console.log(`[ExplosionManager] Starting explosion animation:`, { debugLog(`[ExplosionManager] Starting explosion animation:`, {
pieceCount: meshPieces.length, pieceCount: meshPieces.length,
duration: this.config.duration, duration: this.config.duration,
maxForce: this.config.explosionForce maxForce: this.config.explosionForce
@ -244,7 +245,7 @@ export class ExplosionManager {
// Log every 15 frames (approximately every 250ms at 60fps) // Log every 15 frames (approximately every 250ms at 60fps)
if (frameCount % 15 === 0 || frameCount === 1) { if (frameCount % 15 === 0 || frameCount === 1) {
console.log(`[ExplosionManager] Animation frame ${frameCount}:`, { debugLog(`[ExplosionManager] Animation frame ${frameCount}:`, {
elapsed: `${elapsed}ms`, elapsed: `${elapsed}ms`,
progress: progress.toFixed(3), progress: progress.toFixed(3),
currentValue: currentValue.toFixed(2), currentValue: currentValue.toFixed(2),
@ -256,14 +257,14 @@ export class ExplosionManager {
// Continue animation if not complete // Continue animation if not complete
if (progress >= 1.0) { if (progress >= 1.0) {
// Animation complete - remove observer and clean up // Animation complete - remove observer and clean up
console.log(`[ExplosionManager] Animation complete after ${frameCount} frames, cleaning up`); debugLog(`[ExplosionManager] Animation complete after ${frameCount} frames, cleaning up`);
this.scene.onBeforeRenderObservable.remove(animationObserver); this.scene.onBeforeRenderObservable.remove(animationObserver);
this.cleanupExplosion(meshPieces); this.cleanupExplosion(meshPieces);
} }
}); });
// Log that animation loop is registered // Log that animation loop is registered
console.log('[ExplosionManager] Starting animation loop...'); debugLog('[ExplosionManager] Starting animation loop...');
} catch (error) { } catch (error) {
console.error('[ExplosionManager] ERROR creating MeshExploder:', error); console.error('[ExplosionManager] ERROR creating MeshExploder:', error);
// Clean up pieces if exploder failed // Clean up pieces if exploder failed
@ -279,7 +280,7 @@ export class ExplosionManager {
* Clean up explosion meshes * Clean up explosion meshes
*/ */
private cleanupExplosion(meshPieces: Mesh[]): void { private cleanupExplosion(meshPieces: Mesh[]): void {
console.log('[ExplosionManager] Starting cleanup of explosion meshes...'); debugLog('[ExplosionManager] Starting cleanup of explosion meshes...');
let disposedCount = 0; let disposedCount = 0;
// Dispose all the mesh pieces // Dispose all the mesh pieces
@ -294,7 +295,7 @@ export class ExplosionManager {
} }
}); });
console.log(`[ExplosionManager] Cleanup complete - disposed ${disposedCount}/${meshPieces.length} pieces`); debugLog(`[ExplosionManager] Cleanup complete - disposed ${disposedCount}/${meshPieces.length} pieces`);
} }
/** /**
@ -302,6 +303,6 @@ export class ExplosionManager {
*/ */
public dispose(): void { public dispose(): void {
// Nothing to dispose with MeshExploder approach // Nothing to dispose with MeshExploder approach
console.log("ExplosionManager disposed"); debugLog("ExplosionManager disposed");
} }
} }

7
src/gameConfig.ts
View File

@ -19,7 +19,7 @@ export class GameConfig {
public planetTextureLevel: TextureLevel = TextureLevel.FULL_TEXTURE; public planetTextureLevel: TextureLevel = TextureLevel.FULL_TEXTURE;
public asteroidTextureLevel: TextureLevel = TextureLevel.FULL_TEXTURE; public asteroidTextureLevel: TextureLevel = TextureLevel.FULL_TEXTURE;
public sunTextureLevel: TextureLevel = TextureLevel.FULL_TEXTURE; public sunTextureLevel: TextureLevel = TextureLevel.FULL_TEXTURE;
public debug: boolean = false;
// Physics settings // Physics settings
public physicsEnabled: boolean = true; public physicsEnabled: boolean = true;
@ -49,7 +49,8 @@ export class GameConfig {
planetTextureLevel: this.planetTextureLevel, planetTextureLevel: this.planetTextureLevel,
asteroidTextureLevel: this.asteroidTextureLevel, asteroidTextureLevel: this.asteroidTextureLevel,
sunTextureLevel: this.sunTextureLevel, sunTextureLevel: this.sunTextureLevel,
physicsEnabled: this.physicsEnabled physicsEnabled: this.physicsEnabled,
debug: this.debug
}; };
localStorage.setItem('game-config', JSON.stringify(config)); localStorage.setItem('game-config', JSON.stringify(config));
} }
@ -66,6 +67,7 @@ export class GameConfig {
this.asteroidTextureLevel = config.asteroidTextureLevel ?? TextureLevel.FULL_TEXTURE; this.asteroidTextureLevel = config.asteroidTextureLevel ?? TextureLevel.FULL_TEXTURE;
this.sunTextureLevel = config.sunTextureLevel ?? TextureLevel.FULL_TEXTURE; this.sunTextureLevel = config.sunTextureLevel ?? TextureLevel.FULL_TEXTURE;
this.physicsEnabled = config.physicsEnabled ?? true; this.physicsEnabled = config.physicsEnabled ?? true;
this.debug = config.debug ?? false;
} else { } else {
this.save(); this.save();
} }
@ -82,6 +84,7 @@ export class GameConfig {
this.asteroidTextureLevel = TextureLevel.FULL_TEXTURE; this.asteroidTextureLevel = TextureLevel.FULL_TEXTURE;
this.sunTextureLevel = TextureLevel.FULL_TEXTURE; this.sunTextureLevel = TextureLevel.FULL_TEXTURE;
this.physicsEnabled = true; this.physicsEnabled = true;
this.debug = false;
this.save(); this.save();
} }
} }

23
src/level1.ts
View File

@ -21,6 +21,7 @@ import setLoadingMessage from "./setLoadingMessage";
import {LevelConfig} from "./levelConfig"; import {LevelConfig} from "./levelConfig";
import {LevelDeserializer} from "./levelDeserializer"; import {LevelDeserializer} from "./levelDeserializer";
import {BackgroundStars} from "./backgroundStars"; import {BackgroundStars} from "./backgroundStars";
import debugLog from './debug';
export class Level1 implements Level { export class Level1 implements Level {
private _ship: Ship; private _ship: Ship;
@ -42,15 +43,15 @@ export class Level1 implements Level {
this._scoreboard = new Scoreboard(); this._scoreboard = new Scoreboard();
const xr = DefaultScene.XR; const xr = DefaultScene.XR;
console.log('Level1 constructor - Setting up XR observables'); debugLog('Level1 constructor - Setting up XR observables');
console.log('XR input exists:', !!xr.input); debugLog('XR input exists:', !!xr.input);
console.log('onControllerAddedObservable exists:', !!xr.input?.onControllerAddedObservable); debugLog('onControllerAddedObservable exists:', !!xr.input?.onControllerAddedObservable);
xr.baseExperience.onInitialXRPoseSetObservable.add(() => { xr.baseExperience.onInitialXRPoseSetObservable.add(() => {
xr.baseExperience.camera.parent = this._ship.transformNode; xr.baseExperience.camera.parent = this._ship.transformNode;
xr.baseExperience.camera.position = new Vector3(0, 0, 0); xr.baseExperience.camera.position = new Vector3(0, 0, 0);
const observer = xr.input.onControllerAddedObservable.add((controller) => { const observer = xr.input.onControllerAddedObservable.add((controller) => {
console.log('🎮 onControllerAddedObservable FIRED for:', controller.inputSource.handedness); debugLog('🎮 onControllerAddedObservable FIRED for:', controller.inputSource.handedness);
this._ship.addController(controller); this._ship.addController(controller);
}); });
}); });
@ -78,18 +79,18 @@ export class Level1 implements Level {
// Enter XR mode // Enter XR mode
const xr = await DefaultScene.XR.baseExperience.enterXRAsync('immersive-vr', 'local-floor'); const xr = await DefaultScene.XR.baseExperience.enterXRAsync('immersive-vr', 'local-floor');
// Check for controllers that are already connected after entering XR // Check for controllers that are already connected after entering XR
console.log('Checking for controllers after entering XR. Count:', DefaultScene.XR.input.controllers.length); debugLog('Checking for controllers after entering XR. Count:', DefaultScene.XR.input.controllers.length);
DefaultScene.XR.input.controllers.forEach((controller, index) => { DefaultScene.XR.input.controllers.forEach((controller, index) => {
console.log(`Controller ${index} - handedness: ${controller.inputSource.handedness}`); debugLog(`Controller ${index} - handedness: ${controller.inputSource.handedness}`);
this._ship.addController(controller); this._ship.addController(controller);
}); });
// Wait and check again after a delay (controllers might connect later) // Wait and check again after a delay (controllers might connect later)
console.log('Waiting 2 seconds to check for controllers again...'); debugLog('Waiting 2 seconds to check for controllers again...');
setTimeout(() => { setTimeout(() => {
console.log('After 2 second delay - controller count:', DefaultScene.XR.input.controllers.length); debugLog('After 2 second delay - controller count:', DefaultScene.XR.input.controllers.length);
DefaultScene.XR.input.controllers.forEach((controller, index) => { DefaultScene.XR.input.controllers.forEach((controller, index) => {
console.log(` Late controller ${index} - handedness: ${controller.inputSource.handedness}`); debugLog(` Late controller ${index} - handedness: ${controller.inputSource.handedness}`);
}); });
}, 2000); }, 2000);
} }
@ -101,7 +102,7 @@ export class Level1 implements Level {
} }
} }
public async initialize() { public async initialize() {
console.log('Initializing level from config:', this._levelConfig.difficulty); debugLog('Initializing level from config:', this._levelConfig.difficulty);
if (this._initialized) { if (this._initialized) {
return; return;
} }
@ -116,7 +117,7 @@ export class Level1 implements Level {
// Initialize scoreboard with total asteroid count // Initialize scoreboard with total asteroid count
this._scoreboard.setRemainingCount(entities.asteroids.length); this._scoreboard.setRemainingCount(entities.asteroids.length);
console.log(`Initialized scoreboard with ${entities.asteroids.length} asteroids`); debugLog(`Initialized scoreboard with ${entities.asteroids.length} asteroids`);
// Position ship from config // Position ship from config
const shipConfig = this._deserializer.getShipConfig(); const shipConfig = this._deserializer.getShipConfig();

7
src/levelDeserializer.ts
View File

@ -29,6 +29,7 @@ import { FireProceduralTexture } from "@babylonjs/procedural-textures";
import {createSphereLightmap} from "./sphereLightmap"; import {createSphereLightmap} from "./sphereLightmap";
import { GameConfig } from "./gameConfig"; import { GameConfig } from "./gameConfig";
import { MaterialFactory } from "./materialFactory"; import { MaterialFactory } from "./materialFactory";
import debugLog from './debug';
/** /**
* Deserializes a LevelConfig JSON object and creates all entities in the scene * Deserializes a LevelConfig JSON object and creates all entities in the scene
@ -56,7 +57,7 @@ export class LevelDeserializer {
planets: AbstractMesh[]; planets: AbstractMesh[];
asteroids: AbstractMesh[]; asteroids: AbstractMesh[];
}> { }> {
console.log('Deserializing level:', this.config.difficulty); debugLog('Deserializing level:', this.config.difficulty);
// Create entities // Create entities
const startBase = this.createStartBase(); const startBase = this.createStartBase();
@ -174,7 +175,7 @@ export class LevelDeserializer {
planets.push(planet); planets.push(planet);
} }
console.log(`Created ${planets.length} planets from config`); debugLog(`Created ${planets.length} planets from config`);
return planets; return planets;
} }
@ -217,7 +218,7 @@ export class LevelDeserializer {
} }
} }
console.log(`Created ${asteroids.length} asteroids from config`); debugLog(`Created ${asteroids.length} asteroids from config`);
return asteroids; return asteroids;
} }

21
src/levelEditor.ts
View File

@ -1,5 +1,6 @@
import { LevelGenerator } from "./levelGenerator"; import { LevelGenerator } from "./levelGenerator";
import { LevelConfig, DifficultyConfig, Vector3Array, validateLevelConfig } from "./levelConfig"; import { LevelConfig, DifficultyConfig, Vector3Array, validateLevelConfig } from "./levelConfig";
import debugLog from './debug';
const STORAGE_KEY = 'space-game-levels'; const STORAGE_KEY = 'space-game-levels';
@ -74,7 +75,7 @@ class LevelEditor {
if (stored) { if (stored) {
const levelsArray: [string, LevelConfig][] = JSON.parse(stored); const levelsArray: [string, LevelConfig][] = JSON.parse(stored);
this.savedLevels = new Map(levelsArray); this.savedLevels = new Map(levelsArray);
console.log(`Loaded ${this.savedLevels.size} saved levels from localStorage`); debugLog(`Loaded ${this.savedLevels.size} saved levels from localStorage`);
} }
} catch (error) { } catch (error) {
console.error('Failed to load saved levels:', error); console.error('Failed to load saved levels:', error);
@ -101,7 +102,7 @@ class LevelEditor {
const levelsArray = Array.from(this.savedLevels.entries()); const levelsArray = Array.from(this.savedLevels.entries());
localStorage.setItem(STORAGE_KEY, JSON.stringify(levelsArray)); localStorage.setItem(STORAGE_KEY, JSON.stringify(levelsArray));
console.log(`Saved level: ${levelName}`); debugLog(`Saved level: ${levelName}`);
this.renderSavedLevelsList(); this.renderSavedLevelsList();
// Show feedback // Show feedback
@ -134,7 +135,7 @@ class LevelEditor {
const levelsArray = Array.from(this.savedLevels.entries()); const levelsArray = Array.from(this.savedLevels.entries());
localStorage.setItem(STORAGE_KEY, JSON.stringify(levelsArray)); localStorage.setItem(STORAGE_KEY, JSON.stringify(levelsArray));
this.renderSavedLevelsList(); this.renderSavedLevelsList();
console.log(`Deleted level: ${levelName}`); debugLog(`Deleted level: ${levelName}`);
} }
} }
@ -195,7 +196,7 @@ class LevelEditor {
// Display the JSON // Display the JSON
this.displayJSON(); this.displayJSON();
console.log(`Loaded level: ${levelName}`); debugLog(`Loaded level: ${levelName}`);
} }
/** /**
@ -509,7 +510,7 @@ class LevelEditor {
// Update message // Update message
messageDiv.innerHTML = '<div style="color: #4CAF50; padding: 10px; background: rgba(76, 175, 80, 0.1); border-radius: 5px;">✓ Edited JSON saved successfully!</div>'; messageDiv.innerHTML = '<div style="color: #4CAF50; padding: 10px; background: rgba(76, 175, 80, 0.1); border-radius: 5px;">✓ Edited JSON saved successfully!</div>';
console.log('Saved edited JSON'); debugLog('Saved edited JSON');
} catch (error) { } catch (error) {
alert(`Failed to save: ${error.message}`); alert(`Failed to save: ${error.message}`);
} }
@ -540,7 +541,7 @@ class LevelEditor {
document.body.removeChild(a); document.body.removeChild(a);
URL.revokeObjectURL(url); URL.revokeObjectURL(url);
console.log(`Downloaded: ${filename}`); debugLog(`Downloaded: ${filename}`);
} }
/** /**
@ -609,11 +610,11 @@ export function getSavedLevel(name: string): LevelConfig | null {
export function generateDefaultLevels(): void { export function generateDefaultLevels(): void {
const existing = getSavedLevels(); const existing = getSavedLevels();
if (existing.size > 0) { if (existing.size > 0) {
console.log('Levels already exist in localStorage, skipping default generation'); debugLog('Levels already exist in localStorage, skipping default generation');
return; return;
} }
console.log('No saved levels found, generating 4 default levels...'); debugLog('No saved levels found, generating 4 default levels...');
const difficulties = ['recruit', 'pilot', 'captain', 'commander']; const difficulties = ['recruit', 'pilot', 'captain', 'commander'];
const levelsMap = new Map<string, LevelConfig>(); const levelsMap = new Map<string, LevelConfig>();
@ -629,14 +630,14 @@ export function generateDefaultLevels(): void {
}; };
levelsMap.set(difficulty, config); levelsMap.set(difficulty, config);
console.log(`Generated default level: ${difficulty}`); debugLog(`Generated default level: ${difficulty}`);
} }
// Save all levels to localStorage // Save all levels to localStorage
const levelsArray = Array.from(levelsMap.entries()); const levelsArray = Array.from(levelsMap.entries());
localStorage.setItem(STORAGE_KEY, JSON.stringify(levelsArray)); localStorage.setItem(STORAGE_KEY, JSON.stringify(levelsArray));
console.log('Default levels saved to localStorage'); debugLog('Default levels saved to localStorage');
} }
// Export for manual initialization if needed // Export for manual initialization if needed

3
src/levelSelector.ts
View File

@ -1,5 +1,6 @@
import { getSavedLevels } from "./levelEditor"; import { getSavedLevels } from "./levelEditor";
import { LevelConfig } from "./levelConfig"; import { LevelConfig } from "./levelConfig";
import debugLog from './debug';
const SELECTED_LEVEL_KEY = 'space-game-selected-level'; const SELECTED_LEVEL_KEY = 'space-game-selected-level';
@ -107,7 +108,7 @@ export function selectLevel(levelName: string): void {
// Store selected level name // Store selected level name
sessionStorage.setItem(SELECTED_LEVEL_KEY, levelName); sessionStorage.setItem(SELECTED_LEVEL_KEY, levelName);
console.log(`Selected level: ${levelName}`); debugLog(`Selected level: ${levelName}`);
// Trigger level start (the existing code will pick this up) // Trigger level start (the existing code will pick this up)
const event = new CustomEvent('levelSelected', { detail: { levelName, config } }); const event = new CustomEvent('levelSelected', { detail: { levelName, config } });

3
src/levelSerializer.ts
View File

@ -9,6 +9,7 @@ import {
AsteroidConfig, AsteroidConfig,
Vector3Array Vector3Array
} from "./levelConfig"; } from "./levelConfig";
import debugLog from './debug';
/** /**
* Serializes the current runtime state of a level to JSON configuration * Serializes the current runtime state of a level to JSON configuration
@ -263,7 +264,7 @@ export class LevelSerializer {
document.body.removeChild(a); document.body.removeChild(a);
URL.revokeObjectURL(url); URL.revokeObjectURL(url);
console.log(`Downloaded level state: ${a.download}`); debugLog(`Downloaded level state: ${a.download}`);
} }
/** /**

61
src/main.ts
View File

@ -28,6 +28,7 @@ import {router, showView} from "./router";
import {hasSavedLevels, populateLevelSelector} from "./levelSelector"; import {hasSavedLevels, populateLevelSelector} from "./levelSelector";
import {LevelConfig} from "./levelConfig"; import {LevelConfig} from "./levelConfig";
import {generateDefaultLevels} from "./levelEditor"; import {generateDefaultLevels} from "./levelEditor";
import debugLog from './debug';
// Set to true to run minimal controller debug test // Set to true to run minimal controller debug test
const DEBUG_CONTROLLERS = false; const DEBUG_CONTROLLERS = false;
@ -53,7 +54,7 @@ export class Main {
window.addEventListener('levelSelected', async (e: CustomEvent) => { window.addEventListener('levelSelected', async (e: CustomEvent) => {
const {levelName, config} = e.detail as {levelName: string, config: LevelConfig}; const {levelName, config} = e.detail as {levelName: string, config: LevelConfig};
console.log(`Starting level: ${levelName}`); debugLog(`Starting level: ${levelName}`);
// Show loading UI again // Show loading UI again
const mainDiv = document.querySelector('#mainDiv'); const mainDiv = document.querySelector('#mainDiv');
@ -85,64 +86,64 @@ export class Main {
// Listen for test level button click // Listen for test level button click
window.addEventListener('DOMContentLoaded', () => { window.addEventListener('DOMContentLoaded', () => {
console.log('[Main] DOMContentLoaded fired, looking for test button...'); debugLog('[Main] DOMContentLoaded fired, looking for test button...');
const testLevelBtn = document.querySelector('#testLevelBtn'); const testLevelBtn = document.querySelector('#testLevelBtn');
console.log('[Main] Test button found:', !!testLevelBtn); debugLog('[Main] Test button found:', !!testLevelBtn);
if (testLevelBtn) { if (testLevelBtn) {
testLevelBtn.addEventListener('click', async () => { testLevelBtn.addEventListener('click', async () => {
console.log('[Main] ========== TEST LEVEL BUTTON CLICKED =========='); debugLog('[Main] ========== TEST LEVEL BUTTON CLICKED ==========');
// Show loading UI // Show loading UI
const mainDiv = document.querySelector('#mainDiv'); const mainDiv = document.querySelector('#mainDiv');
const levelSelect = document.querySelector('#levelSelect') as HTMLElement; const levelSelect = document.querySelector('#levelSelect') as HTMLElement;
console.log('[Main] mainDiv exists:', !!mainDiv); debugLog('[Main] mainDiv exists:', !!mainDiv);
console.log('[Main] levelSelect exists:', !!levelSelect); debugLog('[Main] levelSelect exists:', !!levelSelect);
if (levelSelect) { if (levelSelect) {
levelSelect.style.display = 'none'; levelSelect.style.display = 'none';
console.log('[Main] levelSelect hidden'); debugLog('[Main] levelSelect hidden');
} }
setLoadingMessage("Initializing Test Scene..."); setLoadingMessage("Initializing Test Scene...");
// Unlock audio engine on user interaction // Unlock audio engine on user interaction
if (this._audioEngine) { if (this._audioEngine) {
console.log('[Main] Unlocking audio engine...'); debugLog('[Main] Unlocking audio engine...');
await this._audioEngine.unlockAsync(); await this._audioEngine.unlockAsync();
console.log('[Main] Audio engine unlocked'); debugLog('[Main] Audio engine unlocked');
} }
// Create test level // Create test level
console.log('[Main] Creating TestLevel...'); debugLog('[Main] Creating TestLevel...');
this._currentLevel = new TestLevel(this._audioEngine); this._currentLevel = new TestLevel(this._audioEngine);
console.log('[Main] TestLevel created:', !!this._currentLevel); debugLog('[Main] TestLevel created:', !!this._currentLevel);
// Wait for level to be ready // Wait for level to be ready
console.log('[Main] Registering ready observable...'); debugLog('[Main] Registering ready observable...');
this._currentLevel.getReadyObservable().add(() => { this._currentLevel.getReadyObservable().add(() => {
console.log('[Main] ========== TEST LEVEL READY OBSERVABLE FIRED =========='); debugLog('[Main] ========== TEST LEVEL READY OBSERVABLE FIRED ==========');
setLoadingMessage("Test Scene Ready! Entering VR..."); setLoadingMessage("Test Scene Ready! Entering VR...");
console.log('[Main] Setting timeout to enter VR...'); debugLog('[Main] Setting timeout to enter VR...');
// Small delay to show message // Small delay to show message
setTimeout(() => { setTimeout(() => {
console.log('[Main] Timeout fired, removing mainDiv and calling play()'); debugLog('[Main] Timeout fired, removing mainDiv and calling play()');
if (mainDiv) { if (mainDiv) {
mainDiv.remove(); mainDiv.remove();
console.log('[Main] mainDiv removed'); debugLog('[Main] mainDiv removed');
} }
console.log('[Main] About to call this.play()...'); debugLog('[Main] About to call this.play()...');
this.play(); this.play();
}, 500); }, 500);
}); });
console.log('[Main] Ready observable registered'); debugLog('[Main] Ready observable registered');
// Now initialize the level (after observable is registered) // Now initialize the level (after observable is registered)
console.log('[Main] Calling TestLevel.initialize()...'); debugLog('[Main] Calling TestLevel.initialize()...');
await this._currentLevel.initialize(); await this._currentLevel.initialize();
console.log('[Main] TestLevel.initialize() completed'); debugLog('[Main] TestLevel.initialize() completed');
}); });
console.log('[Main] Click listener added to test button'); debugLog('[Main] Click listener added to test button');
} else { } else {
console.warn('[Main] Test level button not found in DOM'); console.warn('[Main] Test level button not found in DOM');
} }
@ -150,14 +151,14 @@ export class Main {
} }
private _started = false; private _started = false;
public async play() { public async play() {
console.log('[Main] play() called'); debugLog('[Main] play() called');
console.log('[Main] Current level exists:', !!this._currentLevel); debugLog('[Main] Current level exists:', !!this._currentLevel);
this._gameState = GameState.PLAY; this._gameState = GameState.PLAY;
if (this._currentLevel) { if (this._currentLevel) {
console.log('[Main] Calling level.play()...'); debugLog('[Main] Calling level.play()...');
await this._currentLevel.play(); await this._currentLevel.play();
console.log('[Main] level.play() completed'); debugLog('[Main] level.play() completed');
} else { } else {
console.error('[Main] ERROR: No current level to play!'); console.error('[Main] ERROR: No current level to play!');
} }
@ -177,7 +178,7 @@ export class Main {
disableDefaultUI: true disableDefaultUI: true
}); });
console.log(WebXRFeaturesManager.GetAvailableFeatures()); debugLog(WebXRFeaturesManager.GetAvailableFeatures());
//DefaultScene.XR.baseExperience.featuresManager.enableFeature(WebXRFeatureName.LAYERS, "latest", {preferMultiviewOnInit: true}); //DefaultScene.XR.baseExperience.featuresManager.enableFeature(WebXRFeatureName.LAYERS, "latest", {preferMultiviewOnInit: true});
@ -201,10 +202,10 @@ export class Main {
if (webGpu) { if (webGpu) {
this._engine = new WebGPUEngine(canvas); this._engine = new WebGPUEngine(canvas);
console.log("Webgpu enabled"); debugLog("Webgpu enabled");
await (this._engine as WebGPUEngine).initAsync(); await (this._engine as WebGPUEngine).initAsync();
} else { } else {
console.log("Standard WebGL enabled"); debugLog("Standard WebGL enabled");
this._engine = new Engine(canvas, true); this._engine = new Engine(canvas, true);
} }
@ -281,7 +282,7 @@ export class Main {
router.on('/', () => { router.on('/', () => {
// Check if there are saved levels // Check if there are saved levels
if (!hasSavedLevels()) { if (!hasSavedLevels()) {
console.log('No saved levels found, redirecting to editor'); debugLog('No saved levels found, redirecting to editor');
router.navigate('/editor'); router.navigate('/editor');
return; return;
} }
@ -330,7 +331,7 @@ generateDefaultLevels();
router.start(); router.start();
if (DEBUG_CONTROLLERS) { if (DEBUG_CONTROLLERS) {
console.log('🔍 DEBUG MODE: Running minimal controller test'); debugLog('🔍 DEBUG MODE: Running minimal controller test');
// Hide the UI elements // Hide the UI elements
const mainDiv = document.querySelector('#mainDiv'); const mainDiv = document.querySelector('#mainDiv');
if (mainDiv) { if (mainDiv) {

35
src/rockFactory.ts
View File

@ -1,26 +1,21 @@
import { import {
AbstractMesh, AbstractMesh,
Color3, InstancedMesh, InstancedMesh,
Mesh, Mesh,
MeshBuilder, NoiseProceduralTexture, Observable, Observable,
ParticleHelper,
ParticleSystem,
ParticleSystemSet,
PBRMaterial, PBRMaterial,
PhysicsAggregate, PhysicsBody, PhysicsAggregate, PhysicsBody,
PhysicsMotionType, PhysicsMotionType,
PhysicsShapeType, PhysicsViewer, PhysicsShapeType, PhysicsViewer,
SceneLoader, StandardMaterial, SceneLoader,
Vector3 Vector3
} from "@babylonjs/core"; } from "@babylonjs/core";
import {DefaultScene} from "./defaultScene"; import {DefaultScene} from "./defaultScene";
import {ScoreEvent} from "./scoreboard"; import {ScoreEvent} from "./scoreboard";
import {Debug} from "@babylonjs/core/Legacy/legacy";
import {createSphereLightmap} from "./sphereLightmap";
import { GameConfig } from "./gameConfig"; import { GameConfig } from "./gameConfig";
import { MaterialFactory } from "./materialFactory"; import { MaterialFactory } from "./materialFactory";
import { ExplosionManager } from "./explosionManager"; import { ExplosionManager } from "./explosionManager";
let _particleData: any = null; import debugLog from './debug';
export class Rock { export class Rock {
private _rockMesh: AbstractMesh; private _rockMesh: AbstractMesh;
@ -56,18 +51,18 @@ export class RockFactory {
} }
} }
private static async loadMesh() { private static async loadMesh() {
console.log('loading mesh'); debugLog('loading mesh');
const importMesh = await SceneLoader.ImportMeshAsync(null, "./", "asteroid3.glb", DefaultScene.MainScene); const importMesh = await SceneLoader.ImportMeshAsync(null, "./", "asteroid3.glb", DefaultScene.MainScene);
this._rockMesh = importMesh.meshes[1].clone("asteroid", null, false); this._rockMesh = importMesh.meshes[1].clone("asteroid", null, false);
this._rockMesh.setParent(null); this._rockMesh.setParent(null);
this._rockMesh.setEnabled(false); this._rockMesh.setEnabled(false);
//importMesh.meshes[1].dispose(); //importMesh.meshes[1].dispose();
console.log(importMesh.meshes); debugLog(importMesh.meshes);
if (!this._rockMaterial) { if (!this._rockMaterial) {
// Clone the original material from GLB to preserve all textures // Clone the original material from GLB to preserve all textures
this._originalMaterial = this._rockMesh.material.clone("asteroid-original") as PBRMaterial; this._originalMaterial = this._rockMesh.material.clone("asteroid-original") as PBRMaterial;
console.log('Cloned original material from GLB:', this._originalMaterial); debugLog('Cloned original material from GLB:', this._originalMaterial);
// Create material using GameConfig texture level // Create material using GameConfig texture level
const config = GameConfig.getInstance(); const config = GameConfig.getInstance();
@ -89,7 +84,7 @@ export class RockFactory {
score: Observable<ScoreEvent>): Promise<Rock> { score: Observable<ScoreEvent>): Promise<Rock> {
const rock = new InstancedMesh("asteroid-" +i, this._rockMesh as Mesh); const rock = new InstancedMesh("asteroid-" +i, this._rockMesh as Mesh);
console.log(rock.id); debugLog(rock.id);
rock.scaling = size; rock.scaling = size;
rock.position = position; rock.position = position;
//rock.material = this._rockMaterial; //rock.material = this._rockMaterial;
@ -120,37 +115,37 @@ export class RockFactory {
body.setCollisionCallbackEnabled(true); body.setCollisionCallbackEnabled(true);
body.getCollisionObservable().add((eventData) => { body.getCollisionObservable().add((eventData) => {
if (eventData.type == 'COLLISION_STARTED') { if (eventData.type == 'COLLISION_STARTED') {
console.log('[RockFactory] Collision detected:', { debugLog('[RockFactory] Collision detected:', {
collidedWith: eventData.collidedAgainst.transformNode.id, collidedWith: eventData.collidedAgainst.transformNode.id,
asteroidName: eventData.collider.transformNode.name asteroidName: eventData.collider.transformNode.name
}); });
if ( eventData.collidedAgainst.transformNode.id == 'ammo') { if ( eventData.collidedAgainst.transformNode.id == 'ammo') {
console.log('[RockFactory] ASTEROID HIT! Triggering explosion...'); debugLog('[RockFactory] ASTEROID HIT! Triggering explosion...');
score.notifyObservers({score: 1, remaining: -1, message: "Asteroid Destroyed"}); score.notifyObservers({score: 1, remaining: -1, message: "Asteroid Destroyed"});
// Get the asteroid mesh before disposing // Get the asteroid mesh before disposing
const asteroidMesh = eventData.collider.transformNode as AbstractMesh; const asteroidMesh = eventData.collider.transformNode as AbstractMesh;
console.log('[RockFactory] Asteroid mesh to explode:', { debugLog('[RockFactory] Asteroid mesh to explode:', {
name: asteroidMesh.name, name: asteroidMesh.name,
id: asteroidMesh.id, id: asteroidMesh.id,
position: asteroidMesh.position.toString() position: asteroidMesh.position.toString()
}); });
// Play explosion using ExplosionManager (clones mesh internally) // Play explosion using ExplosionManager (clones mesh internally)
console.log('[RockFactory] Calling ExplosionManager.playExplosion()...'); debugLog('[RockFactory] Calling ExplosionManager.playExplosion()...');
RockFactory._explosionManager.playExplosion(asteroidMesh); RockFactory._explosionManager.playExplosion(asteroidMesh);
console.log('[RockFactory] Explosion call completed'); debugLog('[RockFactory] Explosion call completed');
// Now dispose the physics objects and original mesh // Now dispose the physics objects and original mesh
console.log('[RockFactory] Disposing physics objects and meshes...'); debugLog('[RockFactory] Disposing physics objects and meshes...');
eventData.collider.shape.dispose(); eventData.collider.shape.dispose();
eventData.collider.transformNode.dispose(); eventData.collider.transformNode.dispose();
eventData.collider.dispose(); eventData.collider.dispose();
eventData.collidedAgainst.shape.dispose(); eventData.collidedAgainst.shape.dispose();
eventData.collidedAgainst.transformNode.dispose(); eventData.collidedAgainst.transformNode.dispose();
eventData.collidedAgainst.dispose(); eventData.collidedAgainst.dispose();
console.log('[RockFactory] Disposal complete'); debugLog('[RockFactory] Disposal complete');
} }
} }
}); });

32
src/scoreboard.ts
View File

@ -1,11 +1,11 @@
import {AdvancedDynamicTexture, Control, StackPanel, TextBlock} from "@babylonjs/gui"; import {AdvancedDynamicTexture, Control, StackPanel, TextBlock} from "@babylonjs/gui";
import {DefaultScene} from "./defaultScene"; import {DefaultScene} from "./defaultScene";
import { import {
Angle,
MeshBuilder, MeshBuilder,
Observable, StandardMaterial, Observable, StandardMaterial,
Vector3, Vector3,
} from "@babylonjs/core"; } from "@babylonjs/core";
import debugLog from './debug';
export type ScoreEvent = { export type ScoreEvent = {
score: number, score: number,
message: string, message: string,
@ -15,8 +15,8 @@ export type ScoreEvent = {
export class Scoreboard { export class Scoreboard {
private _score: number = 0; private _score: number = 0;
private _remaining: number = 0; private _remaining: number = 0;
private _timeRemaining: number = 61; private _startTime: number = Date.now();
private _lastMessage: string = null;
private _active = false; private _active = false;
private _done = false; private _done = false;
public readonly onScoreObservable: Observable<ScoreEvent> = new Observable<ScoreEvent>(); public readonly onScoreObservable: Observable<ScoreEvent> = new Observable<ScoreEvent>();
@ -36,8 +36,8 @@ export class Scoreboard {
const scene = DefaultScene.MainScene; const scene = DefaultScene.MainScene;
const parent = scene.getNodeById('ship'); const parent = scene.getNodeById('ship');
console.log('Scoreboard parent:', parent); debugLog('Scoreboard parent:', parent);
console.log('Initializing scoreboard'); debugLog('Initializing scoreboard');
const scoreboard = MeshBuilder.CreatePlane("scoreboard", {width: 1, height: 1}, scene); const scoreboard = MeshBuilder.CreatePlane("scoreboard", {width: 1, height: 1}, scene);
// scoreboard.renderingGroupId = 3; // scoreboard.renderingGroupId = 3;
const material = new StandardMaterial("scoreboard", scene); const material = new StandardMaterial("scoreboard", scene);
@ -76,35 +76,21 @@ export class Scoreboard {
panel.addControl(fpsText); panel.addControl(fpsText);
panel.addControl(hullText); panel.addControl(hullText);
panel.addControl(timeRemainingText); panel.addControl(timeRemainingText);
advancedTexture.addControl(panel); advancedTexture.addControl(panel);
let i = 0; let i = 0;
let lastSecond: number = Date.now();
const afterRender = scene.onAfterRenderObservable.add(() => { const afterRender = scene.onAfterRenderObservable.add(() => {
scoreText.text = `Score: ${this.calculateScore()}`; scoreText.text = `Score: ${this.calculateScore()}`;
remainingText.text = `Remaining: ${this._remaining}`; remainingText.text = `Remaining: ${this._remaining}`;
const now = Date.now(); const elapsed = Date.now() - this._startTime;
if (this._active && (Math.floor(lastSecond / 1000) < Math.floor(now/1000))) { if (this._active && i++%40 == 0) {
this._timeRemaining--; timeRemainingText.text = `Time: ${Math.floor(elapsed/60).toString().padStart(2,"0")}:${(elapsed%60).toString().padStart(2,"0")}`;
if (this._timeRemaining <= 0) {
scene.onAfterRenderObservable.remove(afterRender);
}
lastSecond = now;
timeRemainingText.text = `Time: ${Math.floor(this._timeRemaining/60).toString().padStart(2,"0")}:${(this._timeRemaining%60).toString().padStart(2,"0")}`;
}
if (i++%60 == 0) {
fpsText.text = `FPS: ${Math.floor(scene.getEngine().getFps())}`; fpsText.text = `FPS: ${Math.floor(scene.getEngine().getFps())}`;
} }
}); });
this.onScoreObservable.add((score: ScoreEvent) => { this.onScoreObservable.add((score: ScoreEvent) => {
this._score += score.score * this._timeRemaining; this._score += score.score;
this._remaining += score.remaining; this._remaining += score.remaining;
this._lastMessage = score.message;
if (score.timeRemaining) {
this._timeRemaining = score.timeRemaining;
}
}); });
this._active = true; this._active = true;
} }

3
src/settingsScreen.ts
View File

@ -11,6 +11,7 @@ export function initializeSettingsScreen(): void {
const asteroidTextureSelect = document.getElementById('asteroidTextureLevel') as HTMLSelectElement; const asteroidTextureSelect = document.getElementById('asteroidTextureLevel') as HTMLSelectElement;
const sunTextureSelect = document.getElementById('sunTextureLevel') as HTMLSelectElement; const sunTextureSelect = document.getElementById('sunTextureLevel') as HTMLSelectElement;
const physicsEnabledCheckbox = document.getElementById('physicsEnabled') as HTMLInputElement; const physicsEnabledCheckbox = document.getElementById('physicsEnabled') as HTMLInputElement;
const debugEnabledCheckbox = document.getElementById('debugEnabled') as HTMLInputElement;
const saveBtn = document.getElementById('saveSettingsBtn'); const saveBtn = document.getElementById('saveSettingsBtn');
const resetBtn = document.getElementById('resetSettingsBtn'); const resetBtn = document.getElementById('resetSettingsBtn');
@ -42,6 +43,7 @@ export function initializeSettingsScreen(): void {
if (asteroidTextureSelect) asteroidTextureSelect.value = config.asteroidTextureLevel; if (asteroidTextureSelect) asteroidTextureSelect.value = config.asteroidTextureLevel;
if (sunTextureSelect) sunTextureSelect.value = config.sunTextureLevel; if (sunTextureSelect) sunTextureSelect.value = config.sunTextureLevel;
if (physicsEnabledCheckbox) physicsEnabledCheckbox.checked = config.physicsEnabled; if (physicsEnabledCheckbox) physicsEnabledCheckbox.checked = config.physicsEnabled;
if (debugEnabledCheckbox) debugEnabledCheckbox.checked = config.debug;
} }
/** /**
@ -52,6 +54,7 @@ export function initializeSettingsScreen(): void {
config.asteroidTextureLevel = asteroidTextureSelect.value as TextureLevel; config.asteroidTextureLevel = asteroidTextureSelect.value as TextureLevel;
config.sunTextureLevel = sunTextureSelect.value as TextureLevel; config.sunTextureLevel = sunTextureSelect.value as TextureLevel;
config.physicsEnabled = physicsEnabledCheckbox.checked; config.physicsEnabled = physicsEnabledCheckbox.checked;
config.debug = debugEnabledCheckbox.checked;
config.save(); config.save();
} }

21
src/ship.ts
View File

@ -21,6 +21,7 @@ import type {AudioEngineV2, StaticSound} from "@babylonjs/core";
import {DefaultScene} from "./defaultScene"; import {DefaultScene} from "./defaultScene";
import { GameConfig } from "./gameConfig"; import { GameConfig } from "./gameConfig";
import { Sight } from "./sight"; import { Sight } from "./sight";
import debugLog from './debug';
const MAX_LINEAR_VELOCITY = 80; const MAX_LINEAR_VELOCITY = 80;
const MAX_ANGULAR_VELOCITY = 1.8; const MAX_ANGULAR_VELOCITY = 1.8;
const LINEAR_FORCE_MULTIPLIER = 800; const LINEAR_FORCE_MULTIPLIER = 800;
@ -444,50 +445,50 @@ export class Ship {
private _rightInputSource: WebXRInputSource; private _rightInputSource: WebXRInputSource;
public addController(controller: WebXRInputSource) { public addController(controller: WebXRInputSource) {
console.log('Ship.addController called for:', controller.inputSource.handedness); debugLog('Ship.addController called for:', controller.inputSource.handedness);
if (controller.inputSource.handedness == "left") { if (controller.inputSource.handedness == "left") {
console.log('Adding left controller'); debugLog('Adding left controller');
this._leftInputSource = controller; this._leftInputSource = controller;
this._leftInputSource.onMotionControllerInitObservable.add((motionController) => { this._leftInputSource.onMotionControllerInitObservable.add((motionController) => {
console.log('Left motion controller initialized:', motionController.handness); debugLog('Left motion controller initialized:', motionController.handness);
this.mapMotionController(motionController); this.mapMotionController(motionController);
}); });
// Check if motion controller is already initialized // Check if motion controller is already initialized
if (controller.motionController) { if (controller.motionController) {
console.log('Left motion controller already initialized, mapping now'); debugLog('Left motion controller already initialized, mapping now');
this.mapMotionController(controller.motionController); this.mapMotionController(controller.motionController);
} }
} }
if (controller.inputSource.handedness == "right") { if (controller.inputSource.handedness == "right") {
console.log('Adding right controller'); debugLog('Adding right controller');
this._rightInputSource = controller; this._rightInputSource = controller;
this._rightInputSource.onMotionControllerInitObservable.add((motionController) => { this._rightInputSource.onMotionControllerInitObservable.add((motionController) => {
console.log('Right motion controller initialized:', motionController.handness); debugLog('Right motion controller initialized:', motionController.handness);
this.mapMotionController(motionController); this.mapMotionController(motionController);
}); });
// Check if motion controller is already initialized // Check if motion controller is already initialized
if (controller.motionController) { if (controller.motionController) {
console.log('Right motion controller already initialized, mapping now'); debugLog('Right motion controller already initialized, mapping now');
this.mapMotionController(controller.motionController); this.mapMotionController(controller.motionController);
} }
} }
} }
private mapMotionController(controller: WebXRAbstractMotionController) { private mapMotionController(controller: WebXRAbstractMotionController) {
console.log('Mapping motion controller:', controller.handness, 'Profile:', controller.profileId); debugLog('Mapping motion controller:', controller.handness, 'Profile:', controller.profileId);
controllerComponents.forEach((component) => { controllerComponents.forEach((component) => {
const comp = controller.components[component]; const comp = controller.components[component];
if (!comp) { if (!comp) {
console.log(` Component ${component} not found on ${controller.handness} controller`); debugLog(` Component ${component} not found on ${controller.handness} controller`);
return; return;
} }
console.log(` Found component ${component} on ${controller.handness} controller`); debugLog(` Found component ${component} on ${controller.handness} controller`);
const observable = this._controllerObservable; const observable = this._controllerObservable;
if (comp && comp.onAxisValueChangedObservable) { if (comp && comp.onAxisValueChangedObservable) {

45
src/testLevel.ts
View File

@ -9,6 +9,7 @@ import {
} from "@babylonjs/core"; } from "@babylonjs/core";
import type { AudioEngineV2 } from "@babylonjs/core"; import type { AudioEngineV2 } from "@babylonjs/core";
import Level from "./level"; import Level from "./level";
import debugLog from './debug';
/** /**
* Minimal test level with just a box and a light for debugging * Minimal test level with just a box and a light for debugging
@ -23,7 +24,7 @@ export class TestLevel implements Level {
constructor(audioEngine: AudioEngineV2) { constructor(audioEngine: AudioEngineV2) {
this._audioEngine = audioEngine; this._audioEngine = audioEngine;
console.log('[TestLevel] Constructor called'); debugLog('[TestLevel] Constructor called');
// Don't call initialize here - let Main call it after registering the observable // Don't call initialize here - let Main call it after registering the observable
} }
@ -32,16 +33,16 @@ export class TestLevel implements Level {
} }
public async play() { public async play() {
console.log('[TestLevel] play() called - entering XR'); debugLog('[TestLevel] play() called - entering XR');
console.log('[TestLevel] XR available:', !!DefaultScene.XR); debugLog('[TestLevel] XR available:', !!DefaultScene.XR);
console.log('[TestLevel] XR baseExperience:', !!DefaultScene.XR?.baseExperience); debugLog('[TestLevel] XR baseExperience:', !!DefaultScene.XR?.baseExperience);
try { try {
// Enter XR mode // Enter XR mode
const xr = await DefaultScene.XR.baseExperience.enterXRAsync('immersive-vr', 'local-floor'); const xr = await DefaultScene.XR.baseExperience.enterXRAsync('immersive-vr', 'local-floor');
console.log('[TestLevel] XR mode entered successfully'); debugLog('[TestLevel] XR mode entered successfully');
console.log('[TestLevel] XR session:', xr); debugLog('[TestLevel] XR session:', xr);
console.log('[TestLevel] Camera position:', DefaultScene.XR.baseExperience.camera.position.toString()); debugLog('[TestLevel] Camera position:', DefaultScene.XR.baseExperience.camera.position.toString());
this.startBoxCreation(); this.startBoxCreation();
} catch (error) { } catch (error) {
console.error('[TestLevel] ERROR entering XR:', error); console.error('[TestLevel] ERROR entering XR:', error);
@ -49,13 +50,13 @@ export class TestLevel implements Level {
} }
public dispose() { public dispose() {
console.log('[TestLevel] dispose() called'); debugLog('[TestLevel] dispose() called');
// Stop box creation timer // Stop box creation timer
if (this._boxCreationInterval) { if (this._boxCreationInterval) {
clearInterval(this._boxCreationInterval); clearInterval(this._boxCreationInterval);
this._boxCreationInterval = null; this._boxCreationInterval = null;
console.log('[TestLevel] Box creation timer stopped'); debugLog('[TestLevel] Box creation timer stopped');
} }
} }
@ -82,7 +83,7 @@ export class TestLevel implements Level {
* Start the box creation timer that doubles the number of boxes each iteration * Start the box creation timer that doubles the number of boxes each iteration
*/ */
private startBoxCreation(): void { private startBoxCreation(): void {
console.log('[TestLevel] Starting box creation timer...'); debugLog('[TestLevel] Starting box creation timer...');
const createBatch = () => { const createBatch = () => {
const boxesToCreate = Math.min( const boxesToCreate = Math.min(
@ -90,7 +91,7 @@ export class TestLevel implements Level {
1000 - this._totalBoxesCreated 1000 - this._totalBoxesCreated
); );
console.log(`[TestLevel] Creating ${boxesToCreate} boxes (total will be: ${this._totalBoxesCreated + boxesToCreate}/1000)`); debugLog(`[TestLevel] Creating ${boxesToCreate} boxes (total will be: ${this._totalBoxesCreated + boxesToCreate}/1000)`);
for (let i = 0; i < boxesToCreate; i++) { for (let i = 0; i < boxesToCreate; i++) {
// Random position in a 20x20x20 cube around origin // Random position in a 20x20x20 cube around origin
@ -110,7 +111,7 @@ export class TestLevel implements Level {
this.createBox(position, color); this.createBox(position, color);
} }
console.log(`[TestLevel] Created ${boxesToCreate} boxes. Total: ${this._totalBoxesCreated}/1000`); debugLog(`[TestLevel] Created ${boxesToCreate} boxes. Total: ${this._totalBoxesCreated}/1000`);
// Log performance metrics // Log performance metrics
const fps = DefaultScene.MainScene.getEngine().getFps(); const fps = DefaultScene.MainScene.getEngine().getFps();
@ -124,7 +125,7 @@ export class TestLevel implements Level {
}, 0); }, 0);
const triangleCount = Math.floor(totalIndices / 3); const triangleCount = Math.floor(totalIndices / 3);
console.log(`[TestLevel] Performance Metrics:`, { debugLog(`[TestLevel] Performance Metrics:`, {
fps: fps.toFixed(2), fps: fps.toFixed(2),
triangleCount: triangleCount, triangleCount: triangleCount,
totalIndices: totalIndices, totalIndices: totalIndices,
@ -135,7 +136,7 @@ export class TestLevel implements Level {
// Check if we've reached 1000 boxes // Check if we've reached 1000 boxes
if (this._totalBoxesCreated >= 1000) { if (this._totalBoxesCreated >= 1000) {
console.log('[TestLevel] Reached 1000 boxes, stopping timer'); debugLog('[TestLevel] Reached 1000 boxes, stopping timer');
if (this._boxCreationInterval) { if (this._boxCreationInterval) {
clearInterval(this._boxCreationInterval); clearInterval(this._boxCreationInterval);
this._boxCreationInterval = null; this._boxCreationInterval = null;
@ -155,14 +156,14 @@ export class TestLevel implements Level {
} }
public async initialize() { public async initialize() {
console.log('[TestLevel] initialize() called'); debugLog('[TestLevel] initialize() called');
console.log('[TestLevel] Scene info:', { debugLog('[TestLevel] Scene info:', {
meshCount: DefaultScene.MainScene.meshes.length, meshCount: DefaultScene.MainScene.meshes.length,
lightCount: DefaultScene.MainScene.lights.length lightCount: DefaultScene.MainScene.lights.length
}); });
if (this._initialized) { if (this._initialized) {
console.log('[TestLevel] Already initialized, skipping'); debugLog('[TestLevel] Already initialized, skipping');
return; return;
} }
@ -173,7 +174,7 @@ export class TestLevel implements Level {
DefaultScene.MainScene DefaultScene.MainScene
); );
light.intensity = 1.0; light.intensity = 1.0;
console.log('[TestLevel] Created directional light:', { debugLog('[TestLevel] Created directional light:', {
name: light.name, name: light.name,
direction: light.direction.toString(), direction: light.direction.toString(),
intensity: light.intensity intensity: light.intensity
@ -192,7 +193,7 @@ export class TestLevel implements Level {
material.diffuseColor = new Color3(1, 0, 0); // Red material.diffuseColor = new Color3(1, 0, 0); // Red
material.specularColor = new Color3(0.5, 0.5, 0.5); material.specularColor = new Color3(0.5, 0.5, 0.5);
box.material = material; box.material = material;
console.log('[TestLevel] Created test box:', { debugLog('[TestLevel] Created test box:', {
name: box.name, name: box.name,
position: box.position.toString(), position: box.position.toString(),
size: 2, size: 2,
@ -210,20 +211,20 @@ export class TestLevel implements Level {
const groundMaterial = new StandardMaterial("groundMaterial", DefaultScene.MainScene); const groundMaterial = new StandardMaterial("groundMaterial", DefaultScene.MainScene);
groundMaterial.diffuseColor = new Color3(0.3, 0.3, 0.3); // Grey groundMaterial.diffuseColor = new Color3(0.3, 0.3, 0.3); // Grey
ground.material = groundMaterial; ground.material = groundMaterial;
console.log('[TestLevel] Created ground plane:', { debugLog('[TestLevel] Created ground plane:', {
name: ground.name, name: ground.name,
dimensions: '10x10', dimensions: '10x10',
position: ground.position.toString() position: ground.position.toString()
}); });
console.log('[TestLevel] Final scene state:', { debugLog('[TestLevel] Final scene state:', {
totalMeshes: DefaultScene.MainScene.meshes.length, totalMeshes: DefaultScene.MainScene.meshes.length,
totalLights: DefaultScene.MainScene.lights.length, totalLights: DefaultScene.MainScene.lights.length,
meshNames: DefaultScene.MainScene.meshes.map(m => m.name) meshNames: DefaultScene.MainScene.meshes.map(m => m.name)
}); });
this._initialized = true; this._initialized = true;
console.log('[TestLevel] Initialization complete - scene ready for XR'); debugLog('[TestLevel] Initialization complete - scene ready for XR');
// Notify that initialization is complete // Notify that initialization is complete
this._onReadyObservable.notifyObservers(this); this._onReadyObservable.notifyObservers(this);