display warning icons as messages arrive. error: icons appearing on top-left

src/pages/Minimap.tsx

@@ -71,9 +71,9 @@ const Minimap = () => {
 
   const elementsInGaze = useAppSelector(getElementsInGaze);
 
-  // useEffect(() => {
-  //   console.log('elementsInGaze: ', elementsInGaze);
-  // }, [elementsInGaze]);
+  useEffect(() => {
+    console.log('elementsInGaze: ', elementsInGaze);
+  }, [elementsInGaze]);
 
   return (
     <>

src/pages/Prototype.tsx

@@ -3,7 +3,6 @@ import { useEffect } from 'react';
 import { useAppDispatch, useAppSelector } from 'src/redux/hooks';
 import {
   type InitialMinimapState,
-  getSections,
   getWidgets,
   initializeState,
   addMessage,
@@ -86,7 +85,7 @@ const Prototype = () => {
         allWidgetIds: Object.keys(widgets),
         allMessages: messages,
         allWidgetsInNewStressLPDIds: allWidgetsInNewStressLPDIds,
-        stressLevel: stressLevel,
+        stressLevel: 0.1, // don't forget to change
       });
     }
   }, [currentStressLevel]);

src/prototype/lpd/stress/highLPD.ts

@@ -180,7 +180,7 @@ const acaDefectMessageHigh = (message: Message) => {
         lpdHelper.generateListWidget(
           lpdHelper.generateBaseWidget(
             'list',
-            'vehicle',
+            'minimap',
             500,
             500,
             300,
@@ -250,15 +250,24 @@ const highLPDMessageFunctions: any = {
 };
 
 const highLPD = (message: Message) => {
-  if (message.priority != -1)
+  console.log('highLPD');
+  if (message.priority !== -1)
     //if the message is a real message, return the clusters
     return highLPDMessageFunctions[message.kind](message);
 
   //if we get this far, we can return all widgets in this LPD
-  const tempMessage = <RequestApprovalToAttack>{
+  const tempMessage = {
     //make a dummy widget to put into LPD function
     priority: 2,
-  };
+    data: {
+      target: {
+        location: {
+          x: 0,
+          y: 0,
+        },
+      },
+    },
+  } as RequestApprovalToAttack;
 
   const messageKinds = [
     //all message kinds, so we can get all widgets

src/prototype/lpd/stress/lowLPD.ts

@@ -5,19 +5,28 @@ import type {
 } from 'src/types/schema-types';
 import lpdHelper from 'src/utils/lpdHelper';
 import { v4 as uuid } from 'uuid';
-import type { Element } from 'src/types/element';
+import type { Element, IconElement } from 'src/types/element';
 import DANGER_ICON from 'src/assets/icons/danger.svg';
-import type { Widget } from 'src/types/widget';
+import type { MapWarningWidget, Widget } from 'src/types/widget';
 import type { WidgetCluster } from 'src/types/support-types';
+import ThreatAirDefenseSmReg from 'src/assets/icons/threats/airdefense-sm-reg.svg';
 
 // Functions to create widgets, elements, and sections for each message type
 const requestApprovalToAttackMessageLow = (
   message: RequestApprovalToAttack,
 ) => {
-  const elements: Element[] = [];
-  elements.push(
+  // element in list and on minimap will share this id
+  const warningElementId = uuid();
+
+  const pearceScreenElements = [
     lpdHelper.generateRequestApprovalElement(
-      lpdHelper.generateBaseElement(uuid(), 'visual', 30, 30, message.priority),
+      lpdHelper.generateBaseElement(
+        warningElementId,
+        'visual',
+        30,
+        30,
+        message.priority,
+      ),
       message,
       lpdHelper.generateIconElement(
         lpdHelper.generateBaseElement(uuid(), 'visual', 80, 80),
@@ -32,7 +41,39 @@ const requestApprovalToAttackMessageLow = (
         'Approve',
       ),
     ),
-  );
+  ];
+
+  const minimapWidgetId1 = uuid();
+  const minimapElements: Element[] = [
+    {
+      id: warningElementId,
+      modality: 'visual',
+      type: 'icon',
+      h: 50,
+      w: 50,
+      widgetId: minimapWidgetId1,
+      src: ThreatAirDefenseSmReg,
+    } satisfies IconElement,
+  ];
+
+  const minimapWidgets: Widget[] = [
+    {
+      id: minimapWidgetId1, // this should be something static?
+      sectionType: 'minimap',
+      type: 'map-warning',
+      x: message.data.target.location.x,
+      y: message.data.target.location.y,
+      w: 50,
+      h: 50,
+      screen: '/minimap',
+      canOverlap: true,
+      useElementLocation: false,
+      maxAmount: 10,
+
+      elements: minimapElements,
+    } satisfies MapWarningWidget,
+  ];
+
   return {
     sections: [],
     possibleClusters: [
@@ -49,9 +90,10 @@ const requestApprovalToAttackMessageLow = (
             false,
             false,
             1,
-            [...elements],
+            [...pearceScreenElements],
           ),
         ),
+        ...minimapWidgets,
       ]),
     ],
   };
@@ -103,11 +145,12 @@ const acaFuelLowMessageLow = (message: Message) => {
 const missileToOwnshipDetectedMessageLow = (
   message: MissileToOwnshipDetected,
 ) => {
-  const elements: Element[] = [];
-  elements.push(
+  const elementId = uuid();
+
+  const pearceScreenElements: Element[] = [
     lpdHelper.generateMissileIncomingElement(
       lpdHelper.generateBaseElement(
-        uuid(),
+        elementId,
         'visual',
         50,
         200,
@@ -119,7 +162,8 @@ const missileToOwnshipDetectedMessageLow = (
         DANGER_ICON,
       ),
     ),
-  );
+  ];
+
   return {
     sections: [],
     possibleClusters: [
@@ -136,7 +180,7 @@ const missileToOwnshipDetectedMessageLow = (
             false,
             true,
             1,
-            [...elements],
+            [...pearceScreenElements],
           ),
         ),
       ]),
@@ -239,15 +283,24 @@ const lowLPDMessageFunctions: any = {
 };
 
 const lowLPD = (message: Message) => {
-  if (message.priority != -1)
+  if (message.priority !== -1)
     //if the message is a real message, return the clusters
     return lowLPDMessageFunctions[message.kind](message);
 
   //if we get this far, we can return all widgets in this LPD
-  const tempMessage = <RequestApprovalToAttack>{
+  const tempMessage = {
     //make a dummy widget to put into LPD function
     priority: 2,
-  };
+    data: {
+      target: {
+        location: {
+          x: 0,
+          y: 0,
+        },
+      },
+    },
+  } as RequestApprovalToAttack;
+
   const messageKinds = [
     //all message kinds, so we can get all widgets
     'RequestApprovalToAttack',

src/prototype/lpd/stress/mediumLPD.ts

@@ -239,15 +239,24 @@ const mediumLPDMessageFunctions: any = {
 };
 
 const mediumLPD = (message: Message) => {
-  if (message.priority != -1)
+  if (message.priority !== -1)
     //if the message is a real message, return the clusters
     return mediumLPDMessageFunctions[message.kind](message);
 
   //if we get this far, we can return all widgets in this LPD
-  const tempMessage = <RequestApprovalToAttack>{
+  const tempMessage = {
     //make a dummy widget to put into LPD function
     priority: 2,
-  };
+    data: {
+      target: {
+        location: {
+          x: 0,
+          y: 0,
+        },
+      },
+    },
+  } as RequestApprovalToAttack;
+
   const messageKinds = [
     //all message kinds, so we can get all widgets
     'RequestApprovalToAttack',

src/prototype/utils/initialSections.ts

@@ -90,7 +90,7 @@ const initialMinimapSections = [
     1920,
     980,
     0,
-    'vehicle',
+    'minimap',
     [],
   ),
 ];

src/prototype/utils/initialShips.ts

@@ -15,7 +15,7 @@ const ownship: Widget = {
   ...lpdHelper.generateVehicleWidget(
     lpdHelper.generateBaseWidget(
       ownshipUuid,
-      'vehicle',
+      'minimap',
       400,
       950,
       50,
@@ -50,7 +50,7 @@ const drones: Widget[] = [
     ...lpdHelper.generateVehicleWidget(
       lpdHelper.generateBaseWidget(
         droneUuid1,
-        'vehicle',
+        'minimap',
         500,
         200,
         80,
@@ -83,7 +83,7 @@ const drones: Widget[] = [
     ...lpdHelper.generateVehicleWidget(
       lpdHelper.generateBaseWidget(
         droneUuid2,
-        'vehicle',
+        'minimap',
         1500,
         550,
         80,
@@ -116,7 +116,7 @@ const drones: Widget[] = [
     ...lpdHelper.generateVehicleWidget(
       lpdHelper.generateBaseWidget(
         droneUuid3,
-        'vehicle',
+        'minimap',
         1500,
         350,
         80,
@@ -149,7 +149,7 @@ const drones: Widget[] = [
     ...lpdHelper.generateVehicleWidget(
       lpdHelper.generateBaseWidget(
         droneUuid4,
-        'vehicle',
+        'minimap',
         200,
         900,
         80,
@@ -182,7 +182,7 @@ const drones: Widget[] = [
     ...lpdHelper.generateVehicleWidget(
       lpdHelper.generateBaseWidget(
         droneUuid5,
-        'vehicle',
+        'minimap',
         1150,
         750,
         80,

src/types/support-types.ts

@@ -1,4 +1,4 @@
-import { Widget } from "./widget";
+import { type Widget } from 'src/types/widget';
 
 export type Cell = {
   widgetIDs: string[];
@@ -12,7 +12,7 @@ export type Screen = '/pearce-screen' | '/minimap' | '/right-screen';
 export type SectionType =
   | 'free'
   | 'top-bar'
-  | 'vehicle'
+  | 'minimap'
   | 'tinder'
   | 'history'
   | 'map-video';
@@ -44,4 +44,4 @@ export type WidgetCluster = {
   widgets: Widget[];
   sectionIds?: LinkedSectionWidget[];
   actions?: string[];
-}
+};