@buley/hexgrid-3d 1.0.0 → 1.1.1

package/src/components/NarrationOverlay.tsx

@@ -1,43 +1,44 @@
 /**
  * Narration Overlay Component
- * 
+ *
  * Displays play-by-play narration messages with sparklines in a NOC dashboard style.
  */
 
-import React, { useEffect, useRef } from 'react'
-import { NarrationMessage } from '@/lib/narration'
-import { StatsTracker } from '@/lib/stats-tracker'
-import { getAccentRgba, getAccentHex } from '@/lib/theme-colors'
+import React, { useEffect, useRef } from 'react';
+import { NarrationMessage } from '@/lib/narration';
+import { StatsTracker } from '@/lib/stats-tracker';
+import { getAccentRgba, getAccentHex } from '@/lib/theme-colors';
 
 export interface NarrationOverlayProps {
-  messages: NarrationMessage[]
-  statsTracker: StatsTracker | null
-  isVisible: boolean
-  onClose: () => void
+  messages: NarrationMessage[];
+  statsTracker: StatsTracker | null;
+  isVisible: boolean;
+  onClose: () => void;
 }
 
 export const NarrationOverlay: React.FC<NarrationOverlayProps> = ({
   messages,
   statsTracker,
   isVisible,
-  onClose
+  onClose,
 }) => {
-  const messagesEndRef = useRef<HTMLDivElement>(null)
-  const scrollContainerRef = useRef<HTMLDivElement>(null)
+  const messagesEndRef = useRef<HTMLDivElement>(null);
+  const scrollContainerRef = useRef<HTMLDivElement>(null);
 
   // Auto-scroll to latest message
   useEffect(() => {
     if (messagesEndRef.current && scrollContainerRef.current) {
-      scrollContainerRef.current.scrollTop = scrollContainerRef.current.scrollHeight
+      scrollContainerRef.current.scrollTop =
+        scrollContainerRef.current.scrollHeight;
     }
-  }, [messages])
+  }, [messages]);
 
   // Always render the overlay so fade-out can animate smoothly.
   // Toggle visibility via styles.
 
-  const currentStats = statsTracker?.getCurrentStats()
-  const allTimeRecords = statsTracker?.getAllTimeRecords()
-  const leaderboard = statsTracker?.getLeaderboard(10)
+  const currentStats = statsTracker?.getCurrentStats();
+  const allTimeRecords = statsTracker?.getAllTimeRecords();
+  const leaderboard = statsTracker?.getLeaderboard(10);
 
   return (
     <div
@@ -62,12 +63,21 @@ export const NarrationOverlay: React.FC<NarrationOverlayProps> = ({
         transition: 'opacity 220ms ease, transform 220ms ease',
         opacity: isVisible ? 1 : 0,
         transform: isVisible ? 'translateY(0px)' : 'translateY(-6px)',
-        pointerEvents: isVisible ? 'auto' as const : 'none' as const
+        pointerEvents: isVisible ? ('auto' as const) : ('none' as const),
       }}
     >
       {/* Header */}
-      <div style={{ display: 'flex', justifyContent: 'space-between', alignItems: 'center', marginBottom: 8 }}>
-        <div style={{ fontWeight: 'bold', fontSize: 14 }}>Play-by-Play Narration</div>
+      <div
+        style={{
+          display: 'flex',
+          justifyContent: 'space-between',
+          alignItems: 'center',
+          marginBottom: 8,
+        }}
+      >
+        <div style={{ fontWeight: 'bold', fontSize: 14 }}>
+          Play-by-Play Narration
+        </div>
         <button
           onClick={onClose}
           style={{
@@ -77,7 +87,7 @@ export const NarrationOverlay: React.FC<NarrationOverlayProps> = ({
             cursor: 'pointer',
             padding: '4px 8px',
             borderRadius: 4,
-            fontSize: 11
+            fontSize: 11,
           }}
         >
           ×
@@ -87,31 +97,79 @@ export const NarrationOverlay: React.FC<NarrationOverlayProps> = ({
       {/* Stats Dashboard (Collapsible) */}
       {currentStats && (
         <details style={{ marginBottom: 8, fontSize: 11 }}>
-          <summary style={{ cursor: 'pointer', color: '#00ffff', marginBottom: 4 }}>
+          <summary
+            style={{ cursor: 'pointer', color: '#00ffff', marginBottom: 4 }}
+          >
             Stats Dashboard
           </summary>
-          <div style={{ padding: '8px', background: 'rgba(0, 255, 255, 0.05)', borderRadius: 4 }}>
-            <div style={{ display: 'flex', justifyContent: 'space-between', marginBottom: 4 }}>
+          <div
+            style={{
+              padding: '8px',
+              background: 'rgba(0, 255, 255, 0.05)',
+              borderRadius: 4,
+            }}
+          >
+            <div
+              style={{
+                display: 'flex',
+                justifyContent: 'space-between',
+                marginBottom: 4,
+              }}
+            >
               <span>Generation:</span>
-              <span style={{ fontVariantNumeric: 'tabular-nums' }}>{currentStats.generation}</span>
+              <span style={{ fontVariantNumeric: 'tabular-nums' }}>
+                {currentStats.generation}
+              </span>
             </div>
-            <div style={{ display: 'flex', justifyContent: 'space-between', marginBottom: 4 }}>
+            <div
+              style={{
+                display: 'flex',
+                justifyContent: 'space-between',
+                marginBottom: 4,
+              }}
+            >
               <span>Active Memes:</span>
-              <span style={{ fontVariantNumeric: 'tabular-nums' }}>{currentStats.activeMemesCount}</span>
+              <span style={{ fontVariantNumeric: 'tabular-nums' }}>
+                {currentStats.activeMemesCount}
+              </span>
             </div>
-            <div style={{ display: 'flex', justifyContent: 'space-between', marginBottom: 4 }}>
+            <div
+              style={{
+                display: 'flex',
+                justifyContent: 'space-between',
+                marginBottom: 4,
+              }}
+            >
               <span>Total Hexes:</span>
-              <span style={{ fontVariantNumeric: 'tabular-nums' }}>{currentStats.totalHexesInfected}</span>
+              <span style={{ fontVariantNumeric: 'tabular-nums' }}>
+                {currentStats.totalHexesInfected}
+              </span>
             </div>
-            <div style={{ display: 'flex', justifyContent: 'space-between', marginBottom: 4 }}>
+            <div
+              style={{
+                display: 'flex',
+                justifyContent: 'space-between',
+                marginBottom: 4,
+              }}
+            >
               <span>Birth/Death Ratio:</span>
               <span style={{ fontVariantNumeric: 'tabular-nums' }}>
                 {currentStats.populationStability.toFixed(2)}
               </span>
             </div>
             {allTimeRecords && (
-              <div style={{ marginTop: 8, paddingTop: 8, borderTop: '1px solid rgba(0, 255, 255, 0.2)' }}>
-                <div style={{ fontSize: 10, color: '#00ffff', marginBottom: 4 }}>All-Time Records:</div>
+              <div
+                style={{
+                  marginTop: 8,
+                  paddingTop: 8,
+                  borderTop: '1px solid rgba(0, 255, 255, 0.2)',
+                }}
+              >
+                <div
+                  style={{ fontSize: 10, color: '#00ffff', marginBottom: 4 }}
+                >
+                  All-Time Records:
+                </div>
                 <div style={{ fontSize: 10, marginBottom: 2 }}>
                   Highest Territory: {allTimeRecords.highestTerritory.value}
                 </div>
@@ -127,11 +185,19 @@ export const NarrationOverlay: React.FC<NarrationOverlayProps> = ({
       {/* Leaderboard (Collapsible) */}
       {leaderboard && leaderboard.length > 0 && (
         <details style={{ marginBottom: 8, fontSize: 11 }}>
-          <summary style={{ cursor: 'pointer', color: '#00ffff', marginBottom: 4 }}>
+          <summary
+            style={{ cursor: 'pointer', color: '#00ffff', marginBottom: 4 }}
+          >
             Top 10 Leaderboard
           </summary>
-          <div style={{ padding: '8px', background: 'rgba(0, 255, 255, 0.05)', borderRadius: 4 }}>
-            {leaderboard.map((entry, i) => (
+          <div
+            style={{
+              padding: '8px',
+              background: 'rgba(0, 255, 255, 0.05)',
+              borderRadius: 4,
+            }}
+          >
+            {leaderboard.map((entry: any, i: number) => (
               <div
                 key={entry.photoId}
                 style={{
@@ -139,13 +205,15 @@ export const NarrationOverlay: React.FC<NarrationOverlayProps> = ({
                   justifyContent: 'space-between',
                   marginBottom: 2,
                   fontSize: 10,
-                  color: i < 3 ? '#00ff00' : '#00ffff'
+                  color: i < 3 ? '#00ff00' : '#00ffff',
                 }}
               >
                 <span>
                   {i + 1}. {entry.photoId.slice(0, 20)}...
                 </span>
-                <span style={{ fontVariantNumeric: 'tabular-nums' }}>{entry.territory} hexes</span>
+                <span style={{ fontVariantNumeric: 'tabular-nums' }}>
+                  {entry.territory} hexes
+                </span>
               </div>
             ))}
           </div>
@@ -161,11 +229,18 @@ export const NarrationOverlay: React.FC<NarrationOverlayProps> = ({
           maxHeight: '400px',
           padding: '8px',
           background: 'rgba(0, 0, 0, 0.3)',
-          borderRadius: 4
+          borderRadius: 4,
         }}
       >
         {messages.length === 0 ? (
-          <div style={{ color: 'rgba(0, 255, 255, 0.5)', fontStyle: 'italic', textAlign: 'center', padding: '20px' }}>
+          <div
+            style={{
+              color: 'rgba(0, 255, 255, 0.5)',
+              fontStyle: 'italic',
+              textAlign: 'center',
+              padding: '20px',
+            }}
+          >
             No narration yet. Evolution in progress...
           </div>
         ) : (
@@ -175,14 +250,25 @@ export const NarrationOverlay: React.FC<NarrationOverlayProps> = ({
               style={{
                 marginBottom: 8,
                 padding: '6px',
-                background: msg.priority >= 8 ? 'rgba(255, 165, 0, 0.1)' : 'rgba(0, 255, 255, 0.05)',
+                background:
+                  msg.priority >= 8
+                    ? 'rgba(255, 165, 0, 0.1)'
+                    : 'rgba(0, 255, 255, 0.05)',
                 borderRadius: 4,
-                borderLeft: `2px solid ${msg.priority >= 8 ? '#ffaa00' : '#00ffff'}`,
+                borderLeft: `2px solid ${
+                  msg.priority >= 8 ? '#ffaa00' : '#00ffff'
+                }`,
                 fontSize: 11,
-                lineHeight: 1.4
+                lineHeight: 1.4,
               }}
             >
-              <div style={{ display: 'flex', justifyContent: 'space-between', marginBottom: 2 }}>
+              <div
+                style={{
+                  display: 'flex',
+                  justifyContent: 'space-between',
+                  marginBottom: 2,
+                }}
+              >
                 <span style={{ color: 'rgba(0, 255, 255, 0.7)', fontSize: 10 }}>
                   Gen {msg.generation}
                 </span>
@@ -198,12 +284,15 @@ export const NarrationOverlay: React.FC<NarrationOverlayProps> = ({
                       marginTop: 4,
                       fontFamily: "'Courier New', monospace",
                       fontSize: 14,
-                      color: msg.eventType === 'slam_dunk' || msg.eventType === 'on_fire' 
-                        ? '#00ff00' 
-                        : msg.eventType === 'decline' || msg.eventType === 'missed_shot'
-                        ? '#ff4444'
-                        : '#00ffff',
-                      letterSpacing: '2px'
+                      color:
+                        msg.eventType === 'slam_dunk' ||
+                        msg.eventType === 'on_fire'
+                          ? '#00ff00'
+                          : msg.eventType === 'decline' ||
+                            msg.eventType === 'missed_shot'
+                          ? '#ff4444'
+                          : '#00ffff',
+                      letterSpacing: '2px',
                     }}
                   >
                     {msg.sparkline}
@@ -216,6 +305,5 @@ export const NarrationOverlay: React.FC<NarrationOverlayProps> = ({
         <div ref={messagesEndRef} />
       </div>
     </div>
-  )
-}
-
+  );
+};

package/src/components/index.ts

@@ -1,2 +1,3 @@
 export { HexGrid } from './HexGrid';
-export type { Photo, HexGridProps } from './HexGrid';
+export type { HexGridProps, Photo } from '../types';
+export type { Photo as PhotoType } from '../types';

package/src/features.ts

@@ -1,48 +1,48 @@
 /**
  * Feature flags for HexGrid 3D
- * 
+ *
  * Allows enabling/disabling features at runtime for different client environments
  */
 
 export interface HexGridFeatureFlags {
   /** Enable/disable play-by-play narration overlay */
-  enableNarration?: boolean
-  
+  enableNarration?: boolean;
+
   /** Enable/disable statistics tracking and display */
-  enableStats?: boolean
-  
+  enableStats?: boolean;
+
   /** Enable/disable debug panel */
-  enableDebugPanel?: boolean
-  
+  enableDebugPanel?: boolean;
+
   /** Enable/disable camera controls UI */
-  enableCameraControls?: boolean
-  
+  enableCameraControls?: boolean;
+
   /** Enable/disable worker-based rendering */
-  enableWorker?: boolean
-  
+  enableWorker?: boolean;
+
   /** Enable/disable texture/image loading */
-  enableTextures?: boolean
-  
+  enableTextures?: boolean;
+
   /** Enable/disable evolution/animation system */
-  enableEvolution?: boolean
-  
+  enableEvolution?: boolean;
+
   /** Enable/disable autoplay functionality */
-  enableAutoplay?: boolean
-  
+  enableAutoplay?: boolean;
+
   /** Enable/disable user interactions (clicks, drags) */
-  enableInteractions?: boolean
-  
+  enableInteractions?: boolean;
+
   /** Enable/disable keyboard shortcuts */
-  enableKeyboardShortcuts?: boolean
-  
+  enableKeyboardShortcuts?: boolean;
+
   /** Enable/disable performance telemetry */
-  enableTelemetry?: boolean
-  
+  enableTelemetry?: boolean;
+
   /** Enable/disable sheen/visual effects */
-  enableVisualEffects?: boolean
-  
+  enableVisualEffects?: boolean;
+
   /** Enable/disable leaderboard system */
-  enableLeaderboard?: boolean
+  enableLeaderboard?: boolean;
 }
 
 /**
@@ -62,7 +62,7 @@ export const DEFAULT_FEATURE_FLAGS: Required<HexGridFeatureFlags> = {
   enableTelemetry: true,
   enableVisualEffects: true,
   enableLeaderboard: true,
-}
+};
 
 /**
  * Minimal feature flags - only core visualization
@@ -81,7 +81,7 @@ export const MINIMAL_FEATURE_FLAGS: Required<HexGridFeatureFlags> = {
   enableTelemetry: false,
   enableVisualEffects: false,
   enableLeaderboard: false,
-}
+};
 
 /**
  * Performance-focused feature flags
@@ -100,7 +100,7 @@ export const PERFORMANCE_FEATURE_FLAGS: Required<HexGridFeatureFlags> = {
   enableTelemetry: false,
   enableVisualEffects: false,
   enableLeaderboard: false,
-}
+};
 
 /**
  * Merge user-provided flags with defaults
@@ -111,7 +111,7 @@ export function mergeFeatureFlags(
   return {
     ...DEFAULT_FEATURE_FLAGS,
     ...userFlags,
-  }
+  };
 }
 
 /**
@@ -121,5 +121,5 @@ export function isFeatureEnabled(
   flags: HexGridFeatureFlags,
   feature: keyof HexGridFeatureFlags
 ): boolean {
-  return flags[feature] !== false
+  return flags[feature] !== false;
 }

package/src/index.ts

@@ -1,30 +1,30 @@
 // Main package exports
-export * from './components'
-export * from './stores'
-export * from './features'
+export * from './components';
+export * from './stores';
+export * from './features';
 
 // Export pure mathematical functions
-export * from './workers/hexgrid-math'
-export * from './utils/image-utils'
+export * from './workers/hexgrid-math';
+export * from './utils/image-utils';
 
 // Export additional types that aren't in components/stores
-export type { WorkerDebug, Photo, GridItem } from './types'
+export type { WorkerDebug, Photo, GridItem } from './types';
 
 // ═══════════════════════════════════════════════════════════════════════════
 // ENHANCED HEXGRID EXPORTS
 // ═══════════════════════════════════════════════════════════════════════════
 
 // Math library
-export * from './math'
+export * from './math';
 
 // Algorithms (graph, clustering, flow, particles, fluid)
-export * from './algorithms'
+export * from './algorithms';
 
 // WASM acceleration layer
-export * from './wasm'
+export * from './wasm';
 
 // Unified Snapshot API
-export * from './Snapshot'
+export * from './Snapshot';
 
 // Enhanced HexGrid engine with all features integrated
-export * from './HexGridEnhanced'
+export * from './HexGridEnhanced';

package/src/lib/narration.ts

@@ -0,0 +1,17 @@
+export interface NarrationMessage {
+  generation: number;
+  timestamp: string;
+  priority: number;
+  text: string;
+  eventType?: string;
+  sparkline?: string;
+}
+
+export class NarrationManager {
+  static getInstance(): any {
+    return {
+      subscribe: () => () => {},
+      getState: () => ({})
+    };
+  }
+}

package/src/lib/stats-tracker.ts

@@ -0,0 +1,25 @@
+export class StatsTracker {
+  static getInstance(): StatsTracker {
+    return new StatsTracker();
+  }
+
+  getCurrentStats(): any {
+    return {
+      generation: 1,
+      activeMemesCount: 10,
+      totalHexesInfected: 100,
+      populationStability: 0.5
+    };
+  }
+
+  getAllTimeRecords(): any {
+    return {
+      highestTerritory: { value: 100 },
+      longestSurvivalStreak: { value: 50 }
+    };
+  }
+
+  getLeaderboard(limit: number): any[] {
+    return [];
+  }
+}

package/src/lib/theme-colors.ts

@@ -0,0 +1,12 @@
+export const ThemeColors = {
+  primary: '#000000',
+  secondary: '#ffffff'
+};
+
+export function getAccentRgba(alpha: number = 1): string {
+  return `rgba(0, 255, 255, ${alpha})`;
+}
+
+export function getAccentHex(): string {
+  return '#00ffff';
+}