From 071540eb5d4bff24cbcdf31e52608c8ae5d8a771 Mon Sep 17 00:00:00 2001 From: polpol Date: Wed, 1 May 2024 22:24:57 -0700 Subject: [PATCH] show missileToOwnshipLow on minimap --- src/components/Prototype.tsx | 1 + src/components/Widget/Widget.tsx | 17 +++++++++++++ src/hooks/useWorldSim.ts | 17 +++++-------- src/prototype/lpd/stress/lowLPD.ts | 41 +++++++++++++++++++++++++----- src/prototype/selector.ts | 12 ++++----- 5 files changed, 63 insertions(+), 25 deletions(-) diff --git a/src/components/Prototype.tsx b/src/components/Prototype.tsx index 711d57d..bfee8b1 100644 --- a/src/components/Prototype.tsx +++ b/src/components/Prototype.tsx @@ -115,6 +115,7 @@ const Prototype = () => { return; */ // dispatch action to add new widget + console.log('Deploying widget:', widgetToDeploy); dispatch(addWidget(widgetToDeploy)); dispatch(addWidgetToSection(sectionID)); } diff --git a/src/components/Widget/Widget.tsx b/src/components/Widget/Widget.tsx index 0f10bb7..86e4256 100644 --- a/src/components/Widget/Widget.tsx +++ b/src/components/Widget/Widget.tsx @@ -1,6 +1,7 @@ import type { Widget as WidgetType } from 'src/types/widget'; import TinderWidget from './TinderWidget'; import VehicleWidget from './VehicleWidget'; +import { TextElement } from 'src/types/element'; type WidgetProps = { widget: WidgetType; @@ -13,6 +14,22 @@ const Widget = ({ widget }: WidgetProps) => { return ; case 'tinder': return ; + case 'highWarning': + return
+

{'text' in widget.elements[0] && widget.elements[0].text}

+
; default: return
Unknown Widget
; } diff --git a/src/hooks/useWorldSim.ts b/src/hooks/useWorldSim.ts index 7ab5317..210b19c 100644 --- a/src/hooks/useWorldSim.ts +++ b/src/hooks/useWorldSim.ts @@ -1,28 +1,23 @@ import { useEffect, useRef, useState } from 'react'; -import type { Message } from 'src/types/schema-types'; - -type IncomingMessage = { - message: Message; - stressLevel: number; -}; +import type { Message, SimToCmMessage, Range } from 'src/types/schema-types'; const useWorldSim = () => { const [messages, setMessages] = useState([]); - const [stressLevel, setStressLevel] = useState(0); + const [stressLevel, setStressLevel] = useState>(0); const socket = useRef(); useEffect(() => { socket.current = new WebSocket('ws://localhost:6969'); - socket.current.addEventListener('open', (event) => { + socket.current.addEventListener('open', (_event) => { console.log('\x1b[32mconnection opened\x1b[0m'); }); socket.current.addEventListener('message', (event) => { // console.log('\x1b[34mmessage received:\x1b[0m', event.data); - const { message, stressLevel }: IncomingMessage = JSON.parse(event.data); - setMessages((prevMessages) => [...prevMessages, message]); - setStressLevel(stressLevel); + const { message, stressLevel }: SimToCmMessage = JSON.parse(event.data); + setMessages((prevMessages) => [...prevMessages, message!]); + setStressLevel(stressLevel!); }); socket.current.addEventListener('close', (event) => { diff --git a/src/prototype/lpd/stress/lowLPD.ts b/src/prototype/lpd/stress/lowLPD.ts index f1756ff..6fa3c9b 100644 --- a/src/prototype/lpd/stress/lowLPD.ts +++ b/src/prototype/lpd/stress/lowLPD.ts @@ -5,7 +5,7 @@ import lpdHelper from "src/utils/lpdHelper"; const requestApprovalToAttackMessageLow = () => { return { sections: [], - widgets: [lpdHelper.generateWidget( + possibleWidgets: [lpdHelper.generateWidget( 'request', 'request', 100, @@ -23,7 +23,7 @@ const requestApprovalToAttackMessageLow = () => { const acaFuelLowMessageLow = () => { return { sections: [], - widgets: [lpdHelper.generateWidget( + possibleWidgets: [lpdHelper.generateWidget( 'message', 'message', 500, @@ -41,8 +41,8 @@ const acaFuelLowMessageLow = () => { const missileToOwnshipDetectedMessageLow = () => { return { sections: [], - widgets: [lpdHelper.generateWidget( - 'highWarning', + possibleWidgets: [lpdHelper.generateWidget( + 'missileDetected', 'highWarning', 100, 100, @@ -51,7 +51,34 @@ const missileToOwnshipDetectedMessageLow = () => { false, true, 1, - [], + [ + lpdHelper.generateTextElement( + lpdHelper.generateBaseElement( + 'textElement', + 'visual', + 100, + 100, + 0, + 0, + undefined, + undefined, + undefined, + undefined, + undefined, + undefined, + undefined, + { + fontSize: '20px', + fontWeight: 'bold', + color: 'black', + border: 'solid', + borderColor: 'black', + // borderColor: '#16fd22', + }, + ), + 'Missile Detected!', + ), + ], )], }; } @@ -59,7 +86,7 @@ const missileToOwnshipDetectedMessageLow = () => { const acaDefectMessageLow = () => { return { sections: [], - widgets: [lpdHelper.generateWidget( + possibleWidgets: [lpdHelper.generateWidget( 'highWarning', 'highWarning', 500, @@ -77,7 +104,7 @@ const acaDefectMessageLow = () => { const acaHeadingToBaseMessageLow = () => { return { sections: [], - widgets: [lpdHelper.generateWidget( + possibleWidgets: [lpdHelper.generateWidget( 'message', 'message', 500, diff --git a/src/prototype/selector.ts b/src/prototype/selector.ts index 660bfb2..512bce5 100644 --- a/src/prototype/selector.ts +++ b/src/prototype/selector.ts @@ -14,11 +14,7 @@ import mediumLPD from "./lpd/stress/mediumLPD"; import highLPD from "./lpd/stress/highLPD"; import initialLPD from "./lpd/initialLPD"; -const stressLevelLPDFunctions: any = { - "low": lowLPD, - "medium": mediumLPD, - "high": highLPD, -} +const stressLevelLPDFunctions = [lowLPD, mediumLPD, highLPD]; type SelectorProps = { message?: Message; @@ -32,8 +28,10 @@ type SelectorProps = { */ const selector = ({ message, stressLevel }: SelectorProps = {}) => { // Call the LPD function that corresponds to the stress level from the message - if (message && stressLevel) { - return stressLevelLPDFunctions[stressLevel](message); + if (message && stressLevel ) { + // Transform range of stress levels from 0-1 to 0-2 only returning integers + stressLevel = Math.floor(stressLevel * 3); + return stressLevelLPDFunctions[0](message); } else { // If no message is provided, return the initial LPD return initialLPD;