add adaptive telemetry backgrounds

Team-Cartographer · Dec 30, 2023 · 1de9204 · 1de9204
1 parent 8c72058
commit 1de9204
Show file tree

Hide file tree

Showing 2 changed files with 33 additions and 17 deletions.
diff --git a/src/components/eva_telemetry.tsx b/src/components/eva_telemetry.tsx
@@ -1,34 +1,52 @@
+/* eslint-disable prefer-const */
 /* eslint-disable react/require-default-props */
 
+const BPM_THRESH = 100;
+const TEMP_THRESH = 99;
+const O2_THRESH = 97;
+
 interface TelemetryArgs {
     evaNumber: string;
     bpm: string;
     temp: string;
     oxygenation: string;
-    className?: string;
 }
 
-function EvaTelemetry({
-    evaNumber,
-    bpm,
-    temp,
-    oxygenation,
-    className = '',
-}: TelemetryArgs) {
+function EvaTelemetry({ evaNumber, bpm, temp, oxygenation }: TelemetryArgs) {
+    let bpmCritical: boolean = parseInt(bpm, 10) > BPM_THRESH;
+    let tempCritical: boolean = parseInt(temp, 10) > TEMP_THRESH;
+    let oxygenationCritical: boolean = parseInt(oxygenation, 10) < O2_THRESH;
+
     return (
         <div className="pt-4">
             <div
-                className={`flex flex-row gap-x-6 p-4 bg-darkGray rounded-3xl 2xl:items-center justify-start ${className}`}
+                className={`flex flex-row gap-x-6 p-4 text-3xl w-1/3 ${
+                    bpmCritical || tempCritical || oxygenationCritical
+                        ? `bg-red-500 bg-opacity-50 rounded-lg font-bold italic underline`
+                        : 'bg-darkGray'
+                } rounded-3xl 2xl:items-center justify-start`}
             >
                 <p>EVA {evaNumber}:</p>
-                <p>
+                <p
+                    className={`${
+                        bpmCritical ? 'underline italic font-bold' : ''
+                    }`}
+                >
                     {bpm} <span className="text-red-500">BPM</span>
                 </p>
-                <p>
+                <p
+                    className={`${
+                        tempCritical ? 'underline italic font-bold' : ''
+                    }`}
+                >
                     {temp}
                     <span className="text-yellow-600">°F</span>
                 </p>
-                <p>
+                <p
+                    className={`${
+                        oxygenationCritical ? 'underline italic font-bold' : ''
+                    }`}
+                >
                     {oxygenation}
                     <span className="text-green-400"> SpO2</span>
                 </p>

diff --git a/src/renderer/App.tsx b/src/renderer/App.tsx
@@ -10,14 +10,12 @@ function MainPage() {
             <Timers />
             <GitHubButton />
             <EvaTelemetry
-                className="text-3xl w-1/3"
                 evaNumber="1"
-                bpm="80"
-                temp="98.0"
-                oxygenation="98.0"
+                bpm="129"
+                temp="100"
+                oxygenation="91.0"
             />
             <EvaTelemetry
-                className="text-3xl w-1/3"
                 evaNumber="2"
                 bpm="78"
                 temp="97.2"