@where-stars-drift/core 1.0.0

package/src/ui/debug-panel-controller.ts

@@ -0,0 +1,339 @@
+
+/**
+ * @fileoverview Defines the DebugPanelController for rendering the debug catalog panel.
+ */
+import { DEBUG_CONFIG } from '../config/simulation';
+import { type Starship, type ShipClass, SHAPES, SHIP_CLASS_TEMPLATES } from '../entities/starship';
+import type { Formation } from '../entities/formations';
+import type { Clan } from '../entities/clans';
+import type { Fleet } from '../entities/fleet';
+import { PANEL_CONFIG } from './panel-config';
+import { drawStarshipCatalog, type ShipCatalog } from './ships-panel';
+import { drawFormationCatalog, type FormationCatalog } from './formations-panel';
+import { drawClanCatalog } from './clans-panel';
+import { drawFleetCatalog } from './fleets-panel';
+import { drawStarCatalog } from './stars-panel';
+import { drawBlackHoleCatalog } from './black-holes-panel';
+import type { CatalogData } from '../types';
+import { Star } from '../entities/star';
+import { StarFactory } from '../entities/star-factory';
+import { BlackHole } from '../entities/black-hole';
+import { BlackHoleFactory } from '../entities/black-hole-factory';
+
+type Tab = 'Ships' | 'Formations' | 'Clans' | 'Fleets' | 'Stars' | 'Holes';
+
+export class DebugPanelController {
+    private ctx: CanvasRenderingContext2D;
+    private activeTab: Tab | null = null;
+    private tabs: Tab[] = [];
+    private shipCatalog: ShipCatalog = { 'Military': {}, 'Non-Military': {} };
+    private formationCatalog: FormationCatalog = {};
+    private starCatalog: Star[] = [];
+    private blackHoleCatalog: BlackHole[] = [];
+    private panelY: number = 0;
+    private panelHeight: number = 0;
+    private scrollTop: number = 0;
+    private contentHeight: number = 0;
+    private starFactory: StarFactory;
+    private blackHoleFactory: BlackHoleFactory;
+
+    // State for scrollbar dragging
+    private isDraggingScrollbar: boolean = false;
+    private dragStartY: number = 0;
+    private dragStartScrollTop: number = 0;
+    private scrollbarThumb: { y: number, height: number } | null = null;
+    private scrollbarTrack: { x: number, y: number, width: number, height: number } | null = null;
+
+    // New state for formation ship visualization
+    private showFormationShips: boolean = false;
+
+    constructor(ctx: CanvasRenderingContext2D, allFormations: Formation[]) {
+        this.ctx = ctx;
+        this.starFactory = new StarFactory();
+        this.blackHoleFactory = new BlackHoleFactory();
+        this.initializeTabs();
+        this.cacheShipClasses();
+        this.cacheFormations(allFormations);
+        this.cacheStarVariations();
+        this.cacheBlackHoleTypes();
+        this.calculatePanelDimensions();
+    }
+
+    private initializeTabs() {
+        if (DEBUG_CONFIG.SHOW_STARSHIP_CATALOG) this.tabs.push('Ships');
+        if (DEBUG_CONFIG.SHOW_FORMATION_CATALOG) this.tabs.push('Formations');
+        if (DEBUG_CONFIG.SHOW_CLAN_CATALOG) this.tabs.push('Clans');
+        if (DEBUG_CONFIG.SHOW_FLEET_CATALOG) this.tabs.push('Fleets');
+        if (DEBUG_CONFIG.SHOW_STAR_CATALOG) this.tabs.push('Stars');
+        if (DEBUG_CONFIG.SHOW_BLACK_HOLE_CATALOG) this.tabs.push('Holes');
+
+        if (this.tabs.length > 0) {
+            this.activeTab = this.tabs[0];
+        }
+    }
+
+    private cacheShipClasses() {
+        const militaryCategories = ['Capital', 'Cruiser', 'Escort', 'Support', 'Small Craft'];
+        
+        Object.values(SHIP_CLASS_TEMPLATES).forEach(template => {
+            const groupKey = militaryCategories.includes(template.category) ? 'Military' : 'Non-Military';
+            
+            if (!this.shipCatalog[groupKey][template.category]) {
+                this.shipCatalog[groupKey][template.category] = [];
+            }
+            
+            this.shipCatalog[groupKey][template.category].push({
+                template,
+                variants: SHAPES[template.shapeKey] || [],
+            });
+        });
+    }
+
+    private cacheFormations(allFormations: Formation[]) {
+        allFormations.forEach(formation => {
+            const categoryKey = formation.category;
+            const typeKey = formation.type;
+
+            if (!this.formationCatalog[categoryKey]) {
+                this.formationCatalog[categoryKey] = {};
+            }
+            if (!this.formationCatalog[categoryKey][typeKey]) {
+                this.formationCatalog[categoryKey][typeKey] = [];
+            }
+            this.formationCatalog[categoryKey][typeKey].push(formation);
+        });
+    }
+    
+    private cacheStarVariations() {
+        // Standard Stars
+        const starWithAura = this.starFactory.createStar(0, 0);
+        starWithAura.hasAura = true;
+        this.starCatalog.push(starWithAura);
+        this.starCatalog.push(this.starFactory.createStar(0, 0, { radius: 1.5 }));
+        this.starCatalog.push(this.starFactory.createStar(0, 0, { radius: 2 }));
+    
+        // Pulsars
+        const pulsarWithAura = this.starFactory.createPulsar(0, 0);
+        pulsarWithAura.hasAura = true;
+        this.starCatalog.push(pulsarWithAura);
+        this.starCatalog.push(this.starFactory.createPulsar(0, 0));
+        this.starCatalog.push(this.starFactory.createPulsar(0, 0));
+    
+        // Ringed Planets
+        const planetWithAura = this.starFactory.createRingedPlanet(0, 0, { ringCount: 1 });
+        planetWithAura.hasAura = true;
+        this.starCatalog.push(planetWithAura);
+        this.starCatalog.push(this.starFactory.createRingedPlanet(0, 0, { ringCount: 2 }));
+        this.starCatalog.push(this.starFactory.createRingedPlanet(0, 0, { ringCount: 3 }));
+    }
+
+    private cacheBlackHoleTypes() {
+        const blackHoleTypes = this.blackHoleFactory.getAllBlackHoleTypes();
+        this.blackHoleCatalog = blackHoleTypes.map(type => this.blackHoleFactory.createBlackHole(0, 0, type));
+    }
+
+    private calculatePanelDimensions() {
+        this.panelHeight = this.ctx.canvas.height * PANEL_CONFIG.HEIGHT_PERCENT;
+        this.panelY = (this.ctx.canvas.height - this.panelHeight) / 2;
+    }
+
+    public isMouseOver(x: number, y: number): boolean {
+        return x >= PANEL_CONFIG.X && x <= PANEL_CONFIG.X + PANEL_CONFIG.WIDTH &&
+               y >= this.panelY && y <= this.panelY + this.panelHeight;
+    }
+
+    public handleScroll(deltaY: number) {
+        this.scrollTop += deltaY > 0 ? PANEL_CONFIG.SCROLL_SPEED : -PANEL_CONFIG.SCROLL_SPEED;
+        const contentAreaHeight = this.panelHeight - (PANEL_CONFIG.HEADER_HEIGHT + PANEL_CONFIG.TAB_HEIGHT);
+        const maxScroll = Math.max(0, this.contentHeight - contentAreaHeight);
+        this.scrollTop = Math.max(0, Math.min(this.scrollTop, maxScroll));
+    }
+
+    public isDragging(): boolean {
+        return this.isDraggingScrollbar;
+    }
+
+    public handleMouseDown(x: number, y: number) {
+        if (!this.activeTab || !this.isMouseOver(x, y)) return;
+
+        // Check for scrollbar thumb click
+        const contentAreaHeight = this.panelHeight - (PANEL_CONFIG.HEADER_HEIGHT + PANEL_CONFIG.TAB_HEIGHT);
+        if (this.scrollbarTrack && this.scrollbarThumb && this.contentHeight > contentAreaHeight) {
+            const track = this.scrollbarTrack;
+            const thumb = this.scrollbarThumb;
+            if (x >= track.x && x <= track.x + track.width && y >= thumb.y && y <= thumb.y + thumb.height) {
+                this.isDraggingScrollbar = true;
+                this.dragStartY = y;
+                this.dragStartScrollTop = this.scrollTop;
+                return;
+            }
+        }
+        
+        // Handle tab clicks
+        const tabY = this.panelY + PANEL_CONFIG.HEADER_HEIGHT;
+        if (y >= tabY && y <= tabY + PANEL_CONFIG.TAB_HEIGHT) {
+            const tabWidth = PANEL_CONFIG.WIDTH / this.tabs.length;
+            for (let i = 0; i < this.tabs.length; i++) {
+                const tabX = PANEL_CONFIG.X + i * tabWidth;
+                if (x >= tabX && x < tabX + tabWidth) {
+                    if (this.activeTab !== this.tabs[i]) {
+                        this.activeTab = this.tabs[i];
+                        this.scrollTop = 0; // Reset scroll on tab change
+                    }
+                    return;
+                }
+            }
+        }
+        
+        // Handle toggle clicks within panels
+        const contentY = this.panelY + PANEL_CONFIG.HEADER_HEIGHT + PANEL_CONFIG.TAB_HEIGHT;
+        const contentClickY = y - (contentY - this.scrollTop);
+
+        if (this.activeTab === 'Formations') {
+            const button = PANEL_CONFIG.TOGGLE_BUTTON;
+            if (contentClickY >= button.y && contentClickY <= button.y + button.h &&
+                x >= PANEL_CONFIG.X + button.x && x <= PANEL_CONFIG.X + button.x + button.w) {
+                this.showFormationShips = !this.showFormationShips;
+            }
+        }
+    }
+
+    public handleMouseMove(x: number, y: number) {
+        if (!this.isDraggingScrollbar) return;
+
+        const contentAreaHeight = this.panelHeight - (PANEL_CONFIG.HEADER_HEIGHT + PANEL_CONFIG.TAB_HEIGHT);
+        const maxScrollTop = Math.max(0, this.contentHeight - contentAreaHeight);
+        if (maxScrollTop <= 0) return;
+        
+        const thumbHeight = this.scrollbarThumb ? this.scrollbarThumb.height : 20;
+        const draggableAreaHeight = contentAreaHeight - thumbHeight;
+
+        if (draggableAreaHeight <= 0) return;
+
+        const scrollDelta = y - this.dragStartY;
+        const scrollTopDelta = (scrollDelta / draggableAreaHeight) * maxScrollTop;
+
+        const newScrollTop = this.dragStartScrollTop + scrollTopDelta;
+
+        this.scrollTop = Math.max(0, Math.min(newScrollTop, maxScrollTop));
+    }
+
+    public handleMouseUp() {
+        this.isDraggingScrollbar = false;
+    }
+    
+    public handleResize() {
+        this.calculatePanelDimensions();
+    }
+
+    public draw(data: CatalogData, pulseTime: number, frameCount: number) {
+        if (!this.activeTab) return;
+
+        this.ctx.save();
+        this.drawPanelBase();
+        this.drawTabs();
+
+        const contentY = this.panelY + PANEL_CONFIG.HEADER_HEIGHT + PANEL_CONFIG.TAB_HEIGHT;
+        const contentAreaHeight = this.panelHeight - (PANEL_CONFIG.HEADER_HEIGHT + PANEL_CONFIG.TAB_HEIGHT);
+
+        this.ctx.save();
+        this.ctx.beginPath();
+        this.ctx.rect(PANEL_CONFIG.X, contentY, PANEL_CONFIG.WIDTH, contentAreaHeight);
+        this.ctx.clip();
+        
+        this.ctx.translate(0, -this.scrollTop);
+
+        switch (this.activeTab) {
+            case 'Ships':
+                this.contentHeight = drawStarshipCatalog(this.ctx, contentY, this.shipCatalog);
+                break;
+            case 'Formations':
+                this.contentHeight = drawFormationCatalog(this.ctx, contentY, this.formationCatalog, this.showFormationShips);
+                break;
+            case 'Clans':
+                this.contentHeight = drawClanCatalog(this.ctx, contentY, data.clans);
+                break;
+            case 'Fleets':
+                this.contentHeight = drawFleetCatalog(this.ctx, contentY, data.fleets);
+                break;
+            case 'Stars':
+                this.contentHeight = drawStarCatalog(this.ctx, contentY, this.starCatalog, pulseTime);
+                break;
+            case 'Holes':
+                this.contentHeight = drawBlackHoleCatalog(this.ctx, contentY, this.blackHoleCatalog, pulseTime, frameCount);
+                break;
+        }
+
+        this.ctx.restore(); // Restore from translate and clip
+        this.drawScrollbar();
+        this.ctx.restore(); // Restore from initial save
+    }
+
+    private drawPanelBase() {
+        this.ctx.fillStyle = PANEL_CONFIG.BG_COLOR;
+        this.ctx.strokeStyle = PANEL_CONFIG.BORDER_COLOR;
+        this.ctx.lineWidth = 1;
+        this.ctx.fillRect(PANEL_CONFIG.X, this.panelY, PANEL_CONFIG.WIDTH, this.panelHeight);
+        this.ctx.strokeRect(PANEL_CONFIG.X, this.panelY, PANEL_CONFIG.WIDTH, this.panelHeight);
+
+        this.ctx.fillStyle = PANEL_CONFIG.TEXT_COLOR;
+        this.ctx.font = PANEL_CONFIG.TITLE_FONT;
+        this.ctx.textAlign = 'left';
+        this.ctx.textBaseline = 'middle';
+        this.ctx.fillText('Debug Catalog', PANEL_CONFIG.X + PANEL_CONFIG.PADDING, this.panelY + PANEL_CONFIG.HEADER_HEIGHT / 2);
+    }
+
+    private drawTabs() {
+        const tabY = this.panelY + PANEL_CONFIG.HEADER_HEIGHT;
+        const tabWidth = PANEL_CONFIG.WIDTH / this.tabs.length;
+        this.ctx.font = PANEL_CONFIG.TAB_FONT;
+        this.ctx.textAlign = 'center';
+
+        this.tabs.forEach((tab, i) => {
+            const tabX = PANEL_CONFIG.X + i * tabWidth;
+            if (tab === this.activeTab) {
+                this.ctx.fillStyle = 'rgba(255, 255, 255, 0.1)';
+                this.ctx.fillRect(tabX, tabY, tabWidth, PANEL_CONFIG.TAB_HEIGHT);
+                this.ctx.fillStyle = '#fff';
+            } else {
+                this.ctx.fillStyle = PANEL_CONFIG.ACCENT_COLOR;
+            }
+            this.ctx.fillText(tab, tabX + tabWidth / 2, tabY + PANEL_CONFIG.TAB_HEIGHT / 2);
+        });
+
+        this.ctx.beginPath();
+        this.ctx.moveTo(PANEL_CONFIG.X, tabY + PANEL_CONFIG.TAB_HEIGHT);
+        this.ctx.lineTo(PANEL_CONFIG.X + PANEL_CONFIG.WIDTH, tabY + PANEL_CONFIG.TAB_HEIGHT);
+        this.ctx.stroke();
+    }
+
+    private drawScrollbar() {
+        const contentY = this.panelY + PANEL_CONFIG.HEADER_HEIGHT + PANEL_CONFIG.TAB_HEIGHT;
+        const contentAreaHeight = this.panelHeight - (PANEL_CONFIG.HEADER_HEIGHT + PANEL_CONFIG.TAB_HEIGHT);
+        
+        if (this.contentHeight <= contentAreaHeight) {
+            this.scrollbarThumb = null;
+            this.scrollbarTrack = null;
+            return; // No scrollbar needed
+        }
+
+        const scrollbarWidth = 8;
+        const scrollbarX = PANEL_CONFIG.X + PANEL_CONFIG.WIDTH - scrollbarWidth - 2;
+        this.scrollbarTrack = { x: scrollbarX, y: contentY, width: scrollbarWidth, height: contentAreaHeight };
+
+
+        // Draw scrollbar track
+        this.ctx.fillStyle = 'rgba(255, 255, 255, 0.1)';
+        this.ctx.fillRect(scrollbarX, contentY, scrollbarWidth, contentAreaHeight);
+
+        // Draw scrollbar thumb
+        const thumbHeight = Math.max(20, contentAreaHeight * (contentAreaHeight / this.contentHeight));
+        const maxScrollTop = this.contentHeight - contentAreaHeight;
+        const thumbY = contentY + (this.scrollTop / maxScrollTop) * (contentAreaHeight - thumbHeight);
+        this.scrollbarThumb = { y: thumbY, height: thumbHeight };
+
+
+        this.ctx.fillStyle = this.isDraggingScrollbar ? 'rgba(255, 255, 255, 0.6)' : 'rgba(255, 255, 255, 0.4)';
+        this.ctx.fillRect(scrollbarX, thumbY, scrollbarWidth, thumbHeight);
+    }
+}

package/src/ui/fleets-panel.ts

@@ -0,0 +1,153 @@
+
+import type { Fleet } from '../entities/fleet';
+import { PANEL_CONFIG } from './panel-config';
+import { FLEET_CONFIG } from '../entities/fleet';
+
+function drawFleetDetails(ctx: CanvasRenderingContext2D, fleet: Fleet, x: number, y: number): number {
+    let currentY = y;
+    const lineHeight = 14;
+
+    ctx.font = 'bold 12px "Roboto Mono", monospace';
+    ctx.fillStyle = '#fff';
+    ctx.textAlign = 'left';
+    ctx.textBaseline = 'top';
+    ctx.fillText(fleet.name, x, currentY);
+    currentY += lineHeight * 1.5;
+
+    const details = [
+        { label: 'Clan', value: fleet.clan?.name || 'Unknown' },
+        { label: 'State', value: fleet.state },
+        { label: 'Formation', value: fleet.formation?.name || 'None' },
+        { label: 'Ships', value: fleet.members.length.toString() },
+    ];
+
+    ctx.font = '10px "Roboto Mono", monospace';
+    details.forEach(detail => {
+        ctx.fillStyle = PANEL_CONFIG.ACCENT_COLOR;
+        ctx.fillText(`${detail.label}:`, x, currentY);
+        ctx.fillStyle = PANEL_CONFIG.TEXT_COLOR;
+        ctx.fillText(detail.value, x + 70, currentY);
+        currentY += lineHeight;
+    });
+
+    currentY += lineHeight * 0.5;
+    ctx.fillStyle = PANEL_CONFIG.ACCENT_COLOR;
+    ctx.fillText('Roster:', x, currentY);
+    currentY += lineHeight;
+
+    fleet.members.forEach(ship => {
+        if (ship.shipClass) {
+            ctx.fillStyle = ship.shipClass.color;
+            ctx.fillText(`\u2022 ${ship.shipClass.name} (${ship.name})`, x + 5, currentY);
+        } else {
+            ctx.fillStyle = '#ff00ff'; // Fallback color
+            ctx.fillText(`\u2022 Unknown Ship (${ship.name})`, x + 5, currentY);
+        }
+        currentY += lineHeight;
+    });
+
+    return currentY - y; // Return the height of this section
+}
+
+function drawFleetVisualization(ctx: CanvasRenderingContext2D, fleet: Fleet, centerX: number, centerY: number) {
+    if (!fleet.formation) return;
+
+    const positions = fleet.formation.getPosition(fleet.members);
+    const maxOffset = positions.reduce((max, offset) => {
+        const dist = Math.sqrt(offset.x * offset.x + offset.y * offset.y);
+        return Math.max(max, dist);
+    }, 0);
+    
+    // Scale the formation to fit nicely in the panel
+    const vizRadius = Math.min(40, PANEL_CONFIG.WIDTH / 4);
+    const scaleFactor = vizRadius / (maxOffset + 5);
+
+    ctx.save();
+    ctx.translate(centerX, centerY);
+
+    // Draw bounding ring
+    ctx.beginPath();
+    ctx.strokeStyle = FLEET_CONFIG.RING_COLOR;
+    ctx.lineWidth = FLEET_CONFIG.RING_WIDTH;
+    ctx.setLineDash([2, 3]);
+    ctx.arc(0, 0, vizRadius, 0, Math.PI * 2);
+    ctx.stroke();
+    ctx.setLineDash([]);
+
+    // Draw ships
+    fleet.members.forEach((ship, i) => {
+        if (i >= positions.length || !ship.shipClass) return;
+        
+        ctx.save();
+        const pos = positions[i];
+        // Here we use the fleet's current rotation to orient the ships
+        const rotatedX = pos.x * Math.cos(fleet.rotation) - pos.y * Math.sin(fleet.rotation);
+        const rotatedY = pos.x * Math.sin(fleet.rotation) + pos.y * Math.cos(fleet.rotation);
+        
+        ctx.translate(rotatedX * scaleFactor, rotatedY * scaleFactor);
+        ctx.rotate(fleet.rotation + Math.PI / 2); // Ships face "up" relative to fleet direction
+
+        ctx.beginPath();
+        ship.shipClass.shape(ctx, ship.shipClass.radius * scaleFactor);
+        ctx.fillStyle = ship.shipClass.color;
+        
+        if (fleet.clan) {
+            ctx.strokeStyle = fleet.clan.color;
+        } else {
+            ctx.strokeStyle = '#FFFFFF';
+        }
+        
+        ctx.lineWidth = 0.5;
+        ctx.fill();
+        ctx.stroke();
+
+        ctx.restore();
+    });
+
+    ctx.restore();
+}
+
+export function drawFleetCatalog(ctx: CanvasRenderingContext2D, startY: number, fleets: Fleet[]): number {
+    let currentY = startY + PANEL_CONFIG.PADDING;
+
+    ctx.font = PANEL_CONFIG.GROUP_FONT;
+    ctx.fillStyle = PANEL_CONFIG.TEXT_COLOR;
+    ctx.textAlign = 'left';
+    ctx.textBaseline = 'top';
+    ctx.fillText('Active Fleets', PANEL_CONFIG.X + PANEL_CONFIG.PADDING, currentY);
+    currentY += PANEL_CONFIG.GROUP_HEADER_HEIGHT;
+    
+    if (fleets.length === 0) {
+        ctx.font = '11px "Roboto Mono", monospace';
+        ctx.fillStyle = PANEL_CONFIG.ACCENT_COLOR;
+        ctx.fillText('No active fleets in simulation.', PANEL_CONFIG.X + PANEL_CONFIG.PADDING + 10, currentY);
+        currentY += 20;
+        return currentY - startY;
+    }
+
+    fleets.forEach((fleet, i) => {
+        const rowHeight = 150 + fleet.members.length * 12;
+        const vizCenterX = PANEL_CONFIG.X + PANEL_CONFIG.PADDING + 45;
+        const vizCenterY = currentY + 70;
+        
+        drawFleetVisualization(ctx, fleet, vizCenterX, vizCenterY);
+        
+        const detailsX = vizCenterX + 60;
+        drawFleetDetails(ctx, fleet, detailsX, currentY);
+
+        currentY += rowHeight;
+
+        // Draw separator
+        if (i < fleets.length - 1) {
+            ctx.beginPath();
+            ctx.moveTo(PANEL_CONFIG.X + PANEL_CONFIG.PADDING, currentY);
+            ctx.lineTo(PANEL_CONFIG.X + PANEL_CONFIG.WIDTH - PANEL_CONFIG.PADDING, currentY);
+            ctx.strokeStyle = PANEL_CONFIG.BORDER_COLOR;
+            ctx.lineWidth = 0.5;
+            ctx.stroke();
+            currentY += PANEL_CONFIG.PADDING;
+        }
+    });
+    
+    return currentY - startY;
+}

package/src/ui/formations-panel.ts

@@ -0,0 +1,155 @@
+
+import type { Formation } from '../entities/formations';
+import { type Starship, type ShipClass, SHAPES, SHIP_CLASS_TEMPLATES } from '../entities/starship';
+import { FLEET_CONFIG } from '../entities/fleet';
+import { PANEL_CONFIG } from './panel-config';
+
+export type FormationCatalog = Record<string, Record<string, Formation[]>>;
+
+const createMockShip = (shipClassName: string): Partial<Starship> => {
+    const template = Object.values(SHIP_CLASS_TEMPLATES).find(t => t.name === shipClassName);
+    if (!template) {
+         return { shipClass: { name: shipClassName, radius: 2, color: '#ff00ff', shape: SHAPES.UTILITY[0] } as any };
+    }
+    
+    const shapeVariants = SHAPES[template.shapeKey];
+    const shape = shapeVariants[0]; // Use the first variant for consistency
+
+    return {
+        shipClass: { ...template, shape, accentColor: '#fff' } as ShipClass,
+    };
+};
+
+export function drawFormationCatalog(ctx: CanvasRenderingContext2D, startY: number, formationCatalog: FormationCatalog, showShips: boolean): number {
+    let currentY = startY + PANEL_CONFIG.PADDING;
+
+    // Draw the toggle button
+    const button = PANEL_CONFIG.TOGGLE_BUTTON;
+    ctx.strokeStyle = showShips ? '#fff' : PANEL_CONFIG.BORDER_COLOR;
+    ctx.fillStyle = showShips ? 'rgba(255, 255, 255, 0.1)' : 'transparent';
+    ctx.lineWidth = 1;
+    ctx.fillRect(button.x, currentY + button.y, button.w, button.h);
+    ctx.strokeRect(button.x, currentY + button.y, button.w, button.h);
+    
+    ctx.fillStyle = PANEL_CONFIG.TEXT_COLOR;
+    ctx.font = '11px "Roboto Mono", monospace';
+    ctx.textAlign = 'left';
+    ctx.textBaseline = 'middle';
+    ctx.fillText(`Show Ships: ${showShips ? 'ON' : 'OFF'}`, button.x + 5, currentY + button.y + button.h / 2);
+    
+    currentY += button.h + PANEL_CONFIG.PADDING * 2;
+
+
+    Object.keys(formationCatalog).forEach(category => {
+        ctx.font = PANEL_CONFIG.GROUP_FONT;
+        ctx.fillStyle = PANEL_CONFIG.TEXT_COLOR;
+        ctx.textAlign = 'left';
+        ctx.textBaseline = 'top';
+        ctx.fillText(category, PANEL_CONFIG.X + PANEL_CONFIG.PADDING, currentY);
+        currentY += PANEL_CONFIG.GROUP_HEADER_HEIGHT;
+
+        const types = formationCatalog[category];
+        Object.keys(types).forEach(type => {
+            ctx.font = PANEL_CONFIG.ROW_FONT;
+            ctx.fillStyle = PANEL_CONFIG.ACCENT_COLOR;
+            ctx.fillText(type, PANEL_CONFIG.X + PANEL_CONFIG.PADDING + 10, currentY);
+            currentY += PANEL_CONFIG.ROW_HEIGHT * 0.8;
+
+            const formationList = types[type];
+            formationList.forEach(formation => {
+                ctx.fillStyle = PANEL_CONFIG.TEXT_COLOR;
+                ctx.fillText(formation.name, PANEL_CONFIG.X + PANEL_CONFIG.PADDING + 20, currentY);
+                currentY += 15;
+
+                // Draw description
+                ctx.font = '11px "Roboto Mono", monospace';
+                ctx.fillStyle = PANEL_CONFIG.ACCENT_COLOR;
+                const words = formation.description.split(' ');
+                let line = '';
+                for (let n = 0; n < words.length; n++) {
+                    const testLine = line + words[n] + ' ';
+                    const metrics = ctx.measureText(testLine);
+                    if (metrics.width > PANEL_CONFIG.WIDTH - 60 && n > 0) {
+                        ctx.fillText(line, PANEL_CONFIG.X + PANEL_CONFIG.PADDING + 20, currentY);
+                        line = words[n] + ' ';
+                        currentY += 12;
+                    } else {
+                        line = testLine;
+                    }
+                }
+                ctx.fillText(line, PANEL_CONFIG.X + PANEL_CONFIG.PADDING + 20, currentY);
+                currentY += 15;
+
+                // Draw formation visualization
+                let mockShips: Partial<Starship>[];
+                if (formation.type === 'Strict') {
+                    mockShips = formation.composition
+                        .map(c => Array.from({ length: c.count }, () => createMockShip(c.shipClassName)))
+                        .flat();
+                } else {
+                    // For free formations, just use a set number of generic ships
+                    mockShips = Array.from({ length: 7 }, () => createMockShip(''));
+                }
+
+                const positions = formation.getPosition(mockShips as Starship[]);
+                const maxOffset = positions.reduce((max, offset) => {
+                    const dist = Math.sqrt(offset.x * offset.x + offset.y * offset.y);
+                    return Math.max(max, dist);
+                }, 0);
+                const formationRadius = maxOffset + 5; // Add some padding
+
+                ctx.save();
+                ctx.translate(PANEL_CONFIG.X + PANEL_CONFIG.WIDTH / 2, currentY + formationRadius + 10);
+                
+                // Draw dashed circle
+                ctx.beginPath();
+                ctx.strokeStyle = FLEET_CONFIG.RING_COLOR;
+                ctx.lineWidth = FLEET_CONFIG.RING_WIDTH;
+                ctx.setLineDash([2, 3]);
+                ctx.arc(0, 0, formationRadius, 0, Math.PI * 2);
+                ctx.stroke();
+                ctx.setLineDash([]);
+                
+                // Draw ships first (if enabled)
+                if (showShips && formation.type === 'Strict') {
+                    mockShips.forEach((ship, i) => {
+                        if (!ship.shipClass || i >= positions.length) return;
+                        
+                        ctx.save();
+                        ctx.translate(positions[i].x, positions[i].y);
+                        // Ships face "up" by default, so no extra rotation needed unless the formation dictates it
+                        ctx.rotate(Math.PI / 2);
+
+                        ctx.beginPath();
+                        ship.shipClass.shape(ctx, ship.shipClass.radius * PANEL_CONFIG.SHIP_RENDER_SCALE);
+                        ctx.fillStyle = ship.shipClass.color;
+                        ctx.strokeStyle = '#fff';
+                        ctx.lineWidth = 0.5;
+                        ctx.fill();
+                        ctx.stroke();
+
+                        ctx.restore();
+                    });
+                }
+
+                // Draw dots on top
+                ctx.fillStyle = 'red';
+                positions.forEach(pos => {
+                    ctx.beginPath();
+                    ctx.arc(pos.x, pos.y, 1.5, 0, Math.PI * 2);
+                    ctx.fill();
+                });
+                
+                ctx.restore();
+                
+                const totalFormationHeight = formationRadius * 2 + 20;
+                currentY += Math.max(30, totalFormationHeight); // Add spacing for next item
+
+                ctx.font = PANEL_CONFIG.ROW_FONT; // Reset font
+            });
+             currentY += PANEL_CONFIG.ROW_HEIGHT / 2;
+        });
+    });
+
+    return currentY - startY;
+}

package/src/ui/panel-config.ts

@@ -0,0 +1,26 @@
+export const PANEL_CONFIG = {
+    X: 10,
+    WIDTH: 350,
+    HEIGHT_PERCENT: 0.5,
+    HEADER_HEIGHT: 40,
+    TAB_HEIGHT: 30,
+    ROW_HEIGHT: 25,
+    GROUP_HEADER_HEIGHT: 20,
+    PADDING: 10,
+    BG_COLOR: 'rgba(0, 0, 0, 0.75)',
+    BORDER_COLOR: '#555',
+    TEXT_COLOR: '#ddd',
+    ACCENT_COLOR: '#aaa',
+    TITLE_FONT: '14px "Roboto Mono", monospace',
+    TAB_FONT: '11px "Roboto Mono", monospace',
+    ROW_FONT: '12px "Roboto Mono", monospace',
+    GROUP_FONT: 'bold 12px "Roboto Mono", monospace',
+    SHIP_RENDER_SCALE: 1,
+    SCROLL_SPEED: 20,
+    TOGGLE_BUTTON: {
+        x: 15,
+        y: 5,
+        w: 120,
+        h: 22,
+    },
+};