add metrics collection; integrate metrics aggregator and update dev c…

…onfiguration for metrics settings

games/hungry-lion/src/screens/play/dev/dev-config-panel.tsx

@@ -32,25 +32,77 @@ export function DevConfigPanel() {
     setConfig(newConfig);
   };
 
+  const handleNumberChange = (key: keyof DevConfig, value: string) => {
+    const numValue = parseInt(value, 10);
+    if (!isNaN(numValue)) {
+      const newConfig = {
+        ...config,
+        [key]: numValue,
+      };
+      setDevConfig(newConfig);
+      setConfig(newConfig);
+    }
+  };
+
   return (
     <Panel>
       <Title>Dev Configuration</Title>
 
       <Section>
         <SectionTitle>Debug Options</SectionTitle>
         <ToggleContainer>
-          <ToggleInput type="checkbox" checked={config.debugVitals} onChange={() => handleToggle('debugVitals')} />
+          <ToggleInput 
+            type="checkbox" 
+            checked={config.debugVitals} 
+            onChange={() => handleToggle('debugVitals')} 
+          />
           Debug vitals
         </ToggleContainer>
+        <ToggleContainer>
+          <ToggleInput
+            type="checkbox"
+            checked={config.debugStateMachine}
+            onChange={() => handleToggle('debugStateMachine')}
+          />
+          Debug state
+        </ToggleContainer>
+      </Section>
+
+      <Section>
+        <SectionTitle>Metrics Collection</SectionTitle>
+        <ToggleContainer>
+          <ToggleInput
+            type="checkbox"
+            checked={config.metricsEnabled}
+            onChange={() => handleToggle('metricsEnabled')}
+          />
+          Enable metrics collection
+        </ToggleContainer>
+        <InputContainer>
+          <InputLabel>Time window (ms):</InputLabel>
+          <NumberInput
+            type="number"
+            value={config.metricsTimeWindow}
+            onChange={(e) => handleNumberChange('metricsTimeWindow', e.target.value)}
+            min="1000"
+            max="60000"
+            step="1000"
+            disabled={!config.metricsEnabled}
+          />
+        </InputContainer>
+        <InputContainer>
+          <InputLabel>Max payload size:</InputLabel>
+          <NumberInput
+            type="number"
+            value={config.metricsMaxPayloadSize}
+            onChange={(e) => handleNumberChange('metricsMaxPayloadSize', e.target.value)}
+            min="512"
+            max="8192"
+            step="512"
+            disabled={!config.metricsEnabled}
+          />
+        </InputContainer>
       </Section>
-      <ToggleContainer>
-        <ToggleInput
-          type="checkbox"
-          checked={config.debugStateMachine}
-          onChange={() => handleToggle('debugStateMachine')}
-        />
-        Debug state
-      </ToggleContainer>
     </Panel>
   );
 }
@@ -112,6 +164,47 @@ const ToggleContainer = styled.label`
   }
 `;
 
+const InputContainer = styled.div`
+  display: flex;
+  align-items: center;
+  margin-bottom: 8px;
+  font-size: 12px;
+
+  &:last-child {
+    margin-bottom: 0;
+  }
+`;
+
+const InputLabel = styled.label`
+  flex: 1;
+  margin-right: 8px;
+  color: rgba(255, 255, 255, 0.9);
+`;
+
+const NumberInput = styled.input`
+  width: 80px;
+  padding: 4px;
+  border: 1px solid rgba(255, 255, 255, 0.3);
+  border-radius: 3px;
+  background: transparent;
+  color: white;
+  font-size: 12px;
+
+  &:disabled {
+    opacity: 0.5;
+    cursor: not-allowed;
+  }
+
+  &:focus {
+    outline: none;
+    border-color: #4a9eff;
+  }
+
+  &:hover:not(:disabled) {
+    border-color: #4a9eff;
+  }
+`;
+
 const ToggleInput = styled.input`
   margin-right: 8px;
   cursor: pointer;
@@ -143,4 +236,9 @@ const ToggleInput = styled.input`
   &:hover {
     border-color: #4a9eff;
   }
-`;
+
+  &:disabled {
+    opacity: 0.5;
+    cursor: not-allowed;
+  }
+`;

games/hungry-lion/src/screens/play/dev/dev-config.ts

@@ -5,8 +5,13 @@ export interface DevConfig {
   // Setting to enable debug rendering of vital information
   debugVitals: boolean;
 
-  // Setin to enable state machine debugging
+  // Setting to enable state machine debugging
   debugStateMachine: boolean;
+
+  // Metrics collection settings
+  metricsEnabled: boolean;
+  metricsTimeWindow: number;
+  metricsMaxPayloadSize: number;
 }
 
 /**
@@ -15,6 +20,10 @@ export interface DevConfig {
 const DEFAULT_CONFIG: DevConfig = {
   debugVitals: false,
   debugStateMachine: false,
+  // Default metrics settings
+  metricsEnabled: false,
+  metricsTimeWindow: 10000, // 10 seconds
+  metricsMaxPayloadSize: 2048, // characters
 };
 
 /**
@@ -38,9 +47,15 @@ function deserializeConfig(hash: string): Partial<DevConfig> {
 
     const params = new URLSearchParams(match[1]);
     const config: Partial<DevConfig> = {};
+
     params.forEach((value, key) => {
       if (key in DEFAULT_CONFIG) {
-        config[key as keyof DevConfig] = value === 'true';
+        if (key === 'metricsTimeWindow' || key === 'metricsMaxPayloadSize') {
+          config[key] = Number(value);
+        } else {
+          const boolKey = key as keyof Omit<DevConfig, 'metricsTimeWindow' | 'metricsMaxPayloadSize'>;
+          config[boolKey] = value === 'true';
+        }
       }
     });
     return config;

games/hungry-lion/src/screens/play/game-world/game-world-update.ts

@@ -1,4 +1,5 @@
 import { createEntities, entitiesUpdate } from './entities/entities-update';
+import { metricsAggregator } from '../../../utils/metrics/metrics-aggregator';
 import { environmentInit, environmentUpdate } from './environment/environment-update';
 import { GameWorldState, UpdateContext } from './game-world-types';
 import { interactionsUpdate } from './interactions/interactions-update';
@@ -15,6 +16,8 @@ export function gameWorldUpdate(updateContext: UpdateContext): GameWorldState {
   environmentUpdate(updateContext);
 
   updateContext.gameState.time += updateContext.deltaTime;
+
+  metricsAggregator.aggregateAndSend();
   return updateContext.gameState;
 }
 

games/hungry-lion/src/screens/play/game-world/interactions/definitions/lion-prey-interaction.ts

@@ -1,6 +1,7 @@
 import { InteractionDefinition } from '../interactions-types';
 import { vectorDistance, vectorNormalize, vectorSubtract, vectorScale } from '../../utils/math-utils';
-import { PreyEntity } from '../../entities/entities-types';
+import { metricsAggregator } from '../../../../../utils/metrics/metrics-aggregator';
+import { LionEntity, PreyEntity } from '../../entities/entities-types';
 
 const HEALTH_DECREMENT = 1;
 const FORCE_STRENGTH = 0.005;
@@ -19,8 +20,10 @@ export const LION_PREY_INTERACTION: InteractionDefinition = {
   },
 
   perform: (source, target, updateContext) => {
+    const lion = source as LionEntity;
     const prey = target as PreyEntity;
 
+    metricsAggregator.recordCatchEvent(lion.hungerLevel);
     // Reduce prey health
     prey.health = Math.max(prey.health - HEALTH_DECREMENT, 0);
 

games/hungry-lion/src/screens/play/game-world/state-machine/states/prey/prey-fleeing-state.ts

@@ -1,4 +1,5 @@
 import { PreyEntity } from '../../../entities/entities-types';
+import { metricsAggregator } from '../../../../../../utils/metrics/metrics-aggregator';
 import { BaseStateData, State } from '../../state-machine-types';
 import { shouldFlee, updateFleeing } from './prey-state-utils';
 
@@ -18,6 +19,9 @@ export const PREY_FLEEING_STATE: State<PreyEntity, PreyFleeingStateData> = {
   update: (data, context) => {
     const { entity } = context;
     const currentTime = context.updateContext.gameState.time;
+    if (data.enteredAt === currentTime) {
+      metricsAggregator.recordFleeEvent();
+    }
     const timeInState = currentTime - data.enteredAt;
 
     // Only consider stopping fleeing after minimum flee time