From bb7b7e90eda59c67ea0502ecb2c84f685dce0543 Mon Sep 17 00:00:00 2001
From: bbag <bill.baggerman@gmail.com>
Date: Fri, 9 Feb 2024 17:42:23 -0500
Subject: [PATCH] Added working sketch/wireframe/prod transitions

---
 src/components/home/HomeHero.astro            |  13 +-
 src/components/home/phone-ui/PhoneUi.astro    | 192 +++++++++++++++++-
 .../home/phone-ui/utils/patientData.ts        | 125 +++++++-----
 3 files changed, 273 insertions(+), 57 deletions(-)

diff --git a/src/components/home/HomeHero.astro b/src/components/home/HomeHero.astro
index db3be49..3e0a48c 100644
--- a/src/components/home/HomeHero.astro
+++ b/src/components/home/HomeHero.astro
@@ -13,7 +13,7 @@ import DotsBackground from '@/assets/img/dots-background.svg'
                 <h1>Hey, I'm Billy!</h1>
                 <h2>Frontend developer, UX/UI + Product Designer</h2>
             </div>
-            <p>From <KeyboardButton size="sm">sketch</KeyboardButton> to <KeyboardButton size="sm">wireframe</KeyboardButton> to <KeyboardButton size="sm">production</KeyboardButton>, I bring web apps, products, and sites to life with code.</p>
+            <p>From <KeyboardButton size="sm" data-phone-button="sketch">sketch</KeyboardButton> to <KeyboardButton size="sm" data-phone-button="wireframe">wireframe</KeyboardButton> to <KeyboardButton size="sm" data-phone-button="production">production</KeyboardButton>, I bring web apps, products, and sites to life with code.</p>
             <Terminal />
         </div>
         <div class="col-right">
@@ -23,6 +23,17 @@ import DotsBackground from '@/assets/img/dots-background.svg'
     </div>
 </section>
 
+<script>
+    const phoneSvg = document.querySelector('.phone-svg') as SVGElement
+    const phoneButtons = document.querySelectorAll('[data-phone-button]') as NodeListOf<HTMLButtonElement>
+
+    phoneButtons.forEach(button => {
+        button.addEventListener('click', () => {
+            phoneSvg.dataset.activeView = button.dataset.phoneButton
+        })
+    })
+</script>
+
 <style lang="scss" define:vars={{ bg: `url(${DotsBackground.src})` }}>
 @import '@/styles/_Variables.scss';
 
diff --git a/src/components/home/phone-ui/PhoneUi.astro b/src/components/home/phone-ui/PhoneUi.astro
index b032488..38f4153 100644
--- a/src/components/home/phone-ui/PhoneUi.astro
+++ b/src/components/home/phone-ui/PhoneUi.astro
@@ -3,9 +3,9 @@ import PhoneScreen from "./PhoneScreen.vue"
 ---
 
 <div class="phone-wrapper">
-    <svg class="phone-svg" x="0" y="0" viewBox="0 0 422 860">
+    <svg class="phone-svg" x="0" y="0" viewBox="0 0 422 860" data-active-view="production">
         <mask id="screen-mask">
-            <path fill="white" d="M358,848H64c-26.5,0-48-21.5-48-48V60c0-26.5,21.5-48,48-48h294c26.5,0,48,21.5,48,48v740C406,826.5,384.5,848,358,848z"/>
+            <path fill="white" d="M358,848H64c-26.5,0-48-21.5-48-48V60c0-26.5,21.5-48,48-48h294c26.5,0,48,21.5,48,48v740C406,826.5,384.5,848,358,848z" />
         </mask>
         <g id="phone-production">
             <g class="side-buttons">
@@ -14,14 +14,14 @@ import PhoneScreen from "./PhoneScreen.vue"
                 <path d="M6,332H4c-2.2,0-4-1.8-4-4v-56c0-2.2,1.8-4,4-4h2V332z"/>
                 <path d="M416,215.9h2c2.2,0,4,1.8,4,4v82c0,2.2-1.8,4-4,4h-2V215.9z"/>
             </g>
-            <path class="frame" d="M358,860H64c-33.1,0-60-26.9-60-60V60C4,26.9,30.9,0,64,0h294c33.1,0,60,26.9,60,60v740C418,833.1,391.1,860,358,860z"/>
-            <path class="screen-glow" d="M358,848H64c-26.5,0-48-21.5-48-48V60c0-26.5,21.5-48,48-48h294c26.5,0,48,21.5,48,48v740C406,826.5,384.5,848,358,848z"/>
+            <path class="frame" d="M358,860H64c-33.1,0-60-26.9-60-60V60C4,26.9,30.9,0,64,0h294c33.1,0,60,26.9,60,60v740C418,833.1,391.1,860,358,860z" />
+            <path class="screen-glow" d="M358,848H64c-26.5,0-48-21.5-48-48V60c0-26.5,21.5-48,48-48h294c26.5,0,48,21.5,48,48v740C406,826.5,384.5,848,358,848z" />
             <foreignObject x="16" y="12" width="390" height="836" mask="url(#screen-mask)">
                 <PhoneScreen client:load />
             </foreignObject>
-            <path class="island" d="M261,50H161c-7.7,0-14-6.3-14-14v0c0-7.7,6.3-14,14-14h100c7.7,0,14,6.3,14,14v0C275,43.7,268.7,50,261,50z"/>
+            <path class="island" d="M261,50H161c-7.7,0-14-6.3-14-14v0c0-7.7,6.3-14,14-14h100c7.7,0,14,6.3,14,14v0C275,43.7,268.7,50,261,50z" />
         </g>
-        <g id="phone-wireframe" style="display: none;">
+        <g id="phone-wireframe">
             <rect x="6" y="2" width="410" height="856" rx="56" />
             <rect x="18" y="14" width="386" height="832" rx="46" />
             <g class="side-buttons">
@@ -36,10 +36,48 @@ import PhoneScreen from "./PhoneScreen.vue"
             <rect x="56" y="112" width="48" height="48" rx="8" />
             <rect x="318" y="112" width="48" height="48" rx="8" />
             <!-- Heatmap container -->
-            <rect x="56" y="184" width="310" height="530" rx="8" />
+            <rect x="56" y="184" width="310" height="556" rx="8" />
+            {
+                [...Array(9)].map((_, i) => {
+                    const gap = 56
+                    const top = 184
+                    const yOffset = top + (gap * i) + gap
+                    return (
+                        <line x1="56" x2="72" y1={yOffset} y2={yOffset} />
+                        <line x1="366" x2="350" y1={yOffset} y2={yOffset} />
+                    )
+                })
+            }
+            <g class="outline">
+                <path d="m159.2-162.4.8 12.8c.2 3.5 2.3 6.7 5.4 8.3l53.5 27.7c3 1.5 5.4 4 6.8 7.1l6.3 13.7c1.5 3.2 1.8 6.8.8 10.2l-2.5 9.4c-.2.9-.4 1.8-.3 2.8l.6 37.9c0 1 .2 2 .5 3l1.5 4.4c3.8 11.4 6.1 23.2 6.8 35.1l3.2 52.7c1 3.5 1.1 7 0 10.5l1.9 27.8c0 .6 0 1.1-.2 1.7l-3.6 13.3c-.2.8-.6 1.5-1.2 2.1l-5.6 6c-.6.6-1.3 1.1-2.1 1.3l-11.7 3.8c-1.4.5-2.9-.6-2.9-2.1h0c0-.8.4-1.5 1.1-1.9l9-5.4c.6-.4 1.1-.9 1.6-1.5l3.1-4.5c.5-.8.8-1.7.9-2.7l.4-16.1c0-1.1-.6-2.1-1.6-2.6h0c-1.3-.7-3-.2-3.7 1.1l-11 15.1a3 3 0 0 1-4 .9h0a3 3 0 0 1-1.3-3.6l8.8-25.1c.4-1.1.9-2.1 1.6-2.9l4.6-5.8c.9-1.1 1.1-2.7.6-4l-22.7-56.7c-2.9-7.2-3.6-15-2.2-22.6l1.4-7c.3-1.7.2-3.5-.4-5.2L198.3-38c-.8-2.2-1.1-4.5-1.1-6.8l.3-25.3" />
+                <path d="m206.8-80.6-12.3 13.7c-3.6 4-9.1 5.8-14.4 4.6l-30.6-6.8M164.7 374.4c.2.5.3 1.1.3 1.7 0 .8-.1 1.5-.2 2.1.4 1.1 1.4 1.9 3.7 1.9 3.6 0 4-1.8 4-4 0-1.2-.4-2.3-1.2-3.1" />
+                <path d="M179.1 373.4c.6.7.9 1.6.9 2.7 0 2.1-.4 3.8-3.8 3.8s-3.8-1.7-3.8-3.8" />
+                <path d="m198.3-38.1-8.2 39.5c-.3 1.5-.3 3 .1 4.4l1.7 7c.4 1.6.4 3.3 0 4.9l-1.7 6.5c-.5 2-.4 4.1.3 6l4.3 11.9c3.1 8.6 4.6 17.7 4.2 26.8l-3.1 78c-.3 8.5-2 16.9-5 24.9l-5.1 13.6c-.6 1.6-.9 3.2-1 4.9l-.6 21.6c0 1.3-.2 2.6-.6 3.9l-1.8 5.9c-.7 2.2-.8 4.6-.4 6.9l3.4 19.7c.9 4.9.8 9.8-.2 14.7l-13.9 69.9c-.2 1.1-.3 2.2-.3 3.3l.3 13c.1 3.1 1.1 6.2 3.1 8.7l12.8 16.3-.1-.1c.6.6.9 1.5.9 2.4 0 1.9-.4 3.4-3.6 3.4s-3.8-1.6-3.8-3.4M156.7 374c.2.5.2 1.1.2 1.7 0 .9-.1 1.8-.3 2.5.4 1.2 1.5 2.1 4 2.1 3.9 0 4.3-1.9 4.3-4.3 0-1.3-.4-2.5-1.3-3.3M153.4 219.8c3.5 6.1 12.8 6.3 17.5 1.4M140-151.1c-14.2 0-21-11.8-24.6-23.5-1.7 2-4.7 1.2-8.4-11.2-3.5-11.5 1.1-15.8 4-12.3h0c-2.1-21.7 6.6-39 28.9-39 22.3 0 31 17.3 28.9 39h0c2.9-3.5 7.5.8 4.1 12.2-3.7 12.4-6.7 13.2-8.4 11.2-3.5 11.8-10.4 23.6-24.5 23.6z" />
+                <path d="m120.7-162.4-.7 12.8c-.2 3.5-2.3 6.7-5.4 8.3l-53.5 27.7c-3 1.5-5.4 4-6.8 7.1L48-92.9c-1.5 3.2-1.8 6.8-.8 10.2l2.5 9.4c.2.9.4 1.8.3 2.8l-.5 37.9c0 1-.2 2-.5 3l-1.5 4.4C43.7-13.8 41.4-2 40.7 9.9l-3.2 52.7c-1 3.5-1.1 7 0 10.5l-1.9 27.8c0 .6 0 1.1.2 1.7l3.6 13.3c.2.8.6 1.5 1.2 2.1l5.6 6c.6.6 1.3 1.1 2.1 1.3l11.7 3.8c1.4.5 2.9-.6 2.9-2.1h0c0-.8-.4-1.5-1.1-1.9l-9-5.4c-.6-.4-1.1-.9-1.6-1.5l-3.1-4.5c-.5-.8-.8-1.7-.9-2.7l-.4-16.1c0-1.1.6-2.1 1.6-2.6h0c1.3-.7 3-.2 3.7 1.1l10.7 15.3a3 3 0 0 0 4 .9h0a3 3 0 0 0 1.3-3.6l-8.8-25.1c-.4-1.1-.9-2.1-1.6-2.9l-4.6-5.8c-.9-1.1-1.1-2.7-.6-4l22.9-56.8c2.9-7.2 3.6-15 2.2-22.6l-1.4-7c-.3-1.7-.2-3.5.4-5.2L81.7-38c.8-2.2 1.1-4.5 1.1-6.8l-.3-25.3" />
+                <path d="m73.1-80.6 12.3 13.7c3.6 4 9.1 5.8 14.4 4.6l30.6-6.8M115.2 374.4c-.2.5-.3 1.1-.3 1.7 0 .8.1 1.5.2 2.1-.4 1.1-1.4 1.9-3.7 1.9-3.6 0-4-1.8-4-4 0-1.2.4-2.3 1.2-3.1" />
+                <path d="M100.8 373.4a4 4 0 0 0-.9 2.7c0 2.1.4 3.8 3.8 3.8s3.8-1.7 3.8-3.8" />
+                <path d="m81.6-38.1 8.2 39.5c.3 1.5.3 3-.1 4.4l-1.7 7c-.4 1.6-.4 3.3 0 4.9l1.7 6.5c.5 2 .4 4.1-.3 6l-4.3 11.9c-3.1 8.6-4.6 17.7-4.2 26.8l3.1 78c.3 8.5 2 16.9 5 24.9l5.1 13.6c.6 1.6.9 3.2 1 4.9l.6 21.6c0 1.3.2 2.6.6 3.9l1.8 5.9c.7 2.2.8 4.6.4 6.9l-3.4 19.7c-.9 4.9-.8 9.8.2 14.7l13.9 69.9c.2 1.1.3 2.2.3 3.3l-.3 13c-.1 3.1-1.1 6.2-3.1 8.7l-12.8 16.3.1-.1c-.6.6-.9 1.5-.9 2.4 0 1.9.4 3.4 3.6 3.4 3.3 0 3.8-1.6 3.8-3.4M123.2 374c-.2.5-.2 1.1-.2 1.7 0 .9.1 1.8.3 2.5-.4 1.2-1.5 2.1-4 2.1-3.9 0-4.3-1.9-4.3-4.3 0-1.3.4-2.5 1.3-3.3" />
+                <path d="M124.2 372.2c-.9.9-1.3 2.1-1.3 3.5 0 2.6 1.5 4.8 5.7 4.8h3c1.8 0 3.5-1.1 4.3-2.7l.8-1.6c.7-1.3 1-2.8.9-4.3l-.8-12.4c0-1.9-.3-3.7-.8-5.5l-2.9-10.6a8.1 8.1 0 0 1-.3-3.8c.2-1.8-.1-3.5-.8-5.3-.5-1.2-.8-2.5-.8-3.9l.6-32.3c0-1.9.3-3.8.9-5.6l2.9-9.3c.9-2.9 1.1-6 .7-9l-5.2-33.4c-.6-3.9 0-7.9 1.6-11.5l2.4-5.1c1.2-2.6 1.9-5.5 1.9-8.4v-31.6l-1.4-19.7 4.4-87.2 4.4 87.2-1.4 19.7v31.6c0 2.9.6 5.8 1.9 8.4l2.4 5.1c1.7 3.6 2.2 7.6 1.6 11.5l-5.2 33.4c-.5 3-.2 6.1.7 9l2.9 9.3c.6 1.8.9 3.7.9 5.6l.6 32.3c0 1.3-.3 2.6-.8 3.9-.8 1.8-1.1 3.5-.8 5.3.2 1.3 0 2.6-.3 3.8l-3.1 10.6c-.5 1.8-.8 3.7-.8 5.5l-.8 12.4c-.1 1.5.2 2.9.9 4.3l.8 1.6a5.1 5.1 0 0 0 4.3 2.7h3c4.3 0 5.8-2.1 5.7-4.8 0-1.4-.4-2.6-1.3-3.5M126.5 219.8c-3.5 6.1-12.8 6.3-17.5 1.4" />
+                <path d="m111 66.3 23.2 9.7c3.7 1.6 7.9 1.6 11.6 0l23.2-9.7" />
+            </g>
             <!-- Bottom button -->
             <rect x="101" y="764" width="220" height="48" rx="8" />
         </g>
+        <g id="phone-sketch">
+            <rect x="6" y="2" width="410" height="856" rx="56" />
+            <rect x="18" y="14" width="386" height="832" rx="46" />
+            <g class="side-buttons">
+                <path d="M6,172H4c-2.2,0-4-1.8-4-4v-24c0-2.2,1.8-4,4-4h2V172z"/>
+                <path d="M6,252H4c-2.2,0-4-1.8-4-4v-56c0-2.2,1.8-4,4-4h2V252z"/>
+                <path d="M6,332H4c-2.2,0-4-1.8-4-4v-56c0-2.2,1.8-4,4-4h2V332z"/>
+                <path d="M416,215.9h2c2.2,0,4,1.8,4,4v82c0,2.2-1.8,4-4,4h-2V215.9z"/>
+            </g>
+            <!-- Island -->
+            <rect x="149" y="24" width="124" height="24" rx="12" />
+            <!-- Top section -->
+            <!-- <rect x="56" y="112" width="48" height="48" rx="8" />
+            <rect x="318" y="112" width="48" height="48" rx="8" /> -->
+        </g>
     </svg>
 </div>
 
@@ -102,15 +140,153 @@ import PhoneScreen from "./PhoneScreen.vue"
     $wireframe-color: #9BC3FF;
     $wireframe-fill: #F0F6FF;
 
+    pointer-events: none;
+
     & rect,
     & .island {
         fill: $wireframe-fill;
+    }
+
+    & line,
+    & rect,
+    & .island {
         stroke: $wireframe-color;
-        stroke-width: 4;
+        stroke-linecap: round;
+        stroke-width: 3;
     }
 
     & .side-buttons {
         fill: $wireframe-color;
     }
+
+    & .outline {
+        fill: none;
+        stroke: $wireframe-color;
+        stroke-linecap: round;
+        stroke-width: 4;
+        transform: translate(97px, 408px) scale(0.81);
+    }
 }
+
+#phone-sketch {
+    $sketch-color: #5A5C64;
+    $sketch-fill: #D0D5E0;
+
+    pointer-events: none;
+
+    & rect,
+    & .island {
+        fill: $sketch-fill;
+    }
+
+    & line,
+    & rect,
+    & .island {
+        stroke: $sketch-color;
+        stroke-linecap: round;
+        stroke-width: 4;
+    }
+
+    & .side-buttons {
+        fill: $sketch-color;
+    }
+
+    & .outline {
+        fill: none;
+        stroke: $sketch-color;
+        stroke-linecap: round;
+        stroke-width: 5;
+        transform: translate(97px, 408px) scale(0.81);
+    }
+}
+
+// Phone transitions
+
+#phone-sketch,
+#phone-wireframe,
+#phone-production {
+    clip-path: inset(0 0 0 0);
+    transition: clip-path 450ms cubic-bezier(0.75, 0, 0.25, 1);
+}
+
+[data-active-view='sketch'] {
+    & #phone-wireframe,
+    & #phone-production {
+        clip-path: inset(0 0 0 100%);
+    }
+}
+
+[data-active-view='wireframe'] {
+    & #phone-sketch {
+        clip-path: inset(0 100% 0 0)
+    }
+
+    & #phone-production {
+        clip-path: inset(0 0 0 100%);
+    }
+}
+
+[data-active-view='production'] {
+    & #phone-sketch,
+    & #phone-wireframe {
+        clip-path: inset(0 100% 0 0);
+    }
+}
+
+// [data-active-view='production'] {
+//     & #phone-wireframe {
+//         clip-path: inset(0 100% 0 0);
+//     }
+// }
+
+
+
+
+
+
+// #phone-wireframe,
+// #phone-production {
+//     opacity: 0;
+//     transition: opacity 400ms ease-in-out;
+// }
+
+// [data-active-view='sketch'] #phone-sketch,
+// [data-active-view='wireframe'] #phone-wireframe,
+// [data-active-view='production'] #phone-production {
+//     opacity: 1;
+// }
+
+
+
+// Mask transitions
+
+// #sketch-mask rect,
+// #wireframe-mask rect,
+// #production-mask rect {
+//     transition: transform 400ms ease-out;
+// }
+
+// [data-active-view='sketch'] {
+//     & #wireframe-mask rect,
+//     & #production-mask rect {
+//         transform: translateX(100%);
+//     }
+// }
+
+// [data-active-view='wireframe'] {
+//     & #sketch-mask rect {
+//         transform: translateX(-100%);
+//     }
+
+//     & #production-mask rect {
+//         transform: translateX(100%);
+//     }
+// }
+
+// [data-active-view='production'] {
+//     & #sketch-mask rect,
+//     & #wireframe-mask rect {
+//         transform: translateX(-100%);
+//     }
+// }
 </style>
\ No newline at end of file
diff --git a/src/components/home/phone-ui/utils/patientData.ts b/src/components/home/phone-ui/utils/patientData.ts
index 67b05f2..5e467fb 100644
--- a/src/components/home/phone-ui/utils/patientData.ts
+++ b/src/components/home/phone-ui/utils/patientData.ts
@@ -13,7 +13,7 @@ export const patients: PatientData[] = [
             'Patient was given a sling, advised to rest, and told to make sure the horse’s backflip is caught on video and posted first next time.'
         ],
         stats: [
-            { label: 'Date', value: '1/30/2024' },
+            { label: 'Date', value: '12/04/2024' },
             { label: 'Age', value: 36 },
             { label: 'Height', value: 5.3 },
             { label: 'Weight', value: 128 },
@@ -33,7 +33,7 @@ export const patients: PatientData[] = [
             { part: 'chest-l', severity: 58 },
             { part: 'chest-r', severity: 17 },
             { part: 'ear-l', severity: 8 },
-            // 'ear-r': 'Ear (R)',
+            { part: 'ear-r', severity: 0 },
             { part: 'elbow-l', severity: 79 },
             { part: 'elbow-r', severity: 0 },
             { part: 'foot-l', severity: 5 },
@@ -71,7 +71,7 @@ export const patients: PatientData[] = [
             'Patient did successfully break the record, but was advised to consider new hobbies.'
         ],
         stats: [
-            { label: 'Date', value: '2/06/2024' },
+            { label: 'Date', value: '12/16/2024' },
             { label: 'Age', value: 41 },
             { label: 'Height', value: 5.9 },
             { label: 'Weight', value: 192 },
@@ -90,8 +90,8 @@ export const patients: PatientData[] = [
             { part: 'calf-r', severity: 33 },
             { part: 'chest-l', severity: 9 },
             { part: 'chest-r', severity: 12 },
-            // 'ear-l': 'Ear (L)',
-            // 'ear-r': 'Ear (R)',
+            { part: 'ear-l', severity: 0 },
+            { part: 'ear-r', severity: 0 },
             { part: 'elbow-l', severity: 23 },
             { part: 'elbow-r', severity: 33 },
             { part: 'foot-l', severity: 79 },
@@ -103,10 +103,10 @@ export const patients: PatientData[] = [
             { part: 'hamstring-r', severity: 4 },
             { part: 'hand-l', severity: 91 },
             { part: 'hand-r', severity: 77 },
-            // 'head': 'Head',
+            { part: 'head', severity: 0 },
             { part: 'hip-l', severity: 39 },
             { part: 'hip-r', severity: 29 },
-            // 'jaw': 'Jaw',
+            { part: 'jaw', severity: 0 },
             { part: 'knee-l', severity: 76 },
             { part: 'knee-r', severity: 68 },
             { part: 'neck', severity: 7 },
@@ -125,13 +125,13 @@ export const patients: PatientData[] = [
     {
         id: 3,
         description: [
-            'Patient suffered a mild concussion and moderate lacerations to the chest and left ear after a fall from a ladder while trying to impress friends.',
+            'Patient suffered a mild concussion and moderate lacerations to the chest and left ear after a fall from a ladder while trying to impress friends at a party.',
             'Advised to follow up with a primary care physician and limit alcohol consumption when with “getting rowdy with the boys.”'
         ],
         stats: [
             { label: 'Date', value: '12/31/2023' },
             { label: 'Age', value: 22 },
-            { label: 'Height', value: 6 },
+            { label: 'Height', value: 6.25 },
             { label: 'Weight', value: 185 },
             { label: 'Blood Type', value: 'B+' }, // O, A, B, AB
             { label: 'Sex', value: 'M' }
@@ -140,72 +140,101 @@ export const patients: PatientData[] = [
             { part: 'abdomen', severity: 0 },
             { part: 'ankle-l', severity: 0 },
             { part: 'ankle-r', severity: 0 },
-            { part: 'back-lower', severity: 28 },
+            { part: 'back-lower', severity: 38 },
             { part: 'back-upper', severity: 76 },
             { part: 'bicep-l', severity: 0 },
-            { part: 'bicep-r', severity: 0 },
+            { part: 'bicep-r', severity: 15 },
             { part: 'calf-l', severity: 0 },
             { part: 'calf-r', severity: 0 },
             { part: 'chest-l', severity: 26 },
-            { part: 'chest-r', severity: 50 },
+            { part: 'chest-r', severity: 64 },
             { part: 'ear-l', severity: 48 },
-            // 'ear-r': 'Ear (R)',
-            { part: 'elbow-l', severity: 0 },
-            { part: 'elbow-r', severity: 0 },
+            { part: 'ear-r', severity: 0 },
+            { part: 'elbow-l', severity: 12 },
+            { part: 'elbow-r', severity: 40 },
             { part: 'foot-l', severity: 0 },
             { part: 'foot-r', severity: 0 },
-            { part: 'forearm-l', severity: 0 },
-            { part: 'forearm-r', severity: 0 },
-            { part: 'groin', severity: 28 },
-            { part: 'hamstring-l', severity: 0 },
-            { part: 'hamstring-r', severity: 0 },
-            { part: 'hand-l', severity: 0 },
-            { part: 'hand-r', severity: 0 },
+            { part: 'forearm-l', severity: 8 },
+            { part: 'forearm-r', severity: 27 },
+            { part: 'groin', severity: 59 },
+            { part: 'hamstring-l', severity: 6 },
+            { part: 'hamstring-r', severity: 20 },
+            { part: 'hand-l', severity: 4 },
+            { part: 'hand-r', severity: 13 },
             { part: 'head', severity: 44 },
-            { part: 'hip-l', severity: 0 },
+            { part: 'hip-l', severity: 19 },
             { part: 'hip-r', severity: 48 },
             { part: 'jaw', severity: 45 },
-            { part: 'knee-l', severity: 0 },
-            { part: 'knee-r', severity: 0 },
+            { part: 'knee-l', severity: 4 },
+            { part: 'knee-r', severity: 16 },
             { part: 'neck', severity: 16 },
             { part: 'quad-l', severity: 0 },
-            { part: 'quad-r', severity: 0 },
-            { part: 'ribs-l', severity: 0 },
-            { part: 'ribs-r', severity: 28 },
-            { part: 'shin-l', severity: 0 },
-            { part: 'shin-r', severity: 0 },
-            { part: 'shoulder-l', severity: 28 },
+            { part: 'quad-r', severity: 11 },
+            { part: 'ribs-l', severity: 3 },
+            { part: 'ribs-r', severity: 38 },
+            { part: 'shin-l', severity: 5 },
+            { part: 'shin-r', severity: 6 },
+            { part: 'shoulder-l', severity: 48 },
             { part: 'shoulder-r', severity: 10 },
-            { part: 'wrist-l', severity: 0 },
-            { part: 'wrist-r', severity: 0 }
+            { part: 'wrist-l', severity: 1 },
+            { part: 'wrist-r', severity: 2 }
         ]
     },
     {
         id: 4,
         description: [
-            'Patient suffered minor bruising to the right knee and left ankle, and dislocated shoulder, after attempting to catch Patient #1.'
+            'Patient suffered minor bruising to the right knee and left ankle, and dislocated shoulder, after attempting to catch Patient #3.'
         ],
         stats: [
             { label: 'Date', value: '12/31/2023' },
             { label: 'Age', value: 23 },
-            { label: 'Height', value: 6.25 },
+            { label: 'Height', value: 6 },
             { label: 'Weight', value: 228 },
             { label: 'Blood Type', value: 'AB-' }, // O, A, B, AB
             { label: 'Sex', value: 'M' }
         ],
         injuries: [
+            { part: 'abdomen', severity: 0 },
             { part: 'ankle-l', severity: 52 },
-            { part: 'back-upper', severity: 10 },
-            { part: 'calf-r', severity: 8 },
-            { part: 'chest-r', severity: 16 },
-            { part: 'foot-l', severity: 14 },
-            { part: 'forearm-r', severity: 10 },
-            { part: 'hamstring-r', severity: 10 },
-            { part: 'hip-l', severity: 18 },
-            { part: 'knee-l', severity: 18 },
-            { part: 'knee-r', severity: 45 },
-            { part: 'quad-r', severity: 12 },
-            { part: 'shoulder-r', severity: 58 }
+            { part: 'ankle-r', severity: 39 },
+            { part: 'back-lower', severity: 0 },
+            { part: 'back-upper', severity: 39 },
+            { part: 'bicep-l', severity: 21 },
+            { part: 'bicep-r', severity: 24 },
+            { part: 'calf-l', severity: 0 },
+            { part: 'calf-r', severity: 0 },
+            { part: 'chest-l', severity: 0 },
+            { part: 'chest-r', severity: 53 },
+            { part: 'ear-l', severity: 1 },
+            { part: 'ear-r', severity: 17 },
+            { part: 'elbow-l', severity: 21 },
+            { part: 'elbow-r', severity: 35 },
+            { part: 'foot-l', severity: 18 },
+            { part: 'foot-r', severity: 10 },
+            { part: 'forearm-l', severity: 47 },
+            { part: 'forearm-r', severity: 58 },
+            { part: 'groin', severity: 0 },
+            { part: 'hamstring-l', severity: 0 },
+            { part: 'hamstring-r', severity: 0 },
+            { part: 'hand-l', severity: 25 },
+            { part: 'hand-r', severity: 49 },
+            { part: 'head', severity: 28 },
+            { part: 'hip-l', severity: 20 },
+            { part: 'hip-r', severity: 31 },
+            { part: 'jaw', severity: 0 },
+            { part: 'knee-l', severity: 16 },
+            { part: 'knee-r', severity: 33 },
+            { part: 'neck', severity: 50 },
+            { part: 'quad-l', severity: 6 },
+            { part: 'quad-r', severity: 19 },
+            { part: 'ribs-l', severity: 27 },
+            { part: 'ribs-r', severity: 43 },
+            { part: 'shin-l', severity: 0 },
+            { part: 'shin-r', severity: 12 },
+            { part: 'shoulder-l', severity: 28 },
+            { part: 'shoulder-r', severity: 64 },
+            { part: 'wrist-l', severity: 70 },
+            { part: 'wrist-r', severity: 14 }
         ]
     },
     {
@@ -215,9 +244,9 @@ export const patients: PatientData[] = [
             'Patient refused pain medication, stating “I’m a tough old bird, I’ll be fine.”'
         ],
         stats: [
-            { label: 'Date', value: '1/04/2024' },
+            { label: 'Date', value: '1/31/2024' },
             { label: 'Age', value: 89 },
-            { label: 'Height', value: 5.1 },
+            { label: 'Height', value: 4.92 },
             { label: 'Weight', value: 96 },
             { label: 'Blood Type', value: 'O+' }, // O, A, B, AB
             { label: 'Sex', value: 'F' }