tweak: PreFare simulations

assets/css/v2/pre_fare/simulation.scss

@@ -5,120 +5,116 @@
 }
 
 .simulation-screen-scrolling-container {
-  scrollbar-color: #607180 #2E3F4D;
+  scrollbar-color: #607180 #2e3f4d;
 
   &::-webkit-scrollbar {
     width: 12px;
   }
   &::-webkit-scrollbar-thumb {
     background-color: #607180;
     border-radius: 12px;
-    border: 2px solid #2E3F4D;
+    border: 2px solid #2e3f4d;
   }
   &::-webkit-scrollbar-track {
     -webkit-box-shadow: inset 0 0 6px rgba(0, 0, 0, 0.3);
     border-radius: 12px;
-    background-color: #2E3F4D;
+    background-color: #2e3f4d;
   }
 }
 
 .simulation-screen-scrolling-container {
   display: flex;
   overflow-y: hidden;
   overflow-x: auto;
-  padding-bottom: 20px;
+  margin-bottom: 20px;
+  height: 449px;
 
   .simulation__full-page {
-    height: 344px;
-    width: 387px;
-    margin-right: 24px;
+    max-height: 407px;
+    max-width: 388px;
+    margin: 16px;
     z-index: 999;
-    box-shadow: 0px 0px 32px 0px #00000040;
 
-    & > * {
-      transform-origin: top left;
-      transform: scale(17.92%);
+    .simulation__title {
+      font-family: Inter;
+      font-size: 16px;
+      font-weight: 700;
+      line-height: 24px;
+      color: #f8f9fa;
+      margin-bottom: 10px;
     }
-  }
-
-  .simulation__flex-zone {
-    background: #2e3f4d;
-    display: flex;
-    margin: auto 2px auto 0;
-    height: 160px;
-    border-radius: 0 8px 8px 0;
-    position: relative;
 
-    &:before {
-      content: "";
-      position: absolute;
-      right: 100%;
-      // NO HEIGHT
-      border-top: 80px solid transparent;
-      border-right: 100px solid #2e3f4d;
-      border-bottom: 80px solid transparent;
+    & > *:not(.simulation__title) {
+      transform-origin: top left;
+      transform: scale(17.92%);
     }
   }
 
-  .simulation__flex-zone-widget {
-    width: 256px;
-    height: 144px;
-    margin-top: auto;
-    margin-bottom: auto;
+  .simulation__left-screen {
+    height: 375px;
+    margin: 32px 16px 16px 16px;
 
-    .alert-container--urgent {
-      background-color: unset;
-    }
+    .simulation__left-screen-widget-container {
+      display: flex;
 
-    &:last-child {
-      margin-right: 8px;
+      .simulation__left-screen-widget {
+        width: 194px;
+        margin-right: 24px;
+        & > * {
+          height: 1720px;
+          width: 1080px;
+          transform-origin: top left;
+          transform: scale(17.92%);
+          overflow: hidden;
+        }
+      }
     }
 
-    &:not(:last-child) {
-      margin-right: 24px;
+    .simulation__title {
+      font-family: Inter;
+      font-size: 16px;
+      font-weight: 400;
+      line-height: 24px;
+      color: #f8f9fa;
+      margin-bottom: 10px;
     }
+  }
 
-    .flex-one-large,
-    .flex-two-medium {
-      transform-origin: top left;
-      transform: scale(25%);
-
-      .flex-one-large__large {
-        .evergreen-content-image__container,
-        .evergreen-content-image__image {
-          max-width: 1024px;
-          max-height: 576px;
-        }
-      }
-
-      .flex-two-medium__left,
-      .flex-two-medium__right {
-        .evergreen-content-image__container,
-        .evergreen-content-image__image {
-          max-width: 480px;
-          max-height: 580px;
-        }
-      }
+  .simulation__right-screen {
+    height: 375px;
+    margin: 128px 16px 16px 16px;
 
-      & > * {
-        position: unset;
+    .simulation__right-screen-widget-container {
+      display: flex;
 
-        // Pre-Fare flex-zones are a little weird.
-        // For some reason, some widgets have padding or margin that throw off the positioning in the sim.
-        // Removing margin and padding in the widget fixes it.
+      .simulation__right-screen-widget {
+        width: 194px;
+        margin-right: 24px;
         & > * {
-          margin: 0;
-          padding: 0;
+          height: 1720px;
+          width: 1080px;
+          transform-origin: top left;
+          transform: scale(17.92%);
+          overflow: hidden;
         }
       }
     }
 
-    .flex-two-medium {
-      display: flex;
-
-      .flex-two-medium__left {
-        margin-right: 40px;
-      }
+    .simulation__title {
+      font-family: Inter;
+      font-size: 16px;
+      font-weight: 400;
+      line-height: 24px;
+      color: #f8f9fa;
+      margin-bottom: 10px;
     }
   }
+
+  .divider:after {
+    content: "";
+    position: absolute;
+    border-left: 1px solid #1e2933;
+    top: 48px;
+    height: 343px;
+  }
 }

assets/src/apps/v2/pre_fare.tsx

@@ -47,7 +47,7 @@ import ReconstructedTakeover from "Components/v2/reconstructed_takeover";
 import CRDepartures from "Components/v2/cr_departures/cr_departures";
 import OvernightCRDepartures from "Components/v2/cr_departures/overnight_cr_departures";
 import MultiScreenPage from "Components/v2/multi_screen_page";
-import SimulationScreenPage from "Components/v2/simulation_screen_page";
+import SimulationScreenPage from "Components/v2/pre_fare/simulation_screen_page";
 import SurgeBodyRight from "Components/v2/pre_fare/surge_body_right";
 import ShuttleBusInfo from "Components/v2/shuttle_bus_info";
 import BlueBikes from "Components/v2/blue_bikes";

assets/src/components/v2/pre_fare/simulation_screen_container.tsx

@@ -0,0 +1,108 @@
+import React, { ComponentType, useContext } from "react";
+import {
+  LastFetchContext,
+  ResponseMapperContext,
+} from "Components/v2/screen_container";
+import Widget, { WidgetData } from "Components/v2/widget";
+import {
+  ApiResponse,
+  useSimulationApiResponse,
+} from "Hooks/v2/use_api_response";
+import WidgetTreeErrorBoundary from "Components/v2/widget_tree_error_boundary";
+
+interface SimulationScreenLayoutProps {
+  apiResponse: ApiResponse;
+}
+
+const SimulationScreenLayout: ComponentType<SimulationScreenLayoutProps> = ({
+  apiResponse,
+}) => {
+  const responseMapper = useContext(ResponseMapperContext);
+  const data = responseMapper(apiResponse);
+  const { fullPage, flexZone } = data;
+  let leftScreenPages: WidgetData[] = [];
+  let rightScreenPages: WidgetData[] = [];
+  if (flexZone) {
+    leftScreenPages = flexZone.filter(
+      (widget: WidgetData) => widget.type === "body_left_flex"
+    );
+    rightScreenPages = flexZone.filter(
+      (widget: WidgetData) => !leftScreenPages.includes(widget)
+    );
+  }
+
+  return (
+    <div className="simulation-screen-centering-container">
+      <div className="simulation-screen-scrolling-container">
+        {apiResponse && (
+          <div className="simulation__full-page">
+            <div className="simulation__title">Live view</div>
+            <WidgetTreeErrorBoundary>
+              <Widget data={fullPage} />
+            </WidgetTreeErrorBoundary>
+          </div>
+        )}
+        {flexZone && <div className="divider"></div>}
+        {leftScreenPages && leftScreenPages.length > 0 && (
+          <div className="simulation__left-screen">
+            <div className="simulation__title">
+              Left panel ({leftScreenPages.length})
+            </div>
+            <div className="simulation__left-screen-widget-container">
+              {leftScreenPages.map(
+                (flexZonePage: WidgetData, index: number) => {
+                  return (
+                    <div
+                      key={`page${index}`}
+                      className="simulation__left-screen-widget"
+                    >
+                      <Widget data={flexZonePage} />
+                    </div>
+                  );
+                }
+              )}
+            </div>
+          </div>
+        )}
+        {rightScreenPages && rightScreenPages.length > 0 && (
+          <div className="simulation__right-screen">
+            <div className="simulation__title">
+              Flex zone ({rightScreenPages.length})
+            </div>
+            <div className="simulation__right-screen-widget-container">
+              {rightScreenPages.map(
+                (flexZonePage: WidgetData, index: number) => {
+                  return (
+                    <div
+                      key={`page${index}`}
+                      className="simulation__right-screen-widget"
+                    >
+                      <Widget data={flexZonePage} />
+                    </div>
+                  );
+                }
+              )}
+            </div>
+          </div>
+        )}
+      </div>
+    </div>
+  );
+};
+
+const SimulationScreenContainer = ({
+  id,
+}: {
+  id: string;
+  opts?: { [key: string]: any };
+}) => {
+  const { apiResponse, lastSuccess } = useSimulationApiResponse({ id });
+
+  return (
+    <LastFetchContext.Provider value={lastSuccess}>
+      <SimulationScreenLayout apiResponse={apiResponse} />
+    </LastFetchContext.Provider>
+  );
+};
+
+export default SimulationScreenContainer;

assets/src/components/v2/pre_fare/simulation_screen_page.tsx

@@ -0,0 +1,10 @@
+import React from "react";
+import { useParams } from "react-router-dom";
+import SimulationScreenContainer from "Components/v2/pre_fare/simulation_screen_container";
+
+const SimulationScreenPage = ({ opts = {} }) => {
+  const { id } = useParams() as { id: string };
+  return <SimulationScreenContainer id={id} opts={opts} />;
+};
+
+export default SimulationScreenPage;

lib/screens/v2/screen_data.ex

@@ -58,7 +58,7 @@ defmodule Screens.V2.ScreenData do
     screen_data = fetch_data(config)
 
     full_page_data = screen_data |> resolve_paging(refresh_rate) |> serialize()
-    paged_slot_data = screen_data |> get_paged_slots() |> serialize_paged_slots()
+    paged_slot_data = screen_data |> get_paged_slots() |> serialize_paged_slots(config.app_id)
 
     response(data: %{full_page: full_page_data, flex_zone: paged_slot_data})
   end
@@ -401,7 +401,7 @@ defmodule Screens.V2.ScreenData do
     Template.position_widget_instances(layout, serialized_instance_map, paging_metadata)
   end
 
-  defp serialize_paged_slots({instance_map, layout}) do
+  defp serialize_paged_slots({instance_map, layout}, app_id) do
     # instance_map looks like:
     # %{{page_index, slot_id} => instance}
 
@@ -410,7 +410,7 @@ defmodule Screens.V2.ScreenData do
 
     instance_map
     |> Enum.group_by(
-      fn {paged_slot_id, _} -> Template.get_page(paged_slot_id) end,
+      &paged_slot_key(&1, app_id),
       fn {paged_slot_id, instance} -> {Template.unpage(paged_slot_id), instance} end
     )
     # %{page_index => [{slot_id, instance}]}
@@ -488,4 +488,7 @@ defmodule Screens.V2.ScreenData do
 
     :ok = ScreensByAlert.put_data(screen_id, alert_ids)
   end
+
+  defp paged_slot_key({paged_slot_id, _}, :pre_fare_v2), do: Template.get_slot_id(paged_slot_id)
+  defp paged_slot_key({paged_slot_id, _}, _), do: Template.get_page(paged_slot_id)
 end