diff --git a/src/components/Element/Element.tsx b/src/components/Element/Element.tsx index 1098183..c458722 100644 --- a/src/components/Element/Element.tsx +++ b/src/components/Element/Element.tsx @@ -4,6 +4,7 @@ import TableElement from 'src/components/Element/Simple/TableElement'; import RequestApprovalElement from 'src/components/Element/Complex/RequestApprovalElement'; import ButtonElement from 'src/components/Element/Simple/ButtonElement'; import MissileIncomingElement from 'src/components/Element/Complex/MissileIncomingElement'; +import ImageElement from 'src/components/Element/Simple/ImageElement'; type ElementProps = { element: ElementType; @@ -46,7 +47,7 @@ const Element = ({ element, styleClass, children }: ElementProps) => { ); case 'image': - return
Image
; + return ; case 'audio': return
Audio
; case 'icon': diff --git a/src/components/Element/Simple/ImageElement.tsx b/src/components/Element/Simple/ImageElement.tsx new file mode 100644 index 0000000..97ca441 --- /dev/null +++ b/src/components/Element/Simple/ImageElement.tsx @@ -0,0 +1,27 @@ +import { type ImageElement as ImageElementType } from 'src/types/element'; + +type ImageElementProps = { + element: ImageElementType; +}; + +const ImageElement = ({ element }: ImageElementProps) => { + const { id, src, h, w, type } = element; + + if (!src) return null; + + return ( +
+ {type} +
+ ); +}; + +export default ImageElement; diff --git a/src/pages/LeftScreen.tsx b/src/pages/LeftScreen.tsx index 944da31..5fa297b 100644 --- a/src/pages/LeftScreen.tsx +++ b/src/pages/LeftScreen.tsx @@ -26,7 +26,7 @@ const LeftScreen = () => {
{/* Left Video & Map Box */} -
{ alt="Left Bottom Map" />
-
+ */} {/* Center box */}
diff --git a/src/prototype/lpd/initialLPD.ts b/src/prototype/lpd/initialLPD.ts index 90a3a44..3f39b5f 100644 --- a/src/prototype/lpd/initialLPD.ts +++ b/src/prototype/lpd/initialLPD.ts @@ -4,6 +4,7 @@ import DRONE_LOGO from 'src/assets/icons/drone.svg'; import type { MapWarningWidget, Widget, WidgetMap } from 'src/types/widget'; import lpdHelper from 'src/utils/lpdHelper'; import initialSections from 'src/prototype/utils/initialSections'; +import initialWidgets from 'src/prototype/utils/initialWidgets'; // temporary until we generate map warnings on the fly import threatMissileLgEmph from 'src/assets/icons/threats/missile-lg-emph.svg'; @@ -420,7 +421,7 @@ const initialShips: WidgetMap = { const initialLPD = { sections: [...initialSections], - widgets: { ...initialShips, ...initailMapWarnings }, + widgets: { ...initialShips, ...initailMapWarnings, ...initialWidgets }, }; export default initialLPD; diff --git a/src/prototype/lpd/stress/highLPD.ts b/src/prototype/lpd/stress/highLPD.ts index 0bb2a62..a1b61e0 100644 --- a/src/prototype/lpd/stress/highLPD.ts +++ b/src/prototype/lpd/stress/highLPD.ts @@ -157,7 +157,7 @@ const acaDefectMessageHigh = (message: Message) => { lpdHelper.generateListWidget( lpdHelper.generateBaseWidget( 'list', - 'highWarning', + 'vehicle', 500, 500, 300, diff --git a/src/prototype/utils/initialSections.ts b/src/prototype/utils/initialSections.ts index e29edea..ac3c67e 100644 --- a/src/prototype/utils/initialSections.ts +++ b/src/prototype/utils/initialSections.ts @@ -2,6 +2,59 @@ import lpdHelper from 'src/utils/lpdHelper'; import { v4 as uuid } from 'uuid'; const pearceScreenSections = [ + // the top-bar on the pearce-screen + lpdHelper.generateSection( + uuid(), + '/pearce-screen', + 0, + 0, + 1920, + 100, + 0, + 'top-bar', + [], + ), + + // left video box section + lpdHelper.generateSection( + uuid(), + '/pearce-screen', + 50, + 150, + 500, + 350, + 10, + 'map-video', + [], + ), + + // left map box section + lpdHelper.generateSection( + uuid(), + '/pearce-screen', + 50, + 550, + 500, + 350, + 10, + 'map-video', + [], + ), + + // center box section (with history and expanded messages) + lpdHelper.generateSection( + uuid(), + '/pearce-screen', + 750, + 150, + 600, + 800, + 10, + 'history', + [], + ), + + // right screen section lpdHelper.generateSection( uuid(), '/pearce-screen', @@ -15,6 +68,33 @@ const pearceScreenSections = [ ), ]; -const initialSections = [...pearceScreenSections]; +const initialMinimapSections = [ + // the top-bar on the minimap screen + lpdHelper.generateSection( + uuid(), + '/minimap', + 0, + 0, + 1920, + 100, + 0, + 'tinder', + [], + ), + // minimap section (where drones move) + lpdHelper.generateSection( + uuid(), + '/minimap', + 0, + 100, + 1920, + 980, + 0, + 'vehicle', + [], + ), +]; + +const initialSections = [...pearceScreenSections, ...initialMinimapSections]; export default initialSections; diff --git a/src/prototype/utils/initialWidgets.ts b/src/prototype/utils/initialWidgets.ts new file mode 100644 index 0000000..14a577a --- /dev/null +++ b/src/prototype/utils/initialWidgets.ts @@ -0,0 +1,68 @@ +import { v4 as uuid } from 'uuid'; +import LeftScreenMap from 'src/assets/left-bottom-map.png'; +import LeftScreenVideo from 'src/assets/left-video.png'; +import { type ListWidget } from 'src/types/widget'; +import { type ImageElement } from 'src/types/element'; + +const videoBoxUuid = uuid(); +const mapBoxUuid = uuid(); + +const initialLeftScreenWidgets = [ + // left video box widget + { + id: videoBoxUuid, + type: 'list', + screen: '/pearce-screen', + sectionType: 'map-video', + x: 50, + y: 150, + w: 500, + h: 350, + canOverlap: false, + useElementLocation: false, + priority: 10, + elements: [ + { + id: uuid(), + type: 'image', + src: LeftScreenVideo, + w: 500, + h: 350, + widgetId: videoBoxUuid, + modality: 'visual', + } satisfies ImageElement, + ], + maxAmount: 1, + } satisfies ListWidget, + + // left map box widget + { + id: mapBoxUuid, + type: 'list', + screen: '/pearce-screen', + sectionType: 'map-video', + x: 50, + y: 550, + w: 500, + h: 350, + canOverlap: false, + useElementLocation: false, + priority: 10, + elements: [ + { + id: uuid(), + type: 'image', + src: LeftScreenMap, + w: 500, + h: 350, + widgetId: mapBoxUuid, + modality: 'visual', + } satisfies ImageElement, + ], + maxAmount: 1, + } satisfies ListWidget, +]; + +const initialWidgets = [...initialLeftScreenWidgets]; + +export default initialWidgets; diff --git a/src/types/support-types.ts b/src/types/support-types.ts index 4a8607a..205bb24 100644 --- a/src/types/support-types.ts +++ b/src/types/support-types.ts @@ -9,12 +9,11 @@ export type Screen = '/pearce-screen' | '/minimap' | '/right-screen'; export type SectionType = | 'free' + | 'top-bar' | 'vehicle' | 'tinder' - | 'message' - | 'highWarning' - | 'lowWarning' - | 'request'; + | 'history' + | 'map-video'; export type Section = { id: string; diff --git a/src/utils/initialSections.ts b/src/utils/initialSections.ts deleted file mode 100644 index 457dd90..0000000 --- a/src/utils/initialSections.ts +++ /dev/null @@ -1,70 +0,0 @@ -import type { Section } from 'src/types/support-types'; -import { v4 as uuid } from 'uuid'; - -const tinderSection: Section = { - id: uuid(), - x: 50, - y: 40, - w: 350, - h: 900, - priority: 10, - screen: '/pearce-screen', - type: 'tinder', - widgetIDs: [], -}; - -const requestSection: Section = { - id: uuid(), - x: 50, - y: 850, - w: 800, - h: 200, - priority: 10, - type: 'request', - screen: '/minimap', - widgetIDs: [], -}; - -const highWarningSection: Section = { - id: uuid(), - x: 800, - y: 200, - w: 500, - h: 250, - priority: 10, - type: 'highWarning', - screen: '/minimap', - widgetIDs: [], -}; - -const lowWarningSection: Section = { - id: uuid(), - x: 1800, - y: 450, - w: 500, - h: 200, - priority: 10, - type: 'lowWarning', - screen: '/minimap', - widgetIDs: [], -}; - -const messageSection: Section = { - id: uuid(), - x: 1800, - y: 200, - w: 200, - h: 200, - priority: 10, - type: 'message', - screen: '/minimap', - widgetIDs: [], -}; - -export const initialSections = [ - tinderSection, - requestSection, - highWarningSection, - lowWarningSection, - messageSection, -];