mbta · jzimbel-mbta · Oct 18, 2023 · Oct 18, 2023
diff --git a/assets/css/v2/outfront_common/debug.scss b/assets/css/v2/outfront_common/debug.scss
@@ -6,7 +6,7 @@
   overflow-y: hidden;
   overflow-x: hidden;
 
-  background: #00000080;
+  background: rgba(0, 0, 0, 0.5);
 
   display: flex;
   flex-flow: column wrap;

diff --git a/assets/css/v2/placeholder.scss b/assets/css/v2/placeholder.scss
@@ -4,27 +4,27 @@
   border-radius: 16px;
 
   &--blue {
-    background-color: #003da566;
+    background-color: rgba(0, 61, 165, 0.4);
   }
 
   &--green {
-    background-color: #00843d66;
+    background-color: rgba(0, 132, 61, 0.4);
   }
 
   &--red {
-    background-color: #da291c66;
+    background-color: rgba(218, 41, 28, 0.4);
   }
 
   &--orange {
-    background-color: #ed8b0066;
+    background-color: rgba(237, 139, 0, 0.4)
   }
 
   &--grey,
   &--gray {
-    background-color: #7c878e66;
+    background-color: rgba(124, 135, 142, 0.4);
   }
 
   &--black {
-    background-color: #000000;
+    background-color: rgba(0, 0, 0, 1);
   }
 }
diff --git a/assets/css/v2/train_crowding.scss b/assets/css/v2/train_crowding.scss
@@ -8,16 +8,14 @@
     color: #e5e4e1;
     box-sizing: border-box;
   }
-
   &__body {
     display: flex;
     position: relative;
     flex-direction: column;
     height: 920px;
     background-color: #d9d6d0;
-    box-shadow: 0px 8px 12px 0px #00000052;
+    box-shadow: 0px 8px 12px 0px rgba(0, 0, 0, 0.32);
   }
-
   &__footer {
     display: flex;
     background-color: #cccbc8;
@@ -42,7 +40,6 @@
   @include font--heading-3;
   margin-top: auto;
   color: #FFFFFF;
-
   .destination {
     padding-left: 109px;
   }
@@ -62,7 +59,6 @@
   @include font--body-2;
   display: inline-flex;
   align-items: center;
-
   .key-icon {
     padding-right: 72px;
   }
@@ -81,12 +77,53 @@
   padding: 161px 52px 58px 52px;
 }
 
+@keyframes up-arrow {
+  from {
+    transform: translateY(0);
+  }
+  50% {
+    transform: translateY(-20px);
+  }
+  to {
+    transform: translateY(0);
+  }
+}
+
+@keyframes up-left-arrow {
+  from {
+    transform: translateY(0);
+  }
+  50% {
+    transform: translateY(-12px) translateX(-12px);
+  }
+  to {
+    transform: translateY(0);
+  }
+}
+
+@keyframes up-right-arrow {
+  from {
+    transform: translateY(0) rotate(90deg);
+  }
+  50% {
+    transform: translateY(-12px) translateX(12px) rotate(90deg);
+  }
+  to {
+    transform: translateY(0) rotate(90deg);
+  }
+}
+
 .crowding-widget__you-are-here-arrow {
   width: 180px;
   height: 180px;
-
+  &--up {
+    animation: up-arrow 1.2s infinite ease-in-out;
+  }
+  &--up-left {
+    animation: up-left-arrow 1.2s infinite ease-in-out;
+  }
   &--up-right {
-    transform: rotate(90deg);
+    animation: up-right-arrow 1.2s infinite ease-in-out;
   }
 }
 
@@ -97,7 +134,6 @@
   margin-top: auto;
   padding: 0 72px 108px 72px;
   text-align: left;
-
   &--right-align {
     text-align: right;
   }

diff --git a/assets/css/v2/triptych/evergreen.scss b/assets/css/v2/triptych/evergreen.scss
@@ -5,7 +5,7 @@
     position: absolute;
     bottom: 0;
     right: 0;
-    background-color: #171f26b3;
+    background-color: rgba(23, 31, 38, 0.7);
     @include font--caption-3;
     color: white;
     text-align: right;

diff --git a/assets/css/v2/triptych/simulation.scss b/assets/css/v2/triptych/simulation.scss
@@ -10,15 +10,13 @@
   &::-webkit-scrollbar {
     width: 12px;
   }
-
   &::-webkit-scrollbar-thumb {
     background-color: #607180;
     border-radius: 12px;
     border: 2px solid #2e3f4d;
   }
-
   &::-webkit-scrollbar-track {
-    -webkit-box-shadow: inset 0 0 6px #0000004d;
+    -webkit-box-shadow: inset 0 0 6px rgba(0, 0, 0, 0.3);
     border-radius: 12px;
     background-color: #2e3f4d;
   }
@@ -53,7 +51,7 @@
         height: 1920px;
       }
 
-      &>* {
+      & > * {
         transform-origin: top left;
         transform: scale(17.92%);
       }
@@ -74,7 +72,7 @@
       width: 3240px;
     }
 
-    &>* {
+    & > * {
       transform-origin: top left;
       transform: scale(17.92%);
     }

diff --git a/assets/src/apps/v2/dup.tsx b/assets/src/apps/v2/dup.tsx
@@ -39,7 +39,6 @@ import NoData from "Components/v2/dup/no_data";
 import OvernightDepartures from "Components/v2/dup/overnight_departures";
 import { usePlayerName } from "Hooks/outfront";
 import { isDup } from "Util/outfront";
-import OutfrontErrorBoundary from "Components/v2/outfront_error_boundary";
 
 const TYPE_TO_COMPONENT = {
   screen_normal: NormalScreen,
@@ -125,12 +124,14 @@ const responseMapper: ResponseMapper = (apiResponse) => {
 
 const App = (): JSX.Element => {
   if (isDup()) {
+    const playerName = usePlayerName()!;
+    const id = `DUP-${playerName.trim()}`;
     return (
       <MappingContext.Provider value={TYPE_TO_COMPONENT}>
         <ResponseMapperContext.Provider value={responseMapper}>
-          <OutfrontErrorBoundary>
-            <PackagedApp />
-          </OutfrontErrorBoundary>
+          <Viewport>
+            <ScreenPage id={id} />
+          </Viewport>
         </ResponseMapperContext.Provider>
       </MappingContext.Provider>
     );
@@ -166,17 +167,4 @@ const App = (): JSX.Element => {
   );
 };
 
-// Defined as a separate component so that `usePlayerName` can execute
-// within the error boundary.
-const PackagedApp = (): JSX.Element => {
-  const playerName = usePlayerName()!;
-  const id = `DUP-${playerName.trim()}`;
-
-  return (
-    <Viewport>
-      <ScreenPage id={id} />
-    </Viewport>
-  );
-};
-
 ReactDOM.render(<App />, document.getElementById("app"));
diff --git a/assets/src/apps/v2/triptych.tsx b/assets/src/apps/v2/triptych.tsx
@@ -5,7 +5,6 @@ require("../../../css/triptych_v2.scss");
 import React from "react";
 import ReactDOM from "react-dom";
 import { BrowserRouter as Router, Route, Switch } from "react-router-dom";
-import OutfrontErrorBoundary from "Components/v2/outfront_error_boundary";
 
 import { usePlayerName } from "Hooks/outfront";
 import { isTriptych } from "Util/outfront";
@@ -75,12 +74,14 @@ const responseMapper: ResponseMapper = (apiResponse) => {
 
 const App = (): JSX.Element => {
   if (isTriptych()) {
+    const playerName = usePlayerName()!;
+
     return (
       <MappingContext.Provider value={TYPE_TO_COMPONENT}>
         <ResponseMapperContext.Provider value={responseMapper}>
-          <OutfrontErrorBoundary>
-            <PackagedApp />
-          </OutfrontErrorBoundary>
+          <Viewport>
+            <ScreenPage id={playerName} />
+          </Viewport>
         </ResponseMapperContext.Provider>
       </MappingContext.Provider>
     );
@@ -113,18 +114,6 @@ const App = (): JSX.Element => {
         </Route>
       </Switch>
     </Router>
-  )
-};
-
-// Defined as a separate component so that `usePlayerName` can execute
-// within the error boundary.
-const PackagedApp = (): JSX.Element => {
-  const playerName = usePlayerName()!;
-
-  return (
-    <Viewport>
-      <ScreenPage id={playerName} />
-    </Viewport>
   );
 };
 

diff --git a/assets/src/components/dup/README.md b/assets/src/components/dup/README.md
@@ -1,6 +1,3 @@
-> [!WARNING]\
-> This app is no longer being used or developed. These instructions might be out of date. Use the v2 DUP app packaging instructions instead.
-
 # DUP app packaging
 
 - Ensure [Corsica](https://hexdocs.pm/corsica/Corsica.html) is used on the server to allow CORS requests (ideally limited to just the DUP-relevant routes). It should already be configured at [this line](/lib/screens_web/controllers/screen_api_controller.ex#L7) in the API controller--if it is, you don't need to do anything for this step.

diff --git a/assets/src/components/v2/dup/README.md b/assets/src/components/v2/dup/README.md
@@ -2,15 +2,36 @@
 
 - Ensure [Corsica](https://hexdocs.pm/corsica/Corsica.html) is used on the server to allow CORS requests (ideally limited to just the DUP-relevant routes). It should already be configured at [this line](/lib/screens_web/controllers/v2/screen_api_controller.ex#L9) in the API controller--if it is, you don't need to do anything for this step.
 - Double check that any behavior specific to the DUP screen environment happens inside of an `isDup()` or `isOFM()` check. This includes:
-  - `getOutfrontAbsolutePath` in use_api_response.tsx should return a full URL for the API path: prefix `apiPath` string with "https://screens.mbta.com".
+  - `buildApiPath` in use_api_response.tsx should return a full URL for the API path: prefix `apiPath` string with "https://screens.mbta.com".
   - `imagePath` in util.tsx should return relative paths (no leading `/`).
+- Create priv/static/dup-app.html if it doesn’t already exist. Copy paste the following contents in:
+
+  ```html
+  <!DOCTYPE html>
+  <html lang="en">
+    <head>
+      <meta charset="utf-8" />
+      <meta http-equiv="X-UA-Compatible" content="IE=edge" />
+      <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+      <title>Screens</title>
+      <link rel="stylesheet" href="dup_v2.css" />
+    </head>
+
+    <body>
+      <div
+        id="app"
+        data-last-refresh="2020-09-25T17:23:00Z"
+        data-environment-name="screens-prod"
+      ></div>
+      <script type="text/javascript" src="polyfills.js"></script>
+      <script type="text/javascript" src="dup_v2.js"></script>
+    </body>
+  </html>
+  ```
+
 - Set the version string in assets/src/components/v2/dup/version.tsx to `current_year.current_month.current_day.1`.
-- In assets/webpack.config.js:
-  - Comment out all lines in the `entry` object except for **polyfills** and **dup_v2**.
-  - Change `publicPath` in the font config to have value `'fonts/'`.
-- Delete priv/static with `rm -r priv/static` from the project root.
-- Temporarily start the server to have it repopulate priv/static. `iex -S mix phx.server` from the project root.
-  - You can stop the server as soon as it prints out the big list of files built by webpack.
+- In assets/webpack.config.js, change `publicPath` in the font config to have value `'fonts/'`.
+- If you've renamed / removed image assets, you might want to delete the corresponding folder in `/priv/static`. The folder accumulates assets without clearing old ones out, and these will be included in the built bundle!
 - **Only if you are packaging for local testing**
   - add the following to the top of assets/src/apps/v2/dup.tsx, filling in the string values:
     ```ts
@@ -28,7 +49,7 @@
   for ROTATION_INDEX in {0..2}; do
     echo "export const ROTATION_INDEX = ${ROTATION_INDEX};" > ../../assets/src/components/v2/dup/rotation_index.tsx && \
     npm --prefix ../../assets run deploy && \
-    cp -r css/dup_v2.css js/polyfills.js js/dup_v2.js ../dup_preview.png ../dup-app.html . && \
+    cp -r css/dup_v2.css js/polyfills.js js/dup_v2.js ../dup_preview.png . && \
     cp ../dup_template.json ./template.json && \
     sed -i "" "s/DUP APP ./DUP APP ${ROTATION_INDEX}/" template.json && \
     zip -r dup-app-${ROTATION_INDEX}.zip dup_v2.css polyfills.js dup_v2.js fonts images dup-app.html template.json dup_preview.png