@where-stars-drift/core 1.0.0

package/src/where-stars-drift.ts

@@ -0,0 +1,542 @@
+
+
+import { SIMULATION_CONFIG, DEBUG_CONFIG } from './config/simulation';
+import { Star } from './entities/star';
+import { Comet, COMET_CONFIG } from './entities/comet';
+import { Starship } from './entities/starship';
+import { Fleet } from './entities/fleet';
+import { HoverController } from './controllers/hover-controller';
+import { BlackHle } from './entities/black-hole';
+import { LayerController, type Layer } from './controllers/layer-controller';
+import { StarshipController } from './controllers/starship-controller';
+import { StarController } from './controllers/star-controller';
+import { PhysicsController } from './controllers/physics-controller';
+import { EffectsController } from './controllers/effects-controller';
+import { DebugController } from './controllers/debug-controller';
+import { Nebula, NEBULA_CONFIG } from './entities/nebula';
+import { Quadtree } from './lib/quadtree';
+import { DebugPanelController } from './ui/debug-panel-controller';
+import { formationRegistry } from './entities/formations';
+import { SectorGrid } from './entities/sector-grid';
+
+export interface SimulationConfig {
+  starsCount?: number;
+  interactive?: boolean;
+  debug?: boolean;
+  showCatalog?: boolean;
+  showGrid?: boolean;
+  showGithubLink?: boolean;
+}
+
+export interface SimulationStats {
+  fps: number;
+  avgFps: number;
+  starCount: number;
+  starshipCount: number;
+  frameCount: number;
+}
+
+export class WhereStarsDrift {
+  private canvas: HTMLCanvasElement;
+  private ctx: CanvasRenderingContext2D;
+  private config: Required<SimulationConfig>;
+  
+  private width: number;
+  private height: number;
+
+  private layerController!: LayerController;
+  private starController!: StarController;
+  private starshipController!: StarshipController;
+  private physicsController!: PhysicsController;
+  private effectsController!: EffectsController;
+  private debugController!: DebugController;
+  private debugPanelController!: DebugPanelController;
+  private hoverController!: HoverController;
+  private allLayers!: Layer[];
+  private allBodies!: (Star | Comet | Starship | Fleet | BlackHle | Nebula)[];
+  private quadtree!: Quadtree;
+
+  private mouse = {
+    x: 0,
+    y: 0,
+    lastX: 0,
+    lastY: 0,
+    dx: 0,
+    dy: 0,
+  };
+  private isMouseInside = false;
+
+  private animationFrameId: number = 0;
+  private lastTime: number = 0;
+  private pulseTime: number = 0;
+
+  // GitHub link interaction
+  private githubLinkBounds: { x: number; y: number; width: number; height: number } | null = null;
+  private isMouseOverGithubLink = false;
+  
+  // Stats
+  private frameCount: number = 0;
+  private fps: number = 0;
+  private fpsFrameCount: number = 0;
+  private lastFpsUpdateTime: number = 0;
+  private fpsHistory: number[] = [];
+  private avgFps: number = 0;
+  private readonly avgFpsWindow = 60;
+
+  constructor(canvas: HTMLCanvasElement, config: SimulationConfig = {}) {
+    this.canvas = canvas;
+    const context = canvas.getContext('2d');
+    if (!context) {
+      throw new Error('Could not get 2D rendering context from canvas.');
+    }
+    this.ctx = context;
+
+    this.config = {
+      starsCount: config.starsCount ?? SIMULATION_CONFIG.STARS_COUNT,
+      interactive: config.interactive ?? true,
+      debug: config.debug ?? false,
+      showCatalog: config.showCatalog ?? false,
+      showGrid: config.showGrid ?? true,
+      showGithubLink: config.showGithubLink ?? true,
+    };
+    
+    // Override DEBUG_CONFIG based on instance config
+    DEBUG_CONFIG.SHOW_DEBUG_INFO = this.config.debug;
+    DEBUG_CONFIG.SHOW_CATALOG_PANEL = this.config.showCatalog;
+
+    this.width = canvas.width;
+    this.height = canvas.height;
+
+    this.mouse.x = this.width / 2;
+    this.mouse.y = this.height / 2;
+    this.mouse.lastX = this.width / 2;
+    this.mouse.lastY = this.height / 2;
+
+    this._initializeControllers();
+    
+    // Bind methods to the instance to maintain `this` context
+    this.animate = this.animate.bind(this);
+    this._handleMouseMove = this._handleMouseMove.bind(this);
+    this._handleMouseEnter = this._handleMouseEnter.bind(this);
+    this._handleMouseLeave = this._handleMouseLeave.bind(this);
+    this._handleMouseDown = this._handleMouseDown.bind(this);
+    this._handleMouseUp = this._handleMouseUp.bind(this);
+    this._handleWheel = this._handleWheel.bind(this);
+    this._handleResize = this._handleResize.bind(this);
+  }
+
+  private _initializeControllers() {
+    this.layerController = new LayerController();
+    this.debugController = new DebugController();
+    this.starController = new StarController(this.layerController, this.config.starsCount, this.width, this.height);
+    this.starshipController = new StarshipController(this.layerController, this.width, this.height, this.debugController);
+    this.physicsController = new PhysicsController(this.debugController);
+    this.effectsController = new EffectsController(this.width, this.height);
+    
+    this.quadtree = new Quadtree({ x: 0, y: 0, width: this.width, height: this.height });
+
+    for (let i = 0; i < NEBULA_CONFIG.COUNT; i++) {
+        this.layerController.addBody('backgroundNebulas', new Nebula(Math.random() * this.width, Math.random() * this.height, this.width));
+    }
+    for (let i = 0; i < COMET_CONFIG.COUNT; i++) {
+        this.layerController.addBody('dynamicObjects', new Comet(this.width, this.height));
+    }
+    
+    this.layerController.addBody('sectorGrid', new SectorGrid(this.width, this.height));
+
+    this.allLayers = Object.values(this.layerController.getLayers());
+    this.allBodies = this.allLayers.flatMap(l => l.bodies) as any[];
+    this.hoverController = new HoverController(this.allBodies);
+    this.debugPanelController = new DebugPanelController(this.ctx, formationRegistry.getAllFormations());
+  }
+
+  public start() {
+    if (this.animationFrameId !== 0) return; // Already running
+    this._setupEventListeners();
+    this.lastTime = performance.now();
+    this.animationFrameId = requestAnimationFrame(this.animate);
+  }
+
+  public stop() {
+    if (this.animationFrameId) {
+      cancelAnimationFrame(this.animationFrameId);
+      this.animationFrameId = 0;
+    }
+  }
+
+  public destroy() {
+    this.stop();
+    this._removeEventListeners();
+  }
+  
+  public getStats(): SimulationStats {
+    return {
+      fps: this.fps,
+      avgFps: this.avgFps,
+      starCount: this.starController.getAllStars().length,
+      starshipCount: this.starshipController.getAllStarships().length,
+      frameCount: this.frameCount,
+    };
+  }
+
+  public setInteractive(enabled: boolean) {
+    if (this.config.interactive === enabled) return;
+    this.config.interactive = enabled;
+    if (this.animationFrameId !== 0) {
+      this._removeEventListeners();
+      this._setupEventListeners();
+    }
+  }
+
+  public setDebug(enabled: boolean) {
+    this.config.debug = enabled;
+    DEBUG_CONFIG.SHOW_DEBUG_INFO = enabled;
+  }
+
+  public setShowCatalog(visible: boolean) {
+    this.config.showCatalog = visible;
+    DEBUG_CONFIG.SHOW_CATALOG_PANEL = visible;
+  }
+
+  public setShowGrid(visible: boolean) {
+    this.config.showGrid = visible;
+  }
+
+  public setShowGithubLink(visible: boolean) {
+    this.config.showGithubLink = visible;
+    if (!visible) {
+      this.isMouseOverGithubLink = false;
+      this.canvas.style.cursor = 'default';
+    }
+  }
+  
+  private _setupEventListeners() {
+    this.canvas.addEventListener('mousemove', this._handleMouseMove);
+    this.canvas.addEventListener('mouseenter', this._handleMouseEnter);
+    this.canvas.addEventListener('mouseleave', this._handleMouseLeave);
+    this.canvas.addEventListener('mousedown', this._handleMouseDown);
+    window.addEventListener('mouseup', this._handleMouseUp);
+    this.canvas.addEventListener('wheel', this._handleWheel);
+    window.addEventListener('resize', this._handleResize);
+  }
+  
+  private _removeEventListeners() {
+    this.canvas.removeEventListener('mousemove', this._handleMouseMove);
+    this.canvas.removeEventListener('mouseenter', this._handleMouseEnter);
+    this.canvas.removeEventListener('mouseleave', this._handleMouseLeave);
+    this.canvas.removeEventListener('mousedown', this._handleMouseDown);
+    window.removeEventListener('mouseup', this._handleMouseUp);
+    this.canvas.removeEventListener('wheel', this._handleWheel);
+    window.removeEventListener('resize', this._handleResize);
+  }
+
+  private _handleMouseMove(event: MouseEvent) {
+    const rect = this.canvas.getBoundingClientRect();
+    const mouseX = event.clientX - rect.left;
+    const mouseY = event.clientY - rect.top;
+
+    if (this.debugPanelController && this.debugPanelController.isDragging()) {
+      this.debugPanelController.handleMouseMove(mouseX, mouseY);
+      return; 
+    }
+
+    let isOverLink = false;
+    if (this.config.showGithubLink && this.githubLinkBounds) {
+        const bounds = this.githubLinkBounds;
+        if (mouseX >= bounds.x && mouseX <= bounds.x + bounds.width &&
+            mouseY >= bounds.y && mouseY <= bounds.y + bounds.height) {
+            isOverLink = true;
+        }
+    }
+    
+    this.isMouseOverGithubLink = isOverLink;
+    
+    if (this.isMouseOverGithubLink) {
+        this.canvas.style.cursor = 'pointer';
+    } else {
+        this.canvas.style.cursor = 'default';
+    }
+
+    if (this.isMouseInside) {
+      this.mouse.x = mouseX;
+      this.mouse.y = mouseY;
+    }
+  }
+
+  private _handleMouseEnter(event: MouseEvent) {
+      this.isMouseInside = true;
+      this.mouse.x = event.clientX - this.canvas.getBoundingClientRect().left;
+      this.mouse.y = event.clientY - this.canvas.getBoundingClientRect().top;
+      this.mouse.lastX = this.mouse.x;
+      this.mouse.lastY = this.mouse.y;
+  }
+  
+  private _handleMouseLeave() {
+      this.isMouseInside = false;
+      this.mouse.lastX = -1;
+      this.mouse.lastY = -1;
+      this.mouse.dx = 0;
+      this.mouse.dy = 0;
+      this.isMouseOverGithubLink = false;
+      this.canvas.style.cursor = 'default';
+  }
+
+  private _handleMouseDown(event: MouseEvent) {
+      if (this.isMouseOverGithubLink) {
+        window.open('https://github.com/where-stars-drift', '_blank');
+        event.preventDefault();
+        return;
+      }
+
+      if (this.config.showCatalog) {
+          const rect = this.canvas.getBoundingClientRect();
+          const x = event.clientX - rect.left;
+          const y = event.clientY - rect.top;
+          if (this.debugPanelController.isMouseOver(x, y)) {
+              this.debugPanelController.handleMouseDown(x, y);
+          }
+      }
+  }
+
+  private _handleMouseUp() {
+    if (this.config.showCatalog) {
+      this.debugPanelController.handleMouseUp();
+    }
+  }
+
+  private _handleWheel(event: WheelEvent) {
+      if (this.config.showCatalog) {
+          const rect = this.canvas.getBoundingClientRect();
+          const x = event.clientX - rect.left;
+          const y = event.clientY - rect.top;
+          if (this.debugPanelController.isMouseOver(x, y)) {
+              event.preventDefault();
+              this.debugPanelController.handleScroll(event.deltaY);
+          }
+      }
+  }
+
+  private _handleResize() {
+    if (!this.canvas) return;
+    this.width = this.canvas.offsetWidth;
+    this.height = this.canvas.offsetHeight;
+    this.canvas.width = this.width;
+    this.canvas.height = this.height;
+    
+    if (this.quadtree) {
+        this.quadtree = new Quadtree({ x: 0, y: 0, width: this.width, height: this.height });
+    }
+    
+    const sectorGrid = this.layerController.getBodies('sectorGrid')[0] as SectorGrid;
+    if (sectorGrid) {
+        sectorGrid.resize(this.width, this.height);
+    }
+    
+    if (this.debugPanelController) {
+        this.debugPanelController.handleResize();
+    }
+  }
+
+  private _drawGithubIcon(x: number, y: number, size: number) {
+    this.ctx.save();
+    this.ctx.translate(x, y);
+    // Scale to fit size, default path is for 24x24 box
+    this.ctx.scale(size / 24, size / 24); 
+    const path = new Path2D('M9 19c-5 1.5-5-2.5-7-3m14 6v-3.87a3.37 3.37 0 0 0-.94-2.61c3.14-.35 6.44-1.54 6.44-7A5.44 5.44 0 0 0 20 4.77 5.07 5.07 0 0 0 19.91 1S18.73.65 16 2.48a13.38 13.38 0 0 0-7 0C6.27.65 5.09 1 5.09 1A5.07 5.07 0 0 0 5 4.77a5.44 5.44 0 0 0-1.5 3.78c0 5.42 3.3 6.61 6.44 7A3.37 3.37 0 0 0 9 18.13V22');
+    
+    const isHovered = this.isMouseOverGithubLink;
+    this.ctx.strokeStyle = isHovered ? 'rgba(255, 255, 255, 1.0)' : 'rgba(255, 255, 255, 0.8)';
+    this.ctx.lineWidth = 2;
+    this.ctx.stroke(path);
+    this.ctx.restore();
+  }
+
+  private _drawGithubLink() {
+    if (!this.config.showGithubLink) {
+        this.githubLinkBounds = null;
+        return;
+    }
+
+    const x = 16; // Corresponds to top-4, left-4
+    const y = 16;
+    const iconSize = 12;
+    const gap = 4;
+    const text = 'Where Stars Drift v1.0.0';
+
+    const isHovered = this.isMouseOverGithubLink;
+    this.ctx.fillStyle = isHovered ? 'rgba(255, 255, 255, 1.0)' : 'rgba(255, 255, 255, 0.8)';
+    this.ctx.font = '12px "Roboto Mono", monospace';
+    this.ctx.textBaseline = 'middle';
+    
+    this._drawGithubIcon(x, y, iconSize);
+
+    const textX = x + iconSize + gap;
+    const textY = y + iconSize / 2;
+    this.ctx.fillText(text, textX, textY);
+
+    const textMetrics = this.ctx.measureText(text);
+    this.githubLinkBounds = {
+        x: x,
+        y: y,
+        width: iconSize + gap + textMetrics.width,
+        height: iconSize
+    };
+  }
+
+  private _checkMouseInteraction() {
+    if (!this.isMouseInside) return;
+    
+    const starships = this.layerController.getBodies('dynamicObjects').filter(b => b instanceof Starship) as Starship[];
+    starships.forEach(ship => {
+        if (ship.state === 'FLEEING' || ship.state === 'IN_FORMATION') return;
+
+        const dx = ship.x - this.mouse.x;
+        const dy = ship.y - this.mouse.y;
+        const dist = Math.sqrt(dx * dx + dy * dy);
+
+        if (dist < 50) {
+            ship.state = 'FLEEING';
+            ship.stateTimer = 180;
+        }
+    });
+  }
+
+  private animate(currentTime: number) {
+    const deltaTime = (currentTime - this.lastTime) / 16.67; // Normalize to 60 FPS
+    this.lastTime = currentTime;
+    this.frameCount++;
+
+    // FPS Calculation
+    this.fpsFrameCount++;
+    if (currentTime - this.lastFpsUpdateTime > 1000) {
+      this.fps = this.fpsFrameCount / ((currentTime - this.lastFpsUpdateTime) / 1000);
+      this.lastFpsUpdateTime = currentTime;
+      this.fpsFrameCount = 0;
+
+      this.fpsHistory.push(this.fps);
+      if (this.fpsHistory.length > this.avgFpsWindow) {
+          this.fpsHistory.shift();
+      }
+      this.avgFps = this.fpsHistory.reduce((a, b) => a + b, 0) / this.fpsHistory.length;
+    }
+
+    this.ctx.clearRect(0, 0, this.width, this.height);
+    this.debugController.clear();
+    
+    this.pulseTime += 0.02;
+
+    if (this.config.interactive && this.isMouseInside) {
+      this.mouse.dx = this.mouse.x - this.mouse.lastX;
+      this.mouse.dy = this.mouse.y - this.mouse.lastY;
+    } else {
+      this.mouse.dx = 0;
+      this.mouse.dy = 0;
+    }
+
+    this.mouse.lastX = this.mouse.x;
+    this.mouse.lastY = this.mouse.y;
+    
+    const allStars = this.starController.getAllStars();
+    const allStarships = this.starshipController.getAllStarships();
+    const blackHoles = this.layerController.getBodies('blackHoles') as BlackHle[];
+    const allFleets = this.layerController.getBodies('dynamicObjects').filter(b => b instanceof Fleet) as Fleet[];
+    const allClans = this.starshipController.getAllClans();
+    const allFormations = formationRegistry.getAllFormations();
+    
+    this.quadtree.clear();
+    for (const body of this.allBodies) {
+      this.quadtree.insert(body);
+    }
+    
+    if (this.config.debug && DEBUG_CONFIG.SHOW_QUADTREE) {
+      this.quadtree.draw(this.ctx);
+    }
+
+    if (this.config.interactive) {
+      const newSupernovas = this.physicsController.update(blackHoles, allStars, this.quadtree, this.width, this.height);
+      this.effectsController.addSupernovas(newSupernovas);
+    }
+
+    this.allLayers.forEach(layer => {
+        layer.bodies.forEach(body => {
+            if (body instanceof Star) {
+                body.update(this.ctx, this.width, this.height, this.mouse, layer.isInteractive, this.isMouseInside, this.pulseTime);
+            } else if (body instanceof BlackHle) {
+                body.update(this.ctx, this.width, this.height, this.frameCount);
+            } else if (body instanceof Starship) {
+                if (body.state !== 'IN_FORMATION') {
+                  body.update(this.ctx, this.width, this.height, this.mouse, deltaTime);
+                }
+            } else if (body instanceof Fleet) {
+                body.update(this.ctx, this.width, this.height);
+            } else if (body instanceof Comet) {
+                body.update(this.ctx, this.width, this.height);
+            } else {
+                body.update(this.ctx, this.width, this.height);
+            }
+        });
+    });
+    
+    if (this.config.interactive) {
+      this.hoverController.update(this.mouse, this.isMouseInside, this.config.debug);
+    }
+    
+    this.layerController.getBodies('backgroundNebulas').forEach(body => body.draw(this.ctx));
+    if (this.config.showGrid) {
+      this.layerController.getBodies('sectorGrid').forEach(body => body.draw(this.ctx));
+    }
+    this.layerController.getBodies('staticStars').forEach(body => (body as Star).draw(this.ctx, this.pulseTime));
+    this.layerController.getBodies('interactiveStars').forEach(body => (body as Star).draw(this.ctx, this.pulseTime));
+    
+    this.effectsController.updateAndDrawSupernovas(this.ctx);
+    this.effectsController.drawStarToHoleStreams(this.ctx, allStars, blackHoles);
+    this.layerController.getBodies('blackHoles').forEach(body => (body as BlackHle).draw(this.ctx, this.pulseTime, this.frameCount));
+
+    this.layerController.getBodies('dynamicObjects').forEach(body => {
+      if (body instanceof Starship) {
+          const isInFleet = (this.layerController.getBodies('dynamicObjects').filter(b => b instanceof Fleet) as Fleet[]).some(f => f.members.includes(body));
+          if (!isInFleet) {
+              body.draw(this.ctx);
+          }
+      } else {
+          body.draw(this.ctx);
+      }
+    });
+
+    this.effectsController.updateAndDrawMeteors(this.ctx);
+
+    if (this.config.interactive) {
+      this.starshipController.manageStarshipTargets(allStars);
+      this.starshipController.manageFleets(this.width, this.height);
+      this._checkMouseInteraction();
+    }
+
+    // Isolate all UI drawing to prevent transform leaks
+    this.ctx.save();
+
+    this._drawGithubLink();
+    
+    if (this.config.debug) {
+      this.debugController.draw(this.ctx);
+      if (DEBUG_CONFIG.SHOW_CATALOG_PANEL) {
+          this.debugPanelController.draw({
+              starships: allStarships,
+              formations: allFormations,
+              clans: allClans,
+              fleets: allFleets,
+              stars: allStars,
+              blackHoles: blackHoles,
+          }, this.pulseTime, this.frameCount);
+      }
+      this.ctx.fillStyle = 'rgba(255, 255, 255, 0.7)';
+      this.ctx.font = '12px "Roboto Mono", monospace';
+      this.ctx.textAlign = 'right';
+      const stats = this.getStats();
+      this.ctx.fillText(`FPS: ${stats.fps.toFixed(0)} (Avg: ${stats.avgFps.toFixed(0)})`, this.width - 10, this.height - 10);
+    }
+
+    this.ctx.restore();
+
+    this.animationFrameId = requestAnimationFrame(this.animate);
+  }
+}