merged stress handler and added some functionalities to make it work with LPD

src/pages/Prototype.tsx

@@ -11,6 +11,8 @@ import {
   initializeState,
   addMessage,
   getAllElements,
+  getStressLevel,
+  setStressLevel,
 } from 'src/redux/slices/minimapSlice';
 // ~~~~~~~ Cusdom Hooks ~~~~~~~
 import useWorldSim from 'src/hooks/useWorldSim';
@@ -25,10 +27,12 @@ import { ownship, drones } from 'src/prototype/lpd/initialLPD';
 import Home from 'src/components/Home';
 import reactToMessage from 'src/prototype/reactToMessage';
 import stressChangeHandler from 'src/prototype/stressChangeHandler';
+import type { Widget } from 'src/types/widget';
 
 const Prototype = () => {
   // ~~~~~ Custom Hooks ~~~~~~
   const { messages, stressLevel } = useWorldSim();
+  const currentStressLevel = useAppSelector(getStressLevel);
 
   // ~~~~~ Selectors ~~~~~~
   const sections = useAppSelector(getSections);
@@ -71,13 +75,23 @@ const Prototype = () => {
 
     dispatch(addMessage(currentMessage));
 
-    reactToMessage({dispatch, currentMessage});
+    reactToMessage({dispatch, currentMessage, stressLevel});
   }, [messages]);
 
   useEffect(() => {
-    let allWidgetsInNewStressLPDIds: string[] = Object.keys(widgets); //this should be the actual new ones
-    stressChangeHandler({dispatch:dispatch, allWidgetIds:Object.keys(widgets), allMessages: messages, allWidgetsInNewStressLPDIds: allWidgetsInNewStressLPDIds})
-  }, [stressLevel])
+    if(stressLevel != 0){ //don't run at start
+      console.log('stress level', stressLevel)
+      let allWidgetsInNewStressLPD: Widget[] = selector({stressLevel: stressLevel})
+      console.log('allwiidgets',allWidgetsInNewStressLPD)
+      let allWidgetsInNewStressLPDIds: string[] = allWidgetsInNewStressLPD.map(a => a.id); //get all widget ids from new stress level LPD and initial LPD
+
+      stressChangeHandler({dispatch:dispatch, allWidgetIds:Object.keys(widgets), allMessages: messages, allWidgetsInNewStressLPDIds: allWidgetsInNewStressLPDIds, stressLevel:stressLevel})
+    }
+  }, [currentStressLevel]);
+
+  useEffect(() => {
+    dispatch(setStressLevel(Math.floor(stressLevel * 3)));
+  }, [stressLevel]);
 
   return <Home />;
 };

src/prototype/lpd/stress/highLPD.ts

@@ -7,6 +7,7 @@ import { v4 as uuid } from 'uuid';
 import lpdHelper from 'src/utils/lpdHelper';
 import DANGER_ICON from 'src/assets/icons/danger.svg';
 import { elements } from './lowLPD';
+import type { Widget } from 'src/types/widget';
 
 // Functions to create widgets, elements, and sections for each message type
 const requestApprovalToAttackMessageHigh = (
@@ -217,8 +218,28 @@ const highLPDMessageFunctions: any = {
   AcaHeadingToBase: acaHeadingToBaseMessageHigh,
 };
 
-const highLPD = (message: Message) => {
-  return highLPDMessageFunctions[message.kind](message);
+const highLPD = (message?: Message) => {
+  if(message)
+    return highLPDMessageFunctions[message.kind](message);
+
+  //we can return all widgets in this LPD
+  const tempMessage = <RequestApprovalToAttack>({
+    priority: 2,
+  });
+  const messageKinds = [
+    'RequestApprovalToAttack',
+    'AcaFuelLow',
+    'AcaDefect',
+    'AcaHeadingToBase',
+    'MissileToOwnshipDetected'
+  ];
+  let allPossibleWidgets: any = [];
+  messageKinds.forEach((kind) => {
+    highLPDMessageFunctions[kind](tempMessage).possibleWidgets.forEach((widget: Widget) => {
+      allPossibleWidgets.push(widget);
+    })
+  });
+  return allPossibleWidgets;
 };
 
 export default highLPD;

src/prototype/lpd/stress/lowLPD.ts

@@ -3,6 +3,7 @@ import lpdHelper from 'src/utils/lpdHelper';
 import { v4 as uuid } from 'uuid';
 import type { Element } from 'src/types/element';
 import DANGER_ICON from 'src/assets/icons/danger.svg';
+import type { Widget } from 'src/types/widget';
 
 export const elements: Element[] = [];
 
@@ -194,7 +195,29 @@ const lowLPDMessageFunctions: any = {
 };
 
 const lowLPD = (message: Message) => {
-  return lowLPDMessageFunctions[message.kind](message);
+  if(message.priority != -1){
+    return lowLPDMessageFunctions[message.kind](message);
+  }
+
+  
+  //we can return all widgets in this LPD
+  const tempMessage = <RequestApprovalToAttack>({
+    priority: 2,
+  });
+  const messageKinds = [
+    'RequestApprovalToAttack',
+    'AcaFuelLow',
+    'AcaDefect',
+    'AcaHeadingToBase',
+    'MissileToOwnshipDetected'
+  ];
+  let allPossibleWidgets: any = [];
+  messageKinds.forEach((kind) => {
+    lowLPDMessageFunctions[kind](tempMessage).possibleWidgets.forEach((widget: Widget) => {
+      allPossibleWidgets.push(widget);
+    })
+  });
+  return allPossibleWidgets;
 };
 
 export default lowLPD;

src/prototype/lpd/stress/mediumLPD.ts

@@ -217,8 +217,9 @@ const mediumLPDMessageFunctions: any = {
   MissileToOwnshipDetected: missileToOwnshipDetectedMessageMedium,
 };
 
-const mediumLPD = (message: Message) => {
-  return mediumLPDMessageFunctions[message.kind](message);
+const mediumLPD = (message?: Message) => {
+  if(message)
+    return mediumLPDMessageFunctions[message.kind](message);
 };
 
 export default mediumLPD;

src/prototype/reactToMessage.ts

@@ -9,6 +9,7 @@ type ReactToMessageProps = {
     // define expected input here and it's type (number, string, etc.)
     dispatch: AppDispatch;
     currentMessage: Message;
+    stressLevel: number;
 };
 
 /**
@@ -19,6 +20,7 @@ type ReactToMessageProps = {
 const reactToMessage = ({ 
     dispatch,
     currentMessage,
+    stressLevel,
 }: ReactToMessageProps) => {
 
     const sections = store.getState().minimap.sections;
@@ -27,6 +29,7 @@ const reactToMessage = ({
 
     const { message, possibleWidgets } = selector({
         message: currentMessage,
+        stressLevel,
       });
   
       // possibleWidgets[0].id = uuid();

src/prototype/selector.ts

@@ -1,20 +1,9 @@
 import type { Message } from 'src/types/schema-types';
-import { v4 as uuid } from 'uuid';
-import type { Widget } from 'src/types/widget';
-import type {
-  Element,
-  ButtonElement,
-  IconElement,
-  TextElement,
-  TableElement,
-  RequestApprovalElement,
-  MissileIncomingElement,
-} from 'src/types/element';
-import DANGER_ICON from 'src/icons/danger.svg';
 import lowLPD from 'src/prototype/lpd/stress/lowLPD';
 import mediumLPD from 'src/prototype/lpd/stress/mediumLPD';
 import highLPD from 'src/prototype/lpd/stress/highLPD';
 import initialLPD from 'src/prototype/lpd/initialLPD';
+import type { Widget } from 'src/types/widget';
 
 const stressLevelLPDFunctions = [lowLPD, mediumLPD, highLPD];
 
@@ -33,6 +22,17 @@ const selector = ({ message, stressLevel }: SelectorProps = {}) => {
   if (!message && !stressLevel) {
     // If no message and no stress provided, return the initial LPD
     return initialLPD;
+  } else if(stressLevel && !message) { //return all widgets in current stressLevel
+    let widgetsInInitial: Widget[] = [];
+    for (const [key, widget] of Object.entries(initialLPD.widgets)) {
+        widgetsInInitial.push(widget);
+    }
+
+    stressLevel = Math.floor(stressLevel! * 3); //get stress level as int
+    const tempMessage = <Message>({ //dummy message to put into function
+      priority: -1,
+    })
+    return widgetsInInitial.concat(stressLevelLPDFunctions[stressLevel](tempMessage));
   } else {
     // Transform range of stress levels from 0-1 to 0-2 only returning integers
     stressLevel = Math.floor(stressLevel! * 3);

src/prototype/stressChangeHandler.ts

@@ -1,9 +1,6 @@
-import { ElementInGaze } from "src/redux/slices/gazeSlice";
 import { removeWidget } from "src/redux/slices/minimapSlice";
-import { AppDispatch } from "src/redux/store";
-import { BaseElement } from "src/types/element";
-import { Message } from "src/types/schema-types";
-import { Widget } from "src/types/widget";
+import type { AppDispatch } from "src/redux/store";
+import type { Message } from "src/types/schema-types";
 import reactToMessage from "./reactToMessage";
 
 
@@ -14,6 +11,7 @@ type StressChangeHandlerProps = {
     allWidgetIds: string[];
     allMessages: Message[];
     allWidgetsInNewStressLPDIds: string[];
+    stressLevel: number;
   };
   
 /**
@@ -26,6 +24,7 @@ const stressChangeHandler = ({
     allWidgetIds,
     allMessages,
     allWidgetsInNewStressLPDIds,
+    stressLevel,
  }: StressChangeHandlerProps) => {
     allWidgetIds.forEach(function(widgetId, widgetIdIndex){
         if(!allWidgetsInNewStressLPDIds.includes(widgetId)){
@@ -35,7 +34,7 @@ const stressChangeHandler = ({
 
     allMessages.forEach(function(message, messageIndex){
         if(!message.fulfilled){
-            reactToMessage({dispatch:dispatch, currentMessage:message});
+            reactToMessage({dispatch:dispatch, currentMessage:message, stressLevel:stressLevel});
         }
     });
 

src/redux/slices/minimapSlice.ts

@@ -21,6 +21,8 @@ export type InitialMinimapState = {
   widgets: WidgetMap;
   messages: Message[];
   sections: Section[];
+
+  stressLevel: number;
 };
 
 const initialState: InitialMinimapState = {
@@ -31,6 +33,7 @@ const initialState: InitialMinimapState = {
   messages: [],
   widgets: {},
   sections: [],
+  stressLevel: 0,
 };
 
 export const minimapSlice = createSlice({
@@ -314,6 +317,10 @@ export const minimapSlice = createSlice({
     addMessage: (state, action: PayloadAction<Message>) => {
       state.messages.push(action.payload);
     },
+
+    setStressLevel: (state, action: PayloadAction<number>) => {
+      state.stressLevel = action.payload;
+    }
   },
   // selectors are used to access parts of the state within components
   selectors: {
@@ -360,6 +367,7 @@ export const minimapSlice = createSlice({
     getVisualComplexity: (state) => state.visualComplexity,
     getAudioComplexity: (state) => state.audioComplexity,
     getMessages: (state) => state.messages,
+    getStressLevel: (state) => state.stressLevel,
 
     // ~~~~~ selectors for ships ~~~~~
     getOwnship: (state) => {
@@ -399,6 +407,8 @@ export const {
   deleteElementFromWidget,
 
   toggleElementInteraction,
+
+  setStressLevel,
 } = minimapSlice.actions;
 
 export const {
@@ -418,4 +428,6 @@ export const {
 
   getVisualComplexity,
   getAudioComplexity,
+
+  getStressLevel,
 } = minimapSlice.selectors;

src/types/element.ts

@@ -22,6 +22,8 @@ export type BaseElement = {
   expiration?: string;
   onExpiration?: 'delete' | 'escalate' | 'deescalate';
   interacted?: boolean;
+  canOverlap?: boolean;
+  style?: Properties;
 };
 
 //