@where-stars-drift/core 1.0.0

package/src/ui/ships-panel.ts

@@ -0,0 +1,85 @@
+
+import type { ShipClass } from '../entities/starship';
+import { PANEL_CONFIG } from './panel-config';
+
+export type ShipCatalogEntry = {
+    template: Omit<ShipClass, 'shape' | 'accentColor'> & { shapeKey: string };
+    variants: ((ctx: CanvasRenderingContext2D, r: number) => void)[];
+}
+
+export type ShipCatalog = {
+    'Military': Record<string, ShipCatalogEntry[]>;
+    'Non-Military': Record<string, ShipCatalogEntry[]>;
+}
+
+export function drawStarshipCatalog(ctx: CanvasRenderingContext2D, startY: number, shipCatalog: ShipCatalog): number {
+    let currentY = startY + PANEL_CONFIG.PADDING;
+
+    (Object.keys(shipCatalog) as Array<keyof ShipCatalog>).forEach(groupName => {
+        // Draw Main Group Header (Military / Non-Military)
+        ctx.font = PANEL_CONFIG.GROUP_FONT;
+        ctx.fillStyle = PANEL_CONFIG.TEXT_COLOR;
+        ctx.textAlign = 'left';
+        ctx.textBaseline = 'top';
+        ctx.fillText(groupName, PANEL_CONFIG.X + PANEL_CONFIG.PADDING, currentY);
+        currentY += PANEL_CONFIG.GROUP_HEADER_HEIGHT;
+        
+        const categories = shipCatalog[groupName];
+        Object.keys(categories).forEach(categoryName => {
+            // Draw Category Header (Capital, Cruiser, etc.)
+            ctx.font = PANEL_CONFIG.ROW_FONT;
+            ctx.fillStyle = PANEL_CONFIG.ACCENT_COLOR;
+            ctx.fillText(categoryName, PANEL_CONFIG.X + PANEL_CONFIG.PADDING + 10, currentY);
+            currentY += PANEL_CONFIG.ROW_HEIGHT * 0.8;
+
+            const shipClasses = categories[categoryName];
+            shipClasses.forEach(shipClassEntry => {
+                // Draw ship class name once
+                ctx.fillStyle = PANEL_CONFIG.TEXT_COLOR;
+                ctx.font = PANEL_CONFIG.ROW_FONT;
+                ctx.fillText(shipClassEntry.template.name, PANEL_CONFIG.X + PANEL_CONFIG.PADDING + 20, currentY);
+                currentY += PANEL_CONFIG.ROW_HEIGHT;
+
+                // Loop through variants and draw them vertically
+                shipClassEntry.variants.forEach((variant, index) => {
+                    const rowHeight = 40;
+                    const vizX = PANEL_CONFIG.X + PANEL_CONFIG.PADDING + 40;
+                    const vizY = currentY + rowHeight / 2;
+
+                    ctx.save();
+                    ctx.translate(vizX, vizY);
+                    ctx.rotate(-Math.PI / 2); // Point ships to the right
+
+                    ctx.beginPath();
+                    variant(ctx, shipClassEntry.template.radius * PANEL_CONFIG.SHIP_RENDER_SCALE);
+                    ctx.fillStyle = shipClassEntry.template.color;
+                    ctx.strokeStyle = '#fff';
+                    ctx.lineWidth = 0.5;
+                    ctx.fill();
+                    ctx.stroke();
+                    ctx.restore();
+
+                    // Draw details on the right
+                    const detailsX = vizX + 40;
+                    ctx.fillStyle = PANEL_CONFIG.TEXT_COLOR;
+                    ctx.font = '11px "Roboto Mono", monospace';
+                    ctx.textAlign = 'left';
+                    ctx.textBaseline = 'top';
+
+                    ctx.fillText(`Variant ${index + 1}`, detailsX, currentY + 5);
+                    
+                    ctx.font = '10px "Roboto Mono", monospace';
+                    ctx.fillStyle = PANEL_CONFIG.ACCENT_COLOR;
+                    ctx.fillText(`Radius: ${shipClassEntry.template.radius.toFixed(1)}px`, detailsX, currentY + 20);
+                    ctx.fillText(`Color: ${shipClassEntry.template.color}`, detailsX + 90, currentY + 20);
+                    
+                    currentY += rowHeight;
+                });
+                currentY += 10; // Extra padding after variants for a class
+            });
+        });
+         currentY += PANEL_CONFIG.ROW_HEIGHT / 2; // Extra space between main groups
+    });
+
+    return currentY - startY;
+}

package/src/ui/stars-panel.ts

@@ -0,0 +1,146 @@
+
+import { Star } from '../entities/star';
+import { Pulsar } from '../entities/pulsar';
+import { RingedPlanet } from '../entities/ringed-planet';
+import { PANEL_CONFIG } from './panel-config';
+
+function drawStarParameters(ctx: CanvasRenderingContext2D, star: Star, x: number, y: number) {
+    ctx.font = '10px "Roboto Mono", monospace';
+    ctx.fillStyle = PANEL_CONFIG.ACCENT_COLOR;
+    ctx.textAlign = 'left';
+    ctx.textBaseline = 'top';
+
+    let currentY = y;
+    const lineHeight = 12;
+
+    const params: { label: string; value: string }[] = [
+        { label: 'Radius', value: star.baseRadius.toFixed(2) },
+        { label: 'Mass', value: star.mass.toFixed(2) },
+        { label: 'Color', value: star.color },
+        { label: 'Aura', value: star.hasAura.toString() },
+    ];
+
+    if (star instanceof Pulsar) {
+        params.push({ label: 'Blink Speed', value: star.pulsationSpeed.toFixed(2) });
+    }
+    if (star instanceof RingedPlanet) {
+        params.push({ label: 'Rings', value: star.rings.length.toString() });
+    }
+
+    params.forEach(param => {
+        ctx.fillText(`${param.label}:`, x, currentY);
+        ctx.fillStyle = PANEL_CONFIG.TEXT_COLOR;
+        ctx.fillText(param.value, x + 70, currentY);
+        ctx.fillStyle = PANEL_CONFIG.ACCENT_COLOR;
+        currentY += lineHeight;
+    });
+}
+
+export function drawStarCatalog(ctx: CanvasRenderingContext2D, startY: number, catalogStars: Star[], pulseTime: number): number {
+    let currentY = startY + PANEL_CONFIG.PADDING;
+
+    const starTypes = [
+        { name: 'Standard Star', ctor: Star },
+        { name: 'Pulsar', ctor: Pulsar },
+        { name: 'Ringed Planet', ctor: RingedPlanet },
+    ];
+
+    starTypes.forEach(typeInfo => {
+        ctx.font = PANEL_CONFIG.GROUP_FONT;
+        ctx.fillStyle = PANEL_CONFIG.TEXT_COLOR;
+        ctx.textAlign = 'left';
+        ctx.textBaseline = 'top';
+        ctx.fillText(typeInfo.name, PANEL_CONFIG.X + PANEL_CONFIG.PADDING, currentY);
+        currentY += PANEL_CONFIG.GROUP_HEADER_HEIGHT;
+        
+        const variations = catalogStars.filter(star => {
+            if (typeInfo.ctor === Star) {
+                return star.constructor === Star;
+            }
+            return star instanceof typeInfo.ctor;
+        });
+        
+        if (variations.length === 0) {
+             ctx.font = '10px "Roboto Mono", monospace';
+             ctx.fillStyle = PANEL_CONFIG.ACCENT_COLOR;
+             ctx.fillText('No variations available for this type.', PANEL_CONFIG.X + PANEL_CONFIG.PADDING + 10, currentY);
+             currentY += 20;
+             return;
+        }
+
+        variations.forEach((sampleStar) => {
+            const rowY = currentY + 30;
+            const xPos = PANEL_CONFIG.X + PANEL_CONFIG.PADDING + 20;
+
+            // Draw star visualization
+            ctx.save();
+            ctx.translate(xPos, rowY);
+            
+            if (sampleStar instanceof Pulsar) {
+                // Update animation without moving the star by passing 0 for width/height
+                sampleStar.update(ctx, 0, 0, { dx: 0, dy: 0 }, false, false, pulseTime);
+                sampleStar.draw(ctx, pulseTime);
+            } else {
+                 const originalAura = sampleStar.hasAura;
+                 sampleStar.hasAura = false; // Disable aura for performance in catalog
+                 sampleStar.draw(ctx, 0); // Draw star statically
+                 sampleStar.hasAura = originalAura; // Restore it for parameter display
+            }
+            
+            ctx.restore();
+
+            // Draw star parameters
+            drawStarParameters(ctx, sampleStar, xPos + 40, rowY - 20);
+
+            // If it's a ringed planet, draw ring details
+            if (sampleStar instanceof RingedPlanet) {
+                const planet = sampleStar;
+                let ringListY = currentY + 80;
+                ctx.font = '10px "Roboto Mono", monospace';
+                ctx.fillStyle = PANEL_CONFIG.ACCENT_COLOR;
+                ctx.fillText("Ring Composition:", xPos + 40, ringListY);
+                ringListY += 20;
+
+                planet.rings.forEach((ring, index) => {
+                    const ringDisplayRadius = ring.radius * 0.5; // Scale down for display
+                    const ringCenterY = ringListY + ringDisplayRadius + 5;
+
+                    // Draw the ring visualization
+                    ctx.save();
+                    ctx.translate(xPos + 10, ringCenterY);
+                    ring.draw(ctx);
+                    ctx.restore();
+                    
+                    // Draw ring parameters
+                    const paramX = xPos + 40;
+                    ctx.fillStyle = PANEL_CONFIG.TEXT_COLOR;
+                    ctx.fillText(
+                        `Ring ${index + 1}: r=${ring.radius.toFixed(1)}, th=${ring.thickness.toFixed(1)}, dotted=${ring.isDotted}`,
+                        paramX,
+                        ringCenterY - 5
+                    );
+
+                    ringListY += (ringDisplayRadius * 2) + 15;
+                    
+                    // Draw separator line
+                    if (index < planet.rings.length - 1) {
+                        ctx.beginPath();
+                        ctx.moveTo(paramX - 5, ringListY);
+                        ctx.lineTo(PANEL_CONFIG.X + PANEL_CONFIG.WIDTH - PANEL_CONFIG.PADDING, ringListY);
+                        ctx.strokeStyle = PANEL_CONFIG.BORDER_COLOR;
+                        ctx.lineWidth = 0.5;
+                        ctx.stroke();
+                        ringListY += 10;
+                    }
+                });
+                currentY = ringListY;
+            } else {
+                currentY += 80;
+            }
+        });
+
+        currentY += 20; // Space between categories
+    });
+
+    return currentY - startY;
+}