display video/map using element/widget/section flow. remove unused section types. and introduce some new ones

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) => {
           </div>
         );
       case 'image':
-        return <div>Image</div>;
+        return <ImageElement element={element} />;
       case 'audio':
         return <div>Audio</div>;
       case 'icon':

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 (
+    <div id={id}>
+      <img
+        style={{
+          // height: h,
+          width: w,
+        }}
+        id={id}
+        src={src}
+        alt={type}
+      />
+    </div>
+  );
+};
+
+export default ImageElement;

src/pages/LeftScreen.tsx

@@ -26,7 +26,7 @@ const LeftScreen = () => {
       <div className="absolute min-w-[1920px] border-2 border-b-stone-800 min-h-[100px]" />
 
       {/* Left Video & Map Box */}
-      <div
+      {/* <div
         className="absolute top-[150px] left-[50px] flex items-center justify-center flex-col gap-10"
         style={{
           height: '900px',
@@ -47,7 +47,7 @@ const LeftScreen = () => {
             alt="Left Bottom Map"
           />
         </div>
-      </div>
+      </div> */}
 
       {/* Center box */}
       <div className="min-w-[600px] min-h-[800px] absolute left-[750px] top-[150px] border-2 border-stone-800 flex items-center justify-center">

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;

src/prototype/lpd/stress/highLPD.ts

@@ -157,7 +157,7 @@ const acaDefectMessageHigh = (message: Message) => {
       lpdHelper.generateListWidget(
         lpdHelper.generateBaseWidget(
           'list',
-          'highWarning',
+          'vehicle',
           500,
           500,
           300,

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;

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;

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;

src/utils/initialSections.ts

@@ -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,
-];