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 (
+
+
+
+ );
+};
+
+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,
-];